From bc50fd1b3ea115971457740b8dd0bdb626fee891 Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:03:53 +0800 Subject: [PATCH 01/11] UPDATE: Update ignored folders --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e0684c7eb..57d897dd2 100644 --- a/.gitignore +++ b/.gitignore @@ -108,4 +108,4 @@ dump .yarnrc.yml # generated docs -docs +# docs From 0f886b05ecf9796313ce700bae3529bdab97963b Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:04:28 +0800 Subject: [PATCH 02/11] UPDATE(docs): Add docs for `CLBButton` --- ui/docs/components/react/clb-button.md | 80 +++++++++++++++++++++++ ui/docs/components/svelte/clb-button.md | 85 ++++++++++++++++++++++++ ui/docs/components/vue/clb-button.md | 87 +++++++++++++++++++++++++ ui/docs/vue/clb-button.md | 33 ---------- 4 files changed, 252 insertions(+), 33 deletions(-) create mode 100644 ui/docs/components/react/clb-button.md create mode 100644 ui/docs/components/svelte/clb-button.md create mode 100644 ui/docs/components/vue/clb-button.md delete mode 100644 ui/docs/vue/clb-button.md diff --git a/ui/docs/components/react/clb-button.md b/ui/docs/components/react/clb-button.md new file mode 100644 index 000000000..3de277d02 --- /dev/null +++ b/ui/docs/components/react/clb-button.md @@ -0,0 +1,80 @@ +# CLBButton + +Buttons call the user to a specific action in the page. May it be in a form, or a hyperlink. + +![img.png](../_media/normal-btn.png) + +## Usage + +```tsx +} + onClick={() => {}} + isDisabled +>Click Me + +``` + +## Props + +| Prop | Type | Default | Description | +|------------|-------------------------------------|---------|-----------------------------------------------------| +| type | ButtonType\|string | null | The type of button. | +| icon | React.ReactElement | null | The icon of the button. | +| link | string | null | The link required. | +| onClick | () => React.MouseEventHandler\|void | null | The function to execute when the button is clicked. | +| isDisabled | boolean | false | Whether the button is disabled. | + +### Available types + +#### 1. Text + +Text buttons are used for the least prioritized actions. These are used as action alternatives, or actions to be third +and beyond in consideration. + +#### 2. Outlined + +Outlined buttons are used for secondarily prioritized actions. These are used as action alternatives, or actions to be +second in consideration. + +#### 3. Filled + +Filled buttons are used for the most prioritized actions. These are used for actions you want the user to see/consider +first. + +#### 5. Small + +![img.png](../_media/small-btn.png) + +Small buttons are a smaller version of the normal-sized buttons. These are used in tight spaces in which a normal-sized +button cannot fit in. + +#### 6. Large + +![img.png](../_media/large-btn.png) +Large buttons are a larger version of the normal-sized buttons. These are used typically in big call to actions (CTAs) +in marketing pages like the hero in the index page. + +#### 7. Fullwidth\* + +Fullwidth buttons are buttons that fill up 100% of its width in a container. + +#### 8. Contained\* + +Contained buttons are buttons that only stretch to its maximum content width. + +> `*` = not available in the skeleton version. + +## Slots + +| Slot | Description | +|---------|------------------| +| default | The button text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button) of this component's base component. diff --git a/ui/docs/components/svelte/clb-button.md b/ui/docs/components/svelte/clb-button.md new file mode 100644 index 000000000..188623ecd --- /dev/null +++ b/ui/docs/components/svelte/clb-button.md @@ -0,0 +1,85 @@ +# CLBButton + +Buttons call the user to a specific action in the page. May it be in a form, or a hyperlink. + +![img.png](../_media/normal-btn.png) + +## Usage + +```sveltehtml + + + {}} + isDisabled +>Click Me + +``` + +## Props + +| Prop | Type | Default | Description | +|------------|------------------------------------------------------|---------|-----------------------------------------------------| +| type | string | null | The type of button. | +| nativeType | "button" \| "submit" \| "reset" \| null \| undefined | null | The native type of the button. | +| link | string | null | The link required. | +| onClick | () => void | null | The function to execute when the button is clicked. | +| isDisabled | boolean | false | Whether the button is disabled. | + +### Available types + +#### 1. Text + +Text buttons are used for the least prioritized actions. These are used as action alternatives, or actions to be third +and beyond in consideration. + +#### 2. Outlined + +Outlined buttons are used for secondarily prioritized actions. These are used as action alternatives, or actions to be +second in consideration. + +#### 3. Filled + +Filled buttons are used for the most prioritized actions. These are used for actions you want the user to see/consider +first. + +#### 5. Small + +![img.png](../_media/small-btn.png) + +Small buttons are a smaller version of the normal-sized buttons. These are used in tight spaces in which a normal-sized +button cannot fit in. + +#### 6. Large + +![img.png](../_media/large-btn.png) +Large buttons are a larger version of the normal-sized buttons. These are used typically in big call to actions (CTAs) +in marketing pages like the hero in the index page. + +#### 7. Fullwidth\* + +Fullwidth buttons are buttons that fill up 100% of its width in a container. + +#### 8. Contained\* + +Contained buttons are buttons that only stretch to its maximum content width. + +> `*` = not available in the skeleton version. + +## Slots + +| Slot | Description | +|---------|------------------| +| default | The button text. | +| icon | The button icon. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button) of this component's base component. diff --git a/ui/docs/components/vue/clb-button.md b/ui/docs/components/vue/clb-button.md new file mode 100644 index 000000000..ab5c9e703 --- /dev/null +++ b/ui/docs/components/vue/clb-button.md @@ -0,0 +1,87 @@ +# CLBButton + +Buttons call the user to a specific action in the page. May it be in a form, or a hyperlink. + +![img.png](../_media/normal-btn.png) + +## Usage + +```vue + + + +``` + +## Props + +| Prop | Type | Default | Description | +|------------|---------|---------|---------------------------------| +| link | String | null | The link required. | +| isDisabled | Boolean | false | Whether the button is disabled. | +| type | String | `''` | The type of button. | + +### Available types + +#### 1. Text + +Text buttons are used for the least prioritized actions. These are used as action alternatives, or actions to be third +and beyond in consideration. + +#### 2. Outlined + +Outlined buttons are used for secondarily prioritized actions. These are used as action alternatives, or actions to be +second in consideration. + +#### 3. Filled + +Filled buttons are used for the most prioritized actions. These are used for actions you want the user to see/consider +first. + +#### 5. Small + +![img.png](../_media/small-btn.png) + +Small buttons are a smaller version of the normal-sized buttons. These are used in tight spaces in which a normal-sized +button cannot fit in. + +#### 6. Large + +![img.png](../_media/large-btn.png) +Large buttons are a larger version of the normal-sized buttons. These are used typically in big call to actions (CTAs) +in marketing pages like the hero in the index page. + +#### 7. Fullwidth\* + +Fullwidth buttons are buttons that fill up 100% of its width in a container. + +#### 8. Contained\* + +Contained buttons are buttons that only stretch to its maximum content width. + +> `*` = not available in the skeleton version. + +## Slots + +| Slot | Description | +|---------|------------------| +| default | The button text. | +| icon | The button icon. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button) of this component's base component. diff --git a/ui/docs/vue/clb-button.md b/ui/docs/vue/clb-button.md deleted file mode 100644 index 42ed7f344..000000000 --- a/ui/docs/vue/clb-button.md +++ /dev/null @@ -1,33 +0,0 @@ -# CLBButton - -```vue - -``` - -## Props - -| Prop | Type | Default | Description | -| ---------- | ------- | ------- | ------------------------------- | -| link | String | null | The link required. | -| isDisabled | Boolean | false | Whether the button is disabled. | -| type | String | '' | The type of button. | - -### Available types - -- Filled -- Outlined -- Large -- Small -- Fullwidth\* -- Contained\* - -> - = not available on the skeleton version. - -## Slots - -| Slot | Description | -| ------- | ---------------- | -| default | The button text. | -| icon | The button icon. | From 46b0cf29b89efb4495b6d231e33703e12c72e545 Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:04:38 +0800 Subject: [PATCH 03/11] UPDATE(docs): Add docs for `CLBButtonGroup` --- ui/docs/components/react/clb-button-group.md | 39 +++++++++++++++ ui/docs/components/svelte/clb-button-group.md | 43 +++++++++++++++++ ui/docs/components/vue/clb-button-group.md | 47 +++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 ui/docs/components/react/clb-button-group.md create mode 100644 ui/docs/components/svelte/clb-button-group.md create mode 100644 ui/docs/components/vue/clb-button-group.md diff --git a/ui/docs/components/react/clb-button-group.md b/ui/docs/components/react/clb-button-group.md new file mode 100644 index 000000000..45efaef1f --- /dev/null +++ b/ui/docs/components/react/clb-button-group.md @@ -0,0 +1,39 @@ +# CLBButtonGroup +Button groups are a group of related actions that may be used to paginate results, tab sections of pages, or simply select an option. + +![img.png](../_media/button-group.png) + +## Usage +```jsx + + + Polygon + + + Arbitrium + + + Ethereum + + +``` + +## Props +| Prop | Type | Default | Description | +|------------|---------|---------|------------------------------------------------------| +| id | string | null | The component's id. | +| name | string | null | The component's name. | +| value | string | null | The component's value. | +| isChecked | boolean | false | Boolean toggle to set the button to checked or not. | +| isDisabled | boolean | false | Boolean toggle to set the button to disabled or not. | + +## Slots +| Slot | Description | +|---------|------------------| +| default | The button text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button-group) of this component's base component. diff --git a/ui/docs/components/svelte/clb-button-group.md b/ui/docs/components/svelte/clb-button-group.md new file mode 100644 index 000000000..f66d7271c --- /dev/null +++ b/ui/docs/components/svelte/clb-button-group.md @@ -0,0 +1,43 @@ +# CLBButtonGroup +Button groups are a group of related actions that may be used to paginate results, tab sections of pages, or simply select an option. + +![img.png](../_media/button-group.png) + +## Usage +```sveltehtml + + + Polygon + + + Arbitrium + + + Ethereum + + + + +``` + +## Props +| Prop | Type | Default | Description | +|------------|---------|---------|------------------------------------------------------| +| id | string | null | The component's id. | +| name | string | null | The component's name. | +| value | string | null | The component's value. | +| isChecked | boolean | false | Boolean toggle to set the button to checked or not. | +| isDisabled | boolean | false | Boolean toggle to set the button to disabled or not. | + +## Slots +| Slot | Description | +|---------|------------------| +| default | The button text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button-group) of this component's base component. diff --git a/ui/docs/components/vue/clb-button-group.md b/ui/docs/components/vue/clb-button-group.md new file mode 100644 index 000000000..126a8d0c2 --- /dev/null +++ b/ui/docs/components/vue/clb-button-group.md @@ -0,0 +1,47 @@ +# CLBButtonGroup +Button groups are a group of related actions that may be used to paginate results, tab sections of pages, or simply select an option. + +![img.png](../_media/button-group.png) + +## Usage +```vue + + + +``` + +## Props +| Prop | Type | Default | Description | +|-------|---------|---------|--------------------------------| +| id | String | null | The identifier for the button. | +| name | String | null | The name for the button. | +| value | String | null | The value of the button. | + +## Slots +| Slot | Description | +|---------|------------------| +| default | The button text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/button-group) of this component's base component. From 4c1f7614fdf9af6cd2e75c11853c325b37afa7c7 Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:04:47 +0800 Subject: [PATCH 04/11] UPDATE(docs): Add docs for `CLBCheckbox` --- ui/docs/components/react/clb-checkbox.md | 43 +++++++++++++++++++ ui/docs/components/svelte/clb-checkbox.md | 47 +++++++++++++++++++++ ui/docs/components/vue/clb-checkbox.md | 51 +++++++++++++++++++++++ ui/docs/vue/clb-checkbox.md | 22 ---------- 4 files changed, 141 insertions(+), 22 deletions(-) create mode 100644 ui/docs/components/react/clb-checkbox.md create mode 100644 ui/docs/components/svelte/clb-checkbox.md create mode 100644 ui/docs/components/vue/clb-checkbox.md delete mode 100644 ui/docs/vue/clb-checkbox.md diff --git a/ui/docs/components/react/clb-checkbox.md b/ui/docs/components/react/clb-checkbox.md new file mode 100644 index 000000000..c6e6fa14f --- /dev/null +++ b/ui/docs/components/react/clb-checkbox.md @@ -0,0 +1,43 @@ +# CLBCheckbox +Checkboxes take and validate predetermined inputs of the user in a context of a form, or simple querying. They can have multiple selected values per field. + +![img.png](../_media/tick-checkboxes.png) + +```jsx + {}} +/> +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|-----------------------|---------|-----------------------------------------------------------------| +| name* | string | null | The component's name. | +| id | string | null | The component's id. | +| type | CheckboxTypes\|string | null | The component's type. | +| value | string | null | The component's default value. | +| label* | string | null | The component's label. | +| helper | string | null | The component's helper text. | +| media | string | null | The sprite/icon for the left side of the component. | +| mediaAlt | string | null | The alt text for the media. | +| isChecked | boolean | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | () => void | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. diff --git a/ui/docs/components/svelte/clb-checkbox.md b/ui/docs/components/svelte/clb-checkbox.md new file mode 100644 index 000000000..4eec986ca --- /dev/null +++ b/ui/docs/components/svelte/clb-checkbox.md @@ -0,0 +1,47 @@ +# CLBCheckbox +Checkboxes take and validate predetermined inputs of the user in a context of a form, or simple querying. They can have multiple selected values per field. + +![img.png](../_media/tick-checkboxes.png) + +```sveltehtml + {}} +/> + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|-----------------------|---------|-----------------------------------------------------------------| +| name* | string | null | The component's name. | +| id | string | null | The component's id. | +| type | CheckboxTypes\|string | null | The component's type. | +| value | string | null | The component's default value. | +| label* | string | null | The component's label. | +| helper | string | null | The component's helper text. | +| media | string | null | The sprite/icon for the left side of the component. | +| mediaAlt | string | null | The alt text for the media. | +| isChecked | boolean | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | () => void | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. diff --git a/ui/docs/components/vue/clb-checkbox.md b/ui/docs/components/vue/clb-checkbox.md new file mode 100644 index 000000000..9f1a284a5 --- /dev/null +++ b/ui/docs/components/vue/clb-checkbox.md @@ -0,0 +1,51 @@ +# CLBCheckbox +Checkboxes take and validate predetermined inputs of the user in a context of a form, or simple querying. They can have multiple selected values per field. + +![img.png](../_media/tick-checkboxes.png) + +```vue + + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|------------|---------|-----------------------------------------------------------------| +| name* | `String` | n/a | The component's name. | +| value | `String` | null | The component's default value. | +| label* | `String` | n/a | The component's label. | +| helper | `String` | null | The component's helper text. | +| media | `String` | null | The sprite/icon for the left side of the component. | +| mediaAlt | `String` | null | The alt text for the media. | +| isChecked | `Boolean` | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | `Function` | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. diff --git a/ui/docs/vue/clb-checkbox.md b/ui/docs/vue/clb-checkbox.md deleted file mode 100644 index d3bf18743..000000000 --- a/ui/docs/vue/clb-checkbox.md +++ /dev/null @@ -1,22 +0,0 @@ -# CLBCheckbox - -```vue - -``` - -## Props - -> `*`: Required - -| Prop | Type | Default | Description | -| --------- | -------- | ------- | --------------------------------------------------------------- | -| name\* | String | null | The component's name. | -| value | String | null | The component's default value. | -| label\* | String | null | The component's label. | -| helper | String | null | The component's helper text. | -| media | String | null | The sprite/icon for the left side of the component. | -| mediaAlt | String | null | The alt text for the media. | -| isChecked | Boolean | false | Boolean toggle to set the checkbox to checked or not. | -| onChange | Function | null | Function to execute when watching for changes to the component. | From f71646df677ce074b81446cf72dcd952d776cc1b Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:07:07 +0800 Subject: [PATCH 05/11] UPDATE(docs): Add docs for `CLBFormField` --- ui/docs/components/react/clb-form-field.md | 43 +++++++++++++++++ ui/docs/components/svelte/clb-form-field.md | 47 ++++++++++++++++++ ui/docs/components/vue/clb-form-field.md | 53 +++++++++++++++++++++ 3 files changed, 143 insertions(+) create mode 100644 ui/docs/components/react/clb-form-field.md create mode 100644 ui/docs/components/svelte/clb-form-field.md create mode 100644 ui/docs/components/vue/clb-form-field.md diff --git a/ui/docs/components/react/clb-form-field.md b/ui/docs/components/react/clb-form-field.md new file mode 100644 index 000000000..f421c72ef --- /dev/null +++ b/ui/docs/components/react/clb-form-field.md @@ -0,0 +1,43 @@ +# CLBFormField + +Form fields take and validate inputs the user in a context of a form, or simple querying. + +![img.png](../_media/form-field.png) + +```jsx + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-------------|------------------------|---------|------------------------------------| +| label* | string | null | The component's label. | +| name* | string | null | The component's name. | +| type | FormFieldTypes\|string | null | The component's type. | +| inputType* | string | null | The component's input type. | +| helper | string | null | The component's helper text. | +| placeholder | string | null | The component's placeholder. | +| rows | number | 5 | The component's rows. | +| isRequired | boolean | false | Whether the component is required. | +| isDisabled | boolean | false | Whether the component is disabled. | +| isReadonly | boolean | false | Whether the component is readonly. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/form-field) of this component's base component. diff --git a/ui/docs/components/svelte/clb-form-field.md b/ui/docs/components/svelte/clb-form-field.md new file mode 100644 index 000000000..77cfb9613 --- /dev/null +++ b/ui/docs/components/svelte/clb-form-field.md @@ -0,0 +1,47 @@ +# CLBFormField + +Form fields take and validate inputs the user in a context of a form, or simple querying. + +![img.png](../_media/form-field.png) + +```sveltehtml + + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-------------|------------------------|---------|------------------------------------| +| label* | string | null | The component's label. | +| name* | string | null | The component's name. | +| type | FormFieldTypes\|string | null | The component's type. | +| inputType* | string | null | The component's input type. | +| helper | string | null | The component's helper text. | +| placeholder | string | null | The component's placeholder. | +| rows | number | 5 | The component's rows. | +| isRequired | boolean | false | Whether the component is required. | +| isDisabled | boolean | false | Whether the component is disabled. | +| isReadonly | boolean | false | Whether the component is readonly. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/form-field) of this component's base component. diff --git a/ui/docs/components/vue/clb-form-field.md b/ui/docs/components/vue/clb-form-field.md new file mode 100644 index 000000000..63adcdd33 --- /dev/null +++ b/ui/docs/components/vue/clb-form-field.md @@ -0,0 +1,53 @@ +# CLBFormField + +Form fields take and validate inputs the user in a context of a form, or simple querying. + +![img.png](../_media/form-field.png) + +```vue + + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-------------|---------|---------|------------------------------------| +| label* | String | n/a | The component's label. | +| name* | String | n/a | The component's name. | +| type | String | null | The component's type. | +| inputType* | String | n/a | The component's input type. | +| helper | String | null | The component's helper text. | +| placeholder | String | null | The component's placeholder. | +| rows | Number | 5 | The component's rows. | +| isRequired | Boolean | false | Whether the component is required. | +| isDisabled | Boolean | false | Whether the component is disabled. | +| isReadonly | Boolean | false | Whether the component is readonly. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/form-field) of this component's base component. From 4a3e363804c9d5b50e8f5f24fea301dfe40567d3 Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:07:27 +0800 Subject: [PATCH 06/11] UPDATE(docs): Add docs for `CLBLink` --- ui/docs/components/react/clb-link.md | 29 ++++++++++++++++++++ ui/docs/components/svelte/clb-link.md | 33 +++++++++++++++++++++++ ui/docs/components/vue/clb-link.md | 39 +++++++++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 ui/docs/components/react/clb-link.md create mode 100644 ui/docs/components/svelte/clb-link.md create mode 100644 ui/docs/components/vue/clb-link.md diff --git a/ui/docs/components/react/clb-link.md b/ui/docs/components/react/clb-link.md new file mode 100644 index 000000000..fdbecff5a --- /dev/null +++ b/ui/docs/components/react/clb-link.md @@ -0,0 +1,29 @@ +# CLBLink + +Links are elements that take a user from one webpage to another. These are often found inline with regular text. + +![img.png](../_media/link.png) + +## Usage + +```jsx +Link sample. +``` + +## Props + +| Prop | Type | Default | Description | +|------|--------|---------|--------------------| +| link | String | null | The link required. | + +## Slots + +| Slot | Description | +|---------|----------------| +| default | The link text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/link) of this component's base component. diff --git a/ui/docs/components/svelte/clb-link.md b/ui/docs/components/svelte/clb-link.md new file mode 100644 index 000000000..045099584 --- /dev/null +++ b/ui/docs/components/svelte/clb-link.md @@ -0,0 +1,33 @@ +# CLBLink + +Links are elements that take a user from one webpage to another. These are often found inline with regular text. + +![img.png](../_media/link.png) + +## Usage + +```sveltehtml +Link sample. + + +``` + +## Props + +| Prop | Type | Default | Description | +|------|--------|---------|--------------------| +| link | String | null | The link required. | + +## Slots + +| Slot | Description | +|---------|----------------| +| default | The link text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/link) of this component's base component. diff --git a/ui/docs/components/vue/clb-link.md b/ui/docs/components/vue/clb-link.md new file mode 100644 index 000000000..26b58a886 --- /dev/null +++ b/ui/docs/components/vue/clb-link.md @@ -0,0 +1,39 @@ +# CLBLink + +Links are elements that take a user from one webpage to another. These are often found inline with regular text. + +![img.png](../_media/link.png) + +## Usage + +```vue + + + +``` + +## Props + +| Prop | Type | Default | Description | +|------|--------|---------|--------------------| +| link | String | null | The link required. | + +## Slots + +| Slot | Description | +|---------|----------------| +| default | The link text. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/link) of this component's base component. From 3a602792222b2d9b7f88d7b4d22a0829816b210b Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:07:35 +0800 Subject: [PATCH 07/11] UPDATE(docs): Add docs for `CLBRadio` --- ui/docs/components/react/clb-radio.md | 43 ++++++++++++++++++++++ ui/docs/components/svelte/clb-radio.md | 47 ++++++++++++++++++++++++ ui/docs/components/vue/clb-radio.md | 51 ++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 ui/docs/components/react/clb-radio.md create mode 100644 ui/docs/components/svelte/clb-radio.md create mode 100644 ui/docs/components/vue/clb-radio.md diff --git a/ui/docs/components/react/clb-radio.md b/ui/docs/components/react/clb-radio.md new file mode 100644 index 000000000..02ad53739 --- /dev/null +++ b/ui/docs/components/react/clb-radio.md @@ -0,0 +1,43 @@ +# CLBRadio +Radio fields take and validate predetermined inputs of the user in a context of a form, or simple querying. They can only have a single selected value per field. + +![img.png](../_media/tick-radio.png) + +```jsx + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|-----------------------|---------|-----------------------------------------------------------------| +| name* | string | null | The component's name. | +| id | string | null | The component's id. | +| type | CheckboxTypes\|string | null | The component's type. | +| value | string | null | The component's default value. | +| label* | string | null | The component's label. | +| helper | string | null | The component's helper text. | +| media | string | null | The sprite/icon for the left side of the component. | +| mediaAlt | string | null | The alt text for the media. | +| isChecked | boolean | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | () => void | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. diff --git a/ui/docs/components/svelte/clb-radio.md b/ui/docs/components/svelte/clb-radio.md new file mode 100644 index 000000000..ba5384dac --- /dev/null +++ b/ui/docs/components/svelte/clb-radio.md @@ -0,0 +1,47 @@ +# CLBRadio +Radio fields take and validate predetermined inputs of the user in a context of a form, or simple querying. They can only have a single selected value per field. + +![img.png](../_media/tick-radio.png) + +```sveltehtml + + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|-----------------------|---------|-----------------------------------------------------------------| +| name* | string | null | The component's name. | +| id | string | null | The component's id. | +| type | CheckboxTypes\|string | null | The component's type. | +| value | string | null | The component's default value. | +| label* | string | null | The component's label. | +| helper | string | null | The component's helper text. | +| media | string | null | The sprite/icon for the left side of the component. | +| mediaAlt | string | null | The alt text for the media. | +| isChecked | boolean | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | () => void | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. diff --git a/ui/docs/components/vue/clb-radio.md b/ui/docs/components/vue/clb-radio.md new file mode 100644 index 000000000..a6c186d1f --- /dev/null +++ b/ui/docs/components/vue/clb-radio.md @@ -0,0 +1,51 @@ +# CLBRadio +Radio fields take and validate predetermined inputs of the user in a context of a form, or simple querying. They can only have a single selected value per field. + +![img.png](../_media/tick-radio.png) + +```vue + + + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-----------|------------|---------|-----------------------------------------------------------------| +| name* | `String` | n/a | The component's name. | +| value | `String` | null | The component's default value. | +| label* | `String` | n/a | The component's label. | +| helper | `String` | null | The component's helper text. | +| media | `String` | null | The sprite/icon for the left side of the component. | +| mediaAlt | `String` | null | The alt text for the media. | +| isChecked | `Boolean` | false | Boolean toggle to set the checkbox to checked or not. | +| onChange | `Function` | null | Function to execute when watching for changes to the component. | + +## Detailed API Documentation + +A detailed API documentation is available whenever you want to change something in the component manually--like using +the class names API, or CSS variables API. The documentation is located in +the [Hashi documentation](https://hashi-docs.netlify.app/docs/develop/tick-field) of this component's base component. From f74b31bff4f3611dbb91f298ed2eb23234227b44 Mon Sep 17 00:00:00 2001 From: Matteu Date: Wed, 18 Oct 2023 21:07:48 +0800 Subject: [PATCH 08/11] UPDATE(docs): Add docs for `CLBSelectField` --- ui/docs/components/react/clb-select-field.md | 44 +++++++++++++++ ui/docs/components/svelte/clb-select-field.md | 48 +++++++++++++++++ ui/docs/components/vue/clb-select-field.md | 54 +++++++++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 ui/docs/components/react/clb-select-field.md create mode 100644 ui/docs/components/svelte/clb-select-field.md create mode 100644 ui/docs/components/vue/clb-select-field.md diff --git a/ui/docs/components/react/clb-select-field.md b/ui/docs/components/react/clb-select-field.md new file mode 100644 index 000000000..6076044d4 --- /dev/null +++ b/ui/docs/components/react/clb-select-field.md @@ -0,0 +1,44 @@ +# CLBFormField + +Select fields lets the user pick an option from a finite set of choices, and validate the option in a context of a form, +or simple filtering. + +![img.png](../_media/select-field.png) + +```jsx + + + ... + +``` + +## Props + +> `*` = required + +| Prop | Type | Default | Description | +|-------------|---------|---------|------------------------------------| +| label* | string | null | The component's label. | +| name* | string | null | The component's name. | +| type | string | null | The component's type. | +| helper | string | null | The component's helper text. | +| isRequired | boolean | false | Whether the component is required. | +| isDisabled | boolean | false | Whether the component is disabled. | + +## Slots +| Slot | Description | +|---------|--------------------------------------| +| default | Entry point for `