feat: convert accordion to radix primitive (#1721)

Co-authored-by: Jamie Howard <[email protected]>

Author: joshuaellis

.changeset/tidy-games-divide.md

@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+feat!: refactor Accordion to use radix primitive
+
+The Accordion API has changed significently whilst retaining it's functionality, we recommend your review the documentation to understand the changes and how to migrate your code.

docs/.storybook/main.ts

@@ -1,4 +1,6 @@
 import { dirname, join, resolve } from 'path';
+import { mergeConfig } from 'vite';
+import turbosnap from 'vite-plugin-turbosnap';
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
@@ -21,8 +23,8 @@ const config: StorybookConfig = {
       },
     },
   },
-  viteFinal: (config) => {
-    if (config.mode !== 'production') {
+  viteFinal: (config, { configType }) => {
+    if (configType !== 'PRODUCTION') {
       config.optimizeDeps = {
         ...config.optimizeDeps,
         include: [
@@ -59,9 +61,18 @@ const config: StorybookConfig = {
         '@strapi/icons': resolve(__dirname, '..', '..', 'packages', 'icons', 'src'),
         'styled-components': resolve(__dirname, '..', '..', 'node_modules', 'styled-components'),
       };
-    }
 
-    return config;
+      return config;
+    } else {
+      return mergeConfig(config, {
+        plugins: [
+          turbosnap({
+            // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
+            rootDir: config.root ?? process.cwd(),
+          }),
+        ],
+      });
+    }
   },
 
   framework: {

docs/components/Markdown.tsx

@@ -5,6 +5,7 @@ import { styled, css } from 'styled-components';
 import { DeprecationNotice } from './DeprecationNotice';
 import { Image } from './Image';
 import { H1, H2, H3, H4, Li, P } from './Typography';
+import { ViewSource } from './ViewSource';
 
 /* -------------------------------------------------------------------------------------------------
  * List
@@ -101,6 +102,7 @@ const Markdown = (props) => {
 
 const MARKDOWN_OVERRIDES = {
   ...BASE_MARKDOWN_OVERRIDES,
+  ViewSource,
   DeprecationNotice,
   Markdown,
 };

docs/components/ViewSource.tsx

@@ -0,0 +1,29 @@
+import { Link } from '@strapi/design-system';
+
+interface ViewSourceProps {
+  pkg?: 'design-system' | 'icons' | 'primitives';
+  path: string;
+}
+
+const ViewSource = ({ pkg = 'design-system', path }: ViewSourceProps) => {
+  if (!path) {
+    console.warn('ViewSource requires a path prop to be passed.');
+
+    return null;
+  }
+
+  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"
+    >
+      View source
+    </Link>
+  );
+};
+
+export { ViewSource };
+export type { ViewSourceProps };

docs/package.json

@@ -7,6 +7,7 @@
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/react": "^7.6.17",
+    "@storybook/test": "8.0.10",
     "@strapi/design-system": "workspace:*",
     "@strapi/icons": "workspace:*",
     "@strapi/ui-primitives": "workspace:*",
@@ -28,7 +29,8 @@
     "outdent": "0.8.0",
     "storybook": "^7.6.17",
     "typescript": "5.4.5",
-    "vite": "^5.0.2"
+    "vite": "^5.0.2",
+    "vite-plugin-turbosnap": "1.0.3"
   },
   "scripts": {
     "build": "storybook build",

docs/stories/Accordion.mdx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import { BaseRadio, RadioGroup, Typography, useTheme } from '@strapi/design-system';
+import { BaseRadio, RadioGroup, Typography } from '@strapi/design-system';
 
 const meta: Meta<typeof BaseRadio> = {
   title: 'Design System/Technical Components/BaseRadio',
@@ -14,10 +14,6 @@ type Story = StoryObj<typeof BaseRadio>;
 
 export const Base = {
   render: () => {
-    const {
-      colors: { neutral800 },
-    } = useTheme();
-
     const [selected, setSelected] = React.useState<string>();
 
     return (
@@ -32,25 +28,11 @@ export const Base = {
           name="prefered-meal"
         >
           <div>
-            <label
-              style={{
-                color: neutral800,
-              }}
-              htmlFor="pizza"
-            >
-              Pizza
-            </label>
+            <label htmlFor="pizza">Pizza</label>
             <BaseRadio value="pizza" id="pizza" />
           </div>
           <div>
-            <label
-              style={{
-                color: neutral800,
-              }}
-              htmlFor="bagel"
-            >
-              Bagel
-            </label>
+            <label htmlFor="bagel">Bagel</label>
             <BaseRadio value="bagel" id="bagel" />
           </div>
         </RadioGroup>
@@ -63,10 +45,6 @@ export const Base = {
 
 export const Disabled = {
   render: () => {
-    const {
-      colors: { neutral800 },
-    } = useTheme();
-
     const [selected, setSelected] = React.useState<string>();
 
     return (
@@ -81,36 +59,15 @@ export const Disabled = {
           name="prefered-meal"
         >
           <div>
-            <label
-              style={{
-                color: neutral800,
-              }}
-              htmlFor="first"
-            >
-              Mario
-            </label>
+            <label htmlFor="first">Mario</label>
             <BaseRadio value="first" id="first" />
           </div>
           <div>
-            <label
-              style={{
-                color: neutral800,
-              }}
-              htmlFor="second"
-            >
-              Luigi
-            </label>
+            <label htmlFor="second">Luigi</label>
             <BaseRadio value="second" id="second" disabled />
           </div>
           <div>
-            <label
-              style={{
-                color: neutral800,
-              }}
-              htmlFor="third"
-            >
-              Wario
-            </label>
+            <label htmlFor="third">Wario</label>
             <BaseRadio value="third" id="third" />
           </div>
         </RadioGroup>