@itcase/ui 1.0.100 → 1.0.101

package/dist/stories/InputPassword.stories.js

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

package/dist/stories/Label.stories.js

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

package/dist/stories/Loader.stories.js

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

@@ -0,0 +1,99 @@
+import { Logo } from '@itcase/ui/components/Logo'
+import { alignDirectionProps, alignProps, widthProps } from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Logo',
+  component: Logo,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    isLink: {
+      if: { arg: 'advancedProps' },
+    },
+    logoSrc: {
+      if: { arg: 'advancedProps' },
+    },
+    target: {
+      if: { arg: 'advancedProps' },
+    },
+    align: {
+      options: alignProps,
+      control: 'inline-radio',
+    },
+    alignItems: {
+      options: alignProps,
+      control: 'inline-radio',
+    },
+    alignDirection: {
+      options: alignDirectionProps,
+      control: 'inline-radio',
+    },
+    width: {
+      options: widthProps,
+      control: 'inline-radio',
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    size: {
+      options: ['s', 'm', 'l'],
+      control: 'inline-radio',
+    },
+    sizeMobile: {
+      if: { arg: 'advancedProps' },
+      options: ['s', 'm', 'l'],
+      control: 'inline-radio',
+    },
+    source: {
+      if: { arg: 'advancedProps' },
+    },
+    mode: {
+      options: [null, 'skeleton'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+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,
+    size: 'l',
+    mode: 'skeleton',
+  },
+}

package/dist/stories/MenuItem.stories.js

@@ -0,0 +1,193 @@
+import { MenuItem, menuItemConfig } from '@itcase/ui/components/MenuItem'
+import menuItemAppearance from 'src/components/MenuItem/appearance.json'
+
+import {
+  fillProps,
+  sizeProps,
+  shapeProps,
+  textWrapProps,
+  textWeightProps,
+  textColorProps,
+  textColorActiveProps,
+  textSizeProps,
+  textColorHoverProps,
+  textGradientProps,
+  textStyleProps,
+  underlineProps,
+} from '@itcase/ui/constants'
+
+menuItemConfig.setAppearance(menuItemAppearance)
+
+export default {
+  title: 'Atoms / Menu Item',
+  component: MenuItem,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
+    },
+    rel: {
+      if: { arg: 'advancedProps' },
+    },
+    target: {
+      if: { arg: 'advancedProps' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+    appearance: {
+      options: [null, 'any'],
+      control: 'inline-radio',
+    },
+    descTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    descTextColorHover: {
+      options: textColorHoverProps,
+      control: 'select',
+    },
+    descTextGradient: {
+      if: { arg: 'advancedProps' },
+      options: textGradientProps,
+      control: 'inline-radio',
+    },
+    descTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    descTextStyle: {
+      if: { arg: 'advancedProps' },
+      options: textStyleProps,
+      control: 'inline-radio',
+    },
+    descTextWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    descTextWrap: {
+      if: { arg: 'advancedProps' },
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    linkFill: {
+      if: { arg: 'advancedProps' },
+      options: fillProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    textColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    textColorHover: {
+      options: textColorHoverProps,
+      control: 'select',
+    },
+    textColorActive: {
+      options: textColorActiveProps,
+      control: 'select',
+    },
+    textSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    textGradient: {
+      if: { arg: 'advancedProps' },
+      options: textGradientProps,
+      control: 'inline-radio',
+    },
+    textStyle: {
+      if: { arg: 'advancedProps' },
+      options: textStyleProps,
+      control: 'inline-radio',
+    },
+    textWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    textWrap: {
+      if: { arg: 'advancedProps' },
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    underline: {
+      if: { arg: 'advancedProps' },
+      options: underlineProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    appearance: 'any',
+    size: 'm',
+    label: 'Menu Item',
+    textSize: 'l',
+    textColor: 'surfaceTextPrimary',
+    textWeight: 400,
+    desc: 'desc',
+    descTextSize: 's',
+    descTextColor: 'surfaceTextPrimary',
+    descTextWeight: 400,
+    isHover: true,
+    isActive: true,
+  },
+}