@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/Tile.stories.js

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

package/dist/stories/Title.stories.js

@@ -1,168 +0,0 @@
-import {
-  fillProps,
-  textAlignProps,
-  textColorActiveProps,
-  textColorHoverProps,
-  textColorProps,
-  textGradientProps,
-  textStyleProps,
-  textWeightProps,
-  textWrapProps,
-  titleSizeProps,
-} from '../../../constants'
-import { Title } from '../Title'
-
-export default {
-  argTypes: {
-    textAlign: {
-      control: 'inline-radio',
-      options: textAlignProps,
-    },
-    advancedProps: { control: 'boolean' },
-    appearance: {
-      control: 'inline-radio',
-      options: [null, 'dev'],
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    mode: {
-      control: 'inline-radio',
-      options: [null, 'skeleton'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: titleSizeProps,
-    },
-    tag: {
-      if: { arg: 'advancedProps' },
-    },
-    text: {
-      if: { arg: 'advancedProps' },
-    },
-    textColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    textColorActive: {
-      control: 'select',
-      options: textColorActiveProps,
-    },
-    textColorHover: {
-      control: 'select',
-      options: textColorHoverProps,
-    },
-    textGradient: {
-      control: 'inline-radio',
-      options: textGradientProps,
-    },
-    textStyle: {
-      control: 'inline-radio',
-      options: textStyleProps,
-    },
-    textWeight: {
-      control: 'inline-radio',
-      options: textWeightProps,
-    },
-    textWrap: {
-      control: 'inline-radio',
-      options: textWrapProps,
-    },
-    type: {
-      control: 'inline-radio',
-      options: ['accent', 'primary', 'secondary', 'tertiary'],
-    },
-    onClick: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Title,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'textAlignDesktop',
-        'textAlignMobile',
-        'textAlignTablet',
-        'textColorDesktop',
-        'textColorMobile',
-        'textColorTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Title',
-}
-
-const Default = {
-  args: {
-    children: 'title',
-    appearance: null,
-    textColor: 'surfaceTextPrimary',
-  },
-}
-
-export const Dev = {
-  args: {
-    ...Default.args,
-    appearance: 'dev',
-  },
-}
-
-export const SizeH1 = {
-  args: {
-    ...Default.args,
-    size: 'h1',
-  },
-}
-
-export const SizeH2 = {
-  args: {
-    ...Default.args,
-    size: 'h2',
-  },
-}
-
-export const SizeH3 = {
-  args: {
-    ...Default.args,
-    size: 'h3',
-  },
-}
-
-export const SizeH4 = {
-  args: {
-    ...Default.args,
-    size: 'h4',
-  },
-}
-
-export const SizeH5 = {
-  args: {
-    ...Default.args,
-    size: 'h5',
-  },
-}
-
-export const SizeH6 = {
-  args: {
-    ...Default.args,
-    size: 'h6',
-  },
-}
-
-export const SkeletonMode = {
-  args: {
-    ...Default.args,
-    children: 'skeleton',
-    mode: 'skeleton',
-  },
-}

package/dist/stories/Tooltip.stories.js

@@ -1,164 +0,0 @@
-import {
-  alignDirectionProps,
-  alignmentProps,
-  alignProps,
-  borderColorProps,
-  borderTypeProps,
-  borderWidthProps,
-  fillProps,
-  shapeProps,
-  textColorProps,
-  textSizeProps,
-  titleSizeProps,
-  widthProps,
-} from '../../../constants'
-import { Tooltip, tooltipConfig } from '../Tooltip'
-import { tooltipAppearance } from '../Tooltip.appearance'
-
-tooltipConfig.setAppearance(tooltipAppearance)
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    width: {
-      control: 'inline-radio',
-      options: widthProps,
-    },
-    borderWidth: {
-      control: 'inline-radio',
-      options: borderWidthProps,
-    },
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    elevation: {
-      control: 'inline-radio',
-      options: [null, 1, 2, 4, 6, 8, 12, 16, 24],
-    },
-    isTooltipVisible: { control: 'boolean' },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    align: {
-      control: 'inline-radio',
-      options: alignProps,
-    },
-    alignDirection: {
-      control: 'inline-radio',
-      options: alignDirectionProps,
-    },
-    alignment: {
-      control: 'inline-radio',
-      options: alignmentProps,
-    },
-    appearance: {
-      control: 'inline-radio',
-      options: ['surfacePrimary', 'surfaceSecondary', 'surfaceTertiary'],
-    },
-    arrowPosition: {
-      control: 'inline-radio',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    borderType: {
-      control: 'inline-radio',
-      options: borderTypeProps,
-    },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['s', 'm', 'l'],
-    },
-    textColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    textSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    titleSize: {
-      control: 'inline-radio',
-      options: titleSizeProps,
-    },
-    titleTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    type: {
-      control: 'inline-radio',
-      options: [null, 'arrow'],
-    },
-  },
-  component: Tooltip,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'sizeDesktop',
-        'sizeMobile',
-        'sizeTablet',
-        'textSizeDesktop',
-        'textSizeMobile',
-        'textSizeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Tooltip',
-}
-
-const Default = {
-  args: {
-    padding: 10,
-    elevation: 8,
-    initialIsVisible: true,
-    shape: 'rounded',
-    size: 'm',
-    text: 'text',
-    textSize: 'm',
-    title: 'Title',
-    titleSize: 'h4',
-  },
-}
-
-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/Wrap.stories.js

@@ -1,74 +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}
-      wrap={args.wrap}
-    >
-      <Group width="30%" height="60" fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </Group>
-      <Group width="30%" height="60" fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </Group>
-      <Group width="30%" height="60" fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </Group>
-      <Group width="30%" height="60" fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </Group>
-    </Group>
-  ),
-  title: 'Layout / Group / Variants / Wrap',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    padding: '20',
-    borderColor: 'surfaceBorderPrimary',
-    direction: 'horizontal',
-    fill: 'surfacePrimary',
-  },
-}
-
-export const Nowrap = {
-  args: {
-    ...Default.args,
-    wrap: 'nowrap',
-  },
-}
-
-export const Wrap = {
-  args: {
-    ...Default.args,
-    wrap: 'wrap',
-  },
-}
-
-export const WrapReverse = {
-  args: {
-    ...Default.args,
-    wrap: 'wrap-reverse',
-  },
-}

package/dist/types/types/componentProps/sizeInterface.d.ts

@@ -1 +0,0 @@
-export type sizeOptionPropsType = 'any' | 'compact' | 'l' | 'large' | 'm' | 'normal' | 'regular' | 's' | 'tiny' | 'xl' | 'xs' | 'xxl';