@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/Input.stories.js

@@ -1,124 +0,0 @@
-import { borderColorProps, textColorProps, textSizeProps } from '../../../constants'
-import { Input, inputConfig } from '../Input'
-import { inputState } from '../Input.appearance'
-
-inputConfig.setState(inputState)
-
-export default {
-  argTypes: {
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    checked: {
-      control: 'boolean',
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    shape: {
-      control: 'inline-radio',
-      options: [null, 'rounded', 'underline'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: [null, 'xs', 's', 'm', 'l', 'xl', 'xxl', 'tiny', 'compact', 'normal', 'large'],
-    },
-    state: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'normal',
-        'filled',
-        'active',
-        'activeFilled',
-        'error',
-        'errorFilled',
-        'readonly',
-        'disabled',
-        'success',
-        'require',
-      ],
-    },
-    textColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    textSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    type: {
-      control: 'inline-radio',
-      options: ['text', 'number', 'password'],
-    },
-    onBlur: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Input,
-  title: 'Atoms / Input',
-}
-
-export const Default = {
-  args: {
-    borderColor: 'surfaceBorderTertiary',
-    placeholder: 'Placeholder',
-    shape: 'rounded',
-    textSize: 'm',
-    value: 'Filled',
-  },
-}
-
-export const SizeXS = {
-  args: {
-    ...Default.args,
-    size: 'xs',
-  },
-}
-
-export const SizeS = {
-  args: {
-    ...Default.args,
-    size: 's',
-  },
-}
-
-export const SizeM = {
-  args: {
-    ...Default.args,
-    size: 'm',
-  },
-}
-
-export const SizeL = {
-  args: {
-    ...Default.args,
-    size: 'l',
-  },
-}
-
-export const SizeXL = {
-  args: {
-    ...Default.args,
-    size: 'xl',
-  },
-}
-
-export const SizeXXL = {
-  args: {
-    ...Default.args,
-    size: 'xxl',
-  },
-}

package/dist/stories/InputPassword.stories.js

@@ -1,112 +0,0 @@
-import {
-  borderColorProps,
-  fillProps,
-  iconSizeProps,
-  textColorProps,
-  textSizeProps,
-} from '../../../constants'
-import { InputPassword, inputPasswordConfig } from '../InputPassword'
-import { InputPasswordState } from '../InputPassword.appearance'
-
-inputPasswordConfig.setState(InputPasswordState)
-
-export default {
-  argTypes: {
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    advancedProps: { control: 'boolean' },
-    checked: {
-      control: 'boolean',
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    iconFill: {
-      control: 'select',
-      options: fillProps,
-    },
-    iconSize: {
-      control: 'inline-radio',
-      options: iconSizeProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: [null, 'rounded', 'underline'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'normal', 'tiny', 'compact', 'large'],
-    },
-    state: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'normal',
-        'filled',
-        'active',
-        'activeFilled',
-        'error',
-        'errorFilled',
-        'readonly',
-        'disabled',
-        'success',
-        'require',
-      ],
-    },
-    textColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    textSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    onBlur: {
-      if: { arg: 'advancedProps' },
-    },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: InputPassword,
-  title: 'Atoms / InputPassword',
-}
-
-export const Default = {
-  args: {
-    borderColor: 'surfaceBorderTertiary',
-    isRevealable: true,
-    iconFill: 'surfaceItemTertiary',
-    iconSize: 24,
-    imageRevealableHide: 'assets/24/HidePassword.svg',
-    imageRevealableShow: 'assets/24/ShowPassword.svg',
-    placeholder: 'Placeholder',
-    shape: 'rounded',
-    textSize: 'm',
-    value: 'password',
-  },
-}
-
-export const Hidden = {
-  args: {
-    ...Default.args,
-  },
-}
-
-export const Disabled = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-}

package/dist/stories/JustifyContent.stories.js

@@ -1,96 +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}
-      fill={args.fill}
-      padding={args.padding}
-      borderColor={args.borderColor}
-      direction={args.direction}
-      justifyContent={args.justifyContent}
-    >
-      <Group height="60" fill="accentPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </Group>
-      <Group height="60" fill="primaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="primaryTextPrimary">
-          2
-        </Text>
-      </Group>
-      <Group height="60" fill="secondaryPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="secondaryTextPrimary">
-          3
-        </Text>
-      </Group>
-      <Group height="60" fill="infoPrimary" padding="20" textAlign="center">
-        <Text size="xl" textColor="infoTextPrimary">
-          4
-        </Text>
-      </Group>
-    </Group>
-  ),
-  title: 'Layout / Group / Variants / JustifyContent',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    padding: '20',
-    borderColor: 'surfaceBorderPrimary',
-    direction: 'horizontal',
-    fill: 'surfacePrimary',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    justifyContent: 'flex-start',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    justifyContent: 'flex-end',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    justifyContent: 'center',
-  },
-}
-
-export const SpaceBetween = {
-  args: {
-    ...Default.args,
-    justifyContent: 'space-between',
-  },
-}
-
-export const SpaceAround = {
-  args: {
-    ...Default.args,
-    justifyContent: 'space-around',
-  },
-}
-
-export const SpaceEvenly = {
-  args: {
-    ...Default.args,
-    justifyContent: 'space-evenly',
-  },
-}

package/dist/stories/Label.stories.js

@@ -1,173 +0,0 @@
-import {
-  borderColorProps,
-  borderTypeProps,
-  fillProps,
-  shapeProps,
-  sizeProps,
-  textColorProps,
-  textSizeProps,
-  widthProps,
-} from '../../../constants'
-import { Label, labelConfig } from '../Label'
-import { labelAppearance } from '../Label.appearance'
-
-labelConfig.setAppearance(labelAppearance)
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    textAlign: {
-      control: 'inline-radio',
-      options: ['left', 'center', 'right'],
-    },
-    advancedProps: { control: 'boolean' },
-    appearance: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-    border: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    borderType: {
-      control: 'inline-radio',
-      options: borderTypeProps,
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    labelTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    mode: {
-      control: 'inline-radio',
-      options: [null, 'skeleton'],
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: sizeProps,
-    },
-  },
-  component: Label,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderDesktop',
-        'borderMobile',
-        'borderTablet',
-        'borderTypeDesktop',
-        'borderTypeMobile',
-        'borderTypeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'labelTextSizeDesktop',
-        'labelTextSizeMobile',
-        'labelTextSizeTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Label',
-}
-
-export const Default = {
-  args: {
-    appearance: 'accent',
-    label: 'Label',
-    labelTextSize: 'l',
-    shape: 'rounded',
-    size: 'xxl',
-  },
-}
-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 SkeletonMode = {
-  args: {
-    ...Default.args,
-    mode: 'skeleton',
-  },
-}
-
-export const WithTooltip = {
-  args: {
-    ...Default.args,
-    appearance: 'accent',
-    showTooltip: true,
-    tooltip: '123',
-    tooltipText: '123',
-    tooltipTextSize: 'm',
-  },
-}

package/dist/stories/Loader.stories.js

@@ -1,119 +0,0 @@
-import {
-  heightProps,
-  positionProps,
-  textColorProps,
-  textSizeProps,
-  widthProps,
-} from '../../../constants'
-import { Loader, loaderConfig } from '../Loader'
-import { loaderAppearance } from '../Loader.appearance'
-
-loaderConfig.setAppearance(loaderAppearance)
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    height: {
-      control: 'inline-radio',
-      options: heightProps,
-    },
-    position: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: positionProps,
-    },
-    right: {
-      if: { arg: 'advancedProps' },
-    },
-    left: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    appearance: {
-      control: 'inline-radio',
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-      ],
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    set: {
-      control: 'inline-radio',
-      options: [null, 'simple'],
-    },
-    textColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    textSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-  },
-  component: Loader,
-  title: 'Atoms / Loader',
-}
-
-export const Default = {
-  args: {
-    appearance: 'surfacePrimary',
-    set: 'simple',
-    text: 'Text',
-    textSize: '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',
-  },
-}

package/dist/stories/Logo.stories.js

@@ -1,99 +0,0 @@
-import { alignDirectionProps, alignProps, widthProps } from '../../../constants'
-import { Logo } from '../Logo'
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    alignItems: {
-      control: 'inline-radio',
-      options: alignProps,
-    },
-    isLink: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    align: {
-      control: 'inline-radio',
-      options: alignProps,
-    },
-    alignDirection: {
-      control: 'inline-radio',
-      options: alignDirectionProps,
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    href: {
-      if: { arg: 'advancedProps' },
-    },
-    link: {
-      if: { arg: 'advancedProps' },
-    },
-    logoSrc: {
-      if: { arg: 'advancedProps' },
-    },
-    mode: {
-      control: 'inline-radio',
-      options: [null, 'skeleton'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['s', 'm', 'l'],
-    },
-    sizeMobile: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: ['s', 'm', 'l'],
-    },
-    source: {
-      if: { arg: 'advancedProps' },
-    },
-    target: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Logo,
-  title: 'Atoms / Logo',
-}
-
-export const Default = {
-  args: {
-    size: 'm',
-    src: 'assets/img/logo.svg',
-  },
-}
-
-export const SizeS = {
-  args: {
-    ...Default.args,
-    size: 's',
-  },
-}
-
-export const SizeM = {
-  args: {
-    ...Default.args,
-    size: 'm',
-  },
-}
-
-export const SizeL = {
-  args: {
-    ...Default.args,
-    size: 'l',
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Default.args,
-    mode: 'skeleton',
-    size: 'l',
-  },
-}