Fix local component styles in Storybook (#2796)

* Change component imports in Storybook code * Update typography values for Storybook
sumup-oss · Nov 29, 2024 · 362a9f5 · 362a9f5
1 parent aeafcd4
commit 362a9f5
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 46 deletions.
diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx
@@ -21,19 +21,18 @@ import {
 } from 'react';
 import { Unstyled } from '@storybook/addon-docs';
 import * as iconComponents from '@sumup-oss/icons';
+import type { IconComponentType } from '@sumup-oss/icons';
 import type { IconsManifest } from '@sumup-oss/icons';
 import iconsManifest from '@sumup-oss/icons/manifest.json';
-import {
-  Headline,
-  Body,
-  SearchInput,
-  Select,
-  Badge,
-  SelectorGroup,
-  clsx,
-  utilClasses,
-  Tooltip,
-} from '../../packages/circuit-ui/index.js';
+import { Badge } from '../../packages/circuit-ui/components/Badge/Badge.js';
+import { Body } from '../../packages/circuit-ui/components/Body/Body.js';
+import { Headline } from '../../packages/circuit-ui/components/Headline/Headline.js';
+import { SearchInput } from '../../packages/circuit-ui/components/SearchInput/SearchInput.js';
+import { Select } from '../../packages/circuit-ui/components/Select/Select.js';
+import { SelectorGroup } from '../../packages/circuit-ui/components/SelectorGroup/SelectorGroup.js';
+import { Tooltip } from '../../packages/circuit-ui/components/Tooltip/Tooltip.js';
+import { clsx } from '../../packages/circuit-ui/styles/clsx.js';
+import { utilClasses } from '../../packages/circuit-ui/styles/utility.js';
 import { slugify } from '../slugify.js';
 import classes from './Icons.module.css';
 
@@ -157,8 +156,10 @@ export function Icons() {
             <div className={classes.list}>
               {sortBy(items, 'name').map((icon) => {
                 const id = `${icon.name}-${icon.size}`;
-                const componentName = getComponentName(icon.name);
-                const Icon = iconComponents[componentName];
+                const componentName = getComponentName(
+                  icon.name,
+                ) as keyof typeof iconComponents;
+                const Icon = iconComponents[componentName] as IconComponentType;
                 return (
                   <div key={id} className={classes.wrapper}>
                     <div

diff --git a/.storybook/components/Image.tsx b/.storybook/components/Image.tsx
@@ -15,10 +15,10 @@
 
 import { Fragment } from 'react';
 import {
-  clsx,
   Image as BaseImage,
   type ImageProps as BaseImageProps,
-} from '../../packages/circuit-ui/index.js';
+} from '../../packages/circuit-ui/components/Image/Image.js';
+import { clsx } from '../../packages/circuit-ui/styles/clsx.js';
 
 import classes from './Image.module.css';
 

diff --git a/.storybook/components/Intro.tsx b/.storybook/components/Intro.tsx
@@ -13,17 +13,18 @@
  * limitations under the License.
  */
 
-import { Body } from '../../packages/circuit-ui/index.js';
-
-import type { BodyLargeProps } from '../../packages/circuit-ui/index.js';
+import {
+  Body,
+  type BodyProps,
+} from '../../packages/circuit-ui/components/Body/Body.js';
 
 import classes from './Intro.module.css';
 
 export function Intro({
   children,
   ...props
 }: {
-  children: BodyLargeProps['children'];
+  children: BodyProps['children'];
 }) {
   return (
     <Body as="div" size="s" color="subtle" className={classes.base} {...props}>

diff --git a/.storybook/components/Stack.tsx b/.storybook/components/Stack.tsx
@@ -14,7 +14,7 @@
  */
 
 import type { ReactNode } from 'react';
-import { clsx } from '../../packages/circuit-ui/index.js';
+import { clsx } from '../../packages/circuit-ui/styles/clsx.js';
 
 import classes from './Stack.module.css';
 

diff --git a/.storybook/components/Statuses.tsx b/.storybook/components/Statuses.tsx
@@ -16,11 +16,9 @@
 import type { ReactNode } from 'react';
 import { Unstyled } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
-import {
-  Body,
-  Badge,
-  type BadgeProps,
-} from '../../packages/circuit-ui/index.js';
+import { Badge, type BadgeProps } from '@sumup-oss/circuit-ui';
+import {} from '../../packages/circuit-ui/components/Badge/Badge.js';
+import { Body } from '../../packages/circuit-ui/components/Body/Body.js';
 
 import classes from './Statuses.module.css';
 

diff --git a/.storybook/components/Teaser.tsx b/.storybook/components/Teaser.tsx
@@ -15,7 +15,8 @@
 
 import type { ReactNode } from 'react';
 
-import { Headline, Card } from '../../packages/circuit-ui/index.js';
+import { Card } from '../../packages/circuit-ui/components/Card/Card.js';
+import { Headline } from '../../packages/circuit-ui/components/Headline/Headline.js';
 import { slugify } from '../slugify.js';
 import classes from './Teaser.module.css';
 

diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx
@@ -18,17 +18,17 @@ import { ThemeProvider, useTheme } from '@emotion/react';
 import { Unstyled } from '@storybook/addon-docs';
 import { light, schema } from '@sumup-oss/design-tokens';
 import { SumUpLogomark } from '@sumup-oss/icons';
+import { Anchor } from '../../packages/circuit-ui/components/Anchor/Anchor.js';
+import { Body } from '../../packages/circuit-ui/components/Body/Body.js';
+import { Badge } from '../../packages/circuit-ui/components/Badge/Badge.js';
 import {
-  Anchor,
-  Body,
-  Badge,
   Table,
-  Tooltip,
-  ToastProvider,
-  useNotificationToast,
   type TableHeaderCell,
   type TableRow,
-} from '../../packages/circuit-ui/index.js';
+} from '../../packages/circuit-ui/components/Table/index.js';
+import { Tooltip } from '../../packages/circuit-ui/components/Tooltip/Tooltip.js';
+import { ToastProvider } from '../../packages/circuit-ui/components/ToastContext/ToastContext.js';
+import { useNotificationToast } from '../../packages/circuit-ui/components/NotificationToast//NotificationToast.js';
 
 type CustomPropertyName = `--cui-${string}`;
 type CustomPropertyValue = string;

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -32,37 +32,37 @@
    * The selectors were copied from Storybook to avoid style leakage
    */
 
-  /* theme.typography.title.four */
+  /* Display (m) */
   .sbdocs :is(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
-    font-size: 3.5rem;
+    font-size: 3rem;
     line-height: 3.5rem;
     font-weight: bold;
   }
-  /* theme.typography.headline.one */
+  /* Headline (l) */
   .sbdocs :is(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
     font-size: 2rem;
     line-height: 2.25rem;
-    font-weight: bold;
+    font-weight: semibold;
     border: none;
     margin-bottom: 1rem;
   }
-  /* theme.typography.headline.two */
+  /* Headline (m) */
   .sbdocs :is(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
     font-size: 1.5rem;
-    line-height: 1.75rem;
-    font-weight: bold;
+    line-height: 1.625rem;
+    font-weight: semibold;
   }
-  /* theme.typography.headline.two */
+  /* Headline (s) */
   .sbdocs :is(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
-    font-size: 1.25rem;
-    line-height: 1.5rem;
+    font-size: 1.125rem;
+    line-height: 1.375rem;
     font-weight: bold;
   }
-  /* theme.typography.body.one */
+  /* Body (m) */
   .sbdocs :is(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
   .sbdocs :is(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
+    font-size: 1rem;
+    line-height: 1.375rem;
   }
   .sbdocs :is(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
     text-decoration: underline;