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

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

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/ScrollView Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <span
+            class="_dsp_contents"
+          >
+            <div
+              class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-t-size-size42947888 _width-t-size-size42948634"
+            >
+              <div
+                class="css-view-g5y9jx"
+                style="gap: var(--t-space-space--8);"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 1
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 2
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 3
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 4
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 5
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 6
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 7
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 8
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 9
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--info--m3355 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310"
+                    data-disable-theme="true"
+                  >
+                    Item 10
+                  </span>
+                </div>
+              </div>
+            </div>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, Stack, VStack } from './Stack';
+import { View } from './View';
+
+const meta: Meta<typeof Stack> = {
+  title: 'Bumper/Core/Primitives/Stack/Features',
+  component: Stack,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const VStackBasic: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 3
+        </Typography.Text>
+      </View>
+    </VStack>
+  ),
+};
+
+export const HStackBasic: Story = {
+  render: () => (
+    <HStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 3
+        </Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const FlexWrap: Story = {
+  render: () => (
+    <HStack
+      gap="$space.8"
+      flexWrap="wrap"
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      maxWidth={400}
+    >
+      {Array.from({ length: 10 }, (_, i) => (
+        <View key={`item-${i}`} backgroundColor="$bg.accent.default" padding="$space.12" borderRadius="$radius.s">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            Item {i + 1}
+          </Typography.Text>
+        </View>
+      ))}
+    </HStack>
+  ),
+};
+
+export const NestedStacks: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.hi.default" padding="$space.24" borderRadius="$radius.l">
+      <Typography.Text variant="heading-m">Nested Stacks Layout</Typography.Text>
+
+      <VStack gap="$space.12" backgroundColor="$bg.base.low.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="label-m">Section 1</Typography.Text>
+        <HStack gap="$space.8">
+          <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+            <Typography.Text variant="body-s">Col 1</Typography.Text>
+          </View>
+          <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+            <Typography.Text variant="body-s">Col 2</Typography.Text>
+          </View>
+        </HStack>
+      </VStack>
+
+      <VStack gap="$space.12" backgroundColor="$bg.base.low.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="label-m">Section 2</Typography.Text>
+        <VStack gap="$space.8">
+          <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s">
+            <Typography.Text variant="body-s">Row 1</Typography.Text>
+          </View>
+          <View backgroundColor="$bg.danger.mid" padding="$space.12" borderRadius="$radius.s">
+            <Typography.Text variant="body-s">Row 2</Typography.Text>
+          </View>
+        </VStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const FlexGrowExample: Story = {
+  render: () => (
+    <HStack
+      gap="$space.8"
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      height="$size.144"
+    >
+      <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Fixed</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-s">flexGrow: 1</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={2}>
+        <Typography.Text variant="body-s">flexGrow: 2</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.danger.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Fixed</Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const GridLikeLayout: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.accent.default" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            1
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.promo.hi.default" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            2
+          </Typography.Text>
+        </View>
+      </HStack>
+
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.info.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            3
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.success.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            4
+          </Typography.Text>
+        </View>
+      </HStack>
+
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.warning.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            5
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.danger.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            6
+          </Typography.Text>
+        </View>
+      </HStack>
+    </VStack>
+  ),
+};

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

@@ -1,49 +1,79 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { StackProps } from './Stack';
-import { HStack, Stack, VStack } from './Stack';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { Stack } from './Stack';
 import { View } from './View';
 
-export default {
-  title: 'bumper/Primitives',
+const meta: Meta<typeof Stack> = {
+  title: 'Bumper/Core/Primitives/Stack',
   component: Stack,
-} satisfies Meta<StackProps>;
+  tags: ['autodocs'],
+  argTypes: {
+    flexDirection: {
+      control: 'select',
+      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)',
+    },
+  },
+};
 
-const items = (
-  <>
-    <View
-      width="$size.64"
-      height="$size.20"
-      backgroundColor="$bg.accent.default"
-      padding="$space.4"
-      borderRadius="$radius.s"
-    />
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-    <View
-      width="$size.64"
-      height="$size.20"
-      backgroundColor="$bg.highlight.hi.default"
-      padding="$space.4"
-      borderRadius="$radius.s"
-    />
-
-    <View
-      width="$size.64"
-      height="$size.20"
-      backgroundColor="$bg.highlight.mid.default"
-      padding="$space.4"
-      borderRadius="$radius.s"
-    />
-  </>
-);
-
-export const StackStory: StoryFn<typeof Stack> = () => (
-  <>
-    <HStack gap="$space.4">{items}</HStack>
-
-    <VStack gap="$space.4" marginTop="$space.16">
-      {items}
-    </VStack>
-  </>
-);
-
-StackStory.storyName = 'Stack';
+export const Default: Story = {
+  args: {
+    flexDirection: 'row',
+    gap: '$space.16',
+    padding: '$space.16',
+  },
+  render: (args) => (
+    <Stack {...args}>
+      <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 1</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 2</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 3</Typography.Text>
+      </View>
+    </Stack>
+  ),
+};