Merge branch 'main' into fix/tertiary-button-underline

.eslintignore

@@ -2,14 +2,15 @@ node_modules/
 build/
 dist/
 public/
-scripts/
 .next/
 .out/
 __coverage__/
 __reports__/
 *.config.*
+package.json
+package-lock.json
 *rc.*
-scripts/
+/scripts/
 # disable linting for templates because it will have its own rules when used in a new app
 packages/cna-template/template
 packages/astro-template/src/env.d.ts

.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = require('@sumup/foundry/eslint')({
-  extends: ['plugin:storybook/recommended'],
+  extends: [
+    'plugin:storybook/recommended',
+    'plugin:react-server-components/recommended',
+  ],
   plugins: ['@sumup/circuit-ui'],
   settings: {
     'import/parsers': {
@@ -22,10 +25,37 @@ module.exports = require('@sumup/foundry/eslint')({
     tsconfigRootDir: __dirname,
   },
   overrides: [
+    {
+      files: [
+        '**/*.spec.*',
+        '**/jest*',
+        '**/setupTests.*',
+        '**/test-utils.*',
+        '**/*Fixtures.*',
+        '**/__fixtures__/**/*',
+        '**/__mocks__/**/*',
+      ],
+      rules: {
+        'testing-library/no-container': 'warn',
+      },
+    },
     {
       files: ['**/*.stories.*'],
       rules: {
         'import/no-relative-packages': 'off',
+        'react-server-components/use-client': 'off',
+      },
+    },
+    {
+      files: ['**/*.spec.*'],
+      rules: {
+        'react-server-components/use-client': 'off',
+      },
+    },
+    {
+      files: ['packages/circuit-ui/components/legacy/**/*'],
+      rules: {
+        '@sumup/circuit-ui/prefer-custom-properties': 'off',
       },
     },
     {

.github/workflows/chromatic.yml

@@ -27,7 +27,7 @@ jobs:
         run: npm run docs:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/addons/versions/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import {
-  Icons,
   IconButton,
   WithTooltip,
   TooltipLinkList,
 } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 import { useParameter } from '@storybook/manager-api';
 
 type Version = {
@@ -25,6 +25,10 @@ export function Versions() {
 
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
+  if (!config.current) {
+    return null;
+  }
+
   return (
     <WithTooltip
       placement="top"
@@ -49,7 +53,7 @@ export function Versions() {
         title="Switch to previous versions of the documentation"
         active={isTooltipVisible}
       >
-        {config.current} <Icons icon="arrowdown" />
+        {config.current} <ChevronSmallDownIcon aria-hidden="true" />
       </IconButton>
     </WithTooltip>
   );

.storybook/components/DocsContainer.tsx

@@ -1,32 +1,29 @@
-// import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
 
-import * as themes from '../themes';
+import { dark, light, listenToColorScheme } from '../themes';
+
+const themes = { light, dark };
 
 /**
- * Automatically switch light/dark theme based on system preferences
+ * Switch color scheme based on the global types or system preferences
  */
 const DocsContainer: typeof BaseContainer = ({ children, context }) => {
-  // TODO: Re-enable automatic theme switching once there is a proper
-  // dark theme for Circuit UI.
-  // const query = window?.matchMedia('(prefers-color-scheme: dark)');
-
-  // const [theme, setTheme] = useState(getTheme(query.matches));
+  const [colorScheme, setColorScheme] = useState('light');
 
-  // useEffect(() => {
-  //   const handleChange = (event: MediaQueryListEvent) => {
-  //     setTheme(getTheme(event.matches));
-  //   };
+  useEffect(
+    () => listenToColorScheme(context.channel, setColorScheme),
+    [context.channel],
+  );
 
-  //   query.addEventListener('change', handleChange);
+  useEffect(() => {
+    document.documentElement.dataset.colorScheme = colorScheme;
+  }, [colorScheme]);
 
-  //   return () => {
-  //     query.removeEventListener('change', handleChange);
-  //   };
-  // }, []);
+  const theme = themes[colorScheme];
 
   return (
-    <BaseContainer context={context} theme={themes.light}>
+    <BaseContainer context={context} theme={theme}>
       {children}
     </BaseContainer>
   );

.storybook/components/Icons.module.css

@@ -85,8 +85,12 @@
 }
 
 .label {
+  display: block;
+  overflow: hidden;
   font-size: var(--cui-typography-body-two-font-size);
   line-height: var(--cui-typography-body-two-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .badge {

.storybook/components/Icons.tsx

@@ -33,6 +33,7 @@ import {
   clsx,
   utilClasses,
 } from '../../packages/circuit-ui/index.js';
+import { slugify } from '../slugify.js';
 import classes from './Icons.module.css';
 
 function groupBy(
@@ -81,7 +82,6 @@ const Icons = () => {
     { label: '16', value: '16' },
     { label: '24', value: '24' },
     { label: '32', value: '32' },
-    { label: '48', value: '48' },
   ];
 
   const colorOptions = [
@@ -146,7 +146,7 @@ const Icons = () => {
           groupBy(activeIcons, 'category'),
         ).map(([category, items]) => (
           <section key={category} className={classes.category}>
-            <Headline as="h3" size="three">
+            <Headline as="h2" size="two" id={slugify(category)}>
               {category}
             </Headline>
             <div className={classes.list}>
@@ -172,7 +172,7 @@ const Icons = () => {
                         }}
                       />
                     </div>
-                    <span id={id} className={classes.label}>
+                    <span id={id} className={classes.label} title={icon.name}>
                       {icon.name}
                       {size === 'all' && (
                         <span className={classes.size}>{icon.size}</span>

.storybook/components/Image.module.css

@@ -0,0 +1,13 @@
+.dark {
+  display: none;
+}
+
+/* Show dark image in dark mode */
+[data-color-scheme="dark"] .dark {
+  display: block;
+}
+
+/* Hide light image in dark mode when dark image is present */
+[data-color-scheme="dark"] .dark + .light {
+  display: none;
+}

.storybook/components/Image.tsx

@@ -13,11 +13,34 @@
  * limitations under the License.
  */
 
+import { Fragment } from 'react';
 import {
+  clsx,
   Image as BaseImage,
-  ImageProps,
+  type ImageProps as BaseImageProps,
 } from '../../packages/circuit-ui/index.js';
 
-const Image = ({ children, ...props }: ImageProps) => <BaseImage {...props} />;
+import classes from './Image.module.css';
+
+interface ImageProps extends BaseImageProps {
+  darkSrc?: string;
+}
+
+const Image = ({ children, src, darkSrc, ...props }: ImageProps) => (
+  <Fragment>
+    {darkSrc && (
+      <BaseImage
+        src={darkSrc}
+        {...props}
+        className={clsx(classes.dark, props.className)}
+      />
+    )}
+    <BaseImage
+      src={src}
+      {...props}
+      className={clsx(classes.light, props.className)}
+    />
+  </Fragment>
+);
 
 export default Image;

.storybook/components/Preview.tsx

@@ -13,14 +13,10 @@
  * limitations under the License.
  */
 
-import { Canvas } from '@storybook/addon-docs';
+import type { PropsWithChildren } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { light } from '@sumup/design-tokens';
 
-const Preview = ({ children, ...props }) => (
-  <Canvas {...props}>
-    <ThemeProvider theme={light}>{children}</ThemeProvider>
-  </Canvas>
-);
-
-export default Preview;
+export default function Preview({ children }: PropsWithChildren) {
+  return <ThemeProvider theme={light}>{children}</ThemeProvider>;
+}

.storybook/components/Story.tsx

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-import { Story as StorybookStory } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/addon-docs';
 
 import Preview from './Preview';
 
-const Story = ({ withToolbar = true, ...props }) => (
-  <Preview withToolbar={withToolbar}>
-    <StorybookStory {...props} />
-  </Preview>
-);
-
-export default Story;
+export default function Story({ withToolbar = true, ...props }) {
+  return (
+    <Preview>
+      <Canvas withToolbar={withToolbar} {...props} />
+    </Preview>
+  );
+}

.storybook/components/Teaser.tsx

@@ -14,7 +14,9 @@
  */
 
 import type { ReactNode } from 'react';
+
 import { Headline, Card } from '../../packages/circuit-ui/index.js';
+import { slugify } from '../slugify.js';
 import classes from './Teaser.module.css';
 
 interface TeaserProps {
@@ -24,7 +26,7 @@ interface TeaserProps {
 
 const Teaser = ({ title, children }: TeaserProps) => (
   <Card className={classes.base}>
-    <Headline as="h2" size="three">
+    <Headline as="h2" size="three" id={slugify(title)}>
       {title}
     </Headline>
 

.storybook/components/index.ts

@@ -13,9 +13,7 @@
  * limitations under the License.
  */
 
-import { ArgsTable as Props, PRIMARY_STORY } from '@storybook/addon-docs';
-
-Props.defaultProps = { ...Props.defaultProps, story: PRIMARY_STORY };
+import { Controls as Props } from '@storybook/addon-docs';
 
 export { Props };
 

.storybook/decorators/withThemeProvider.tsx

@@ -3,12 +3,34 @@ import { ThemeProvider } from '@emotion/react';
 import type { Decorator } from '@storybook/react';
 import { light } from '@sumup/design-tokens';
 
+function setColorScheme(colorScheme: 'light' | 'dark') {
+  document.documentElement.dataset.colorScheme = colorScheme;
+}
+
 export const withThemeProvider: Decorator = (Story, context) => {
-  const theme = context.parameters.theme || context.globals.theme;
+  const colorScheme =
+    context.parameters.colorScheme || context.globals.colorScheme;
 
   useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-  }, [theme]);
+    if (colorScheme !== 'system') {
+      setColorScheme(colorScheme);
+      return undefined;
+    }
+
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+
+    setColorScheme(query.matches ? 'dark' : 'light');
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setColorScheme(event.matches ? 'dark' : 'light');
+    };
+
+    query.addEventListener('change', handleChange);
+
+    return () => {
+      query.removeEventListener('change', handleChange);
+    };
+  }, [colorScheme]);
 
   return (
     <ThemeProvider theme={light}>

.storybook/main.ts

@@ -2,7 +2,6 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
 import remarkGfm from 'remark-gfm';
 import { mergeConfig } from 'vite';
-import turbosnap from 'vite-plugin-turbosnap';
 
 const toPath = (_path: string) => path.join(process.cwd(), _path);
 
@@ -44,12 +43,11 @@ const config: StorybookConfig = {
       define: {
         'process.env.UNSAFE_DISABLE_ELEMENT_ERRORS': false,
       },
-      plugins:
-        configType === 'PRODUCTION'
-          ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
-          : [],
     });
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;