@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/AccordionItem.stories.js

@@ -1,150 +0,0 @@
-import {
-  borderColorProps,
-  fillHoverProps,
-  fillProps,
-  shapeProps,
-  textColorProps,
-  textSizeProps,
-  textWeightProps,
-} from '../../../constants'
-import { Icon } from '../../Icon'
-import { AccordionItem } from '../AccordionItem'
-
-export default {
-  argTypes: {
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    isExpanded: {
-      control: 'boolean',
-    },
-    advancedProps: { control: 'boolean' },
-    afterContent: {
-      if: { arg: 'advancedProps' },
-    },
-    beforeContent: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    contentBorderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    contentFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    contentTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    contentTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-
-    contentTextWeight: {
-      control: 'select',
-      options: textWeightProps,
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    iconFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['xs', 'l'],
-    },
-    titleBorderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    titleFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    titleFillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    titleTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    titleTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    titleTextWeight: {
-      control: 'select',
-      options: textWeightProps,
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: AccordionItem,
-  parameters: {
-    controls: {
-      exclude: [
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'iconFillDesktop',
-        'iconFillMobile',
-        'iconFillTablet',
-      ],
-    },
-  },
-  title: 'Molecules / Accordion / Item',
-}
-
-const Default = {
-  args: {
-    content: 'content 1',
-    contentTextColor: 'surfaceTextPrimary',
-    contentTextSize: 'm',
-    icon: <Icon iconFill="surfaceItemSecondary" imageSrc="assets/16/ChevronDown.svg" size="16" />,
-    title: 'Title 1',
-    titleTextColor: 'surfaceTextPrimary',
-    titleTextSize: 'm',
-  },
-}
-
-export const Closed = {
-  args: {
-    ...Default.args,
-    isExpanded: false,
-  },
-}
-
-export const Opened = {
-  args: {
-    ...Default.args,
-    isExpanded: true,
-  },
-}

package/dist/stories/AlignItems.stories.js

@@ -1,88 +0,0 @@
-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}
-      alignItems={args.alignItems}
-      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" 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 / AlignItems',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    padding: '20',
-    borderColor: 'surfaceBorderPrimary',
-    direction: 'vertical',
-    fill: 'surfacePrimary',
-  },
-}
-
-export const Stretch = {
-  args: {
-    ...Default.args,
-    alignItems: 'stretch',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    alignItems: 'flex-start',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    alignItems: 'flex-end',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    alignItems: 'center',
-  },
-}
-
-export const Baseline = {
-  args: {
-    ...Default.args,
-    alignItems: 'baseline',
-  },
-}

package/dist/stories/AlignSelf.stories.js

@@ -1,101 +0,0 @@
-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.stories.js

@@ -1,100 +0,0 @@
-import { badgeAppearance, badgeConfig } from '../../Badge'
-import { Tab, tabConfig } from '../Tab'
-import { tabAppearance } from '../Tab.appearance'
-import { argTypes } from './args'
-
-badgeConfig.setAppearance(badgeAppearance)
-tabConfig.setAppearance(tabAppearance)
-
-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.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',
-  },
-}