From c8da7c799d37a9216a5550a582b24563f88126bc Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 11 Dec 2024 14:31:18 +0100 Subject: [PATCH] Style(web-react): Fix docs using makrdown linter refs #DS-1100 --- .remarkignore | 3 +- .remarkrc.mjs | 6 ++ packages/web-react/CONTRIBUTING.md | 4 +- packages/web-react/DEPRECATIONS.md | 3 + packages/web-react/README.md | 11 ++- .../src/components/Accordion/README.md | 54 ++++++------- .../web-react/src/components/Alert/README.md | 2 +- .../src/components/Breadcrumbs/README.md | 4 +- .../web-react/src/components/Button/README.md | 4 +- .../src/components/ButtonLink/README.md | 2 +- .../src/components/Checkbox/README.md | 2 +- .../src/components/Collapse/README.md | 22 +++--- .../src/components/Dropdown/README.md | 50 ++++++------ .../web-react/src/components/Field/README.md | 12 +-- .../src/components/FieldGroup/README.md | 2 +- .../src/components/FileUploader/README.md | 18 ++--- .../web-react/src/components/Flex/README.md | 2 +- .../web-react/src/components/Grid/README.md | 34 ++++----- .../web-react/src/components/Header/README.md | 8 +- .../src/components/Heading/README.md | 2 +- .../web-react/src/components/Icon/README.md | 2 +- .../web-react/src/components/Item/README.md | 16 ++-- .../web-react/src/components/Link/README.md | 4 +- .../web-react/src/components/Modal/README.md | 18 ++--- .../web-react/src/components/NoSsr/README.md | 2 + .../src/components/Pagination/README.md | 30 ++++---- .../src/components/PartnerLogo/README.md | 2 +- .../web-react/src/components/Pill/README.md | 8 +- .../web-react/src/components/Radio/README.md | 2 +- .../src/components/ScrollView/README.md | 12 +-- .../web-react/src/components/Select/README.md | 4 +- .../web-react/src/components/Stack/README.md | 16 ++-- .../web-react/src/components/Tabs/README.md | 42 +++++----- .../web-react/src/components/Text/README.md | 2 +- .../src/components/TextArea/README.md | 4 +- .../src/components/TextField/README.md | 40 +++++----- .../src/components/TextFieldBase/README.md | 40 +++++----- .../web-react/src/components/Toast/README.md | 76 ++++++++++--------- .../src/components/Tooltip/README.md | 34 ++++----- .../components/UNSTABLE_EmptyState/README.md | 6 +- .../src/components/UNSTABLE_Slider/README.md | 28 +++---- .../src/components/VisuallyHidden/README.md | 2 + 42 files changed, 330 insertions(+), 305 deletions(-) diff --git a/.remarkignore b/.remarkignore index 4232226f56..52fe95b830 100644 --- a/.remarkignore +++ b/.remarkignore @@ -11,4 +11,5 @@ build docs form-validations web-twig -web-react +# Codemods transforms directory +transforms diff --git a/.remarkrc.mjs b/.remarkrc.mjs index 826b826a8d..73942cc66f 100644 --- a/.remarkrc.mjs +++ b/.remarkrc.mjs @@ -48,8 +48,14 @@ export default { 'v1', 'v2', 'v3', + 'v4', + 'vs', ], }, ], + + // Maximum length of the titles + // @see: https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-maximum-heading-length + ['remark-lint-maximum-heading-length', 120], ], }; diff --git a/packages/web-react/CONTRIBUTING.md b/packages/web-react/CONTRIBUTING.md index 569bc9f2b4..6cebd6b708 100644 --- a/packages/web-react/CONTRIBUTING.md +++ b/packages/web-react/CONTRIBUTING.md @@ -2,7 +2,7 @@ > Guide for Spirit Web React contributors. -## Adding new component +## Adding New Component Do not forget to export and register new component in all necessary places. @@ -13,7 +13,7 @@ Do not forget to export and register new component in all necessary places. This is an example of a typical file structure of a component: -``` +```text ├── src └── components ├── index.ts — components root diff --git a/packages/web-react/DEPRECATIONS.md b/packages/web-react/DEPRECATIONS.md index 8d04729678..02c3208cd7 100644 --- a/packages/web-react/DEPRECATIONS.md +++ b/packages/web-react/DEPRECATIONS.md @@ -8,6 +8,9 @@ This document lists all deprecations that will be removed in the next major vers 👉 [What are deprecations?][readme-deprecations] + + + ### UncontrolledCollapse `isDisposable` The `hideOnCollapse` prop was removed, please use `isDisposable` instead. diff --git a/packages/web-react/README.md b/packages/web-react/README.md index e3d9ca3c35..a9f8dcc880 100644 --- a/packages/web-react/README.md +++ b/packages/web-react/README.md @@ -1,3 +1,6 @@ + + + # @lmc-eu/spirit-web-react [![minified](https://badgen.net/bundlephobia/min/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react) @@ -41,7 +44,7 @@ Import React components in your app: import { Button } from '@lmc-eu/spirit-web-react/components/Button'; ``` -### Prefixing CSS classes in components +### Prefixing CSS Classes in Components If you want to prefix the component classes with your own namespace, you can use the `ClassNamePrefixProvider` context to provide a prefix to all components in your app. @@ -124,7 +127,7 @@ are doing so at your own risk. Please consult additional styling with [web package documentation][web-pkg-rebrand]. -## Controlled vs Uncontrolled components +## Controlled vs Uncontrolled Components - A [Controlled Component][react-controlled] is one that takes its current value through props and notifies changes through callbacks like onChange. @@ -150,7 +153,7 @@ Check your browser console to see if you are using any of the deprecated functio 👉 [See the DEPRECATIONS file][all-deprecations] for the list of all deprecations. -### Warnings in environments +### Warnings in Environments #### Production @@ -180,7 +183,7 @@ afterEach(() => { ## Examples -👀 See [examples] for a live demo. +👀 See [examples][examples] for a live demo. ## License diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index 19bcf6fab6..6136d8e232 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/packages/web-react/src/components/Accordion/README.md @@ -2,7 +2,7 @@ ## Usage -### Default (Stay open) +### Default (Stay Open) ```javascript import React, { useState } from 'react'; @@ -10,7 +10,7 @@ import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from '@lm import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -``` +```typescript const [openState, setOpenState] = useState(undefined); ``` @@ -52,19 +52,19 @@ const toggle = (id) => { ``` -### Default with opened on init +### Default with Opened on Init -``` +```typescript const [openState, setOpenState] = useState(['accordion-item-example-1']); ``` -### Open only one at a time +### Open Only One at a Time -``` +```typescript const [openState, setOpenState] = useState(''); ``` -### Uncontrolled Accordion (Stay open) +### Uncontrolled Accordion (Stay Open) ```javascript import { @@ -89,7 +89,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with default open value (Stay open) +### Uncontrolled Accordion with Default Open Value (Stay Open) ```javascript @@ -104,7 +104,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with open only one at a time +### Uncontrolled Accordion with Open Only One at a Time ```javascript @@ -119,7 +119,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with open only one at a time and default open value +### Uncontrolled Accordion with Open Only One at a Time and Default Open Value ```javascript @@ -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/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 4144579b67..270ade11d1 100644 --- a/packages/web-react/src/components/Alert/README.md +++ b/packages/web-react/src/components/Alert/README.md @@ -15,7 +15,7 @@ import { Alert } from '@lmc-eu/spirit-web-react/components'; Hey! Pay attention! ``` -## Default Icons according to Color Variant +## Default Icons According to Color Variant | Color name | Icon name | | ------------- | ------------- | diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 05299b3734..dc31c03860 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -37,7 +37,7 @@ Simply pass the breadcrumbs array as a prop: ``` -### Custom usage +### Custom Usage Use custom content for the ordered list as component's children instead of passing breadcrumb items array via props: @@ -97,7 +97,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]. -### Dealing with long titles +### Dealing with Long Titles When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers. There are multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, e.g. `str.slice(0, num) + '…'`. diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md index 963e803691..4a8756a464 100644 --- a/packages/web-react/src/components/Button/README.md +++ b/packages/web-react/src/components/Button/README.md @@ -2,7 +2,7 @@ This is React implementation of the [Button][button]. -### Basic example usage +## Basic Example Usage ```jsx import { Button } from '@lmc-eu/spirit-web-react'; @@ -19,7 +19,7 @@ import { Button } from '@lmc-eu/spirit-web-react'; ``` -### Example usage with third-party component +### Example Usage with Third-Party Component So if you use a third-party component, the Button will take on all of its proper attributes. diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md index 2875b264fc..977aa4c88d 100644 --- a/packages/web-react/src/components/ButtonLink/README.md +++ b/packages/web-react/src/components/ButtonLink/README.md @@ -1,6 +1,6 @@ # ButtonLink -### Basic example usage +## Basic Example Usage ```jsx import { ButtonLink } from '@lmc-eu/spirit-web-react'; 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..0dbf27f5d0 100644 --- a/packages/web-react/src/components/Collapse/README.md +++ b/packages/web-react/src/components/Collapse/README.md @@ -20,7 +20,7 @@ const [isOpen, toggle] = useState(true); ``` -### With toggle from hook +### With Toggle From Hook ```javascript import React, { useState} from 'react'; @@ -38,7 +38,7 @@ const { isOpen, toggle } = useCollapse(false); ``` -### With toggle handler from hook +### With Toggle Handler From Hook ```javascript import React, { useState} from 'react'; @@ -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..3a7b033c8e 100644 --- a/packages/web-react/src/components/Dropdown/README.md +++ b/packages/web-react/src/components/Dropdown/README.md @@ -35,7 +35,7 @@ const onToggle = () => setIsOpen(!isOpen); ; ``` -### Uncontrolled dropdown +### Uncontrolled Dropdown ```jsx import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components'; @@ -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`][dropdown-fullwidth-mode] | `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,20 +89,20 @@ 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`][dropdown-fullwidth-mode] | `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] and [escape hatches][readme-escape-hatches]. [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement -[dropdownfullwidthmode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19 +[dropdown-fullwidth-mode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches 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 f798aa8fe5..0de8b522f1 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -66,7 +66,7 @@ const { fileQueue, addToQueue, clearQueue, onDismiss } = useFileQueue(); ; ``` -### List with image previews +### List with Image Previews ```javascript ``` -### Input behavior when the queue is filled +### Input Behavior When the Queue Is Filled FileUploaderInput will disappear or disable after reaching the limit for files in the queue. @@ -298,7 +298,7 @@ const resetStateHandler = () => { ; ``` -### Passing additional metadata +### Passing Additional Metadata When you need to send additional data along with the image you can do it with the `meta` argument on `addToQueue` and `updateQueue` callbacks. If any data in `meta` option will be present, the FileUploader adds an additional hidden input with JSON stringified data to the form. @@ -326,7 +326,7 @@ const customUpdate = (_event: MouseEvent, file: File) => { // … ``` -#### Updating Image Preview with cropped image +#### Updating Image Preview with Cropped Image When you are using FileUploader with some kind of image cropper you want to also update the image preview on FileUploaderAttachment when image changes. You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, cropWidth: number, cropHeight: number, originalWidth: number, originalHeight: number }`) to the `meta` argument. @@ -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/Flex/README.md b/packages/web-react/src/components/Flex/README.md index 7a3ca3aa7f..426db17ff5 100644 --- a/packages/web-react/src/components/Flex/README.md +++ b/packages/web-react/src/components/Flex/README.md @@ -174,7 +174,7 @@ If you need more control over the styling of a component, you can use [style pro and [escape hatches][readme-escape-hatches]. [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment -[dictionary-direction]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction +[direction-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction [mdn-display-flex]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout [mdn-display-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index b137b932fa..00d3b1036f 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/packages/web-react/src/components/Grid/README.md @@ -95,15 +95,15 @@ Responsive horizontal and vertical alignment: ## API -| Name | Type | Default | Required | Description | -| ------------- | ------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| `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 }` | -| `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 | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `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 }` | +| `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 | 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] @@ -144,7 +144,7 @@ Basic example usage: ``` -### Responsive example usage: +### Responsive Example Usage Pass an object to props to set different values for different breakpoints. The values will be applied from mobile to desktop and if not set for a breakpoint, the value from the @@ -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 0c2ba11f8a..b3b54a7ebe 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/Icon/README.md b/packages/web-react/src/components/Icon/README.md index f7052f2724..697c1d5d9c 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -2,7 +2,7 @@ Icons are graphical metaphors or symbols that can be used to complement existing experiences. -## 🚀 Getting started +## 🚀 Getting Started To use this component in your project you need to run the following command using [npm][npm]: diff --git a/packages/web-react/src/components/Item/README.md b/packages/web-react/src/components/Item/README.md index 2ac843ca86..e54dc2ddb3 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 d58091f4fd..d00a76c209 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 2d8409e711..3ef79c410f 100644 --- a/packages/web-react/src/components/Pagination/README.md +++ b/packages/web-react/src/components/Pagination/README.md @@ -1,6 +1,6 @@ # Pagination -## Example with the current item in the first place +## Example with the Current Item in the First Place ```jsx @@ -17,7 +17,7 @@ ``` -## Example with the current item in the middle +## Example with the Current Item in the Middle ```jsx @@ -41,7 +41,7 @@ ``` -## Example with the current item in the last place +## Example with the Current Item in the Last Place ```jsx @@ -58,7 +58,7 @@ ``` -## Example with the first current item, centered +## Example with the First Current Item, Centered ```jsx @@ -87,7 +87,7 @@ /> ``` -## Pagination props +## Pagination Props | Name | Type | Default | Required | Description | | ----------- | ------------------------- | ------- | -------- | -------------------------------------------------- | @@ -100,7 +100,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]. -## PaginationItem props +## PaginationItem Props | Name | Type | Default | Required | Description | | ---------- | ----------- | ------- | -------- | ------------------- | @@ -112,7 +112,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]. -## PaginationLink props +## PaginationLink Props | Name | Type | Default | Required | Description | | -------------------- | ------------- | ------- | -------- | -------------------------------------- | @@ -125,20 +125,20 @@ 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]. -## PaginationButtonLink props +## PaginationButtonLink Props 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] and [escape hatches][readme-escape-hatches]. -## PaginationLinkPrevious props +## PaginationLinkPrevious Props This component extends the `PaginationButtonLink` component. @@ -150,7 +150,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]. -## PaginationLinkNext props +## PaginationLinkNext Props This component extends the `PaginationButtonLink` component. @@ -162,7 +162,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]. -## UncontrolledPagination props +## UncontrolledPagination Props | Name | Type | Default | Required | Description | | ---------------------------- | ------------------------------ | ---------- | -------- | ------------------------------------------------------------------- | 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 3cdf69339a..fd7f15bf12 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] @@ -58,7 +58,7 @@ and [escape hatches][readme-escape-hatches]. This component uses the `Icon` component internally. To ensure correct rendering, please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions. -## 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 523bf1d88a..5affb2ee81 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 fcdb38a08c..2ba732cbcf 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'; ```