-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: import credential components (#115)
* docs: import credential components * docs: update component name Signed-off-by: Nam Hoang <[email protected]> --------- Signed-off-by: Nam Hoang <[email protected]>
- Loading branch information
1 parent
caf2386
commit 9e41262
Showing
4 changed files
with
162 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| sidebar_position: 51 | ||
| title: Import Button | ||
| --- | ||
|
|
||
| import Disclaimer from '../../\_disclaimer.mdx'; | ||
|
|
||
| <Disclaimer /> | ||
| ## Description | ||
|
|
||
| The ImportButton component is responsible for rendering a button that allows the user to import data. The component will return the data that is imported by the user. | ||
|
|
||
| ## Example | ||
|
|
||
| ```json | ||
| { | ||
| "name": "ImportButton", | ||
| "type": "EntryData", | ||
| "props": { | ||
| "label": "Import JSON", | ||
| "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Definitions | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | -------- | -------- | --------------------------------------------------- | ------------------------------------------------------- | | ||
| | name | Yes | The name of the component(should be "ImportButton") | String | | ||
| | type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) | | ||
| | props | Yes | The properties for the ImportButton | [Props](/docs/mock-apps/components/import-button#props) | | ||
|
|
||
| ### Props | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | -------- | -------- | ------------------------------- | ------ | | ||
| | label | Yes | The label for the import button | String | | ||
| | style | No | The style for the component | Object | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| --- | ||
| sidebar_position: 51 | ||
| title: QR Code Scanner Dialog Button | ||
| --- | ||
|
|
||
| import Disclaimer from '../../\_disclaimer.mdx'; | ||
|
|
||
| <Disclaimer /> | ||
| ## Description | ||
|
|
||
| The QRCodeScannerDialogButton component is responsible for rendering a button that allows the user to scan a QR code. The component will return the data that is scanned by the user. | ||
|
|
||
| ## Example | ||
|
|
||
| ```json | ||
| { | ||
| "name": "QRCodeScannerDialogButton", | ||
| "type": "EntryData", | ||
| "props": { | ||
| "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Definitions | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | -------- | -------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | | ||
| | name | Yes | The name of the component(should be "QRCodeScannerDialogButton") | String | | ||
| | type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) | | ||
| | props | Yes | The properties for the QRCodeScannerDialogButton | [Props](/docs/mock-apps/components/qr-code-scanner-dialog-button#props) | | ||
|
|
||
| ### Props | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | -------- | -------- | --------------------------- | ------ | | ||
| | style | No | The style for the component | Object | |
71 changes: 71 additions & 0 deletions
71
documentation/docs/mock-apps/components/render-check-list.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| sidebar_position: 50 | ||
| title: Render Check List | ||
| --- | ||
|
|
||
| import Disclaimer from '../../\_disclaimer.mdx'; | ||
|
|
||
| <Disclaimer /> | ||
| ## Description | ||
|
|
||
| The RenderCheckList component is responsible for rendering a list of items with checkboxes. It is a composed component that will load data from another component ([Import Button](./import-button) and [QR Code Scanner Dialog Button](./qr-code-scanner-dialog-button)), when the user clicks to import or scan a QR code. The component will render a list of items with checkboxes, the labels of the checkboxes will be the identifiers of the items that are loaded from the data with the path is configured at `requiredFieldPath` field. | ||
|
|
||
| ## Example | ||
|
|
||
| ```json | ||
| { | ||
| "name": "RenderCheckList", | ||
| "type": "EntryData", | ||
| "props": { | ||
| "requiredFieldPath": "/vc/credentialSubject/eventID", | ||
| "checkBoxLabel": "Imported valid json:", | ||
| "nestedComponents": [ | ||
| { | ||
| "name": "ImportButton", | ||
| "type": "EntryData", | ||
| "props": { | ||
| "label": "Import JSON", | ||
| "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" } | ||
| } | ||
| }, | ||
| { | ||
| "name": "QRCodeScannerDialogButton", | ||
| "type": "EntryData" | ||
| } | ||
| ], | ||
| "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Definitions | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | -------- | -------- | ------------------------------------------------------ | ----------------------------------------------------------- | | ||
| | name | Yes | The name of the component(should be "RenderCheckList") | String | | ||
| | type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) | | ||
| | props | Yes | The properties for the RenderCheckList | [Props](/docs/mock-apps/components/render-check-list#props) | | ||
|
|
||
| ### Props | ||
|
|
||
| | Property | Required | Description | Type | | ||
| | ----------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ | | ||
| | requiredFieldPath | Yes | The path for the label of the checkbox item | String | | ||
| | nestedComponents | Yes | An array of components to be rendered with the loaded data | [Component](/docs/mock-apps/components/)[] | | ||
| | checkBoxLabel | Yes | The label for the checkbox list | String | | ||
| | style | No | The style for the component | Object | | ||
|
|
||
| ## Response Data | ||
|
|
||
| The component will return an object with data that is selected by the user from the list of checkboxes. The object will have the following structure: | ||
|
|
||
| ```json | ||
| { | ||
| "0123456789": { | ||
| // Imported data | ||
| }, | ||
| "9876543210": { | ||
| // Imported data | ||
| } | ||
| } | ||
| ``` |