@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/AlignSelf.stories.js

@@ -0,0 +1,101 @@
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      direction={args.direction}
+    >
+      <Group height="60" minWidth="25%" fill="accentPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group
+        height="60"
+        minWidth="25%"
+        fill="primaryPrimary"
+        padding="20"
+        alignSelf={args.alignSelf}
+        textAlign="center"
+      >
+        <Text size="xl" textColor="accentTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group height="60" minWidth="25%" fill="secondaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group height="60" minWidth="25%" fill="infoPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / AlignSelf',
+}
+
+const Default = {
+  args: {
+    width: '500',
+    padding: '20',
+    borderColor: 'surfaceBorderPrimary',
+    direction: 'vertical',
+    fill: 'surfacePrimary',
+  },
+}
+
+export const Stretch = {
+  args: {
+    ...Default.args,
+    alignSelf: 'stretch',
+  },
+}
+
+export const FlexStart = {
+  args: {
+    ...Default.args,
+    alignSelf: 'flex-start',
+  },
+}
+
+export const FlexEnd = {
+  args: {
+    ...Default.args,
+    alignSelf: 'flex-end',
+  },
+}
+
+export const Center = {
+  args: {
+    ...Default.args,
+    alignSelf: 'center',
+  },
+}
+
+export const Baseline = {
+  args: {
+    ...Default.args,
+    alignSelf: 'baseline',
+  },
+}
+
+export const Auto = {
+  args: {
+    ...Default.args,
+    alignSelf: 'auto',
+  },
+}

package/dist/stories/Appearance.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AppearanceStories from './Appearance.stories.js'
+
+<Meta title="Atoms / Tab / Appearance" />
+
+# Appearance
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={AppearanceStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={AppearanceStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={AppearanceStories.SurfaceTertiary} />
+
+## SurfaceQuaternary
+
+<Canvas sourceState="shown" of={AppearanceStories.SurfaceQuaternary} />
+
+## Accent
+
+<Canvas sourceState="shown" of={AppearanceStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={AppearanceStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={AppearanceStories.Secondary} />

package/dist/stories/Appearance.stories.js

@@ -0,0 +1,101 @@
+import { badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import tabAppearance from '../appearance.json'
+import { Tab, tabConfig } from '../Tab'
+import { argTypes } from './args'
+
+tabConfig.setAppearance(tabAppearance)
+badgeConfig.setAppearance(badgeAppearance)
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Tab / Appearance',
+}
+
+export const Default = {
+  args: {
+    appearance: 'any',
+    badge: true,
+    badgeAppearance: 'accent',
+    badgeSize: 'xs',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+    label: 'Label',
+    labelTextSize: 'm',
+    size: 'normal',
+  },
+}
+
+export const SurfacePrimary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfacePrimary',
+  },
+}
+
+export const SurfaceSecondary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceSecondary',
+  },
+}
+
+export const SurfaceTertiary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceTertiary',
+  },
+}
+
+export const SurfaceQuaternary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceQuaternary',
+  },
+}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+    badgeAppearance: 'surfacePrimary',
+  },
+}
+
+export const Primary = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+  },
+}
+
+export const Secondary = {
+  args: {
+    ...Default.args,
+    appearance: 'secondary',
+  },
+}

package/dist/stories/Avatar.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AvatarStories from './Avatar.stories.js'
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+## Image
+
+<Canvas sourceState="shown" of={AvatarStories.Image} />
+
+## ImageWithIcon
+
+<Canvas sourceState="shown" of={AvatarStories.ImageWithIcon} />
+
+## Text
+
+<Canvas sourceState="shown" of={AvatarStories.Text} />
+
+## TextWithIcon
+
+<Canvas sourceState="shown" of={AvatarStories.TextWithIcon} />

package/dist/stories/Avatar.stories.js

@@ -1,4 +1,3 @@
-import { Avatar } from '@itcase/ui/components/Avatar'
 import {
   fillHoverProps,
   fillProps,
@@ -9,114 +8,120 @@ import {
   textColorProps,
   textSizeProps,
   textWeightProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Avatar } from '../Avatar'
 
 export default {
-  title: 'Atoms / Avatar',
-  component: Avatar,
+  args: {
+    children: [],
+    advancedProps: false,
+    className: '',
+    fill: 'surfaceTertiary',
+    shape: 'circular',
+    size: 96,
+    onClick: '',
+  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
     children: {
       if: { arg: 'advancedProps' },
     },
-    src: {
-      type: 'select',
-      options: ['assets/avatar/woman.png', 'assets/avatar/man.png'],
-      if: { arg: 'type', eq: 'image' },
-    },
-    onClick: {
+    advancedProps: { control: 'boolean' },
+    className: {
       if: { arg: 'advancedProps' },
     },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    iconSrc: {
-      control: 'select',
-      options: [null, 'assets/40/close.svg'],
-    },
-    textSize: {
-      control: 'select',
-      options: textSizeProps,
-      if: { arg: 'type', eq: 'text' },
-    },
-    textColor: {
+    fill: {
       control: 'select',
-      options: textColorProps,
       if: { arg: 'type', eq: 'text' },
+      options: fillProps,
     },
-    textWeight: {
-      control: 'select',
-      options: textWeightProps,
+    firstName: {
       if: { arg: 'type', eq: 'text' },
     },
-
     iconFill: {
       control: 'select',
-      options: fillProps,
       if: { arg: 'iconSrc', neq: null },
+      options: fillProps,
     },
     iconFillHover: {
-      options: fillHoverProps,
       control: 'select',
       if: { arg: 'iconSrc', neq: null },
+      options: fillHoverProps,
     },
-    iconItemFill: {
-      options: fillProps,
-      control: 'select',
+    iconFillSize: {
+      control: 'inline-radio',
       if: { arg: 'iconSrc', neq: null },
+      options: iconFillSizeProps,
     },
-    iconSize: {
-      options: iconSizeProps,
-      control: 'inline-radio',
+    iconItemFill: {
+      control: 'select',
       if: { arg: 'iconSrc', neq: null },
+      options: fillProps,
     },
     iconShape: {
-      options: shapeProps,
       control: 'inline-radio',
       if: { arg: 'iconSrc', neq: null },
+      options: shapeProps,
     },
-    iconFillSize: {
-      options: iconFillSizeProps,
+
+    iconSize: {
       control: 'inline-radio',
       if: { arg: 'iconSrc', neq: null },
+      options: iconSizeProps,
     },
-    fill: {
-      options: fillProps,
+    iconSrc: {
       control: 'select',
+      options: [null, 'assets/40/close.svg'],
+    },
+    mode: {
+      control: 'inline-radio',
+      options: [null, 'skeleton'],
+    },
+    secondName: {
       if: { arg: 'type', eq: 'text' },
     },
-    size: {
-      options: sizePXProps,
+    shape: {
       control: 'inline-radio',
+      options: shapeProps,
     },
-    type: {
-      options: ['image', 'text'],
+    size: {
       control: 'inline-radio',
+      options: sizePXProps,
     },
-    firstName: {
+    src: {
+      if: { arg: 'type', eq: 'image' },
+      options: ['assets/avatar/woman.png', 'assets/avatar/man.png'],
+      type: 'select',
+    },
+    textColor: {
+      control: 'select',
       if: { arg: 'type', eq: 'text' },
+      options: textColorProps,
     },
-    secondName: {
+    textSize: {
+      control: 'select',
       if: { arg: 'type', eq: 'text' },
+      options: textSizeProps,
     },
-    mode: {
-      options: [null, 'skeleton'],
+    textWeight: {
+      control: 'select',
+      if: { arg: 'type', eq: 'text' },
+      options: textWeightProps,
+    },
+    type: {
       control: 'inline-radio',
+      options: ['image', 'text'],
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
     },
   },
-  args: {
-    advancedProps: false,
-    onClick: '',
-    className: '',
-    children: [],
-    shape: 'circular',
-    fill: 'surfaceTertiary',
-    size: 96,
+  component: Avatar,
+  parameters: {
+    controls: {
+      exclude: [],
+    },
   },
+  title: 'Molecules / Avatar',
 }
 
 const ImageProps = {
@@ -125,14 +130,14 @@ const ImageProps = {
 }
 
 const IconProps = {
-  iconSrc: 'assets/40/close.svg',
-  iconSize: 40,
   iconFill: 'accentPrimary',
   iconFillHover: 'accentPrimaryHover',
   iconFillSize: 40,
   iconItemFill: 'accentItemPrimary',
   iconItemFillHover: 'accentItemPrimaryHover',
   iconShape: 'circular',
+  iconSize: 40,
+  iconSrc: 'assets/40/close.svg',
 }
 
 export const Default = {

package/dist/stories/Badge.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as IconStories from '../../Icon/stories/Icon.stories.js'
+import * as BadgeStories from './Badge.stories.js'
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+## Accent
+
+<Canvas sourceState="shown" of={BadgeStories.Accent} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={BadgeStories.Secondary} />
+
+## Primary
+
+<Canvas sourceState="shown" of={BadgeStories.Primary} />

package/dist/stories/Badge.stories.js

@@ -1,4 +1,3 @@
-import { Badge, badgeConfig } from '@itcase/ui/components/Badge'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -8,77 +7,77 @@ import {
   shapeProps,
   sizeProps,
   textColorProps,
-} from '@itcase/ui/constants'
-
-import badgeAppearance from 'src/components/Badge/appearance.json'
+} from '../../../constants'
+import badgeAppearance from '../../Badge/appearance.json'
+import { Badge, badgeConfig } from '../Badge'
 
 badgeConfig.setAppearance(badgeAppearance)
 
 export default {
-  title: 'Atoms / Badge',
-  component: Badge,
   argTypes: {
-    appearance: {
-      options: [null, 'accent', 'secondary', 'primary'],
-      control: 'inline-radio',
-    },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
-    },
-    size: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-    textSize: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-    fill: {
-      options: fillProps,
-      control: 'select',
+    children: {
+      if: { arg: 'advancedProps' },
     },
-    textColor: {
-      options: textColorProps,
+    borderWidth: {
       control: 'select',
+      options: borderWidthProps,
     },
     borderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
-    borderType: {
-      options: borderTypeProps,
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    appearance: {
       control: 'inline-radio',
+      options: [null, 'accent', 'secondary', 'primary'],
     },
     borderColorHover: {
-      options: borderColorHoverProps,
       control: 'select',
+      options: borderColorHoverProps,
     },
-    borderWidth: {
-      options: borderWidthProps,
-      control: 'select',
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    children: {
-      if: { arg: 'advancedProps' },
+    borderType: {
+      control: 'inline-radio',
+      options: borderTypeProps,
     },
     className: {
       if: { arg: 'advancedProps' },
     },
-    type: {
-      if: { arg: 'advancedProps' },
+    fill: {
+      control: 'select',
+      options: fillProps,
     },
     mode: {
+      control: 'inline-radio',
       options: [null, 'skeleton'],
+    },
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
+    },
+    size: {
       control: 'inline-radio',
+      options: sizeProps,
+    },
+    textColor: {
+      control: 'select',
+      options: textColorProps,
+    },
+    textSize: {
+      control: 'inline-radio',
+      options: sizeProps,
+    },
+    type: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Badge,
+  title: 'Atoms / Badge',
 }
 
-export const Default = {
+const Default = {
   args: {
     shape: 'circular',
     size: 's',

package/dist/stories/Button.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story } from '@storybook/blocks'
+
+
+import * as ButtonStories from './Button.stories.js'
+
+<Meta of={ButtonStories} />
+
+# Button
+
+## Accent
+
+<Canvas sourceState="shown" of={ButtonStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={ButtonStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={ButtonStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={ButtonStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={ButtonStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={ButtonStories.SurfaceTertiary} />
+
+## SurfaceDisabled
+
+<Canvas sourceState="shown" of={ButtonStories.SurfaceDisabled} />
+
+## IconBefore
+
+<Canvas sourceState="shown" of={ButtonStories.IconBefore} />
+
+## IconAfter
+
+<Canvas sourceState="shown" of={ButtonStories.IconAfter} />
+
+## WithBadge
+
+<Canvas sourceState="shown" of={ButtonStories.WithBadge} />