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

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

@@ -0,0 +1,452 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from './Stack';
+import { View } from './View';
+
+const meta: Meta<typeof View> = {
+  title: 'Bumper/Core/Primitives/View/Features',
+  component: View,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BackgroundColors: Story = {
+  render: () => (
+    <VStack gap="$space.8">
+      <View backgroundColor="$bg.base.low.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.base.low.default</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.base.mid.default</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.base.hi.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.base.hi.default</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+          bg.accent.default
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+          bg.promo.hi.default
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.info.mid</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.success.mid</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.warning.mid" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.warning.mid</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.danger.mid" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">bg.danger.mid</Typography.Text>
+      </View>
+    </VStack>
+  ),
+};
+
+export const BordersAndRadius: Story = {
+  render: () => (
+    <HStack gap="$space.16" flexWrap="wrap">
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.24"
+        borderWidth={1}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.none"
+      >
+        <Typography.Text variant="body-s">radius.none</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.24"
+        borderWidth={1}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.s"
+      >
+        <Typography.Text variant="body-s">radius.s</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.24"
+        borderWidth={1}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">radius.m</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.24"
+        borderWidth={1}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.l"
+      >
+        <Typography.Text variant="body-s">radius.l</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.24"
+        width="$size.96"
+        height="$size.96"
+        borderWidth={1}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.circle"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography.Text variant="body-s">circle</Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const BorderColors: Story = {
+  render: () => (
+    <HStack gap="$space.16" flexWrap="wrap">
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.base.low"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.base.low</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.base.mid"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.base.mid</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.base.accent"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.base.accent</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.info"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.info</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.success"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.success</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.warning"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.warning</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.low.default"
+        padding="$space.16"
+        borderWidth={2}
+        borderColor="$border.danger"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">border.danger</Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const PaddingVariants: Story = {
+  render: () => (
+    <HStack gap="$space.8" flexWrap="wrap">
+      <View backgroundColor="$bg.info.mid" padding="$space.none" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.none</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.4" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.4</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.8" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.8</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.16</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.24" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.24</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.mid" padding="$space.32" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">space.32</Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const DirectionalPadding: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <View backgroundColor="$bg.success.mid" paddingTop="$space.32" paddingBottom="$space.8" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">paddingTop: space.32, paddingBottom: space.8</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" paddingLeft="$space.32" paddingRight="$space.8" borderRadius="$radius.m">
+        <Typography.Text variant="body-s">paddingLeft: space.32, paddingRight: space.8</Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.success.mid"
+        paddingHorizontal="$space.32"
+        paddingVertical="$space.8"
+        borderRadius="$radius.m"
+      >
+        <Typography.Text variant="body-s">paddingHorizontal: space.32, paddingVertical: space.8</Typography.Text>
+      </View>
+    </VStack>
+  ),
+};
+
+export const MarginVariants: Story = {
+  render: () => (
+    <View backgroundColor="$bg.base.hi.default" padding="$space.8" borderRadius="$radius.m">
+      <VStack gap="$space.none">
+        <View backgroundColor="$bg.accent.default" margin="$space.8" padding="$space.16" borderRadius="$radius.m">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            margin: space.8
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.accent.default" margin="$space.16" padding="$space.16" borderRadius="$radius.m">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            margin: space.16
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.accent.default" margin="$space.24" padding="$space.16" borderRadius="$radius.m">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            margin: space.24
+          </Typography.Text>
+        </View>
+      </VStack>
+    </View>
+  ),
+};
+
+export const DirectionalMargin: Story = {
+  render: () => (
+    <View backgroundColor="$bg.base.hi.default" padding="$space.8" borderRadius="$radius.m">
+      <VStack gap="$space.none">
+        <View
+          backgroundColor="$bg.promo.hi.default"
+          marginTop="$space.32"
+          marginBottom="$space.8"
+          padding="$space.16"
+          borderRadius="$radius.m"
+        >
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            marginTop: space.32, marginBottom: space.8
+          </Typography.Text>
+        </View>
+        <View
+          backgroundColor="$bg.promo.hi.default"
+          marginHorizontal="$space.32"
+          marginVertical="$space.8"
+          padding="$space.16"
+          borderRadius="$radius.m"
+        >
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            marginHorizontal: space.32, marginVertical: space.8
+          </Typography.Text>
+        </View>
+      </VStack>
+    </View>
+  ),
+};
+
+export const FlexLayout: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <View backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m" flexDirection="row">
+        <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            flexGrow: 1
+          </Typography.Text>
+        </View>
+        <View
+          backgroundColor="$bg.promo.hi.default"
+          padding="$space.16"
+          borderRadius="$radius.s"
+          flexGrow={2}
+          marginLeft="$space.8"
+        >
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            flexGrow: 2
+          </Typography.Text>
+        </View>
+      </View>
+
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        flexDirection="row"
+        gap="$space.8"
+      >
+        <View backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-s">flexGrow: 1</Typography.Text>
+        </View>
+        <View backgroundColor="$bg.success.mid" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-s">flexGrow: 1</Typography.Text>
+        </View>
+        <View backgroundColor="$bg.warning.mid" padding="$space.16" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-s">flexGrow: 1</Typography.Text>
+        </View>
+      </View>
+    </VStack>
+  ),
+};
+
+export const FlexAlignment: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        height="$size.120"
+        flexDirection="row"
+        alignItems="flex-start"
+        justifyContent="flex-start"
+      >
+        <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            alignItems: flex-start, justifyContent: flex-start
+          </Typography.Text>
+        </View>
+      </View>
+
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        height="$size.120"
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            alignItems: center, justifyContent: center
+          </Typography.Text>
+        </View>
+      </View>
+
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        height="$size.120"
+        flexDirection="row"
+        alignItems="flex-end"
+        justifyContent="flex-end"
+      >
+        <View backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s">alignItems: flex-end, justifyContent: flex-end</Typography.Text>
+        </View>
+      </View>
+
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        height="$size.120"
+        flexDirection="row"
+        alignItems="stretch"
+        justifyContent="space-between"
+      >
+        <View backgroundColor="$bg.success.mid" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s">Item 1</Typography.Text>
+        </View>
+        <View backgroundColor="$bg.warning.mid" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s">Item 2</Typography.Text>
+        </View>
+        <View backgroundColor="$bg.danger.mid" padding="$space.16" borderRadius="$radius.s">
+          <Typography.Text variant="body-s">Item 3</Typography.Text>
+        </View>
+      </View>
+    </VStack>
+  ),
+};
+
+export const FlexWrap: Story = {
+  render: () => (
+    <View
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      flexDirection="row"
+      flexWrap="wrap"
+      gap="$space.8"
+    >
+      {Array.from({ length: 12 }, (_, i) => (
+        <View
+          key={`item-${i}`}
+          backgroundColor="$bg.accent.default"
+          padding="$space.16"
+          borderRadius="$radius.s"
+          width="$size.64"
+        >
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            {i + 1}
+          </Typography.Text>
+        </View>
+      ))}
+    </View>
+  ),
+};
+
+export const OverflowBehavior: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        width="$size.208"
+        height="$size.96"
+        overflow="hidden"
+      >
+        <Typography.Text variant="body-s">
+          overflow: hidden - This long text content will be clipped when it exceeds the container's dimensions and won't
+          cause scrollbars to appear
+        </Typography.Text>
+      </View>
+      <View
+        backgroundColor="$bg.base.mid.default"
+        padding="$space.16"
+        borderRadius="$radius.m"
+        width="$size.208"
+        height="$size.96"
+        overflow="scroll"
+      >
+        <Typography.Text variant="body-s">
+          overflow: scroll - This long text content will be scrollable when it exceeds the container's dimensions,
+          allowing users to access all content
+        </Typography.Text>
+      </View>
+    </VStack>
+  ),
+};

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

@@ -1,14 +1,127 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { ViewProps } from './View';
+import type { Meta, StoryObj } from '@storybook/react';
 import { View } from './View';
 
-export default {
-  title: 'bumper/Primitives',
+const meta: Meta<typeof View> = {
+  title: 'Bumper/Core/Primitives/View',
   component: View,
-} satisfies Meta<ViewProps>;
+  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)',
+    },
+    margin: {
+      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: 'Margin (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)',
+    },
+  },
+};
 
-export const ViewStory: StoryFn<typeof View> = () => (
-  <View width="$size.120" height="$size.120" backgroundColor="$bg.accent.default" />
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-ViewStory.storyName = 'View';
+export const Default: Story = {
+  args: {
+    backgroundColor: '$bg.base.mid.default',
+    padding: '$space.16',
+  },
+};