@ornikar/bumper 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0 → 2.8.1-canary.1769093881.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/src/system/content/typography/__snapshots__/TypographyLink.stories.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyLink Default 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="link"
+    style={
+      {
+        "color": "#563B56",
+        "fontFamily": "GTStandardRegular",
+        "fontSize": 16,
+        "letterSpacing": 0.3,
+        "lineHeight": 24,
+        "textDecorationLine": "underline",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    This is a link
+  </Text>
+</RNCSafeAreaProvider>
+`;

package/src/system/content/typography/__snapshots_web__/TypographyLink.features.stories.tsx.snap

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyLink/Features DisabledFalse 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-inherit _tt-inherit _td-underline _cur-pointer is_TypographyLink "
+            data-disable-theme="true"
+            role="link"
+            tabindex="0"
+          >
+            Enabled link (clickable with pointer cursor)
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features DisabledTrue 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            aria-disabled="true"
+            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-inherit _tt-inherit _td-underline _cur-not-allowed _col-content--di910006857 is_TypographyLink "
+            data-disable-theme="true"
+            role="link"
+            tabindex="0"
+          >
+            Disabled link (not-allowed cursor, onPress removed)
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features NoUnderlineFalse 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-inherit _tt-inherit _cur-pointer _td-underline is_TypographyLink "
+            data-disable-theme="true"
+            role="link"
+            tabindex="0"
+          >
+            Link with underline (default)
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features NoUnderlineTrue 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-inherit _tt-inherit _cur-pointer _td-none is_TypographyLink "
+            data-disable-theme="true"
+            role="link"
+            tabindex="0"
+          >
+            Link without underline
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
+          >
+            <span
+              class="font_GTStandard  is_TypographyLink "
+              data-disable-theme="true"
+              role="link"
+              style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: inherit; margin: 0px 0px 0px 0px; font-family: var(--f-family); -webkit-font-smoothing: antialiased; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration-line: none;"
+              tabindex="0"
+            >
+              Forced hover state - underline removed (hoverStyle applied)
+            </span>
+            <span
+              class="font_GTStandard  is_TypographyLink "
+              data-disable-theme="true"
+              role="link"
+              style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: inherit; margin: 0px 0px 0px 0px; font-family: var(--f-family); -webkit-font-smoothing: antialiased; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration-line: none;"
+              tabindex="0"
+            >
+              Forced hover state with noUnderline - no visual change
+            </span>
+            <span
+              aria-disabled="true"
+              class="font_GTStandard  is_TypographyLink "
+              data-disable-theme="true"
+              role="link"
+              style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: inherit; margin: 0px 0px 0px 0px; font-family: var(--f-family); -webkit-font-smoothing: antialiased; letter-spacing: inherit; text-transform: inherit; text-decoration-line: underline; cursor: not-allowed; color: var(--content--disabled);"
+              tabindex="0"
+            >
+              Forced hover state on disabled - underline removed (hoverStyle applied)
+            </span>
+            <span
+              aria-disabled="true"
+              class="font_GTStandard  is_TypographyLink "
+              data-disable-theme="true"
+              role="link"
+              style="display: inline; box-sizing: border-box; word-wrap: break-word; white-space: inherit; margin: 0px 0px 0px 0px; font-family: var(--f-family); -webkit-font-smoothing: antialiased; letter-spacing: inherit; text-transform: inherit; cursor: not-allowed; color: var(--content--disabled); text-decoration-line: none;"
+              tabindex="0"
+            >
+              Forced hover state with noUnderline on disabled - no visual change
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/typography/__snapshots_web__/TypographyLink.stories.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyLink Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _td-0hover-none _dsp-inline _bxs-border-box _ww-break-word _ws-inherit _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _ls-f-letterSpa1099960304 _tt-inherit _fs-f-size-body1504 _lh-f-lineHeigh201793147 _fw-f-weight-re98715119 _col-content--ac3049896 _cur-pointer _td-underline is_TypographyLink "
+            data-disable-theme="true"
+            role="link"
+            tabindex="0"
+          >
+            This is a link
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/content/typography/index.ts

@@ -0,0 +1,15 @@
+import { TypographyBase, createHeading } from './Typography';
+import { TypographyIcon } from './TypographyIcon';
+import { TypographyLink } from './TypographyLink';
+
+export const Typography = {
+  Text: TypographyBase,
+  Header1: createHeading(1),
+  Header2: createHeading(2),
+  Header3: createHeading(3),
+  Header4: createHeading(4),
+  Header5: createHeading(5),
+  Header6: createHeading(6),
+  Icon: TypographyIcon,
+  Link: TypographyLink,
+};

package/src/system/core/primitives/Center.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { Center } from './Center';
 import { HStack } from './Stack';
 

package/src/system/core/primitives/Center.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '../../content/typography';
 import { Center } from './Center';
 
 const meta: Meta<typeof Center> = {
@@ -7,94 +8,10 @@ const meta: Meta<typeof Center> = {
   component: Center,
   tags: ['autodocs'],
   argTypes: {
-    backgroundColor: {
-      control: 'select',
-      options: [
-        '$bg.base.low.default',
-        '$bg.base.low.pressed',
-        '$bg.base.mid.default',
-        '$bg.base.mid.pressed',
-        '$bg.base.hi.default',
-        '$bg.base.hi.pressed',
-        '$bg.accent.default',
-        '$bg.accent.pressed',
-        '$bg.promo.mid.default',
-        '$bg.promo.mid.pressed',
-        '$bg.promo.hi.default',
-        '$bg.promo.hi.pressed',
-        '$bg.highlight.mid.default',
-        '$bg.highlight.mid.pressed',
-        '$bg.highlight.hi.default',
-        '$bg.highlight.hi.pressed',
-        '$bg.info.mid',
-        '$bg.info.hi',
-        '$bg.success.mid',
-        '$bg.success.hi',
-        '$bg.warning.mid',
-        '$bg.warning.hi',
-        '$bg.danger.mid',
-        '$bg.danger.hi',
-        '$bg.disabled.mid',
-        '$bg.disabled.hi',
-        '$bg.overlay',
-      ],
-      description: 'Background color (semantic theme token)',
-    },
-    padding: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Padding (space token)',
-    },
-    width: {
-      control: 'select',
-      options: [
-        '$size.16',
-        '$size.20',
-        '$size.24',
-        '$size.32',
-        '$size.48',
-        '$size.64',
-        '$size.80',
-        '$size.96',
-        '$size.120',
-        '$size.144',
-        '$size.176',
-        '$size.208',
-      ],
-      description: 'Width (size token)',
-    },
-    height: {
-      control: 'select',
-      options: [
-        '$size.16',
-        '$size.20',
-        '$size.24',
-        '$size.32',
-        '$size.48',
-        '$size.64',
-        '$size.80',
-        '$size.96',
-        '$size.120',
-        '$size.144',
-        '$size.176',
-        '$size.208',
-      ],
-      description: 'Height (size token)',
-    },
+    backgroundColor: backgroundColorArgType,
+    padding: spaceArgType,
+    width: sizeArgType,
+    height: sizeArgType,
   },
 };
 

package/src/system/core/primitives/Image/Image.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
 import { Image } from './Image';
 
 const meta: Meta<typeof Image> = {
@@ -9,14 +10,8 @@ const meta: Meta<typeof Image> = {
     source: {
       table: { disable: true },
     },
-    width: {
-      control: 'select',
-      options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
-    },
-    height: {
-      control: 'select',
-      options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
-    },
+    width: sizeArgType,
+    height: sizeArgType,
     resizeMode: {
       control: 'select',
       options: ['cover', 'contain', 'stretch', 'center'],

package/src/system/core/primitives/Pressable.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { Pressable } from './Pressable';
 import { HStack, VStack } from './Stack';
 

package/src/system/core/primitives/Pressable.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { backgroundColorArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '../../content/typography';
 import { Pressable } from './Pressable';
 
 const meta: Meta<typeof Pressable> = {
@@ -7,58 +8,8 @@ const meta: Meta<typeof Pressable> = {
   component: Pressable,
   tags: ['autodocs'],
   argTypes: {
-    backgroundColor: {
-      control: 'select',
-      options: [
-        '$bg.base.low.default',
-        '$bg.base.low.pressed',
-        '$bg.base.mid.default',
-        '$bg.base.mid.pressed',
-        '$bg.base.hi.default',
-        '$bg.base.hi.pressed',
-        '$bg.accent.default',
-        '$bg.accent.pressed',
-        '$bg.promo.mid.default',
-        '$bg.promo.mid.pressed',
-        '$bg.promo.hi.default',
-        '$bg.promo.hi.pressed',
-        '$bg.highlight.mid.default',
-        '$bg.highlight.mid.pressed',
-        '$bg.highlight.hi.default',
-        '$bg.highlight.hi.pressed',
-        '$bg.info.mid',
-        '$bg.info.hi',
-        '$bg.success.mid',
-        '$bg.success.hi',
-        '$bg.warning.mid',
-        '$bg.warning.hi',
-        '$bg.danger.mid',
-        '$bg.danger.hi',
-        '$bg.disabled.mid',
-        '$bg.disabled.hi',
-        '$bg.overlay',
-      ],
-      description: 'Background color (semantic theme token)',
-    },
-    padding: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Padding (space token)',
-    },
+    backgroundColor: backgroundColorArgType,
+    padding: spaceArgType,
     pressStyle: {
       control: 'object',
       description: 'Styles to apply on press',

package/src/system/core/primitives/ScrollView/ScrollView.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../../content/typography/Typography';
+import { Typography } from '../../../content/typography';
 import { HStack, VStack } from '../Stack';
 import { View } from '../View';
 import { ScrollView } from './ScrollView';

package/src/system/core/primitives/ScrollView/ScrollView.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../../content/typography/Typography';
+import { sizeArgType } from '../../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '../../../content/typography';
 import { View } from '../View';
 import { ScrollView } from './ScrollView';
 
@@ -24,11 +25,7 @@ const meta: Meta<typeof ScrollView> = {
       control: 'boolean',
       description: 'When true, shows a horizontal scroll indicator',
     },
-    height: {
-      control: 'select',
-      options: ['$size.96', '$size.120', '$size.144', '$size.176', '$size.208'],
-      description: 'Height of the scroll view (size token)',
-    },
+    height: sizeArgType,
     width: {
       control: 'select',
       options: ['$size.176', '$size.208', '100%'],

package/src/system/core/primitives/Stack.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { HStack, Stack, VStack } from './Stack';
 import { View } from './View';
 

package/src/system/core/primitives/Stack.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '../../content/typography';
 import { Stack } from './Stack';
 import { View } from './View';
 
@@ -13,44 +14,8 @@ const meta: Meta<typeof Stack> = {
       options: ['row', 'column', 'row-reverse', 'column-reverse'],
       description: 'Flex direction',
     },
-    gap: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Gap between items (space token)',
-    },
-    padding: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Padding (space token)',
-    },
+    gap: spaceArgType,
+    padding: spaceArgType,
   },
 };
 

package/src/system/core/primitives/View.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { HStack, VStack } from './Stack';
 import { View } from './View';