@itcase/ui 1.3.12 → 1.3.14

package/dist/stories/Avatar.stories.js

@@ -1,184 +0,0 @@
-import {
-  fillHoverProps,
-  fillProps,
-  iconFillSizeProps,
-  iconSizeProps,
-  shapeProps,
-  sizePXProps,
-  textColorProps,
-  textSizeProps,
-  textWeightProps,
-} from '../../../constants'
-import { Avatar } from '../Avatar'
-
-export default {
-  args: {
-    children: [],
-    advancedProps: false,
-    className: '',
-    fill: 'surfaceTertiary',
-    shape: 'circular',
-    size: 96,
-    onClick: '',
-  },
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      if: { arg: 'type', eq: 'text' },
-      options: fillProps,
-    },
-    firstName: {
-      if: { arg: 'type', eq: 'text' },
-    },
-    iconFill: {
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-      options: fillProps,
-    },
-    iconFillHover: {
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-      options: fillHoverProps,
-    },
-    iconFillSize: {
-      control: 'inline-radio',
-      if: { arg: 'iconSrc', neq: null },
-      options: iconFillSizeProps,
-    },
-    iconItemFill: {
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-      options: fillProps,
-    },
-    iconShape: {
-      control: 'inline-radio',
-      if: { arg: 'iconSrc', neq: null },
-      options: shapeProps,
-    },
-
-    iconSize: {
-      control: 'inline-radio',
-      if: { arg: 'iconSrc', neq: null },
-      options: iconSizeProps,
-    },
-    iconSrc: {
-      control: 'select',
-      options: [null, 'assets/40/close.svg'],
-    },
-    mode: {
-      control: 'inline-radio',
-      options: [null, 'skeleton'],
-    },
-    secondName: {
-      if: { arg: 'type', eq: 'text' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: sizePXProps,
-    },
-    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,
-    },
-    textSize: {
-      control: 'select',
-      if: { arg: 'type', eq: 'text' },
-      options: textSizeProps,
-    },
-    textWeight: {
-      control: 'select',
-      if: { arg: 'type', eq: 'text' },
-      options: textWeightProps,
-    },
-    type: {
-      control: 'inline-radio',
-      options: ['image', 'text'],
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Avatar,
-  parameters: {
-    controls: {
-      exclude: [],
-    },
-  },
-  title: 'Molecules / Avatar',
-}
-
-const ImageProps = {
-  src: 'assets/avatar/woman.png',
-  type: 'image',
-}
-
-const IconProps = {
-  iconFill: 'accentPrimary',
-  iconFillHover: 'accentPrimaryHover',
-  iconFillSize: 40,
-  iconItemFill: 'accentItemPrimary',
-  iconItemFillHover: 'accentItemPrimaryHover',
-  iconShape: 'circular',
-  iconSize: 40,
-  iconSrc: 'assets/40/close.svg',
-}
-
-export const Default = {
-  args: {
-    ...ImageProps,
-    ...IconProps,
-  },
-}
-
-export const Image = {
-  args: {
-    ...ImageProps,
-  },
-}
-
-export const ImageWithIcon = {
-  args: {
-    ...ImageProps,
-    ...IconProps,
-  },
-}
-
-export const Text = {
-  args: {
-    firstName: 'John',
-    secondName: 'Doe',
-    textWeight: 600,
-    type: 'text',
-  },
-}
-
-export const TextWithIcon = {
-  args: {
-    ...Text.args,
-    ...IconProps,
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Text.args,
-    mode: 'skeleton',
-  },
-}

package/dist/stories/Badge.stories.js

@@ -1,115 +0,0 @@
-import {
-  borderColorHoverProps,
-  borderColorProps,
-  borderTypeProps,
-  borderWidthProps,
-  fillProps,
-  shapeProps,
-  sizeProps,
-  textColorProps,
-} from '../../../constants'
-import { Badge, badgeConfig } from '../Badge'
-import { badgeAppearance } from '../Badge.appearance'
-
-badgeConfig.setAppearance(badgeAppearance)
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    borderWidth: {
-      control: 'select',
-      options: borderWidthProps,
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    appearance: {
-      control: 'inline-radio',
-      options: [null, 'accent', 'secondary', 'primary'],
-    },
-    borderColorHover: {
-      control: 'select',
-      options: borderColorHoverProps,
-    },
-    borderType: {
-      control: 'inline-radio',
-      options: borderTypeProps,
-    },
-    className: {
-      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',
-}
-
-const Default = {
-  args: {
-    shape: 'circular',
-    size: 's',
-    textSize: 'xs',
-    value: 3,
-  },
-}
-
-export const Accent = {
-  args: {
-    ...Default.args,
-    appearance: 'accent',
-  },
-}
-
-export const Secondary = {
-  args: {
-    ...Default.args,
-    appearance: 'secondary',
-  },
-}
-
-export const Primary = {
-  args: {
-    ...Default.args,
-    appearance: 'primary',
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Default.args,
-    mode: 'skeleton',
-  },
-}

package/dist/stories/Button.stories.js

@@ -1,110 +0,0 @@
-// import { icon24 } from '../../../___icons'
-import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
-import { Button, buttonConfig } from '../Button'
-import { buttonAppearance } from '../Button.appearance'
-import { argTypes } from './args'
-
-badgeConfig.setAppearance(badgeAppearance)
-buttonConfig.setAppearance(buttonAppearance)
-
-export default {
-  args: {
-    appearance: 'accent',
-    iconSrc: null,
-    label: 'Button',
-    shape: 'rounded',
-  },
-  argTypes: {
-    ...argTypes,
-  },
-  component: Button,
-  title: 'Atoms / Button',
-}
-
-export const Default = {
-  args: {
-    labelTextSize: 'm',
-    shape: 'rounded',
-    size: 'm',
-  },
-}
-
-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,
-    Badge: <Badge appearance="primary" size="m" textSize="m" value={3} />,
-    shape: 'rounded',
-  },
-}
-
-export const Dev = {
-  args: {
-    ...Default.args,
-    appearance: 'dev',
-  },
-}

package/dist/stories/Cell.stories.js

@@ -1,306 +0,0 @@
-import {
-  fillHoverProps,
-  fillProps,
-  iconFillSizeProps,
-  shapeProps,
-  sizeProps,
-  textColorProps,
-  textSizeProps,
-  textWeightProps,
-  textWrapProps,
-  widthProps,
-} from '../../../constants'
-import { Cell } from '../Cell'
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: widthProps,
-    },
-    direction: {
-      control: 'inline-radio',
-      options: ['vertical', 'horizontal'],
-    },
-    isActive: {
-      if: { arg: 'advancedProps' },
-    },
-    isDisabled: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      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
-
-    titleIconFillSize: {
-      control: 'inline-radio',
-      if: { arg: 'titleIconSrc' },
-      options: iconFillSizeProps,
-    },
-    titleIconItemFill: {
-      control: 'select',
-      if: { arg: 'titleIconSrc' },
-      options: fillProps,
-    },
-    titleIconShape: {
-      control: 'inline-radio',
-      if: { arg: 'titleIconSrc' },
-      options: shapeProps,
-    },
-    titleIconSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/24/ChevronTop.svg'],
-    },
-
-    // titleLabel
-
-    titleLabelAppearance: {
-      control: 'inline-radio',
-      if: { arg: 'showTitleLabel' },
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-    titleLabelShape: {
-      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
-
-    titleTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    titleTextWeight: {
-      control: 'select',
-      if: { arg: 'advancedProps' },
-      options: textWeightProps,
-    },
-    titleTextWrap: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: textWrapProps,
-    },
-    valueIconFill: {
-      control: 'select',
-      if: { arg: 'valueIconSrc' },
-      options: fillProps,
-    },
-    valueIconFillSize: {
-      control: 'inline-radio',
-      if: { arg: 'valueIconSrc' },
-      options: iconFillSizeProps,
-    },
-
-    // valueText
-
-    valueIconItemFill: {
-      control: 'select',
-      if: { arg: 'valueIconSrc' },
-      options: fillProps,
-    },
-    valueIconShape: {
-      control: 'inline-radio',
-      if: { arg: 'valueIconSrc' },
-      options: shapeProps,
-    },
-    valueIconSrc: {
-      control: 'inline-radio',
-      options: [null, 'assets/24/ChevronDown.svg'],
-    },
-    valueLabelAppearance: {
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-
-    // valueLabel
-
-    valueLabelShape: {
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
-      options: shapeProps,
-    },
-    valueLabelSize: {
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
-      options: sizeProps,
-    },
-    valueLabelTextSize: {
-      control: 'inline-radio',
-      if: { arg: 'showValueLabel' },
-      options: textSizeProps,
-    },
-    valueTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    valueTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-
-    // valueIcon
-
-    valueTextWeight: {
-      control: 'select',
-      if: { arg: 'advancedProps' },
-      options: textWeightProps,
-    },
-    valueTextWrap: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: textWrapProps,
-    },
-    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',
-    value: 'Value',
-    valueTextColor: 'surfaceTextPrimary',
-    valueTextSize: 'm',
-    valueTextWeight: 600,
-    zeroGap: false,
-    zeroPadding: false,
-  },
-}
-
-export const Horizontal = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-  },
-}
-
-export const Vertical = {
-  args: {
-    ...Default.args,
-    direction: 'vertical',
-  },
-}
-
-export const WithLabels = {
-  args: {
-    ...Default.args,
-    showTitleLabel: true,
-    showValueLabel: true,
-    titleLabel: 'titleLabel',
-    titleLabelAppearance: 'accent',
-    titleLabelShape: 'rounded',
-    titleLabelSize: 's',
-    titleLabelTextSize: 's',
-    valueLabel: 'valueLabel',
-    valueLabelAppearance: 'accent',
-    valueLabelShape: 'rounded',
-    valueLabelSize: 's',
-    valueLabelTextSize: 's',
-  },
-}
-
-export const WithIcons = {
-  args: {
-    ...Default.args,
-    titleIconFill: 'accentPrimary',
-    titleIconFillSize: 32,
-    titleIconItemFill: 'surfacePrimary',
-    titleIconShape: 'circular',
-    titleIconSrc: 'assets/24/ChevronDown.svg',
-    valueIconFill: 'accentPrimary',
-    valueIconFillSize: 32,
-    valueIconItemFill: 'surfacePrimary',
-    valueIconShape: 'circular',
-    valueIconSrc: 'assets/24/ChevronDown.svg',
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Default.args,
-    mode: 'skeleton',
-  },
-}