@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/Button.stories.js

@@ -1,201 +1,34 @@
-import { Badge, badgeConfig } from '@itcase/ui/components/Badge'
-import { Button, buttonConfig } from '@itcase/ui/components/Button'
-import {
-  borderColorProps,
-  borderTypeProps,
-  fillProps,
-  itemColorProps,
-  shapeProps,
-  sizeProps,
-  sizePXProps,
-  textColorHoverProps,
-  textColorProps,
-  textSizeProps,
-  textWrapProps,
-  widthProps,
-} from '@itcase/ui/constants'
-
-import badgeAppearance from 'src/components/Badge/appearance.json'
-import buttonAppearance from 'src/components/Button/appearance.json'
 import { icon24 } from '../../../icons'
+import { Badge, badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import buttonAppearance from '../../Button/appearance.json'
+import { Button, buttonConfig } from '../Button'
+import { argTypes } from './args'
 
 badgeConfig.setAppearance(badgeAppearance)
 buttonConfig.setAppearance(buttonAppearance)
 
 export default {
-  title: 'Atoms / Button',
-  component: Button,
-  parameters: {
-    // controls: { exclude: ['textColor', 'textColorHover'] },
-  },
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    href: {
-      if: { arg: 'advancedProps' },
-    },
-    link: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    rel: {
-      if: { arg: 'advancedProps' },
-    },
-    htmlType: {
-      if: { arg: 'advancedProps' },
-    },
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    target: {
-      if: { arg: 'advancedProps' },
-    },
-    dataTour: {
-      if: { arg: 'advancedProps' },
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-    onMouseDown: {
-      if: { arg: 'advancedProps' },
-    },
-    appearance: {
-      options: [
-        null,
-        'dev',
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-        'surfaceDisabled',
-      ],
-      control: 'inline-radio',
-    },
-    width: {
-      options: widthProps,
-      control: 'inline-radio',
-    },
-    size: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-    fill: {
-      options: fillProps,
-      control: 'select',
-    },
-    labelTextWrap: {
-      options: textWrapProps,
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
-    },
-    borderType: {
-      options: borderTypeProps,
-      control: 'inline-radio',
-    },
-    loading: {
-      control: 'boolean',
-      if: { arg: 'advancedProps' },
-    },
-    labelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    labelTextColor: {
-      options: textColorProps,
-      control: 'select',
-    },
-    labelTextColorHover: {
-      options: textColorHoverProps,
-      control: 'select',
-    },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
-    },
-    isDisabled: {
-      control: 'boolean',
-      if: { arg: 'advancedProps' },
-    },
-
-    loaderFill: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'loader', eq: null },
-    },
-    loaderItemFill: {
-      options: itemColorProps,
-      control: 'select',
-      if: { arg: 'loader', eq: null },
-    },
-    loaderSet: {
-      control: 'text',
-      if: { arg: 'loader', eq: null },
-    },
-
-    iconSrc: {
-      control: 'radio',
-      options: [null, 'assets/24/SignOut.svg'],
-    },
-    iconFill: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-    },
-    iconSize: {
-      options: sizePXProps,
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-    },
-
-    iconAfterSrc: {
-      control: 'radio',
-      options: [null, 'assets/24/ChevronRight.svg'],
-    },
-    iconAfterFill: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-    },
-
-    iconBeforeSrc: {
-      control: 'radio',
-      options: [null, 'assets/24/ChevronLeft.svg'],
-    },
-    iconBeforeFill: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-    },
-    Badge: {
-      control: 'select',
-      options: [null, <Badge appearance="secondary" size="xs" textSize="xxs" value={3} />],
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-  },
   args: {
     appearance: 'accent',
+    iconSrc: null,
     label: 'Button',
     shape: 'rounded',
-    iconSrc: null,
   },
+  argTypes: {
+    ...argTypes,
+  },
+  component: Button,
+  title: 'Atoms / Button',
 }
 
-export const Default = {}
+export const Default = {
+  args: {
+    labelTextSize: 'm',
+    shape: 'rounded',
+    size: 'm',
+  },
+}
 
 export const Accent = {
   args: {
@@ -265,7 +98,14 @@ export const IconAfter = {
 export const WithBadge = {
   args: {
     ...Default.args,
-    shape: 'rounded',
     Badge: <Badge appearance="primary" size="m" textSize="m" value={3} />,
+    shape: 'rounded',
+  },
+}
+
+export const Dev = {
+  args: {
+    ...Default.args,
+    appearance: 'dev',
   },
 }

package/dist/stories/Cell.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as CellStories from './Cell.stories.js'
+
+<Meta of={CellStories} />
+
+# Cell
+
+## Horizontal
+
+<Canvas sourceState="shown" of={CellStories.Horizontal} />
+
+## Vertical
+
+<Canvas sourceState="shown" of={CellStories.Vertical} />
+
+## WithLabels
+
+<Canvas sourceState="shown" of={CellStories.WithLabels} />
+
+## WithIcons
+
+<Canvas sourceState="shown" of={CellStories.WithIcons} />

package/dist/stories/Cell.stories.js

@@ -1,4 +1,3 @@
-import { Cell } from '@itcase/ui/components/Cell'
 import {
   fillHoverProps,
   fillProps,
@@ -10,24 +9,22 @@ import {
   textWeightProps,
   textWrapProps,
   widthProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Cell } from '../Cell'
 
 export default {
-  title: 'Atoms / Cell',
-  component: Cell,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
     children: {
       if: { arg: 'advancedProps' },
     },
-    className: {
+    width: {
+      control: 'inline-radio',
       if: { arg: 'advancedProps' },
+      options: widthProps,
+    },
+    direction: {
+      control: 'inline-radio',
+      options: ['vertical', 'horizontal'],
     },
     isActive: {
       if: { arg: 'advancedProps' },
@@ -35,62 +32,68 @@ export default {
     isDisabled: {
       if: { arg: 'advancedProps' },
     },
-    onClick: {
+    advancedProps: { control: 'boolean' },
+    after: {
       if: { arg: 'advancedProps' },
     },
-    onMouseEnter: {
+    before: {
       if: { arg: 'advancedProps' },
     },
-    zeroPadding: { control: 'boolean' },
-    zeroGap: { control: 'boolean' },
-    reverse: { control: 'boolean' },
-    size: {
-      options: [null, 's', 'm', 'l', 'xl'],
-      control: 'inline-radio',
-    },
-    width: {
-      options: widthProps,
-      control: 'inline-radio',
+    className: {
       if: { arg: 'advancedProps' },
     },
-    direction: {
-      options: ['vertical', 'horizontal'],
-      control: 'inline-radio',
-    },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     fillHover: {
+      control: 'select',
       options: fillHoverProps,
+    },
+    mode: {
+      control: 'inline-radio',
+      options: [null, 'skeleton'],
+    },
+    reverse: { control: 'boolean' },
+    showTitleLabel: { control: 'boolean' },
+    showValueLabel: { control: 'boolean' },
+    size: {
+      control: 'inline-radio',
+      options: [null, 's', 'm', 'l', 'xl'],
+    },
+    titleIconFill: {
       control: 'select',
+      if: { arg: 'titleIconSrc' },
+      options: fillProps,
     },
 
     // titleText
 
-    titleTextSize: {
-      options: textSizeProps,
+    titleIconFillSize: {
       control: 'inline-radio',
+      if: { arg: 'titleIconSrc' },
+      options: iconFillSizeProps,
     },
-    titleTextColor: {
-      options: textColorProps,
+    titleIconItemFill: {
       control: 'select',
+      if: { arg: 'titleIconSrc' },
+      options: fillProps,
     },
-    titleTextWeight: {
-      options: textWeightProps,
-      control: 'select',
-      if: { arg: 'advancedProps' },
+    titleIconShape: {
+      control: 'inline-radio',
+      if: { arg: 'titleIconSrc' },
+      options: shapeProps,
     },
-    titleTextWrap: {
-      options: textWrapProps,
+    titleIconSrc: {
       control: 'inline-radio',
-      if: { arg: 'advancedProps' },
+      options: [null, 'assets/24/ChevronTop.svg'],
     },
 
     // titleLabel
 
-    showTitleLabel: { control: 'boolean' },
     titleLabelAppearance: {
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
       options: [
         null,
         'accent',
@@ -100,77 +103,73 @@ export default {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
-      if: { arg: 'showTitleLabel' },
-    },
-    titleLabelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-      if: { arg: 'showTitleLabel' },
     },
     titleLabelShape: {
-      options: shapeProps,
       control: 'inline-radio',
       if: { arg: 'showTitleLabel' },
+      options: shapeProps,
     },
     titleLabelSize: {
+      control: 'inline-radio',
+      if: { arg: 'showTitleLabel' },
       options: sizeProps,
+    },
+    titleLabelTextSize: {
       control: 'inline-radio',
       if: { arg: 'showTitleLabel' },
+      options: textSizeProps,
+    },
+    titleTextColor: {
+      control: 'select',
+      options: textColorProps,
     },
 
     // titleIcon
 
-    titleIconSrc: {
-      options: [null, 'assets/24/ChevronTop.svg'],
+    titleTextSize: {
       control: 'inline-radio',
+      options: textSizeProps,
     },
-    titleIconFill: {
-      options: fillProps,
+    titleTextWeight: {
       control: 'select',
-      if: { arg: 'titleIconSrc' },
+      if: { arg: 'advancedProps' },
+      options: textWeightProps,
     },
-    titleIconFillSize: {
-      options: iconFillSizeProps,
+    titleTextWrap: {
       control: 'inline-radio',
-      if: { arg: 'titleIconSrc' },
+      if: { arg: 'advancedProps' },
+      options: textWrapProps,
     },
-    titleIconItemFill: {
-      options: fillProps,
+    valueIconFill: {
       control: 'select',
-      if: { arg: 'titleIconSrc' },
+      if: { arg: 'valueIconSrc' },
+      options: fillProps,
     },
-    titleIconShape: {
-      options: shapeProps,
+    valueIconFillSize: {
       control: 'inline-radio',
-      if: { arg: 'titleIconSrc' },
+      if: { arg: 'valueIconSrc' },
+      options: iconFillSizeProps,
     },
 
     // valueText
 
-    valueTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    valueTextColor: {
-      options: textColorProps,
+    valueIconItemFill: {
       control: 'select',
+      if: { arg: 'valueIconSrc' },
+      options: fillProps,
     },
-    valueTextWeight: {
-      options: textWeightProps,
-      control: 'select',
-      if: { arg: 'advancedProps' },
+    valueIconShape: {
+      control: 'inline-radio',
+      if: { arg: 'valueIconSrc' },
+      options: shapeProps,
     },
-    valueTextWrap: {
-      options: textWrapProps,
+    valueIconSrc: {
       control: 'inline-radio',
-      if: { arg: 'advancedProps' },
+      options: [null, 'assets/24/ChevronDown.svg'],
     },
-
-    // valueLabel
-
-    showValueLabel: { control: 'boolean' },
     valueLabelAppearance: {
+      control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
       options: [
         null,
         'accent',
@@ -180,60 +179,65 @@ export default {
         'surfaceSecondary',
         'surfaceTertiary',
       ],
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
-    },
-    valueLabelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
     },
+
+    // valueLabel
+
     valueLabelShape: {
-      options: shapeProps,
       control: 'inline-radio',
       if: { arg: 'showValueLabel' },
+      options: shapeProps,
     },
     valueLabelSize: {
-      options: sizeProps,
       control: 'inline-radio',
       if: { arg: 'showValueLabel' },
+      options: sizeProps,
     },
-
-    // valueIcon
-
-    valueIconSrc: {
-      options: [null, 'assets/24/ChevronDown.svg'],
+    valueLabelTextSize: {
       control: 'inline-radio',
+      if: { arg: 'showValueLabel' },
+      options: textSizeProps,
     },
-    valueIconFill: {
-      options: fillProps,
+    valueTextColor: {
       control: 'select',
-      if: { arg: 'valueIconSrc' },
+      options: textColorProps,
     },
-    valueIconFillSize: {
-      options: iconFillSizeProps,
+    valueTextSize: {
       control: 'inline-radio',
-      if: { arg: 'valueIconSrc' },
+      options: textSizeProps,
     },
-    valueIconItemFill: {
-      options: fillProps,
+
+    // valueIcon
+
+    valueTextWeight: {
       control: 'select',
-      if: { arg: 'valueIconSrc' },
+      if: { arg: 'advancedProps' },
+      options: textWeightProps,
     },
-    valueIconShape: {
-      options: shapeProps,
+    valueTextWrap: {
       control: 'inline-radio',
-      if: { arg: 'valueIconSrc' },
+      if: { arg: 'advancedProps' },
+      options: textWrapProps,
     },
-    mode: {
-      options: [null, 'skeleton'],
-      control: 'inline-radio',
+    zeroGap: { control: 'boolean' },
+    zeroPadding: { control: 'boolean' },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Cell,
+  title: 'Molecules / Cell',
 }
 
 export const Default = {
   args: {
+    direction: 'horizontal',
+    reverse: false,
+    showTitleLabel: false,
+    showValueLabel: false,
     title: 'Title',
     titleTextColor: 'surfaceTextPrimary',
     titleTextSize: 'm',
@@ -241,12 +245,8 @@ export const Default = {
     valueTextColor: 'surfaceTextPrimary',
     valueTextSize: 'm',
     valueTextWeight: 600,
-    direction: 'horizontal',
-    zeroPadding: false,
     zeroGap: false,
-    reverse: false,
-    showTitleLabel: false,
-    showValueLabel: false,
+    zeroPadding: false,
   },
 }
 
@@ -270,31 +270,31 @@ export const WithLabels = {
     showTitleLabel: true,
     showValueLabel: true,
     titleLabel: 'titleLabel',
-    valueLabel: 'valueLabel',
     titleLabelAppearance: 'accent',
-    titleLabelTextSize: 's',
     titleLabelShape: 'rounded',
     titleLabelSize: 's',
+    titleLabelTextSize: 's',
+    valueLabel: 'valueLabel',
     valueLabelAppearance: 'accent',
-    valueLabelTextSize: 's',
     valueLabelShape: 'rounded',
     valueLabelSize: 's',
+    valueLabelTextSize: 's',
   },
 }
 
 export const WithIcons = {
   args: {
     ...Default.args,
-    titleIconSrc: 'assets/24/ChevronDown.svg',
     titleIconFill: 'accentPrimary',
     titleIconFillSize: 32,
     titleIconItemFill: 'surfacePrimary',
     titleIconShape: 'circular',
-    valueIconSrc: 'assets/24/ChevronDown.svg',
+    titleIconSrc: 'assets/24/ChevronDown.svg',
     valueIconFill: 'accentPrimary',
     valueIconFillSize: 32,
     valueIconItemFill: 'surfacePrimary',
     valueIconShape: 'circular',
+    valueIconSrc: 'assets/24/ChevronDown.svg',
   },
 }
 

package/dist/stories/Checkbox.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Story } from '@storybook/blocks'
+
+
+import * as CheckboxStories from './Checkbox.stories.js'
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+## CheckedActive
+
+<Canvas sourceState="shown" of={CheckboxStories.CheckedActive} />
+
+## CheckedDisabled
+
+<Canvas sourceState="shown" of={CheckboxStories.CheckedDisabled} />
+
+## NotCheckedActive
+
+<Canvas sourceState="shown" of={CheckboxStories.NotCheckedActive} />
+
+## NotCheckedDisabled
+
+<Canvas sourceState="shown" of={CheckboxStories.NotCheckedDisabled} />