diff --git a/.remarkignore b/.remarkignore index 4232226f56..5377a735b8 100644 --- a/.remarkignore +++ b/.remarkignore @@ -11,4 +11,3 @@ build docs form-validations web-twig -web-react diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index bd502b93a0..09e3ff3af2 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/packages/web-react/src/components/Accordion/README.md @@ -136,12 +136,12 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ## Accordion Props -| Name | Type | Default | Required | Description | -| ------------- | --------------------------------- | --------- | -------- | ------------------------------------------------ | -| `children` | `ReactNode` | — | ✓ | Accordion children's nodes | -| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper | -| `open` | [`string` \| `string[]`] | — | ✕ | Open item or list of open items \* | -| `toggle` | `(id: string) => void` | — | ✕ | A generic handler for a single **AccordionItem** | +| Name | Type | Default | Required | Description | +| ------------- | ---------------------------------- | --------- | -------- | ------------------------------------------------ | +| `children` | `ReactNode` | — | ✓ | Accordion children's nodes | +| `elementType` | \[`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper | +| `open` | \[`string` \| `string[]`] | — | ✕ | Open item or list of open items \* | +| `toggle` | `(id: string) => void` | — | ✕ | A generic handler for a single **AccordionItem** | (\*) Depending on the type of default value, what is set as the default will affect whether one or more will be open at the same time. @@ -151,12 +151,12 @@ and [escape hatches][readme-escape-hatches]. ## Uncontrolled Accordion Props -| Name | Type | Default | Required | Description | -| ------------- | --------------------------------- | --------- | -------- | ---------------------------------------------- | -| `children` | `ReactNode` | — | ✓ | Accordion children's nodes | -| `defaultOpen` | [`string` \| `string[]`] | — | ✕ | Default open item(s) \* | -| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper | -| `stayOpen` | `bool` | — | ✕ | Item stay open when another one is also opened | +| Name | Type | Default | Required | Description | +| ------------- | ---------------------------------- | --------- | -------- | ---------------------------------------------- | +| `children` | `ReactNode` | — | ✓ | Accordion children's nodes | +| `defaultOpen` | \[`string` \| `string[]`] | — | ✕ | Default open item(s) \* | +| `elementType` | \[`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper | +| `stayOpen` | `bool` | — | ✕ | Item stay open when another one is also opened | (\*) If this attribute is an array, then the `stayOpen` parameter should also be set. @@ -166,11 +166,11 @@ and [escape hatches][readme-escape-hatches]. ## AccordionItem Props -| Name | Type | Default | Required | Description | -| ------------- | --------------------------------- | --------- | -------- | ----------------------------------------------- | -| `children` | `ReactNode` | — | ✓ | Item children node | -| `elementType` | [`article` \| `section` \| `div`] | `article` | ✕ | Type of element used as wrapper for single item | -| `id` | `string` | — | ✓ | Item id | +| Name | Type | Default | Required | Description | +| ------------- | ---------------------------------- | --------- | -------- | ----------------------------------------------- | +| `children` | `ReactNode` | — | ✓ | Item children node | +| `elementType` | \[`article` \| `section` \| `div`] | `article` | ✕ | Type of element used as wrapper for single item | +| `id` | `string` | — | ✓ | Item id | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Checkbox/README.md b/packages/web-react/src/components/Checkbox/README.md index 8328cf3da2..d216e5d2c9 100644 --- a/packages/web-react/src/components/Checkbox/README.md +++ b/packages/web-react/src/components/Checkbox/README.md @@ -48,7 +48,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Text field classes are fabricated using `useCheckboxStyleProps` hook. You can use it to create your own custom Checkbox component. diff --git a/packages/web-react/src/components/Collapse/README.md b/packages/web-react/src/components/Collapse/README.md index 75b21e7cd1..7d33c5de23 100644 --- a/packages/web-react/src/components/Collapse/README.md +++ b/packages/web-react/src/components/Collapse/README.md @@ -76,13 +76,13 @@ const [isOpen, toggle] = useState(true); ## API -| Name | Type | Default | Required | Description | -| ------------------------- | ----------------------------------- | ------- | -------- | ------------------------------------------- | -| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | -| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content | -| `id` | `string` | — | ✓ | Component id | -| `isOpen` | `bool` | — | ✕ | Is open on initialization | -| `transitionDuration` | `number` | `250` | ✕ | Transition duration in miliseconds | +| Name | Type | Default | Required | Description | +| ------------------------- | ------------------------------------ | ------- | -------- | ------------------------------------------- | +| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | +| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content | +| `id` | `string` | — | ✓ | Component id | +| `isOpen` | `bool` | — | ✕ | Is open on initialization | +| `transitionDuration` | `number` | `250` | ✕ | Transition duration in miliseconds | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -129,8 +129,8 @@ import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/component | Name | Type | Default | Required | Description | | ------------------------- | -------------------------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- | -| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | -| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content | +| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint | +| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content | | `hideOnCollapse` | `bool` | `false` | ✕ | [**DEPRECATED**][readme-deprecations] in favor of `isDisposable`; Hides button when content is displayed | | `id` | `string` | — | ✓ | Component id | | `isDisposable` | `bool` | `false` | ✕ | Hides trigger when content is displayed | diff --git a/packages/web-react/src/components/Dropdown/README.md b/packages/web-react/src/components/Dropdown/README.md index 5da5e24ce7..18ceab66f8 100644 --- a/packages/web-react/src/components/Dropdown/README.md +++ b/packages/web-react/src/components/Dropdown/README.md @@ -52,15 +52,15 @@ import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/ ### Dropdown -| Name | Type | Default | Required | Description | -| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- | -| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown | -| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode | -| `id` | `string` | — | ✓ | Component id | -| `isOpen` | `bool` | `false` | ✓ | Open state | -| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown | -| `onToggle` | `() => void` | — | ✓ | Function for toggle open state of dropdown | -| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component | +| Name | Type | Default | Required | Description | +| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- | +| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown | +| `fullWidthMode` | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode | +| `id` | `string` | — | ✓ | Component id | +| `isOpen` | `bool` | `false` | ✓ | Open state | +| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown | +| `onToggle` | `() => void` | — | ✓ | Function for toggle open state of dropdown | +| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -68,10 +68,10 @@ and [escape hatches][readme-escape-hatches]. ### DropdownTrigger -| Name | Type | Default | Required | Description | -| ------------- | ------------------------- | -------- | -------- | -------------------------------- | -| `children` | [`string` \| `ReactNode`] | — | ✓ | Content of trigger element | -| `elementType` | [`string` \| `ReactNode`] | `button` | ✕ | Element type of dropdown trigger | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------- | -------- | -------- | -------------------------------- | +| `children` | \[`string` \| `ReactNode`] | — | ✓ | Content of trigger element | +| `elementType` | \[`string` \| `ReactNode`] | `button` | ✕ | Element type of dropdown trigger | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -79,9 +79,9 @@ and [escape hatches][readme-escape-hatches]. ### DropdownPopover -| Name | Type | Default | Required | Description | -| ---------- | ------------------------- | ------- | -------- | -------------------------- | -| `children` | [`string` \| `ReactNode`] | — | ✓ | Content of trigger element | +| Name | Type | Default | Required | Description | +| ---------- | -------------------------- | ------- | -------- | -------------------------- | +| `children` | \[`string` \| `ReactNode`] | — | ✓ | Content of trigger element | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -89,13 +89,13 @@ and [escape hatches][readme-escape-hatches]. ### UncontrolledDropdown -| Name | Type | Default | Required | Description | -| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- | -| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown | -| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode | -| `id` | `string` | `` | ✕ | Component id | -| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown | -| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component | +| Name | Type | Default | Required | Description | +| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- | +| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown | +| `fullWidthMode` | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode | +| `id` | `string` | `` | ✕ | Component id | +| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown | +| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Field/README.md b/packages/web-react/src/components/Field/README.md index 0f990dcc53..f9bb2fabdb 100644 --- a/packages/web-react/src/components/Field/README.md +++ b/packages/web-react/src/components/Field/README.md @@ -31,11 +31,11 @@ When displaying text dynamically, set [`role="alert"`][aria-alert-role] on the ` ### API -| Name | Type | Default | Required | Description | -| ---------------- | ------------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------- | -| `className` | `string` | — | ✓ | Wrapper custom class name | -| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) | -| `role` | `string` | - | ✕ | The role attribute that describes the role of an element | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text, only visible if validationState is set | +| Name | Type | Default | Required | Description | +| ---------------- | ------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- | +| `className` | `string` | — | ✓ | Wrapper custom class name | +| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) | +| `role` | `string` | - | ✕ | The role attribute that describes the role of an element | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text, only visible if validationState is set | [aria-alert-role]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role diff --git a/packages/web-react/src/components/FieldGroup/README.md b/packages/web-react/src/components/FieldGroup/README.md index f50e7c8f34..aacf60502b 100644 --- a/packages/web-react/src/components/FieldGroup/README.md +++ b/packages/web-react/src/components/FieldGroup/README.md @@ -106,7 +106,7 @@ Validation states can be presented either by adding the `validationState` attrib | `label` | `string` | — | ✓ | Label text | | `name` | `string` | `null` | ✕ | Group name | | `validationState` | [Validation dictionary][dictionary-validation] | `null` | ✕ | Type of validation state | -| `validationText` | [`string` \| `string[]`] | `null` | ✕ | Validation text | +| `validationText` | \[`string` \| `string[]`] | `null` | ✕ | Validation text | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index 45c5da639e..a5648f5b37 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -385,9 +385,9 @@ and [escape hatches][readme-escape-hatches]. | `maxUploadedFiles` | `number` | 10 | ✕ | Maximum file upload queue size | | `name` | `string` | — | ✓ | Field name, will be used for each attachment in the queue | | `onError` | `FileUploaderErrorCallbackType` | — | ✕ | Callback on error condition | -| `queueLimitBehavior` | [`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | +| `queueLimitBehavior` | \[`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | | `validationState` | `ValidationState` | — | ✕ | Validation state | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation status text | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation status text | The rest of the properties are created from the default `` element. [More about the element][input-element-docs] @@ -424,7 +424,7 @@ and [escape hatches][readme-escape-hatches]. | `hasImagePreview` | `bool` | false | ✕ | Show image preview | | `iconName` | `string` | `file` | ✕ | Icon shown along the file | | `id` | `string` | — | ✓ | FileUploaderAttachment id | -| `imageObjectFit` | [`cover` \| `contain`] | `cover` | ✕ | Defines FileUploaderAttachment image fit in container | +| `imageObjectFit` | \[`cover` \| `contain`] | `cover` | ✕ | Defines FileUploaderAttachment image fit in container | | `label` | `string` | — | ✓ | File name | | `name` | `string` | — | ✓ | Input field name | | `onDismiss` | `(key: string) => FileQueueMapType` | — | ✓ | Callback to delete an item from the queue | @@ -492,9 +492,9 @@ via `inputProps` and `listProps`. | `maxUploadedFiles` | `number` | 10 | ✕ | Maximum file upload queue size | | `onChange` | `(fileQueue: FileQueueMapType) => void` | — | ✕ | Callback on change in fileQueue | | `onInputError` | `FileUploaderErrorCallbackType` | — | ✕ | Callback on error condition | -| `queueLimitBehavior` | [`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | +| `queueLimitBehavior` | \[`hide` \| `disable` \| `none`] | `none` | ✕ | Input behavior when the file queue is filled | | `validationState` | `ValidationState` | — | ✕ | Validation state | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation status text | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation status text | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index b137b932fa..03056fd802 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/packages/web-react/src/components/Grid/README.md @@ -99,11 +99,11 @@ Responsive horizontal and vertical alignment: | ------------- | ------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `alignmentX` | [[AlignmentXExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | | `alignmentY` | [[AlignmentYExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | -| `cols` | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | — | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | +| `cols` | \[`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | — | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | | `elementType` | HTML element | `div` | ✕ | Element type to use for the Grid | -| `spacing` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | -| `spacingX` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | -| `spacingY` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | +| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | +| `spacingX` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | +| `spacingY` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -166,13 +166,13 @@ previous breakpoint will be used. ### API -| Name | Type | Default | Required | Description | -| ------------- | ------------------------------------ | ------- | -------- | ---------------------------------- | -| `elementType` | `string` | `div` | ✕ | HTML tag to render | -| `columnEnd` | [`number` \| `span \d+` \| `object`] | `null` | ✕ | Column where the item should end | -| `columnStart` | [`number` \| `span \d+` \| `object`] | `null` | ✕ | Column where the item should start | -| `rowEnd` | [`number` \| `span \d+` \| `object`] | `null` | ✕ | Row where the item should end | -| `rowStart` | [`number` \| `span \d+` \| `object`] | `null` | ✕ | Row where the item should start | +| Name | Type | Default | Required | Description | +| ------------- | ------------------------------------- | ------- | -------- | ---------------------------------- | +| `elementType` | `string` | `div` | ✕ | HTML tag to render | +| `columnEnd` | \[`number` \| `span \d+` \| `object`] | `null` | ✕ | Column where the item should end | +| `columnStart` | \[`number` \| `span \d+` \| `object`] | `null` | ✕ | Column where the item should start | +| `rowEnd` | \[`number` \| `span \d+` \| `object`] | `null` | ✕ | Row where the item should end | +| `rowStart` | \[`number` \| `span \d+` \| `object`] | `null` | ✕ | Row where the item should start | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index 312229e907..52580fad2c 100644 --- a/packages/web-react/src/components/Header/README.md +++ b/packages/web-react/src/components/Header/README.md @@ -344,10 +344,10 @@ the optional secondary actions slot. #### API -| Name | Type | Default | Required | Description | -| ---------- | -------------------------- | --------- | -------- | ------------- | -| `children` | `ReactNode` | — | ✕ | Children node | -| `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color variant | +| Name | Type | Default | Required | Description | +| ---------- | --------------------------- | --------- | -------- | ------------- | +| `children` | `ReactNode` | — | ✕ | Children node | +| `color` | \[`primary` \| `secondary`] | `primary` | ✕ | Color variant | The component implements the [`HTMLElement`][mdn-api-html-element] interface. diff --git a/packages/web-react/src/components/Heading/README.md b/packages/web-react/src/components/Heading/README.md index 36bc400423..7c44bb64a3 100644 --- a/packages/web-react/src/components/Heading/README.md +++ b/packages/web-react/src/components/Heading/README.md @@ -52,7 +52,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Heading classes are fabricated using `useHeadingStyleProps` hook. You can use it to create your own custom Heading component. diff --git a/packages/web-react/src/components/Item/README.md b/packages/web-react/src/components/Item/README.md index 7468a9d9ad..2f19a05262 100644 --- a/packages/web-react/src/components/Item/README.md +++ b/packages/web-react/src/components/Item/README.md @@ -95,14 +95,14 @@ const onToggle = () => setIsOpen(!isOpen); ## API -| Name | Type | Default | Required | Description | -| ------------- | ------------------------- | -------- | -------- | ------------------------------- | -| `elementType` | `ElementType` | `button` | ✕ | Type of element used as wrapper | -| `helperText` | `string` | — | ✕ | Custom helper text | -| `iconName` | `string` | — | ✕ | Icon used in item | -| `isDisabled` | `bool` | `false` | ✕ | Whether is the item disabled | -| `isSelected` | `bool` | `false` | ✕ | Whether is the item selected | -| `label` | [`string` \| `ReactNode`] | - | ✓ | Label of the item | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------- | -------- | -------- | ------------------------------- | +| `elementType` | `ElementType` | `button` | ✕ | Type of element used as wrapper | +| `helperText` | `string` | — | ✕ | Custom helper text | +| `iconName` | `string` | — | ✕ | Icon used in item | +| `isDisabled` | `bool` | `false` | ✕ | Whether is the item disabled | +| `isSelected` | `bool` | `false` | ✕ | Whether is the item selected | +| `label` | \[`string` \| `ReactNode`] | - | ✓ | Label of the item | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Link/README.md b/packages/web-react/src/components/Link/README.md index 7fc4cc16ac..4cacbaeed2 100644 --- a/packages/web-react/src/components/Link/README.md +++ b/packages/web-react/src/components/Link/README.md @@ -72,7 +72,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Link classes are fabricated using `useLinkStyleProps` hook. You can use it to create your own custom Link component. @@ -88,7 +88,7 @@ const CustomLink = (props: SpiritLinkProps): JSX.Element => { }; ``` -## Custom polymorphic component +## Custom Polymorphic Component If you are using `forwardRef`, use the `PolymorphicRef` type for the reference. diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md index c2d7bfdee4..41e3907e70 100644 --- a/packages/web-react/src/components/Modal/README.md +++ b/packages/web-react/src/components/Modal/README.md @@ -124,15 +124,15 @@ By default, the docked dialog on mobile screens shrinks to fit the height of its ### API -| Name | Type | Default | Required | Description | -| -------------------- | ---------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | -| `children` | `ReactNode` | — | ✕ | Children node | -| `elementType` | [`article` \| `form`] | `article` | ✕ | ModalDialog element type | -| `height` | [`string` \| `object`] | `null` | ✕ | Height of the modal. Accepts any valid CSS value or an object with breakpoint keys for responsive values | -| `isDockedOnMobile` | `bool` | `false` | ✕ | Dock the ModalDialog to the bottom of the screen on mobile | -| `isExpandedOnMobile` | `bool` | `false` | ✕ | If true, ModalDialog expands to fit the viewport on mobile | -| `isScrollable` | `bool` | `true` | ✕ | If the ModalDialog should be scrollable. If set to `false`, the dialog will not scroll and will expand to fit the content | -| `maxHeight` | [`string` \| `object`] | `null` | ✕ | Max height of the modal. Accepts any valid CSS value or an object with breakpoint keys for responsive values | +| Name | Type | Default | Required | Description | +| -------------------- | ----------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | +| `children` | `ReactNode` | — | ✕ | Children node | +| `elementType` | \[`article` \| `form`] | `article` | ✕ | ModalDialog element type | +| `height` | \[`string` \| `object`] | `null` | ✕ | Height of the modal. Accepts any valid CSS value or an object with breakpoint keys for responsive values | +| `isDockedOnMobile` | `bool` | `false` | ✕ | Dock the ModalDialog to the bottom of the screen on mobile | +| `isExpandedOnMobile` | `bool` | `false` | ✕ | If true, ModalDialog expands to fit the viewport on mobile | +| `isScrollable` | `bool` | `true` | ✕ | If the ModalDialog should be scrollable. If set to `false`, the dialog will not scroll and will expand to fit the content | +| `maxHeight` | \[`string` \| `object`] | `null` | ✕ | Max height of the modal. Accepts any valid CSS value or an object with breakpoint keys for responsive values | Also, all properties of the [`
` element][mdn-article] and [`
` element][mdn-form] are supported. diff --git a/packages/web-react/src/components/NoSsr/README.md b/packages/web-react/src/components/NoSsr/README.md index 7c45d9202f..95ec5fbdf6 100644 --- a/packages/web-react/src/components/NoSsr/README.md +++ b/packages/web-react/src/components/NoSsr/README.md @@ -2,6 +2,8 @@ The NoSsr component disables rendering of any wrapped component by server prerender. +## 🚀 Usage + ```jsx import { NoSsr } from '@lmc-eu/spirit-web-react/components'; ``` diff --git a/packages/web-react/src/components/Pagination/README.md b/packages/web-react/src/components/Pagination/README.md index 1f1be887b1..501b48b1df 100644 --- a/packages/web-react/src/components/Pagination/README.md +++ b/packages/web-react/src/components/Pagination/README.md @@ -129,10 +129,10 @@ and [escape hatches][readme-escape-hatches]. This component extends the [Button][button] component with directional arrows and a hidden label. -| Name | Type | Default | Required | Description | -| -------------------- | ---------------------- | ------- | -------- | -------------------------------------------------------------------- | -| `accessibilityLabel` | `string` | `null` | ✓ | Accessibility label of the link | -| `direction` | [`previous` \| `next`] | `null` | ✓ | The direction according to which the corresponding icon is displayed | +| Name | Type | Default | Required | Description | +| -------------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------- | +| `accessibilityLabel` | `string` | `null` | ✓ | Accessibility label of the link | +| `direction` | \[`previous` \| `next`] | `null` | ✓ | The direction according to which the corresponding icon is displayed | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/PartnerLogo/README.md b/packages/web-react/src/components/PartnerLogo/README.md index a14d8b2259..0568fa8b2b 100644 --- a/packages/web-react/src/components/PartnerLogo/README.md +++ b/packages/web-react/src/components/PartnerLogo/README.md @@ -26,7 +26,7 @@ The PartnerLogo component is available in [sizes][dictionary-size]. ``` -## Disabled safe area +## Disabled Safe Area The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeArea` prop set to `false` to disable safe area around logo. diff --git a/packages/web-react/src/components/Pill/README.md b/packages/web-react/src/components/Pill/README.md index 45c93524c2..f80824a638 100644 --- a/packages/web-react/src/components/Pill/README.md +++ b/packages/web-react/src/components/Pill/README.md @@ -17,10 +17,10 @@ import { Pill } from '@lmc-eu/spirit-web-react'; ## API -| Name | Type | Default | Required | Description | -| ---------- | ------------------------------------------------------------------------- | ---------- | -------- | ---------------------- | -| `children` | `ReactNode` | — | ✓ | Content of the Pill | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕ | Color of the component | +| Name | Type | Default | Required | Description | +| ---------- | -------------------------------------------------------------------------- | ---------- | -------- | ---------------------- | +| `children` | `ReactNode` | — | ✓ | Content of the Pill | +| `color` | \[[Emotion Color dictionary][dictionary-color] \| `selected` \| `neutral`] | `selected` | ✕ | Color of the component | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Radio/README.md b/packages/web-react/src/components/Radio/README.md index f2830790cc..d5246cbc7b 100644 --- a/packages/web-react/src/components/Radio/README.md +++ b/packages/web-react/src/components/Radio/README.md @@ -45,7 +45,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Text field classes are fabricated using `useRadioStyleProps` hook. You can use it to create your own custom Radio component. diff --git a/packages/web-react/src/components/ScrollView/README.md b/packages/web-react/src/components/ScrollView/README.md index 596b1d4f01..6ea6082124 100644 --- a/packages/web-react/src/components/ScrollView/README.md +++ b/packages/web-react/src/components/ScrollView/README.md @@ -65,12 +65,12 @@ Or both: ## ScrollView Props -| Name | Type | Default | Required | Description | -| --------------------- | ---------------------------------- | ---------- | -------- | ---------------------------------- | -| `children` | `ReactNode` | — | ✓ | ScrollView children's nodes | -| `direction` | [`horizontal` \| `vertical`] | `vertical` | ✕ | Direction of the wrapper | -| `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | -| `overflowDecorators` | [`borders` \| `shadows` \| `both`] | `shadows` | ✕ | ScrollView overflow decorators | +| Name | Type | Default | Required | Description | +| --------------------- | ----------------------------------- | ---------- | -------- | ---------------------------------- | +| `children` | `ReactNode` | — | ✓ | ScrollView children's nodes | +| `direction` | \[`horizontal` \| `vertical`] | `vertical` | ✕ | Direction of the wrapper | +| `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | +| `overflowDecorators` | \[`borders` \| `shadows` \| `both`] | `shadows` | ✕ | ScrollView overflow decorators | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Select/README.md b/packages/web-react/src/components/Select/README.md index d812e7e98d..09fefbbc90 100644 --- a/packages/web-react/src/components/Select/README.md +++ b/packages/web-react/src/components/Select/README.md @@ -47,7 +47,7 @@ Advanced example usage: | `name` | `string` | — | ✕ | Select name | | `ref` | `ForwardedRef` | — | ✕ | Select element reference | | `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -65,7 +65,7 @@ import { IconsProvider } from 'packages/web-react/src/context'; ; ``` -## Custom component +## Custom Component Select classes are fabricated using `useSelectStyleProps` hook. You can use it to create your own custom Select component. diff --git a/packages/web-react/src/components/Stack/README.md b/packages/web-react/src/components/Stack/README.md index e82c4e360d..4d7388834a 100644 --- a/packages/web-react/src/components/Stack/README.md +++ b/packages/web-react/src/components/Stack/README.md @@ -53,14 +53,14 @@ Custom responsive spacing: ## API -| Name | Type | Default | Required | Description | -| ------------------------- | ---------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | -| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | -| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | -| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | -| `hasSpacing` | `bool` | `false` | ✕ | Apply default spacing between items | -| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | -| `spacing` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| ------------------------- | ----------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | +| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | +| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | +| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | +| `hasSpacing` | `bool` | `false` | ✕ | Apply default spacing between items | +| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | +| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Tabs/README.md b/packages/web-react/src/components/Tabs/README.md index b23aaffb16..9616e167f4 100644 --- a/packages/web-react/src/components/Tabs/README.md +++ b/packages/web-react/src/components/Tabs/README.md @@ -83,24 +83,24 @@ Custom responsive spacing: #### API -| Name | Type | Default | Required | Description | -| ------------------- | ---------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | -| `selectedTab` | [`string` \| `number`] | — | ✓ | Identification of the selected tab | -| `toogle` | `Function` | — | ✓ | Toggle function which accept tab ID as input | -| `children` | `any` | — | ✕ | Child component | -| `onSelectionChange` | `(id: TabId) => void` | — | ✕ | When the state of the selected panel changes | -| `spacing` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| ------------------- | ----------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | +| `selectedTab` | \[`string` \| `number`] | — | ✓ | Identification of the selected tab | +| `toogle` | `Function` | — | ✓ | Toggle function which accept tab ID as input | +| `children` | `any` | — | ✕ | Child component | +| `onSelectionChange` | `(id: TabId) => void` | — | ✕ | When the state of the selected panel changes | +| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | ### UncontrolledTabs #### API -| Name | Type | Default | Required | Description | -| -------------------- | ---------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | -| `defaultSelectedTab` | [`string` \| `number`] | — | ✓ | Identification of default selected tab | -| `children` | `any` | — | ✕ | Child component | -| `onSelectionChange` | `(id: TabId) => void` | — | ✕ | When the state of the selected panel changes | -| `spacing` | [`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| -------------------- | ----------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- | +| `defaultSelectedTab` | \[`string` \| `number`] | — | ✓ | Identification of default selected tab | +| `children` | `any` | — | ✕ | Child component | +| `onSelectionChange` | `(id: TabId) => void` | — | ✕ | When the state of the selected panel changes | +| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) between items | ### TabList @@ -122,10 +122,10 @@ Tab list item #### API -| Name | Type | Default | Required | Description | -| ------------ | ---------------------- | ------- | -------- | --------------------- | -| `forTabPane` | [`string` \| `number`] | — | ✓ | Identification of tab | -| `children` | `any` | — | ✕ | Child component | +| Name | Type | Default | Required | Description | +| ------------ | ----------------------- | ------- | -------- | --------------------- | +| `forTabPane` | \[`string` \| `number`] | — | ✓ | Identification of tab | +| `children` | `any` | — | ✕ | Child component | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -167,10 +167,10 @@ Tab content item #### API -| Name | Type | Default | Required | Description | -| ---------- | ---------------------- | ------- | -------- | --------------------- | -| `id` | [`string` \| `number`] | — | ✓ | Identification of tab | -| `children` | `any` | — | ✕ | Child component | +| Name | Type | Default | Required | Description | +| ---------- | ----------------------- | ------- | -------- | --------------------- | +| `id` | \[`string` \| `number`] | — | ✓ | Identification of tab | +| `children` | `any` | — | ✕ | Child component | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Text/README.md b/packages/web-react/src/components/Text/README.md index 5996a74789..1f013d350e 100644 --- a/packages/web-react/src/components/Text/README.md +++ b/packages/web-react/src/components/Text/README.md @@ -54,7 +54,7 @@ On top of the API options, the components accept [additional attributes][readme- If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Text classes are fabricated using `useTextStyleProps` hook. You can use it to create your own custom Text component. diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md index a7e764161d..1c09c3a67f 100644 --- a/packages/web-react/src/components/TextArea/README.md +++ b/packages/web-react/src/components/TextArea/README.md @@ -53,14 +53,14 @@ Example with Auto-Height Adjustment | `ref` | `ForwardedRef` | — | ✕ | Textarea element reference | | `rows` | `number` | — | ✕ | Number of visible rows | | `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text | | `value` | `string` | — | ✕ | Textarea value | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Text field classes are fabricated using `useTextAreaStyleProps` hook. You can use it to create your own custom TextArea component. diff --git a/packages/web-react/src/components/TextField/README.md b/packages/web-react/src/components/TextField/README.md index dc0f39882b..47ee583573 100644 --- a/packages/web-react/src/components/TextField/README.md +++ b/packages/web-react/src/components/TextField/README.md @@ -44,31 +44,31 @@ TextField with password toggle (button to reveal the password): ## API -| Name | Type | Default | Required | Description | -| ------------------- | --------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | -| `autoComplete` | `string` | — | ✕ | [Automated assistance in filling][autocomplete-attr] | -| `hasPasswordToggle` | `bool` | — | ✓ | If true, the `type` is set to `password` and a password toggle is shown | -| `helperText` | `string` | — | ✕ | Custom helper text | -| `id` | `string` | — | ✓ | Input and label identification | -| `inputWidth` | `number` | — | ✕ | Input width | -| `isDisabled` | `bool` | — | ✕ | Whether is field disabled | -| `isLabelHidden` | `bool` | — | ✕ | Whether is label hidden | -| `isRequired` | `bool` | — | ✕ | Whether is field required | -| `label` | `string` | — | ✓ | Label text | -| `name` | `string` | — | ✕ | Input name | -| `pattern` | `string` | — | ✕ | Defines regular expressions for allowed value types | -| `placeholder` | `string` | — | ✕ | Input placeholder | -| `ref` | `ForwardedRef` | — | ✕ | Input element reference | -| `type` | [`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | — | ✕ | Input type | -| `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text | -| `value` | `string` | — | ✕ | Input value | +| Name | Type | Default | Required | Description | +| ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | +| `autoComplete` | `string` | — | ✕ | [Automated assistance in filling][autocomplete-attr] | +| `hasPasswordToggle` | `bool` | — | ✓ | If true, the `type` is set to `password` and a password toggle is shown | +| `helperText` | `string` | — | ✕ | Custom helper text | +| `id` | `string` | — | ✓ | Input and label identification | +| `inputWidth` | `number` | — | ✕ | Input width | +| `isDisabled` | `bool` | — | ✕ | Whether is field disabled | +| `isLabelHidden` | `bool` | — | ✕ | Whether is label hidden | +| `isRequired` | `bool` | — | ✕ | Whether is field required | +| `label` | `string` | — | ✓ | Label text | +| `name` | `string` | — | ✕ | Input name | +| `pattern` | `string` | — | ✕ | Defines regular expressions for allowed value types | +| `placeholder` | `string` | — | ✕ | Input placeholder | +| `ref` | `ForwardedRef` | — | ✕ | Input element reference | +| `type` | \[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | — | ✕ | Input type | +| `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text | +| `value` | `string` | — | ✕ | Input value | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -## Custom component +## Custom Component Text field classes are fabricated using `useTextFieldStyleProps` hook. You can use it to create your own custom TextField component. diff --git a/packages/web-react/src/components/TextFieldBase/README.md b/packages/web-react/src/components/TextFieldBase/README.md index c59f78f5aa..510819750b 100644 --- a/packages/web-react/src/components/TextFieldBase/README.md +++ b/packages/web-react/src/components/TextFieldBase/README.md @@ -1,6 +1,6 @@ # TextFieldBase -This is React implementation of the abstract component TextFieldBase for the purposes of the form components [TextField] and [TextArea]. +This is React implementation of the abstract component TextFieldBase for the purposes of the form components [TextField][textfield] and [TextArea][textarea]. Basic example usage: @@ -41,25 +41,25 @@ TextFieldBase with password toggle (button to reveal the password): ## API -| Name | Type | Default | Required | Description | -| ------------------- | --------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | -| `autoComplete` | `string` | — | ✕ | [Automated assistance in filling][autocomplete-attr] | -| `hasPasswordToggle` | `bool` | — | ✕ | If true, the `type` is set to `password` and a password toggle is shown | -| `helperText` | `string` | — | ✕ | Custom helper text | -| `id` | `string` | — | ✓ | Input and label identification | -| `isDisabled` | `bool` | — | ✕ | Whether is field disabled | -| `isLabelHidden` | `bool` | — | ✕ | Whether is label hidden | -| `isMultiline` | `bool` | — | ✕ | Whether is DOM element `textarea` | -| `isRequired` | `bool` | — | ✕ | Whether is field required | -| `label` | `string` | — | ✕ | Label text | -| `name` | `string` | — | ✕ | Input name | -| `pattern` | `string` | — | ✕ | Defines regular expressions for allowed value types | -| `placeholder` | `string` | — | ✕ | Input placeholder | -| `ref` | `ForwardedRef` | — | ✕ | Field element reference | -| `type` | [`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | — | ✕ | Input type | -| `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state. | -| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text | -| `value` | `string` | — | ✕ | Input value | +| Name | Type | Default | Required | Description | +| ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- | +| `autoComplete` | `string` | — | ✕ | [Automated assistance in filling][autocomplete-attr] | +| `hasPasswordToggle` | `bool` | — | ✕ | If true, the `type` is set to `password` and a password toggle is shown | +| `helperText` | `string` | — | ✕ | Custom helper text | +| `id` | `string` | — | ✓ | Input and label identification | +| `isDisabled` | `bool` | — | ✕ | Whether is field disabled | +| `isLabelHidden` | `bool` | — | ✕ | Whether is label hidden | +| `isMultiline` | `bool` | — | ✕ | Whether is DOM element `textarea` | +| `isRequired` | `bool` | — | ✕ | Whether is field required | +| `label` | `string` | — | ✕ | Label text | +| `name` | `string` | — | ✕ | Input name | +| `pattern` | `string` | — | ✕ | Defines regular expressions for allowed value types | +| `placeholder` | `string` | — | ✕ | Input placeholder | +| `ref` | `ForwardedRef` | — | ✕ | Field element reference | +| `type` | \[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`] | — | ✕ | Input type | +| `validationState` | [Validation dictionary][dictionary-validation] | — | ✕ | Type of validation state. | +| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text | +| `value` | `string` | — | ✕ | Input value | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Toast/README.md b/packages/web-react/src/components/Toast/README.md index 1e22a8e200..1b36ea021b 100644 --- a/packages/web-react/src/components/Toast/README.md +++ b/packages/web-react/src/components/Toast/README.md @@ -134,11 +134,11 @@ items are dismissed. ### API -| Name | Type | Default | Required | Description | -| --------------- | ----------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------- | -| `alignmentX` | [[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | -| `alignmentY` | [`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | -| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | +| Name | Type | Default | Required | Description | +| --------------- | ------------------------------------------------------------ | -------- | -------- | ----------------------------------------------------------------- | +| `alignmentX` | \[[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | +| `alignmentY` | \[`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | +| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -281,16 +281,16 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a `onC ### API -| Name | Type | Default | Required | Description | -| --------------- | ----------------------------------------------------------- | ---------- | -------- | --------------------------------------------------- | -| `closeLabel` | `string` | `Close` | ✕ | Close label | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | ✕ | Color variant | -| `hasIcon` | `bool` | `false` \* | ✕ | If true, an icon is shown along the message | -| `iconName` | `string` | `info` \* | ✕ | Name of a custom icon to be shown along the message | -| `id` | `string` | — | ✓ | ToastBar ID | -| `isDismissible` | `bool` | `false` | ✕ | If true, ToastBar can be dismissed by user | -| `isOpen` | `bool` | `true` | ✕ | If true, ToastBar is visible | -| `onClose` | `function` | — | ✕ | Close button callback | +| Name | Type | Default | Required | Description | +| --------------- | ------------------------------------------------------------ | ---------- | -------- | --------------------------------------------------- | +| `closeLabel` | `string` | `Close` | ✕ | Close label | +| `color` | \[[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | ✕ | Color variant | +| `hasIcon` | `bool` | `false` \* | ✕ | If true, an icon is shown along the message | +| `iconName` | `string` | `info` \* | ✕ | Name of a custom icon to be shown along the message | +| `id` | `string` | — | ✓ | ToastBar ID | +| `isDismissible` | `bool` | `false` | ✕ | If true, ToastBar can be dismissed by user | +| `isOpen` | `bool` | `true` | ✕ | If true, ToastBar is visible | +| `onClose` | `function` | — | ✕ | Close button callback | (\*) For each emotion color, a default icon is defined. The icons come from the [Icon package][icon-package], or from your custom source of icons. @@ -325,7 +325,7 @@ const [isOpen, setIsOpen] = useState(false); import { ToastProvider, UncontrolledToast } from '@lmc-eu/spirit-web-react/components'; ``` -### Minimal props +### Minimal Props ```jsx const { show } = useToast(); // must be inside ToastProvider @@ -339,7 +339,7 @@ const { show } = useToast(); // must be inside ToastProvider ; ``` -### All possible props +### All Possible Props ```jsx const { show } = useToast(); // must be inside ToastProvider @@ -361,25 +361,31 @@ const { show } = useToast(); // must be inside ToastProvider ; ``` -### useToast hook + + + +### useToast Hook Hook that provides information on `UncontrolledToast` and functions for opening and closing. What is uncontrolled component you can find [here][react-uncontrolled] This hook returns: -| Name | Type | Default | Description | -| ---------- | ----------------------------------------------------------- | --------- | --------------------------------------------------- | -| `clear` | `() => void` | () => {} | Function that will clear toast queue | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | Color variant | -| `hide` | `(toastId) => void` | () => {} | Function that will hide UncontrolledToast | -| `iconName` | `string` | — | Name of a custom icon to be shown along the message | -| `id` | `string` | `''` | ToastBar ID | -| `isOpen` | `bool` | `false` | Open state of UncontrolledToast | -| `message` | [`string` \| `ReactNode`] | null | Message inside UncontrolledToast | -| `show` | `(message, toastId, options?) => void` | () => {} | Function that will show UncontrolledToast | +| Name | Type | Default | Description | +| ---------- | ------------------------------------------------------------ | --------- | --------------------------------------------------- | +| `clear` | `() => void` | () => {} | Function that will clear toast queue | +| `color` | \[[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | Color variant | +| `hide` | `(toastId) => void` | () => {} | Function that will hide UncontrolledToast | +| `iconName` | `string` | — | Name of a custom icon to be shown along the message | +| `id` | `string` | `''` | ToastBar ID | +| `isOpen` | `bool` | `false` | Open state of UncontrolledToast | +| `message` | \[`string` \| `ReactNode`] | null | Message inside UncontrolledToast | +| `show` | `(message, toastId, options?) => void` | () => {} | Function that will show UncontrolledToast | + + + -#### How to use `show` function: +#### How to Use `show` Function This function has two required parameters: message and ID. All other options are not required and can be omitted entirely. @@ -412,12 +418,12 @@ Read the section [Default Icons according to Color Variant](#default-icons-accor ### API -| Name | Type | Default | Required | Description | -| --------------- | ----------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------- | -| `alignmentX` | [[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | -| `alignmentY` | [`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | -| `closeLabel` | `string` | `Close` | ✕ | Close label | -| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | +| Name | Type | Default | Required | Description | +| --------------- | ------------------------------------------------------------ | -------- | -------- | ----------------------------------------------------------------- | +| `alignmentX` | \[[AlignmentX dictionary][dictionary-alignment] \| `object`] | `center` | ✕ | Horizontal alignment of the toast queue | +| `alignmentY` | \[`top` \| `bottom` \| `object`] | `bottom` | ✕ | Vertical alignment of the toast queue | +| `closeLabel` | `string` | `Close` | ✕ | Close label | +| `isCollapsible` | `bool` | `true` | ✕ | If true, Toast queue collapses if there are more than 3 ToastBars | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Tooltip/README.md b/packages/web-react/src/components/Tooltip/README.md index 6de7da70bb..600b966959 100644 --- a/packages/web-react/src/components/Tooltip/README.md +++ b/packages/web-react/src/components/Tooltip/README.md @@ -57,23 +57,23 @@ const [open, setOpen] = React.useState(false); ## API -| Attribute | Type | Default | Required | Description | -| ------------------------------- | ---------------------------------------------------------------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `children` | `ReactNode` | — | ✓ | Tooltip children's nodes - `TooltipTrigger` and `TooltipPopover` | -| `enableFlipping` | `bool` | true | ✕ | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`. | -| `enableFlippingCrossAxis` | `bool` | true | ✕ | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`. | -| `enableShifting` | `bool` | true | ✕ | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position. | -| `enableSizing` | `bool` | true | ✕ | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width. | -| `flipFallbackAxisSideDirection` | [`none` \| `start` \| `end`] | "none" | ✕ | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. | -| `flipFallbackPlacements` | `string` | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` | -| `id` | `string` | - | ✓ | Tooltip id | -| `isDismissible` | `bool` | false | ✕ | Make tooltip dismissible | -| `isOpen` | `bool` | - | ✓ | Open state | -| `onToggle` | `() => void` | - | ✓ | Function for toggle open state of dropdown | -| `placement` | [Placement Dictionary][dictionary-placement] | "bottom" | ✕ | Placement of tooltip | -| `positionStrategy` | [`absolute` \| `fixed`] ([Strategy type][use-floating-strategy]) | "absolute" | ✕ | This is the type of CSS position property to use. | -| `isFocusableOnHover` | `bool` | false | ✕ | Allows you to mouse over a tooltip without closing it. We suggest turning off the `click` trigger if you use this feature. | -| `trigger` | [`click` \| `hover` \| `manual`] | ["click", "hover" ] | ✕ | How tooltip is triggered: `click`, `hover`, `manual`. You may pass multiple triggers. If you pass `manual`, there will be no toggle functionality and you should provide your own toggle solution. | +| Attribute | Type | Default | Required | Description | +| ------------------------------- | ----------------------------------------------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `children` | `ReactNode` | — | ✓ | Tooltip children's nodes - `TooltipTrigger` and `TooltipPopover` | +| `enableFlipping` | `bool` | true | ✕ | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`. | +| `enableFlippingCrossAxis` | `bool` | true | ✕ | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`. | +| `enableShifting` | `bool` | true | ✕ | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position. | +| `enableSizing` | `bool` | true | ✕ | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width. | +| `flipFallbackAxisSideDirection` | \[`none` \| `start` \| `end`] | "none" | ✕ | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. | +| `flipFallbackPlacements` | `string` | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` | +| `id` | `string` | - | ✓ | Tooltip id | +| `isDismissible` | `bool` | false | ✕ | Make tooltip dismissible | +| `isOpen` | `bool` | - | ✓ | Open state | +| `onToggle` | `() => void` | - | ✓ | Function for toggle open state of dropdown | +| `placement` | [Placement Dictionary][dictionary-placement] | "bottom" | ✕ | Placement of tooltip | +| `positionStrategy` | \[`absolute` \| `fixed`] ([Strategy type][use-floating-strategy]) | "absolute" | ✕ | This is the type of CSS position property to use. | +| `isFocusableOnHover` | `bool` | false | ✕ | Allows you to mouse over a tooltip without closing it. We suggest turning off the `click` trigger if you use this feature. | +| `trigger` | \[`click` \| `hover` \| `manual`] | \["click", "hover" ] | ✕ | How tooltip is triggered: `click`, `hover`, `manual`. You may pass multiple triggers. If you pass `manual`, there will be no toggle functionality and you should provide your own toggle solution. | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/README.md b/packages/web-react/src/components/UNSTABLE_EmptyState/README.md index c27dae0216..582df20d9c 100644 --- a/packages/web-react/src/components/UNSTABLE_EmptyState/README.md +++ b/packages/web-react/src/components/UNSTABLE_EmptyState/README.md @@ -38,9 +38,6 @@ The `UNSTABLE_EmptyStateSection` component is a container for the content of eac The component is based on the [Stack][stack] component and accepts all its properties. For more information, see the [Stack component API][stack-api]. -[stack]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md -[stack-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md#api - ## Full Example ```jsx @@ -67,3 +64,6 @@ The component is based on the [Stack][stack] component and accepts all its prope ``` + +[stack]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md +[stack-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md#api diff --git a/packages/web-react/src/components/UNSTABLE_Slider/README.md b/packages/web-react/src/components/UNSTABLE_Slider/README.md index 4bcf46209d..e9a6f36b9b 100644 --- a/packages/web-react/src/components/UNSTABLE_Slider/README.md +++ b/packages/web-react/src/components/UNSTABLE_Slider/README.md @@ -5,7 +5,9 @@ Slider is a form control that allows users to select a value from a range of values. -## Basic usage +## UNSTABLE_Slider + +### Basic Usage The Slider component implements the HTML [range input][mdn-range] element. @@ -22,7 +24,7 @@ const handleChange = (event) => { ; ``` -### Slider Steps and Value +#### Slider Steps and Value You can specify the Slider steps and value range by setting the `min`, `max`, and `step` props. @@ -39,29 +41,29 @@ const handleChange = (event) => { ; ``` -## Required +### Required ℹ️ As per the [HTML specification][html-spec-range], the Slider component does not support the `required` state. -## Hidden Label +### Hidden Label ```jsx ``` -## Fluid Width +### Fluid Width ```jsx ``` -## Helper Text +### Helper Text ```jsx ``` -## Validation States +### Validation States Validation states implement the Validation state [dictionary][dictionary-validation]. @@ -92,13 +94,13 @@ Validation states implement the Validation state [dictionary][dictionary-validat /> ``` -## Disabled State +### Disabled State ```jsx ``` -### API +#### API | Attribute | Type | Default | Required | Description | | ----------------- | ---------------------------------------------- | ------- | -------- | --------------------------------------------------------- | @@ -113,16 +115,16 @@ Validation states implement the Validation state [dictionary][dictionary-validat | `onChange` | `() => void` | - | ✓ | On input change callback | | `step` | `number` | 1 | ✕ | Sets the stepping interval | | `validationState` | [Validation dictionary][dictionary-validation] | - | ✕ | Type of validation state | -| `validationText` | [`string` \| `string[]`] | - | ✕ | Validation text | +| `validationText` | \[`string` \| `string[]`] | - | ✕ | Validation text | | `value` | `number` | - | ✓ | Input value | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -# UNSTABLE UncontrolledSlider +## UNSTABLE UncontrolledSlider -## Basic usage +### Basic Usage ```jsx import UNSTABLE_UncontrolledSlider from '../UNSTABLE_UncontrolledSlider'; @@ -130,7 +132,7 @@ import UNSTABLE_UncontrolledSlider from '../UNSTABLE_UncontrolledSlider'; ; ``` -### API +#### API | Attribute | Type | Default | Required | Description | | ---------------- | ------------ | ------- | -------- | --------------------------------------------------------- | diff --git a/packages/web-react/src/components/VisuallyHidden/README.md b/packages/web-react/src/components/VisuallyHidden/README.md index cfc6c195e7..19315f09a7 100644 --- a/packages/web-react/src/components/VisuallyHidden/README.md +++ b/packages/web-react/src/components/VisuallyHidden/README.md @@ -2,6 +2,8 @@ The VisuallyHidden component helps improve web accessibility by rendering its content in a way that it's hidden visually but still accessible to screen readers. +## 🚀 Usage + ```jsx import { VisuallyHidden } from '@lmc-eu/spirit-web-react/components'; ```