@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/Checkbox.stories.js

@@ -1,84 +1,83 @@
-import { Checkbox, checkboxConfig } from '@itcase/ui/components/Checkbox'
-import checkboxState from 'src/components/Checkbox/state.json'
-
-import { fillProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
+import { fillProps, textColorProps, textSizeProps } from '../../../constants'
+import { Checkbox, checkboxConfig } from '../Checkbox'
+import checkboxState from '../state.json'
 
 checkboxConfig.setState(checkboxState)
 
 export default {
-  title: 'Atoms / Checkbox',
-  component: Checkbox,
   argTypes: {
     advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
     checked: {
       control: 'boolean',
     },
-    disabled: {
-      control: 'boolean',
+    className: {
+      if: { arg: 'advancedProps' },
     },
     descTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     descTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
+    },
+    disabled: {
+      control: 'boolean',
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     labelTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     labelTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     shape: {
-      options: [null, 'rounded'],
       control: 'inline-radio',
-    },
-    stateShape: {
       options: [null, 'rounded'],
-      control: 'inline-radio',
     },
     stateBorderWidth: {
+      control: 'inline-radio',
       options: [1, 2, 3, 4, 5],
+    },
+    stateShape: {
       control: 'inline-radio',
+      options: [null, 'rounded'],
     },
   },
+  component: Checkbox,
+  title: 'Atoms / Checkbox',
 }
 
-export const Default = {
+const Default = {
   args: {
     checked: false,
+    desc: 'Description',
+    descTextColor: 'surfaceTextTertiary',
+    descTextSize: 'xxs',
     disabled: false,
     label: 'Checkbox',
-    labelTextSize: 'm',
     labelTextColor: 'surfaceTextPrimary',
-    desc: 'Description',
-    descTextSize: 'xxs',
-    descTextColor: 'surfaceTextTertiary',
-
-    stateShape: 'rounded',
+    labelTextSize: 'm',
 
     stateBorderColor: 'accentBorderSecondary',
+
     stateBorderColorChecked: 'accentBorderSecondary',
     stateBorderColorDisabled: 'accentBorderSecondary',
     stateBorderColorDisabledChecked: 'accentBorderSecondary',
-
     stateBorderWidth: 1,
 
+    stateCheckmarkFill: 'accentItemPrimary',
+
+    stateCheckmarkFillDisabled: 'accentItemDisabled',
     stateFillChecked: 'accentPrimary',
     stateFillDisabled: 'accentDisabled',
     stateFillDisabledChecked: 'accentDisabled',
-    stateCheckmarkFill: 'accentItemPrimary',
-    stateCheckmarkFillDisabled: 'accentItemDisabled',
+    stateShape: 'rounded',
   },
 }
 
@@ -86,31 +85,40 @@ export const CheckedActive = {
   args: {
     ...Default.args,
     checked: true,
-    disabled: false,
     desc: 'Checked / Active',
+    disabled: false,
   },
 }
 export const CheckedDisabled = {
   args: {
     ...Default.args,
     checked: true,
-    disabled: true,
     desc: 'Checked / Disabled',
+    disabled: true,
   },
 }
 export const NotCheckedActive = {
   args: {
     ...Default.args,
     checked: false,
-    disabled: false,
     desc: 'Not Checked / Active',
+    disabled: false,
   },
 }
 export const NotCheckedDisabled = {
   args: {
     ...Default.args,
     checked: false,
-    disabled: true,
     desc: 'Not Checked / Disabled',
+    disabled: true,
+  },
+}
+export const Dev = {
+  args: {
+    ...Default.args,
+    appearance: 'dev',
+    checked: true,
+    desc: 'Checked / Active',
+    disabled: false,
   },
 }

package/dist/stories/Chips.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ChipsStories from './Chips.stories.js'
+
+<Meta of={ChipsStories} />
+
+# Chips
+
+## Accent
+
+<Canvas sourceState="shown" of={ChipsStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={ChipsStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={ChipsStories.Secondary} />
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={ChipsStories.SurfaceTertiary} />

package/dist/stories/Chips.stories.js

@@ -1,23 +1,14 @@
-import { Chips, chipsConfig } from '@itcase/ui/components/Chips'
-import chipsAppearance from 'src/components/Chips/appearance.json'
-
-import {
-  borderColorProps,
-  borderTypeProps,
-  textSizeProps,
-  fillProps,
-  sizeProps,
-  shapeProps,
-} from '@itcase/ui/constants'
+import { Icon } from '../../Icon'
+import chipsAppearance from '../appearance.json'
+import { Chips, chipsConfig } from '../Chips'
+import { argTypes } from './args'
 
 chipsConfig.setAppearance(chipsAppearance)
 
-import { Icon } from '@itcase/ui/components/Icon'
-
-import { icon16 } from 'src/icons'
-
 export default {
-  title: 'Atoms / Chips ',
+  argTypes: {
+    ...argTypes,
+  },
   component: Chips,
   parameters: {
     controls: {
@@ -44,48 +35,20 @@ export default {
       ],
     },
   },
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-    type: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    border: {
-      options: borderColorProps,
-      control: 'select',
-    },
-    borderType: {
-      options: borderTypeProps,
-      control: 'inline-radio',
-    },
-    fill: {
-      options: fillProps,
-      control: 'select',
-    },
-    labelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
-    },
-    size: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-  },
+  title: 'Atoms / Chips ',
 }
 
 export const Default = {
+  args: {
+    appearance: 'accent',
+    label: 'Chips',
+    labelTextSize: 'xxl',
+    shape: 'rounded',
+    size: 'xxl',
+  },
   argTypes: {
     appearance: {
+      control: 'inline-radio',
       options: [
         null,
         'accent',
@@ -95,57 +58,49 @@ export const Default = {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
     },
   },
-  args: {
-    appearance: 'accent',
-    shape: 'rounded',
-    label: 'Chips',
-    size: 'xxl',
-    labelTextSize: 'xxl',
-  },
 }
 
 export const Accent = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="accentItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'accent',
-    children: <Icon iconFill="accentItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }
 export const Primary = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="primaryItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'primary',
-    children: <Icon iconFill="primaryItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }
 export const Secondary = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="secondaryItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'secondary',
-    children: <Icon iconFill="secondaryItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }
 export const SurfacePrimary = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'surfacePrimary',
-    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }
 export const SurfaceSecondary = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'surfaceSecondary',
-    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }
 export const SurfaceTertiary = {
   args: {
     ...Default.args,
+    children: <Icon iconFill="surfaceItemPrimary" imageSrc="assets/16/Remove.svg" size="16" />,
     appearance: 'surfaceTertiary',
-    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
   },
 }

package/dist/stories/Choice.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ChoiceStories from './Choice.stories.js'
+
+<Meta of={ChoiceStories} />
+
+# Choice
+
+## Default
+
+<Canvas sourceState="shown" of={ChoiceStories.Default} />

package/dist/stories/Choice.stories.js

@@ -1,117 +1,115 @@
-import { Choice } from '@itcase/ui/components/Choice'
 import {
   borderColorProps,
   borderWidthProps,
-  textColorProps,
-  textSizeProps,
-  textWeightProps,
-  fillProps,
   fillHoverProps,
-  sizeProps,
+  fillProps,
   shapeProps,
   textColorActiveProps,
-} from '@itcase/ui/constants'
+  textColorProps,
+  textSizeProps,
+} from '../../../constants'
+import { Choice } from '../Choice'
 
 export default {
-  title: 'Atoms / Choice',
-  component: Choice,
-  parameters: {
-    controls: {
-      exclude: [
-        'fill',
-        'icon',
-        'iconSize',
-        'iconItemFillHover',
-        'firstName',
-        'secondName',
-        'textColor',
-        'textSize',
-        'textWeight',
-      ],
-    },
-  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    name: {
-      if: { arg: 'advancedProps' },
-    },
-    setActiveSegment: {
-      if: { arg: 'advancedProps' },
-    },
-    type: {
-      if: { arg: 'advancedProps' },
+    borderWidth: {
+      control: 'inline-radio',
+      options: borderWidthProps,
     },
     borderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
-    borderWidth: {
-      options: borderWidthProps,
-      control: 'inline-radio',
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     fillActive: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     fillActiveHover: {
-      options: fillHoverProps,
       control: 'select',
+      options: fillHoverProps,
     },
     fillHover: {
-      options: fillHoverProps,
       control: 'select',
+      options: fillHoverProps,
     },
     labelTextActiveColor: {
-      options: textColorActiveProps,
       control: 'select',
+      options: textColorActiveProps,
     },
     labelTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     labelTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
+    },
+    name: {
+      if: { arg: 'advancedProps' },
+    },
+    setActiveSegment: {
+      if: { arg: 'advancedProps' },
     },
     shape: {
-      options: shapeProps,
       control: 'inline-radio',
+      options: shapeProps,
     },
     size: {
-      options: ['tiny', 'compact', 'normal'],
       control: 'inline-radio',
+      options: ['tiny', 'compact', 'normal'],
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+  },
+  component: Choice,
+  parameters: {
+    controls: {
+      exclude: [
+        'fill',
+        'icon',
+        'iconSize',
+        'iconItemFillHover',
+        'firstName',
+        'secondName',
+        'textColor',
+        'textSize',
+        'textWeight',
+      ],
     },
   },
+  title: 'Atoms / Choice',
 }
 
 export const Default = {
   args: {
+    borderColor: 'surfaceBorderTertiary',
+    active: {
+      value: 1,
+    },
     fill: 'surfacePrimary',
-    fillHover: 'surfacePrimaryHover',
     fillActive: 'surfacePrimaryActive',
     fillActiveHover: 'surfacePrimaryActiveHover',
-    size: 'normal',
-    shape: 'rounded',
-    borderColor: 'surfaceBorderTertiary',
+    fillHover: 'surfacePrimaryHover',
     labelTextActiveColor: 'surfaceTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     labelTextSize: 'm',
     options: [
-      { value: 1, label: 'Label 1' },
-      { value: 2, label: 'Label 2' },
-      { value: 3, label: 'Label 3' },
-      { value: 4, label: 'Label 4' },
-      { value: 5, label: 'Label 5' },
+      { label: 'Label 1', value: 1 },
+      { label: 'Label 2', value: 2 },
+      { label: 'Label 3', value: 3 },
+      { label: 'Label 4', value: 4 },
+      { label: 'Label 5', value: 5 },
     ],
-    active: {
-      value: 1,
-    },
+    shape: 'rounded',
+    size: 'normal',
   },
 }

package/dist/stories/Code.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as CodeStories from './Code.stories.js'
+
+<Meta of={CodeStories} />
+
+# Code
+
+## Default
+
+<Canvas sourceState="shown" of={CodeStories.Default} />

package/dist/stories/Code.stories.js

@@ -1,32 +1,21 @@
-import { Code } from '@itcase/ui/components/Code'
 import {
-  textColorHoverProps,
-  textWrapProps,
-  itemColorProps,
-  borderColorProps,
   borderColorHoverProps,
+  borderColorProps,
   borderWidthProps,
-  textColorProps,
   fillProps,
+  textColorProps,
   textSizeProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Code } from '../Code'
 
 export default {
-  title: 'Atoms / Code',
-  component: Code,
-  parameters: {
-    controls: {
-      exclude: [
-        'inputBorderColorHover',
-        'inputBorderFocusColor',
-        'inputCaretColor',
-        'inputPlaceholder',
-        'inputType',
-        'value',
-      ],
-    },
+  args: {
+    inputCount: 3,
   },
   argTypes: {
+    gap: {
+      control: { max: 100, min: 1, step: 1, type: 'number' },
+    },
     advancedProps: { control: 'boolean' },
     after: {
       if: { arg: 'advancedProps' },
@@ -37,63 +26,71 @@ export default {
     className: {
       if: { arg: 'advancedProps' },
     },
-    gap: {
-      control: { type: 'number', min: 1, max: 100, step: 1 },
-    },
-    inputSize: {
-      options: ['normal', 'compact'],
-      control: 'inline-radio',
-    },
     inputBorderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
     inputBorderColorHover: {
-      options: borderColorHoverProps,
       control: 'inline-radio',
+      options: borderColorHoverProps,
     },
     inputBorderFocusColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
     inputBorderWidth: {
-      options: borderWidthProps,
       control: 'inline-radio',
+      options: borderWidthProps,
     },
     inputCaretColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     inputCount: {
-      control: { type: 'number', min: 4, max: 12, step: 1 },
+      control: { max: 12, min: 4, step: 1, type: 'number' },
     },
     inputFill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     inputFillHover: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     inputPlaceholder: {
-      control: { type: 'number', min: 0, max: 9, step: 1 },
+      control: { max: 9, min: 0, step: 1, type: 'number' },
     },
     inputShape: {
+      control: 'inline-radio',
       options: ['rounded', 'underline'],
+    },
+    inputSize: {
       control: 'inline-radio',
+      options: ['normal', 'compact'],
     },
     inputTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     inputTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
   },
-  args: {
-    inputCount: 3,
+  component: Code,
+  parameters: {
+    controls: {
+      exclude: [
+        'inputBorderColorHover',
+        'inputBorderFocusColor',
+        'inputCaretColor',
+        'inputPlaceholder',
+        'inputType',
+        'value',
+      ],
+    },
   },
+  title: 'Atoms / Code',
 }
 
 export const Default = {}