@itcase/ui 1.0.100 → 1.0.101

package/dist/stories/Button.stories.js

@@ -0,0 +1,287 @@
+import { Badge, badgeConfig } from '@itcase/ui/components/Badge'
+import { Button, buttonConfig } from '@itcase/ui/components/Button'
+import {
+  borderColorProps,
+  borderTypeProps,
+  fillProps,
+  itemColorProps,
+  shapeProps,
+  sizeProps,
+  sizePXProps,
+  strokeColorProps,
+  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'
+
+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 },
+    },
+    iconStroke: {
+      options: strokeColorProps,
+      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 },
+    },
+    iconAfterStroke: {
+      options: strokeColorProps,
+      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 },
+    },
+    iconBeforeStroke: {
+      options: strokeColorProps,
+      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',
+    label: 'Button',
+    shape: 'rounded',
+    iconSrc: null,
+  },
+}
+
+export const Default = {}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+  },
+}
+
+export const Primary = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+  },
+}
+
+export const Secondary = {
+  args: {
+    ...Default.args,
+    appearance: 'secondary',
+  },
+}
+
+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 SurfaceDisabled = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceDisabled',
+  },
+}
+
+export const IconBefore = {
+  args: {
+    ...Default.args,
+    iconBefore: icon24.Filter,
+    iconBeforeFill: 'accentItemPrimary',
+  },
+}
+
+export const IconAfter = {
+  args: {
+    ...Default.args,
+    iconAfter: icon24.Filter,
+    iconAfterFill: 'accentItemPrimary',
+  },
+}
+
+export const WithBadge = {
+  args: {
+    ...Default.args,
+    shape: 'rounded',
+    Badge: <Badge appearance="primary" size="m" textSize="m" value={3} />,
+  },
+}

package/dist/stories/Checkbox.stories.js

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

package/dist/stories/Chips.stories.js

@@ -0,0 +1,151 @@
+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'
+
+chipsConfig.setAppearance(chipsAppearance)
+
+import { Icon } from '@itcase/ui/components/Icon'
+
+import { icon16 } from 'src/icons'
+
+export default {
+  title: 'Atoms / Chips ',
+  component: Chips,
+  parameters: {
+    controls: {
+      exclude: [
+        'borderDesktop',
+        'borderMobile',
+        'borderTablet',
+        'borderTypeDesktop',
+        'borderTypeMobile',
+        'borderTypeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'fillHover',
+        'labelSizeDesktop',
+        'labelSizeMobile',
+        'labelSizeTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+      ],
+    },
+  },
+  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',
+    },
+    labelSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  argTypes: {
+    appearance: {
+      options: [
+        null,
+        'accent',
+        'primary',
+        'secondary',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+      ],
+      control: 'inline-radio',
+    },
+  },
+  args: {
+    appearance: 'accent',
+    shape: 'rounded',
+    label: 'Chips',
+    size: 'xxl',
+    labelSize: 'xxl',
+  },
+}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+    children: <Icon iconFill="accentItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}
+export const Primary = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+    children: <Icon iconFill="primaryItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}
+export const Secondary = {
+  args: {
+    ...Default.args,
+    appearance: 'secondary',
+    children: <Icon iconFill="secondaryItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}
+export const SurfacePrimary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfacePrimary',
+    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}
+export const SurfaceSecondary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceSecondary',
+    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}
+export const SurfaceTertiary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceTertiary',
+    children: <Icon iconFill="surfaceItemPrimary" size="16" SvgImage={icon16.Close} />,
+  },
+}

package/dist/stories/Choice.stories.js

@@ -0,0 +1,117 @@
+import { Choice } from '@itcase/ui/components/Choice'
+import {
+  borderColorProps,
+  borderWidthProps,
+  textColorProps,
+  textSizeProps,
+  textWeightProps,
+  fillProps,
+  fillHoverProps,
+  sizeProps,
+  shapeProps,
+  textColorActiveProps,
+} from '@itcase/ui/constants'
+
+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' },
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderWidth: {
+      options: borderWidthProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillActive: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillActiveHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    labelTextActiveColor: {
+      options: textColorActiveProps,
+      control: 'select',
+    },
+    labelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: ['tiny', 'compact', 'normal'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    fill: 'surfacePrimary',
+    fillHover: 'surfacePrimaryHover',
+    fillActive: 'surfacePrimaryActive',
+    fillActiveHover: 'surfacePrimaryActiveHover',
+    size: 'normal',
+    shape: 'rounded',
+    borderColor: 'surfaceBorderTertiary',
+    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' },
+    ],
+    active: {
+      value: 1,
+    },
+  },
+}