@itcase/ui 1.0.100 → 1.0.102

package/dist/stories/Tab.state.stories.js

@@ -0,0 +1,227 @@
+import { Tab, tabConfig } from '@itcase/ui/components/Tab'
+import {
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorActiveProps,
+  textColorHoverProps,
+  textColorProps,
+  textGradientProps,
+  textSizeProps,
+  textStyleProps,
+  textWeightProps,
+  textWrapProps,
+  underlineProps,
+} from '@itcase/ui/constants'
+
+import tabAppearance from 'src/components/Tab/appearance.json'
+
+tabConfig.setAppearance(tabAppearance)
+
+export default {
+  title: 'Atoms / Tab / State',
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+    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' },
+    },
+    isActive: {
+      control: 'boolean',
+    },
+    appearance: {
+      options: [
+        null,
+        'any',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+      ],
+      control: 'inline-radio',
+    },
+    badge: {
+      control: 'boolean',
+    },
+    badgeSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    badgeFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    badgeTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    badgeTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    labelColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelColorActive: {
+      if: { arg: 'advancedProps' },
+      options: textColorActiveProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextColorHover: {
+      if: { arg: 'advancedProps' },
+      options: textColorHoverProps,
+      control: 'inline-radio',
+    },
+    labelTextGradient: {
+      if: { arg: 'advancedProps' },
+      options: textGradientProps,
+      control: 'inline-radio',
+    },
+    labelTextStyle: {
+      options: textStyleProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+    labelTextWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    labelTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    linkFill: {
+      if: { arg: 'advancedProps' },
+      options: fillProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+      control: 'inline-radio',
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    underline: {
+      if: { arg: 'advancedProps' },
+      options: underlineProps,
+      control: 'inline-radio',
+    },
+    badgeAppearance: {
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+        'disabled',
+      ],
+      control: 'inline-radio',
+    },
+  },
+  args: {
+    label: 'Label',
+    size: 'normal',
+    labelTextSize: 'm',
+    badge: true,
+    badgeSize: 'xs',
+    badgeAppearance: 'accent',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+  },
+}
+
+export const Normal = {
+  args: {
+    appearance: 'any',
+  },
+}
+
+export const Active = {
+  args: {
+    appearance: 'surfacePrimary',
+    isActive: true,
+  },
+}
+
+export const Disabled = {
+  args: {
+    appearance: 'surfacePrimary',
+    isDisabled: true,
+    badgeAppearance: 'disabled',
+  },
+}

package/dist/stories/Textarea.stories.js

@@ -0,0 +1,90 @@
+import { Textarea, textareaConfig } from '@itcase/ui/components/Textarea'
+import textareaState from 'src/components/Textarea/state.json'
+import { borderColorProps, textColorProps, sizeProps, textSizeProps } from '@itcase/ui/constants'
+
+textareaConfig.setState(textareaState)
+
+export default {
+  title: 'Atoms / Textarea',
+  component: Textarea,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    id: {
+      if: { arg: 'advancedProps' },
+    },
+    onBlur: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    shape: {
+      options: [null, 'rounded', 'underline'],
+      control: 'inline-radio',
+    },
+    state: {
+      options: [
+        null,
+        'normal',
+        'filled',
+        'active',
+        'activeFilled',
+        'error',
+        'errorFilled',
+        'readonly',
+        'disabled',
+        'success',
+        'require',
+      ],
+      control: 'inline-radio',
+    },
+    size: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    textColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    textSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    size: 'm',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'm',
+    borderColor: 'surfaceBorderTertiary',
+    shape: 'rounded',
+    state: null,
+    placeholder: 'Placeholder',
+    value: 'Filled',
+  },
+}
+
+export const Active = {
+  args: {
+    ...Default.args,
+  },
+}
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+}

package/dist/stories/Tile.stories.js

@@ -0,0 +1,235 @@
+import { Tile } from '@itcase/ui/components/Tile'
+import { Button, buttonConfig } from '@itcase/ui/components/Button'
+import buttonAppearance from 'src/components/Button/appearance.json'
+
+import {
+  alignProps,
+  alignDirectionProps,
+  borderColorProps,
+  borderColorHoverProps,
+  borderTypeProps,
+  borderWidthProps,
+  directionProps,
+  fillProps,
+  sizeProps,
+  shapeProps,
+  textWrapProps,
+  textWeightProps,
+  textAlignProps,
+  textColorProps,
+  textSizeProps,
+  titleSizeProps,
+} from '@itcase/ui/constants'
+
+buttonConfig.setAppearance(buttonAppearance)
+
+import { icon24 } from 'src/icons'
+
+export default {
+  title: 'Atoms / Tile',
+  component: Tile,
+  parameters: {
+    controls: {
+      exclude: [
+        'alignDesktop',
+        'alignMobile',
+        'alignTablet',
+        'alignDirectionDesktop',
+        'alignDirectionMobile',
+        'alignDirectionTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    textTag: {
+      if: { arg: 'advancedProps' },
+    },
+    align: {
+      options: alignProps,
+      control: 'inline-radio',
+    },
+    alignDirection: {
+      options: alignDirectionProps,
+      control: 'inline-radio',
+    },
+    badge: {
+      control: { type: 'number', min: 1, max: 10, step: 1 },
+    },
+    badgeSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    badgeTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    badgeType: {
+      options: ['accent', 'primary'],
+      control: 'inline-radio',
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderColorHover: {
+      options: borderColorHoverProps,
+      control: 'select',
+    },
+    borderType: {
+      options: borderTypeProps,
+      control: 'inline-radio',
+    },
+    borderWidth: {
+      options: borderWidthProps,
+      control: 'inline-radio',
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    direction: {
+      options: directionProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    reverse: {
+      control: 'boolean',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: ['normal', 'compact'],
+      control: 'inline-radio',
+    },
+    textColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    textSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    textWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    titleTextAlign: {
+      options: textAlignProps,
+      control: 'inline-radio',
+    },
+    titleTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    titleTextSize: {
+      options: titleSizeProps,
+      control: 'inline-radio',
+    },
+    titleTextWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    titleTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    type: {
+      options: [null, 'icon'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    before: (
+      <Button
+        position="absolute"
+        right="0"
+        top="0"
+        size="m"
+        iconBefore={icon24.Add}
+        shape="circular"
+        fill="accentPrimary"
+        iconBeforeSize="24"
+        iconBeforeFill="accentItemPrimary"
+      />
+    ),
+    badge: 3,
+    badgeTextSize: 'm',
+    badgeType: 'accent',
+    size: 'normal',
+    text: 'text',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'm',
+    title: 'Title',
+    titleTextColor: 'surfaceTextPrimary',
+    titleTextSize: 'h4',
+    titleTextWeight: 600,
+    borderColor: 'surfaceBorderTertiary',
+    fill: 'surfacePrimary',
+    shape: 'rounded',
+    children: 'Replacment Data',
+    after: (
+      <Button
+        appearance="accent"
+        label="Label"
+        labelTextSize="l"
+        shape="rounded"
+        size="xl"
+        width="fill"
+      />
+    ),
+  },
+}
+
+export const Normal = {
+  args: {
+    ...Default.args,
+    badge: null,
+  },
+}
+
+export const Compact = {
+  args: {
+    ...Default.args,
+    badge: null,
+    size: 'compact',
+    after: (
+      <Button
+        appearance="accent"
+        label="Label"
+        labelTextSize="m"
+        shape="rounded"
+        size="m"
+        width="fill"
+      />
+    ),
+  },
+}
+
+export const WithBadge = {
+  args: {
+    ...Default.args,
+    badge: 3,
+    badgeTextSize: 'm',
+    badgeType: 'primary',
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.100",
+  "version": "1.0.102",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",