Merge branch 'main' into dependabot/npm_and_yarn/vite-5.2.14

.changeset/chilly-trains-push.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+add xs size to status component

.changeset/pre.json

@@ -17,6 +17,7 @@
     "calm-pets-live",
     "calm-squids-shout",
     "chatty-jokes-grow",
+    "chilly-trains-push",
     "chilly-wasps-accept",
     "clean-maps-double",
     "clean-otters-swim",
@@ -73,6 +74,8 @@
     "smooth-carrots-pretend",
     "soft-nails-matter",
     "soft-zoos-marry",
+    "stale-apes-approve",
+    "sweet-timers-help",
     "swift-cycles-type",
     "swift-garlics-cross",
     "tasty-suits-sit",

.changeset/stale-apes-approve.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+pass props to icons in accordion triggers

.changeset/sweet-timers-help.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+patch for hovering effect

docs/.storybook/preview.tsx

@@ -157,6 +157,7 @@ const preview: Preview = {
       // Override the default light theme
       light: createCustomTheme(lightTheme),
     },
+    controls: { expanded: true },
   },
 };
 

docs/chromatic.config.json

@@ -4,5 +4,6 @@
   "onlyChanged": true,
   "projectId": "Project:64f9707bb212b1f1332bfd97",
   "skip": "{dependabot/**,changeset-release/**}",
-  "zip": true
+  "zip": true,
+  "storybookBaseDir": "docs"
 }

docs/components/ViewSource.tsx

@@ -3,23 +3,25 @@ import { Link } from '@strapi/design-system';
 interface ViewSourceProps {
   pkg?: 'design-system' | 'icons' | 'primitives';
   path: string;
+  branch?: string;
 }
 
-const ViewSource = ({ pkg = 'design-system', path }: ViewSourceProps) => {
+const ViewSource = ({ pkg = 'design-system', path, branch = 'main' }: ViewSourceProps) => {
   if (!path) {
     console.warn('ViewSource requires a path prop to be passed.');
-
     return null;
   }
 
+  let href: string;
+
+  if (pkg === 'icons') {
+    href = `https://github.com/strapi/design-system/tree/${branch}/packages/${pkg}/assets/${path}`;
+  } else {
+    href = `https://github.com/strapi/design-system/tree/${branch}/packages/${pkg}/src/${path}`;
+  }
+
   return (
-    <Link
-      marginTop={4}
-      isExternal
-      href={`https://github.com/strapi/design-system/tree/releases/2.0.0/packages/${pkg}/${pkg === 'icons' ? 'assets' : 'src'}/${path}`}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <Link marginTop={4} isExternal href={href} target="_blank" rel="noopener noreferrer">
       View source
     </Link>
   );

docs/stories/02-primitives/BaseLink.mdx

@@ -1,5 +1,4 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import { BaseLink } from '@strapi/design-system';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 
 import * as BaseLinkStories from './BaseLink.stories';
 
@@ -28,4 +27,4 @@ import { BaseLink } from '@strapi/design-system';
 
 ## Props
 
-<ArgTypes of={BaseLink} />
+<Controls />

docs/stories/02-primitives/BaseLink.stories.tsx

@@ -13,6 +13,44 @@ const meta: Meta<typeof BaseLink> = {
     href: 'https://strapi.io',
     isExternal: true,
   },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'the content to be rendered inside the link',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    href: {
+      description: 'The URL the link points to',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, the link is disabled',
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    isExternal: {
+      control: 'boolean',
+      description: 'When true, the link opens in a new tab/window',
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+  },
   render: (args) => <BaseLink {...args} />,
 };
 
@@ -21,12 +59,12 @@ export default meta;
 type Story = StoryObj<typeof BaseLink>;
 
 export const Base = {
-  name: 'base',
+  name: 'Base',
 } satisfies Story;
 
 export const Disabled = {
   args: {
     disabled: true,
   },
-  name: 'disabled',
+  name: 'Disabled',
 } satisfies Story;

docs/stories/03-inputs/Checkbox.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 
@@ -29,6 +29,8 @@ import { Checkbox } from '@strapi/design-system';
 
 ## Props
 
+<Controls />
+
 ## Variants
 
 ### Basic checkbox
@@ -56,7 +58,7 @@ case, you should instead supply the `aria-label` prop so it is still accessible.
 
 <Canvas of={CheckboxStories.WithoutLabel} />
 
-### With Name & Label
+### With Name & Value
 
 If using in a typical `form` element, you can provide a `name` and `value` prop that will be added to the `FormData` on
 submission. The story below fires a unique action `onSubmit` demonstrating this. However, if you're not using it within

docs/stories/03-inputs/Checkbox.stories.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Button, Checkbox, Flex } from '@strapi/design-system';
@@ -19,6 +17,71 @@ const meta: Meta<typeof Checkbox> = {
     children: 'Remember me',
     onCheckedChange: fn(),
   },
+  argTypes: {
+    checked: {
+      control: 'radio',
+      options: [true, false, 'indeterminate'],
+      description: 'The controlled checked state of the checkbox',
+      table: {
+        type: {
+          summary: 'enum',
+          detail: 'true | false | indeterminate',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    defaultChecked: {
+      control: false,
+      description: 'The default checked state when initially rendered',
+      type: { name: 'boolean' },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    onCheckedChange: {
+      control: false,
+      action: 'checked changed',
+      description: 'Event handler called when the checked state changes',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the checkbox',
+      type: { name: 'boolean' },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    required: {
+      control: false,
+      description: 'When true, indicates that the user must check the checkbox before the owning form can be submitted',
+      type: { name: 'boolean' },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    name: {
+      control: false,
+      description: 'The name of the checkbox. Submitted with its owning form as part of a name/value pair',
+      type: { name: 'string' },
+    },
+    value: {
+      control: false,
+      description: 'The value given as data when submitted with a name',
+      type: { name: 'string' },
+    },
+    children: {
+      control: 'text',
+      description: 'The label of the checkbox',
+      type: { name: 'string' },
+    },
+  },
+
   parameters: {
     chromatic: { disableSnapshot: false },
   },
@@ -41,7 +104,7 @@ export const Base = {
       },
     },
   },
-  name: 'base',
+  name: 'Basic checkbox',
 };
 
 export const Indeterminate = {
@@ -54,14 +117,14 @@ export const Indeterminate = {
   args: {
     checked: 'indeterminate',
   },
-  name: 'indeterminate',
+  name: 'Indeterminate',
 } satisfies Story;
 
 export const Disabled = {
   args: {
     disabled: true,
   },
-  name: 'disabled',
+  name: 'Disabled',
   parameters: {
     docs: {
       source: {
@@ -76,7 +139,7 @@ export const WithoutLabel = {
     children: null,
     ['aria-label']: 'Select row 1',
   },
-  name: 'without label',
+  name: 'Without label',
 } satisfies Story;
 
 export const WithNameAndValue = {
@@ -106,5 +169,5 @@ export const WithNameAndValue = {
       </Flex>
     );
   },
-  name: 'with name and value',
+  name: 'With name and Value',
 } satisfies Story;

docs/stories/03-inputs/Combobox.mdx

@@ -1,5 +1,4 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import { Combobox } from '@strapi/design-system';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 
 import * as ComboboxStories from './Combobox.stories';
 
@@ -25,17 +24,21 @@ the [`Select`](../?path=/docs/inputs-select--docs) component!
 ## Usage
 
 ```js
-import { Combobox, ComboboxOption, CreatableCombobox } from '@strapi/design-system';
+import { Combobox, ComboboxOption } from '@strapi/design-system';
 ```
 
 ## Props
 
 ### Combobox
 
-<ArgTypes of={Combobox} />
+<Controls of={ComboboxStories.ComboboxProps} />
 
 ### ComboboxOption
 
+The ComboboxOption is used inside the Combobox to render individual items. Each ComboboxOption has a value prop, which
+is the underlying value that will be selected when the user clicks on the option.
+
+<Controls of={ComboboxStories.ComboboxOptionProps} />
 ## Variants
 
 ### Basic Combobox
@@ -70,9 +73,10 @@ spinner. In future iterations, we plan to omit the `hasMoreItems` prop.
 
 ### Creating new options
 
-If you want to allow users to create new options, you can use the `CreatableCombobox` component. This is just a wrapper
-around the `Combobox` component that pre-flags the `creatable` prop as `true`. You should still pass an `onCreateOption`
-callback to handle the creation of the new option.
+The Creatable Combobox allows users to create new options in addition to selecting from predefined ones. To enable this,
+set the `creatable` prop to true and provide an `onCreateOption` callback to handle new option creation. When a user
+types a value not found in the list, the callback adds it dynamically, making the component flexible for expanding
+options.
 
 <Canvas of={ComboboxStories.Creatable} />