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 diff --git a/ui/docs/components/_media/button-group.png b/ui/docs/components/_media/button-group.png new file mode 100644 index 000000000..1ad38c4a5 Binary files /dev/null and b/ui/docs/components/_media/button-group.png differ diff --git a/ui/docs/components/_media/form-field.png b/ui/docs/components/_media/form-field.png new file mode 100644 index 000000000..aa4574979 Binary files /dev/null and b/ui/docs/components/_media/form-field.png differ diff --git a/ui/docs/components/_media/large-btn.png b/ui/docs/components/_media/large-btn.png new file mode 100644 index 000000000..837921450 Binary files /dev/null and b/ui/docs/components/_media/large-btn.png differ diff --git a/ui/docs/components/_media/link.png b/ui/docs/components/_media/link.png new file mode 100644 index 000000000..67f105911 Binary files /dev/null and b/ui/docs/components/_media/link.png differ diff --git a/ui/docs/components/_media/normal-btn.png b/ui/docs/components/_media/normal-btn.png new file mode 100644 index 000000000..9561436ec Binary files /dev/null and b/ui/docs/components/_media/normal-btn.png differ diff --git a/ui/docs/components/_media/select-field.png b/ui/docs/components/_media/select-field.png new file mode 100644 index 000000000..83e6f8b34 Binary files /dev/null and b/ui/docs/components/_media/select-field.png differ diff --git a/ui/docs/components/_media/small-btn.png b/ui/docs/components/_media/small-btn.png new file mode 100644 index 000000000..9cadf35f4 Binary files /dev/null and b/ui/docs/components/_media/small-btn.png differ diff --git a/ui/docs/components/_media/tick-checkboxes.png b/ui/docs/components/_media/tick-checkboxes.png new file mode 100644 index 000000000..4d920c81f Binary files /dev/null and b/ui/docs/components/_media/tick-checkboxes.png differ diff --git a/ui/docs/components/_media/tick-radio.png b/ui/docs/components/_media/tick-radio.png new file mode 100644 index 000000000..dfc74babf Binary files /dev/null and b/ui/docs/components/_media/tick-radio.png differ 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/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/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/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/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/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/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 `