@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0",
+  "version": "2.8.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@tamagui/core": "1.135.6"
+    "@tamagui/core": "1.144.2"
   },
   "peerDependencies": {
     "@storybook/preview-api": ">=8.6.15",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
@@ -52,11 +52,11 @@
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.1",
     "@testing-library/react-native": "13.3.3",
-    "@types/react": "19.0.10",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.6",
-    "react-test-renderer": "19.0.0"
+    "@types/react": "18.3.27",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-test-renderer": "18.3.1"
   },
   "expo": {},
   "exports": {

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

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VStack } from '../../core/primitives/Stack';
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Typography.Text> = {
+  title: 'Bumper/Content/Typography/Features',
+  component: Typography.Text,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HeadingVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="heading-2xl">Heading 2XL - Semibold</Typography.Text>
+      <Typography.Text variant="heading-xl">Heading XL - Semibold</Typography.Text>
+      <Typography.Text variant="heading-l">Heading L - Semibold</Typography.Text>
+      <Typography.Text variant="heading-m">Heading M - Semibold</Typography.Text>
+      <Typography.Text variant="heading-s">Heading S - Semibold</Typography.Text>
+      <Typography.Text variant="heading-xs">Heading XS - Semibold</Typography.Text>
+      <Typography.Text variant="heading-2xs">Heading 2XS - Semibold</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const BodyVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-xl" weight="regular">
+        Body XL Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-l" weight="regular">
+        Body L Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-m" weight="regular">
+        Body M Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-s" weight="regular">
+        Body S Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-xs" weight="regular">
+        Body XS Regular - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const BodyVariantsBold: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-xl" weight="bold">
+        Body XL Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-l" weight="bold">
+        Body L Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-m" weight="bold">
+        Body M Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-s" weight="bold">
+        Body S Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+      <Typography.Text variant="body-xs" weight="bold">
+        Body XS Bold - The quick brown fox jumps over the lazy dog
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const LabelVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="label-xl">Label XL - Semibold</Typography.Text>
+      <Typography.Text variant="label-l">Label L - Semibold</Typography.Text>
+      <Typography.Text variant="label-m">Label M - Semibold</Typography.Text>
+      <Typography.Text variant="label-s">Label S - Semibold</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const ContentCapsVariants: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="content-caps-3xl">CONTENT CAPS 3XL</Typography.Text>
+      <Typography.Text variant="content-caps-2xl">CONTENT CAPS 2XL</Typography.Text>
+      <Typography.Text variant="content-caps-xl">CONTENT CAPS XL</Typography.Text>
+      <Typography.Text variant="content-caps-l">CONTENT CAPS L</Typography.Text>
+      <Typography.Text variant="content-caps-m">CONTENT CAPS M</Typography.Text>
+      <Typography.Text variant="content-caps-s">CONTENT CAPS S</Typography.Text>
+      <Typography.Text variant="content-caps-xs">CONTENT CAPS XS</Typography.Text>
+    </VStack>
+  ),
+};
+
+export const HeaderComponents: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Header1 variant="heading-2xl">Header 1 - heading-2xl</Typography.Header1>
+      <Typography.Header2 variant="heading-xl">Header 2 - heading-xl</Typography.Header2>
+      <Typography.Header3 variant="heading-l">Header 3 - heading-l</Typography.Header3>
+      <Typography.Header4 variant="heading-m">Header 4 - heading-m</Typography.Header4>
+      <Typography.Header5 variant="heading-s">Header 5 - heading-s</Typography.Header5>
+      <Typography.Header6 variant="heading-xs">Header 6 - heading-xs</Typography.Header6>
+    </VStack>
+  ),
+};
+
+export const ContextInheritance: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Parent variant
+        </Typography.Text>
+        <Typography.Text variant="body-l" weight="bold" color="$content.accent">
+          Parent: body-l bold accent
+          <Typography.Text> - Child inherits all (variant, weight, color)</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Weight inheritance
+        </Typography.Text>
+        <Typography.Text variant="body-m" weight="bold">
+          Parent: body-m bold
+          <Typography.Text> - Child inherits weight</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Color inheritance
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          Parent: success color
+          <Typography.Text> - Child inherits color</Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" weight="regular" color="$content.base.mid">
+          Override inherited values
+        </Typography.Text>
+        <Typography.Text variant="body-m" weight="bold" color="$content.accent">
+          Parent: body-m bold accent
+          <Typography.Text variant="body-s" weight="regular" color="$content.danger">
+            {' '}
+            - Child overrides all
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};

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',
+  },
 };