@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0

package/src/system/content/typography/Typography.stories.tsx

@@ -1,172 +1,78 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { FC } from 'react';
-import { StorySection } from '../../../shared/storybook/StorySection';
-import { VStack } from '../../core/primitives/Stack';
-import { View } from '../../core/primitives/View';
-import type {
-  BodyFontVariants,
-  ContentCapsVariants,
-  FontVariants,
-  HeadingFontVariants,
-  LabelFontVariants,
-} from '../../core/tokens/fonts';
-import type { TypographyTextProps } from './Typography';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 
-export default {
-  title: 'bumper/Typography/Typography',
+const meta: Meta<typeof Typography.Text> = {
+  title: 'Bumper/Content/Typography',
   component: Typography.Text,
-} satisfies Meta<typeof Typography.Text>;
-
-interface TypographyTypeWithComponent<T extends FontVariants> {
-  component: FC<TypographyTextProps>;
-  variant: T;
-  weights: TypographyTextProps['weight'][];
-}
-
-const headingVariants: TypographyTypeWithComponent<HeadingFontVariants>[] = [
-  { component: Typography.Text, variant: 'heading-2xl', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-xl', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-l', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-m', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-s', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-xs', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'heading-2xs', weights: ['semibold'] },
-];
-
-const bodyVariants: TypographyTypeWithComponent<BodyFontVariants>[] = [
-  { component: Typography.Text, variant: 'body-xl', weights: ['bold', 'regular'] },
-  { component: Typography.Text, variant: 'body-l', weights: ['bold', 'regular'] },
-  { component: Typography.Text, variant: 'body-m', weights: ['bold', 'regular'] },
-  { component: Typography.Text, variant: 'body-s', weights: ['bold', 'regular'] },
-  { component: Typography.Text, variant: 'body-xs', weights: ['bold', 'regular'] },
-];
-
-const labelVariants: TypographyTypeWithComponent<LabelFontVariants>[] = [
-  { component: Typography.Text, variant: 'label-xl', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'label-l', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'label-m', weights: ['semibold'] },
-  { component: Typography.Text, variant: 'label-s', weights: ['semibold'] },
-];
-
-const contentCapsVariants: TypographyTypeWithComponent<ContentCapsVariants>[] = [
-  { component: Typography.Text, variant: 'content-caps-3xl', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-2xl', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-xl', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-l', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-m', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-s', weights: ['bold'] },
-  { component: Typography.Text, variant: 'content-caps-xs', weights: ['bold'] },
-];
-
-interface TypographyTypesProps {
-  types: TypographyTypeWithComponent<FontVariants>[];
-}
-
-function TypographyVariants({ types }: TypographyTypesProps) {
-  return (
-    <>
-      {types.map((type) => {
-        return type.weights.map((weight) => (
-          <VStack key={`${type.variant}-${weight}`} marginBottom="$space.16">
-            <Typography.Text variant="heading-s">{`${type.variant.split('-').join(' ')} - ${
-              weight || ''
-            }`}</Typography.Text>
-            <View
-              paddingVertical="$space.4"
-              paddingHorizontal="$space.8"
-              borderRadius="$radius.m"
-              backgroundColor="$bg.base.mid.default"
-              marginTop="$space.4"
-            >
-              {/* @ts-expect-error some variants does not support specific weight */}
-              <Typography.Text variant={type.variant} weight={weight}>
-                The quick brown fox jumps over the lazy dog
-              </Typography.Text>
-            </View>
-          </VStack>
-        ));
-      })}
-    </>
-  );
-}
-
-export const TypographyStory: StoryFn<typeof Typography.Text> = (args) => (
-  <>
-    <StorySection.Demo>
-      <Typography.Text {...args} />
-    </StorySection.Demo>
-    <StorySection title="Inheritance">
-      <StorySection.SubSection title="Type inheritance">
-        <Typography.Text variant="body-l">
-          Type is body-l{' '}
-          <Typography.Text variant="heading-l">
-            type is heading-l <Typography.Text color="$content.accent">type is undefined</Typography.Text>
-          </Typography.Text>{' '}
-          <Typography.Text color="$content.danger">
-            type is undefined <Typography.Text variant="body-s">Type is body-s</Typography.Text>
-          </Typography.Text>
-          .
-        </Typography.Text>
-      </StorySection.SubSection>
-      <StorySection.SubSection title="Weight inheritance">
-        <Typography.Text>
-          weight is undefined{' '}
-          <Typography.Text weight="bold">
-            weight is bold{' '}
-            <Typography.Text variant="heading-m">
-              weight is undefined and type is heading-m{' '}
-              <Typography.Text variant="body-m" weight="regular">
-                weight is regular <Typography.Text weight="bold">weight is bold</Typography.Text>
-              </Typography.Text>
-            </Typography.Text>
-          </Typography.Text>{' '}
-        </Typography.Text>
-      </StorySection.SubSection>
-      <StorySection.SubSection title="Color inheritance">
-        <Typography.Text>
-          color is undefined{' '}
-          <Typography.Text color="$content.accent">
-            color is $content.accent{' '}
-            <Typography.Text>
-              color is undefined{' '}
-              <Typography.Text color="$content.danger">
-                color is content.danger{' '}
-                <Typography.Text color="$content.base.hi">color is content.base.hi</Typography.Text>
-              </Typography.Text>
-            </Typography.Text>
-          </Typography.Text>
-        </Typography.Text>
-      </StorySection.SubSection>
-      <StorySection title="Heading">
-        <TypographyVariants types={headingVariants} />
-      </StorySection>
-      <StorySection title="Body">
-        <TypographyVariants types={bodyVariants} />
-      </StorySection>
-      <StorySection title="Label">
-        <TypographyVariants types={labelVariants} />
-      </StorySection>
-      <StorySection title="Content Caps">
-        <TypographyVariants types={contentCapsVariants} />
-      </StorySection>
-      <StorySection title="Accessibility">
-        <Typography.Header1>role: heading aria-level: 1</Typography.Header1>
-        <Typography.Header2>role: heading aria-level: 2</Typography.Header2>
-        <Typography.Header3>role: heading aria-level: 3</Typography.Header3>
-        <Typography.Header4>role: heading aria-level: 4</Typography.Header4>
-        <Typography.Header5>role: heading aria-level: 5</Typography.Header5>
-        <Typography.Header6>role: heading aria-level: 6</Typography.Header6>
-      </StorySection>
-    </StorySection>
-  </>
-);
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'heading-2xl',
+        'heading-xl',
+        'heading-l',
+        'heading-m',
+        'heading-s',
+        'heading-xs',
+        'heading-2xs',
+        'body-xl',
+        'body-l',
+        'body-m',
+        'body-s',
+        'body-xs',
+        'label-xl',
+        'label-l',
+        'label-m',
+        'label-s',
+        'content-caps-3xl',
+        'content-caps-2xl',
+        'content-caps-xl',
+        'content-caps-l',
+        'content-caps-m',
+        'content-caps-s',
+        'content-caps-xs',
+      ],
+      description: 'Typography variant (heading, body, label, or content-caps)',
+    },
+    weight: {
+      control: 'select',
+      options: ['regular', 'semibold', 'bold'],
+      description: 'Font weight (note: heading/label/content-caps variants have fixed weights)',
+    },
+    color: {
+      control: 'select',
+      options: [
+        '$content.base.low',
+        '$content.base.mid',
+        '$content.base.hi',
+        '$content.base.onContrasted.low',
+        '$content.base.onContrasted.mid',
+        '$content.base.onContrasted.hi',
+        '$content.accent',
+        '$content.promo',
+        '$content.promo.onContrasted',
+        '$content.info',
+        '$content.success',
+        '$content.warning',
+        '$content.danger',
+        '$content.muted',
+        '$content.disabled',
+        '$content.disabled.onContrasted',
+      ],
+      description: 'Text color (semantic theme token)',
+    },
+  },
+};
 
-TypographyStory.storyName = 'Typography';
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-TypographyStory.args = {
-  children: 'Hello World',
-  color: '$content.base.hi',
-  weight: 'regular',
-  variant: 'body-m',
+export const Default: Story = {
+  args: {
+    variant: 'body-m',
+    weight: 'regular',
+    color: '$content.base.hi',
+    children: 'The quick brown fox jumps over the lazy dog',
+  },
 };