### Install dependencies and start Storybook Source: https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md Commands to install dependencies, build the project, and start the development server. ```bash yarn install yarn build yarn develop ``` -------------------------------- ### Install Strapi UI Primitives Source: https://github.com/strapi/design-system/blob/main/packages/primitives/README.md Install the @strapi/ui-primitives package using either Yarn or npm. ```shell yarn add @strapi/ui-primitives ``` ```shell npm i @strapi/ui-primitives ``` -------------------------------- ### Install Strapi Design System dependencies Source: https://github.com/strapi/design-system/blob/main/README.md Use these commands to install the required peer dependencies and the design system package. ```sh $ yarn add react react-dom @strapi/design-system @strapi/icons styled-components # or $ npm i react react-dom @strapi/design-system @strapi/icons styled-components ``` -------------------------------- ### Base Status Example Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Status.mdx A basic example of how to implement the Status component. Ensure clear and concise wording for the status message. ```javascript Status message ``` -------------------------------- ### Basic Select Usage Source: https://github.com/strapi/design-system/blob/main/packages/primitives/README.md Illustrates the fundamental setup for a Select component. Remember to import required components. ```jsx import { Select } from '@strapi/ui-primitives'; () => { return ( Option 1 ); }; ``` -------------------------------- ### Configure DesignSystemProvider Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/DesignSystemProvider.mdx Example of wrapping an application with the provider, specifying optional locale and theme props. ```tsx import { DesignSystemProvider, lightTheme } from '@strapi/design-system'; const MyApp = () => ( ); ``` -------------------------------- ### Install Strapi Design System Source: https://github.com/strapi/design-system/blob/main/docs/stories/00-getting started/welcome.mdx Use yarn, npm, or pnpm to add the necessary packages for the Strapi Design System. ```sh $ yarn add react react-dom @strapi/design-system @strapi/icons styled-components ``` ```sh $ npm i react react-dom @strapi/design-system @strapi/icons styled-components ``` ```sh $ pnpm add react react-dom @strapi/design-system @strapi/icons styled-components ``` -------------------------------- ### Handle pre-release mode error Source: https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md Example of an error message encountered when attempting to enter pre-release mode while already in it. ```shell `changeset pre enter` cannot be run when in pre mode ``` -------------------------------- ### Usage Pattern for Select Primitive Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/overview.mdx Demonstrates the basic structure and usage of the Select primitive for dropdown selection. Ensure the '@strapi/ui-primitives' package is installed. ```tsx import { Select } from '@strapi/ui-primitives'; // Primitives provide the structure and behavior Option 1 Option 2 ; ``` -------------------------------- ### Import ProgressBar Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/ProgressBar.mdx Import the ProgressBar component from the design system. This is a common setup step for using the component. ```javascript import { ProgressBar } from '@strapi/design-system'; ``` -------------------------------- ### Import Combobox Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Combobox.mdx Import the Combobox component from the UI primitives package. This is a common setup step for using the component. ```ts import { Combobox } from '@strapi/ui-primitives'; ``` -------------------------------- ### Initialize Strapi Design System Provider Source: https://github.com/strapi/design-system/blob/main/docs/stories/00-getting started/welcome.mdx Wrap your application with DesignSystemProvider, optionally providing a theme and locale. Defaults are available if not specified. ```jsx import { DesignSystemProvider, lightTheme } from '@strapi/design-system'; function MyApp({ children }) { return ( {children} ); } export default App; ``` -------------------------------- ### SVG ClipPath Removal Source: https://github.com/strapi/design-system/blob/main/docs/stories/01-foundations/icons/overview.mdx Example showing the removal of unnecessary clipPath elements from an SVG. ```xml // Before // After ``` -------------------------------- ### Basic Menu Structure with Menu.Root Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/SimpleMenu.mdx Demonstrates the basic structure of a menu using the Menu.Root, Menu.Trigger, and Menu.Content components. ```jsx import { Menu } from '@strapi/design-system'; const MyMenu = () => { return ( Actions console.log('opening')}>Open console.log('cloning')}> Clone console.log('editing')}>Edit console.log('delete')}> Delete ); }; ``` -------------------------------- ### Import SimpleMenu and MenuItem Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/SimpleMenu.mdx Import the necessary components for creating menus. ```javascript import { SimpleMenu, MenuItem } from '@strapi/design-system'; ``` -------------------------------- ### Clone the repository Source: https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md Commands to clone the repository and navigate to the project directory. ```bash git clone git@github.com:YOUR_USERNAME/design-system.git cd design-system ``` -------------------------------- ### Combobox List Autocomplete Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Combobox.mdx Configures the Combobox to filter options by matching the starting characters of the input. This is the default behavior for list autocomplete. ```tsx ``` -------------------------------- ### Dialog Component Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Dialog.mdx Demonstrates the basic import and usage of the Dialog component. ```APIDOC ## Dialog Component ### Description A dialog that interrupts the user with important content and expects a response. Typically, you would prefer the [Modal](../?path=/docs/components-modal--docs) component to interact with users. ### Usage ```js import { Dialog } from '@strapi/design-system'; ``` ### Variants #### ReactNode as Children Most use-cases you'd only need to provide a `string` as the `child` of `Dialog.Body`. But if you need to create a more complex dialog then you can provide a `ReactNode` as the `child` of `Dialog.Body`. If you do this, you should use the `Dialog.Description` component to wrap the text of your dialog content. ### Accessibility Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog). ### Props #### Trigger The `Trigger` component permanently has the `asChild` prop meaning it will always render the child merging the props & behaviour of the component. #### Content #### Header #### Body This component is not mandatory to use, but does have inbuilt styles for the recommended padding around the content. #### Description If you provide something other than a `string` as the `child` of `Dialog.Body` you should use this component. Otherwise, it's not required & we use it internally for said `child`. #### Footer #### Action Use this to wrap the buttons that act as confirmations of the dialog. It permanently has the `asChild` prop meaning it will always render the child merging the props & behaviour of the component. #### Cancel Use this to wrap the buttons that act as the cancelling of the dialog action. It permanently has the `asChild` prop meaning it will always render the child merging the props & behaviour of the component. ``` -------------------------------- ### Avatar Fallback with Zero Delay Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Avatar.mdx Configures the avatar to show a fallback immediately when the image fails to load by setting `delayMs` to 0. This example intentionally omits the `src` prop. ```javascript import { Avatar } from '@strapi/design-system'; // ... ``` -------------------------------- ### Import EmptyStateLayout Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/EmptyStateLayout.mdx Import the EmptyStateLayout component from the '@strapi/design-system' package. ```javascript import { EmptyStateLayout } from '@strapi/design-system'; ``` -------------------------------- ### Avatar Grouping Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Avatar.mdx Displays avatars in a group, positioning them closer together while maintaining individual interactions. No specific props are shown for grouping in this example, implying it's handled by the component's structure or parent element. ```javascript import { Avatar } from '@strapi/design-system'; // ... ``` -------------------------------- ### Import Pagination Components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Pagination.mdx Import necessary components for pagination from the Strapi Design System. ```javascript import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system'; ``` -------------------------------- ### Basic Combobox Usage Source: https://github.com/strapi/design-system/blob/main/packages/primitives/README.md Demonstrates the basic structure for implementing a Combobox component. Ensure necessary imports are included. ```jsx import { Combobox } from '@strapi/ui-primitives'; () => { return ( Option 1 No value found Create a new value ); }; ``` -------------------------------- ### Import Searchbar components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Searchbar.mdx Import the Searchbar and SearchForm components from the @strapi/design-system package. ```js import { Searchbar, SearchForm } from '@strapi/design-system'; ``` -------------------------------- ### Import Color Documentation Components Source: https://github.com/strapi/design-system/blob/main/docs/stories/01-foundations/color.mdx Imports the Meta and ColorCards components for rendering the color foundation documentation page. ```javascript import { Meta } from '@storybook/addon-docs/blocks'; import { ColorCards } from '../../components/ColorCards'; ``` -------------------------------- ### Link Design System with Yalc Source: https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md Steps to publish and add the design system package to a local Strapi monorepo using yalc. ```shell cd packages/design-system # this could be icons too if you preferred. yalc publish cd ../../your-strapi-repo yalc add @strapi/design-system --pure ``` -------------------------------- ### Pagination Component - Base Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Pagination.mdx Demonstrates the basic implementation of the Pagination component. ```APIDOC ## Pagination Component ### Description The Pagination component is used to navigate multipage content. ### Imports ```js import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system'; ``` ### Usage ```jsx Previous 1 2 3 10 Next page ``` ``` -------------------------------- ### Combobox Component Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Combobox.mdx Overview of how to implement the Combobox component and its sub-components. ```APIDOC ## Combobox Component ### Description The Combobox component displays a list of options for the user to pick from, triggered by an input or button. It supports filtering via autocomplete modes such as 'list' (startsWith, contains) and 'both'. ### Anatomy - **Combobox.Root**: The main wrapper component. - **Combobox.Trigger**: The trigger element for the dropdown. - **Combobox.TextInput**: The input field for filtering. - **Combobox.Icon**: The icon indicator. - **Combobox.Portal**: Renders the content in a portal. - **Combobox.Content**: The dropdown container. - **Combobox.Viewport**: The scrollable area for items. - **Combobox.Item**: An individual selectable option. - **Combobox.ItemText**: The text label for an item. - **Combobox.ItemIndicator**: The indicator for selected items. - **Combobox.NoValueFound**: Displayed when no options match the filter. - **Combobox.CreateItem**: Used for custom value creation logic. ### Implementation Example ```tsx Option 1 No value found Create a new value ``` ``` -------------------------------- ### Replace ThemeProvider with DesignSystemProvider Source: https://github.com/strapi/design-system/blob/main/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx Update imports to use DesignSystemProvider instead of the deprecated ThemeProvider. ```diff - import { ThemeProvider } from '@strapi/design-system'; + import { DesignSystemProvider } from '@strapi/design-system'; ``` -------------------------------- ### Grid Component Documentation Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Grid.mdx Overview of the Grid component, its baseline system, and implementation details. ```APIDOC ## Grid Component ### Description A grid system that helps content follow a logical order and increases readability. It extends the `` component and supports all Box props. ### Baseline Convention - Base font size: 14px/0.875rem - Baseline: 4px (derived from 8px x-height) - Alignment: Objects should align on an 8px grid, with 4px used for fine-tuning. ### Imports ```js import { Grid } from '@strapi/design-system'; ``` ### Props The Grid component inherits all props from the [Box component](https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base). ``` -------------------------------- ### Select Component Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Select.mdx Overview of the Select component anatomy and implementation structure. ```APIDOC ## Select Component ### Description The Select component displays a list of options for the user to pick from. It supports single selection, multiple selection, and nested items, and can be filtered by typing. ### Anatomy The component is composed of the following sub-components: - Select.Root - Select.Trigger - Select.Value - Select.Icon - Select.Portal - Select.Content - Select.Viewport - Select.Item - Select.ItemText - Select.ItemIndicator ### Implementation Example ```tsx Option 1 ``` ``` -------------------------------- ### Import RawTable components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/RawTable.mdx Import the required table components from the @strapi/design-system package. ```js import { RawTable, RawTh, RawTd, RawTr, RawThead, RawTbody } from '@strapi/design-system'; ``` -------------------------------- ### Base Card Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Card.mdx Demonstrates the standard implementation of the Card component with various elements. ```javascript ``` -------------------------------- ### TimePicker Overview and Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/TimePicker.mdx Provides an overview of the TimePicker component, its ARIA pattern, and basic import instructions. ```APIDOC ## Overview A `TimePicker` is used to select a specific time. The input is modelled around the [`Combobox`](../?path=/docs/inputs-combobox--docs) ARIA pattern with a `listbox` option menu that can be navigated with your keyboard. The returned value is a `string` _not_ a `Date`. ## Usage ```js import { TimePicker } from '@strapi/design-system'; ``` ``` -------------------------------- ### Import Select Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Select.mdx Import the Select component from the @strapi/ui-primitives package. ```ts import { Select } from '@strapi/ui-primitives'; ``` -------------------------------- ### Import DateTimePicker Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/DateTimePicker.mdx Import the component from the design system package to begin using it in your application. ```js import { DateTimePicker } from '@strapi/design-system/DateTimePicker'; ``` -------------------------------- ### Import Badge Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Badge.mdx Import the Badge component from the @strapi/design-system package. ```js import { Badge } from '@strapi/design-system'; ``` -------------------------------- ### Basic Pagination Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Pagination.mdx This snippet shows the basic structure for using the Pagination component. Ensure all required sub-components are imported. ```jsx Previous 1 2 Next page ``` -------------------------------- ### Import Link Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Link.mdx Import the Link component from the '@strapi/design-system' package. ```javascript import { Link } from '@strapi/design-system'; ``` -------------------------------- ### Import Select Components Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/Select.mdx Import necessary components for single and multiple select functionalities from the design system. ```javascript import { SingleSelect, SingleSelectOption, MultiSelect, MultiSelectOption, MultiSelectNested, } from '@strapi/design-system'; ``` -------------------------------- ### Import Tooltip Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Tooltip.mdx Import the Tooltip component from the '@strapi/design-system' package. This is a prerequisite for using the Tooltip in your application. ```javascript import { Tooltip } from '@strapi/design-system'; ``` -------------------------------- ### Card with Asset Icon Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Card.mdx Illustrates replacing the default image asset in a Card with an icon. ```javascript ``` -------------------------------- ### Import IconButton and IconButtonGroup Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/IconButton.mdx Import the necessary components for using IconButtons and IconButtonGroups. Ensure these components are available in your project. ```javascript import { IconButton, IconButtonGroup } from '@strapi/design-system'; ``` -------------------------------- ### Using a Symbol Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/01-foundations/icons/Symbols.mdx Import and render a Symbol component, setting its width. Ensure the correct symbol is imported from '@strapi/icons/symbol'. ```tsx import { SYMBOL_NAME } from '@strapi/icons/symbol'; const MyComponent = () => { return ; }; ``` -------------------------------- ### Box Component Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Box.mdx Documentation on how to import and use the Box component for layout containers. ```APIDOC ## Box Component ### Description The Box component allows creation of containers according to the guidelines of the Strapi design system, supporting properties such as border-radius, shadows, background-color, padding, and border. ### Imports ```js import { Box } from '@strapi/design-system'; ``` ### Responsive Styles Responsive styles allow specifying different values for properties based on breakpoints: initial (0px), small (520px), medium (768px), and large (1080px). Values are defined as an object or array. ### Logical Properties The component supports logical properties including `paddingBlock`, `paddingInline`, `marginBlock`, and `marginInline`. ``` -------------------------------- ### Tooltip Component Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Tooltip.mdx Documentation for importing and using the Tooltip component within the Strapi Design System. ```APIDOC ## Tooltip Component ### Description Tooltips are popovers that display additional, non-critical information when an element receives focus or is hovered. ### Usage ```js import { Tooltip } from '@strapi/design-system'; ``` ### Props - **children** (ReactNode) - The element that triggers the tooltip. - **label** (string) - The content to display inside the tooltip. - **side** ('top' | 'right' | 'bottom' | 'left') - The side of the trigger where the tooltip appears. Default: 'top'. - **align** ('start' | 'center' | 'end') - The alignment of the tooltip relative to the trigger. Default: 'center'. ### Positioning Use a combination of `align` and `side` to dictate the position. The component automatically adjusts to avoid viewport collisions. ``` -------------------------------- ### Import Accordion Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Accordion.mdx Import the Accordion component from the '@strapi/design-system' package for use in your project. ```javascript import { Accordion } from '@strapi/design-system'; ``` -------------------------------- ### Import Flex Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Flex.mdx Import the Flex component from the '@strapi/design-system' package for use in your application. ```javascript import { Flex } from '@strapi/design-system'; ``` -------------------------------- ### Import Modal Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Modal.mdx Import the Modal component from the Strapi Design System library. This is a prerequisite for using the component. ```javascript import { Modal } from '@strapi/design-system'; ``` -------------------------------- ### IconButton Button Groups Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/IconButton.mdx Demonstrates how to group multiple IconButtons together. ```APIDOC ## Button Groups ``` -------------------------------- ### Import LinkButton Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/LinkButton.mdx Import the LinkButton component from the '@strapi/design-system' package. This is a prerequisite for using the component. ```javascript import { LinkButton } from '@strapi/design-system'; ``` -------------------------------- ### Import Avatar Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Avatar.mdx Import the Avatar component from the '@strapi/design-system' package. This is a prerequisite for using the component. ```javascript import { Avatar } from '@strapi/design-system'; ``` -------------------------------- ### Import CarouselInput components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Carousel.mdx Import the necessary components from the @strapi/design-system package to use the CarouselInput functionality. ```js import { CarouselInput, CarouselSlide, CarouselImage, CarouselActions } from '@strapi/design-system'; ``` -------------------------------- ### Apply responsive object prop Source: https://github.com/strapi/design-system/blob/main/docs/stories/01-foundations/responsive.mdx Maps specific breakpoint keys to values for responsive styling. ```tsx ``` -------------------------------- ### Card without Asset Action or Timer Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Card.mdx Demonstrates a Card configuration omitting both the action and timer elements. ```javascript ``` -------------------------------- ### Import DesignSystemProvider Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/DesignSystemProvider.mdx Basic import statement for the DesignSystemProvider component. ```tsx import { DesignSystemProvider } from '@strapi/design-system'; ``` -------------------------------- ### Combobox Basic Usage Source: https://github.com/strapi/design-system/blob/main/docs/stories/02-primitives/Combobox.mdx Demonstrates the basic usage of the Combobox component for single item selection. ```tsx ``` -------------------------------- ### Use Custom Links with SimpleMenu Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/SimpleMenu.mdx Integrate SimpleMenu with routing libraries like react-router-dom or nextjs by using the 'as' prop with their Link components. ```jsx import { SimpleMenu, MenuItem } from '@strapi/design-system'; import { NavLink } from 'react-router-dom'; // or import { Link } from 'next/link' const MyMenu = () => { return ( Home Accounts Billing Provider ); }; ``` -------------------------------- ### TimePicker Variants Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/TimePicker.mdx Demonstrates various ways to use the TimePicker component, including basic usage, disabled state, size options, custom step intervals, and integration with the Field component. ```APIDOC ## Variants ### Basic Usage By default, the TimePicker is uncontrolled & has "steps" of 15 minute intervals. ### Disabled ### Size There are two options for sizes, `"S"` or `"M"`, the default is `"M"`. ### Changing the option steps The pre-determined list of options for the Time Picker can be modified by changing the `step` parameter. ### TimePicker field TimePicker wrapped with [`Field`](../?path=/docs/components-field--docs) component to create a powerful complete form input ``` -------------------------------- ### TextInput Component Overview Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/TextInput.mdx Provides an overview of the TextInput component, its purpose, and related components like TextArea. ```APIDOC ## TextInput Component ### Description TextInputs are inputs that allow users to add or edit text. They support several text formats including numbers. If a single line is not enough for the amount of text required, use [`TextArea`](../?path=/docs/inputs-textarea--docs) component. ### Usage ```js import { TextInput } from '@strapi/design-system'; ``` ### Variants - **Base**: Standard text input. - **Passwords**: TextInputs for passwords with an option to reveal the content. - **Disabled**: Disabled state of the TextInput. - **Size**: Supports sizes "S" or "M", with "M" as the default. - **WithField**: TextInput wrapped with the [`Field`](../?path=/docs/components-field--docs) component. ### Props ``` -------------------------------- ### DesignSystemProvider API Reference Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/DesignSystemProvider.mdx API details for the DesignSystemProvider component, including its props. ```APIDOC ## DesignSystemProvider ### Description The root provider for your Design System components. An abstraction around `styled-component`'s `ThemeProvider` that also includes `GlobalStyles` as well as an unique provider supplying values to components. You most likely won't need this component unless you're creating a new app using the design-system. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example None ### Response #### Success Response (200) None #### Response Example None ### Props - **locale** (string) - Optional - The locale for the design system. Defaults to 'en-GB'. - **theme** (object) - Optional - The theme object for the design system. Defaults to `lightTheme`. ``` -------------------------------- ### Switch Component API Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Switch.mdx Documentation for the Switch component props and usage. ```APIDOC ## Switch Component ### Description A control that allows the user to toggle between checked and not checked states. ### Usage ```js import { Switch } from '@strapi/design-system'; ``` ### Props - **checked** (boolean) - Optional - Whether the switch is currently checked. - **disabled** (boolean) - Optional - If true, the switch cannot be toggled. - **label** (string) - Optional - Visible label for the switch. - **onLabel** (string) - Optional - Label for the checked state. - **offLabel** (string) - Optional - Label for the unchecked state. - **onChange** (function) - Optional - Callback function triggered when the state changes. ### Accessibility Adheres to the [switch role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch). ``` -------------------------------- ### Import Grid Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Grid.mdx Import the Grid component from the Strapi design system library. This is the primary import for using the grid layout. ```javascript import { Grid } from '@strapi/design-system'; ``` -------------------------------- ### Import TextInput component Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/TextInput.mdx Import the TextInput component from the @strapi/design-system package to use it in your application. ```js import { TextInput } from '@strapi/design-system'; ``` -------------------------------- ### Import Loader Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Loader.mdx Import the Loader component from the '@strapi/design-system' package. ```javascript import { Loader } from '@strapi/design-system'; ``` -------------------------------- ### Import FocusTrap Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/FocusTrap.mdx Import the FocusTrap component from the Strapi Design System for use in your project. ```javascript import FocusTrap from '@strapi/design-system'; ``` -------------------------------- ### Import Card Components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Card.mdx Import all necessary components for the Card structure from the design system. ```javascript import { Card, CardHeader, CardBody, CardCheckbox, CardAction, CardAsset, CardTimer, CardContent, CardBadge, CardTitle, CardSubtitle, } from '@strapi/design-system'; ``` -------------------------------- ### Migrate Grid to composite component Source: https://github.com/strapi/design-system/blob/main/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx Update Grid usage to the new composite structure using Grid.Root and Grid.Item. ```diff - import { Grid, GridItem } from '@strapi/design-system'; + import { Grid } from '@strapi/design-system'; - - 1 - 2 - + + 1 + 2 + ``` -------------------------------- ### Import TimePicker component Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/TimePicker.mdx Import the TimePicker component from the design system package. ```js import { TimePicker } from '@strapi/design-system'; ``` -------------------------------- ### Import Textarea Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/Textarea.mdx Import the Textarea component from the design system. Ensure this import is present before using the component. ```javascript import { Textarea } from '@strapi/design-system'; ``` -------------------------------- ### RawTable Component Documentation Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/RawTable.mdx Documentation for the RawTable component, including its usage and available props. ```APIDOC ## RawTable Component ### Description This is the documentation for the `RawTable` component. ### Imports ```js import { RawTable, RawTh, RawTd, RawTr, RawThead, RawTbody } from '@strapi/design-system'; ``` ### Usage Examples of how to use the RawTable component: ### Props #### RawTable Props #### RawThead Props #### RawTbody Props #### RawTr Props #### RawTh Props (No specific props documented in the provided text) #### RawTd Props ``` -------------------------------- ### Import Switch Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Switch.mdx Import the Switch component from the Strapi Design System library. This is a prerequisite for using the component in your application. ```javascript import { Switch } from '@strapi/design-system'; ``` -------------------------------- ### Importing the Box component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Box.mdx Use this import statement to include the Box component in your project. ```js import { Box } from '@strapi/design-system'; ``` -------------------------------- ### Import Combobox Components Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/Combobox.mdx Import the Combobox and ComboboxOption components from the design system package. ```js import { Combobox, ComboboxOption } from '@strapi/design-system'; ``` -------------------------------- ### FocusTrap Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/FocusTrap.mdx Documentation for the FocusTrap component usage and properties. ```APIDOC ## FocusTrap Component ### Description The FocusTrap restricts keyboard navigation to a certain zone of the screen. For instance, it can be used in a modal to limit tab navigation to a specific context. ### Usage ```js import FocusTrap from '@strapi/design-system'; ``` ### Props Refer to the ArgTypes documentation for the full list of available properties for the FocusTrap component. ``` -------------------------------- ### Import Typography Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/01-foundations/typography.mdx Import the Typography component from the @strapi/design-system package for use in your application. ```jsx import { Typography } from '@strapi/design-system'; ``` -------------------------------- ### Avatar with Preview Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Avatar.mdx Enables a tooltip preview of the avatar image when hovered. This is useful for asset avatars and will not show if the main image fails to load. ```javascript import { Avatar } from '@strapi/design-system'; // ... ``` -------------------------------- ### Import Table components Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Table.mdx Required imports for using the Table component and its sub-components from the @strapi/design-system package. ```js import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system'; ``` -------------------------------- ### Importing the Button component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Button.mdx Use this import statement to include the Button component in your project. ```js import { Button } from '@strapi/design-system'; ``` -------------------------------- ### Card without Asset Action Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Card.mdx Shows how to render a Card component without the action element. ```javascript ``` -------------------------------- ### Import Alert Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Alert.mdx Import the Alert component from the @strapi/design-system package. This is required before using the Alert component in your application. ```javascript import { Alert } from '@strapi/design-system'; ``` -------------------------------- ### Generate Responsive CSS with handleResponsiveValues Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/Helpers.mdx Converts responsive style props and theme values into CSS strings, including media queries. Supports 'initial', 'small', 'medium', and 'large' breakpoints. ```tsx import { handleResponsiveValues } from '@strapi/design-system'; import styled from 'styled-components'; const Card = styled.div` ${({ theme }) => handleResponsiveValues( { padding: { initial: 2, medium: 4, large: 6 }, marginBottom: 4, }, theme, )} `; ``` -------------------------------- ### Import JSONInput Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/JSONInput.mdx Import the JSONInput component from the Strapi design system package. This is a prerequisite for using the component in your application. ```javascript import { JSONInput } from '@strapi/design-system'; ``` -------------------------------- ### Import Portal Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/Portal.mdx Import the Portal component from the Strapi design system package. This is typically needed to use the component in your application. ```javascript import { Portal } from '@strapi/design-system'; ``` -------------------------------- ### Import Popover Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/04-components/Popover.mdx Import the Popover component from the Strapi Design System library. This is the primary import for using the component. ```javascript import { Popover } from '@strapi/design-system'; ``` -------------------------------- ### Import Design System Helpers Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/Helpers.mdx Imports essential utility functions and types from the design system. Ensure these are imported before use. ```tsx import { setOpacity, handleResponsiveValues, KeyboardKeys, extractStyleFromTheme, type ResponsiveProps, type Breakpoint, } from '@strapi/design-system'; ``` -------------------------------- ### Handle Keyboard Events with KeyboardKeys Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/Helpers.mdx Provides stable string constants for common keyboard keys to use in event handlers. Avoids using magic strings for better maintainability. ```tsx import { KeyboardKeys } from '@strapi/design-system'; const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === KeyboardKeys.ESCAPE) { onClose(); } if (event.key === KeyboardKeys.ENTER || event.key === KeyboardKeys.SPACE) { event.preventDefault(); onSubmit(); } }; ``` -------------------------------- ### handleResponsiveValues Source: https://github.com/strapi/design-system/blob/main/docs/stories/05-utilities/Helpers.mdx Generates CSS media queries based on responsive property objects. ```APIDOC ## handleResponsiveValues ### Description Takes an object of responsive props and the theme, and returns a string of CSS (including media queries) that you can inject into styled-components or any CSS-in-JS solution. ### Signature `handleResponsiveValues(values: ResponsiveProps, theme: DefaultTheme): string` ### Parameters - **values** (ResponsiveProps) - Required - Object of CSS-related props; values can be theme tokens or responsive objects. - **theme** (DefaultTheme) - Required - Strapi theme object. ``` -------------------------------- ### Import DatePicker Component Source: https://github.com/strapi/design-system/blob/main/docs/stories/03-inputs/DatePicker.mdx Import the DatePicker component from the Strapi Design System library. Ensure this import is present in your component files where DatePicker is used. ```javascript import { DatePicker } from '@strapi/design-system'; ```