@itcase/ui 1.3.12 → 1.3.14

package/dist/constants.js

@@ -1,52 +0,0 @@
-export { default as alignDirectionProps } from './constants/componentProps/alignDirection.js';
-export { default as alignProps } from './constants/componentProps/align.js';
-export { default as alignmentProps } from './constants/componentProps/alignment.js';
-export { default as borderColorHoverProps } from './constants/componentProps/borderColorHover.js';
-export { default as borderColorProps } from './constants/componentProps/borderColor.js';
-export { default as borderTypeProps } from './constants/componentProps/borderType.js';
-export { default as borderWidthProps } from './constants/componentProps/borderWidth.js';
-export { default as captionPositionProps } from './constants/componentProps/captionPosition.js';
-export { default as directionProps } from './constants/componentProps/direction.js';
-export { default as emojiSizeProps } from './constants/componentProps/emojiSize.js';
-export { default as fillGradientProps } from './constants/componentProps/fillGradient.js';
-export { default as fillHoverProps } from './constants/componentProps/fillHover.js';
-export { default as fillProps } from './constants/componentProps/fill.js';
-export { default as fillTypeProps } from './constants/componentProps/fillType.js';
-export { default as flexAlignProps } from './constants/componentProps/flexAlign.js';
-export { default as flexJustifyContentProps } from './constants/componentProps/flexJustifyContent.js';
-export { default as flexWrapProps } from './constants/componentProps/flexWrap.js';
-export { default as gridAlignProps } from './constants/componentProps/gridAlign.js';
-export { default as gridAlignSelfProps } from './constants/componentProps/gridAlignSelf.js';
-export { default as gridJustifyItemsProps } from './constants/componentProps/gridJustifyItems.js';
-export { default as gridJustifySelfProps } from './constants/componentProps/gridJustifySelf.js';
-export { default as heightProps } from './constants/componentProps/height.js';
-export { default as horizontalContentAlignProps } from './constants/componentProps/horizontalContentAlign.js';
-export { default as horizontalResizeModeProps } from './constants/componentProps/horizontalResizeMode.js';
-export { default as iconFillSizeProps } from './constants/componentProps/iconFillSize.js';
-export { default as iconSizeProps } from './constants/componentProps/iconSize.js';
-export { default as itemColorProps } from './constants/componentProps/itemColor.js';
-export { default as positionProps } from './constants/componentProps/position.js';
-export { default as resizeModeProps } from './constants/componentProps/resizeMode.js';
-export { default as shapeProps } from './constants/componentProps/shape.js';
-export { default as sizeInterfaceProps } from './constants/componentProps/sizeInterface.js';
-export { default as sizePXProps } from './constants/componentProps/sizePX.js';
-export { default as sizeProps } from './constants/componentProps/size.js';
-export { default as stackingProps } from './constants/componentProps/stacking.js';
-export { default as stateProps } from './constants/componentProps/state.js';
-export { default as textAlignProps } from './constants/componentProps/textAlign.js';
-export { default as textColorActiveProps } from './constants/componentProps/textColorActive.js';
-export { default as textColorHoverProps } from './constants/componentProps/textColorHover.js';
-export { default as textColorProps } from './constants/componentProps/textColor.js';
-export { default as textGradientProps } from './constants/componentProps/textGradient.js';
-export { default as textSizeProps } from './constants/componentProps/textSize.js';
-export { default as textStyleProps } from './constants/componentProps/textStyle.js';
-export { default as textTagProps } from './constants/componentProps/textTag.js';
-export { default as textWeightProps } from './constants/componentProps/textWeight.js';
-export { default as textWrapProps } from './constants/componentProps/textWrap.js';
-export { default as titleSizeProps } from './constants/componentProps/titleSize.js';
-export { default as typeProps } from './constants/componentProps/type.js';
-export { default as underlineProps } from './constants/componentProps/underline.js';
-export { default as verticalContentAlignProps } from './constants/componentProps/verticalContentAlign.js';
-export { default as verticalResizeModeProps } from './constants/componentProps/verticalResizeMode.js';
-export { default as widthProps } from './constants/componentProps/width.js';
-export { default as wrapProps } from './constants/componentProps/wrap.js';

package/dist/stories/Accordion.stories.js

@@ -1,105 +0,0 @@
-import React from 'react'
-
-import { borderColorProps, directionProps, fillProps, shapeProps } from '../../../constants'
-import { Icon } from '../../Icon'
-import { Accordion } from '../Accordion'
-import { AccordionItem } from '../AccordionItem'
-
-export default {
-  argTypes: {
-    borderColor: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    direction: {
-      control: 'inline-radio',
-      options: directionProps,
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    shape: {
-      control: 'inline-radio',
-      options: shapeProps,
-    },
-  },
-  component: Accordion,
-  parameters: {
-    controls: {
-      exclude: [
-        'directionDesktop',
-        'directionMobile',
-        'directionTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'initial',
-        'onClickItem',
-        'items',
-      ],
-    },
-  },
-  title: 'Molecules / Accordion / Default',
-}
-
-export const Default = {
-  args: {
-    children: (
-      <React.Fragment>
-        <AccordionItem
-          fillHover="accentTertiary"
-          content="content 1"
-          contentFill="primaryPrimary"
-          contentTextColor="surfaceTextPrimary"
-          contentTextSize="m"
-          size="xs"
-          title="Title 1"
-          titleFill="secondaryPrimary"
-          titleFillHover="secondaryPrimaryHover"
-          titleTextColor="surfaceTextPrimary"
-          titleTextSize="m"
-          icon=<Icon
-            iconFill="surfaceItemSecondary"
-            imageSrc="assets/16/ChevronDown.svg"
-            size="16"
-          />
-          isExpanded={true}
-        />
-        <AccordionItem
-          fillHover="accentTertiary"
-          content="content 2"
-          size="xs"
-          title="Title 2"
-          titleTextColor="surfaceTextPrimary"
-          titleTextSize="m"
-          icon=<Icon
-            iconFill="surfaceItemSecondary"
-            imageSrc="assets/16/ChevronDown.svg"
-            size="16"
-          />
-        />
-        <AccordionItem
-          fillHover="accentTertiary"
-          content="content 3"
-          size="xs"
-          title="Title 3"
-          titleTextColor="surfaceTextPrimary"
-          titleTextSize="m"
-          icon=<Icon
-            iconFill="surfaceItemSecondary"
-            imageSrc="assets/16/ChevronDown.svg"
-            size="16"
-          />
-        />
-      </React.Fragment>
-    ),
-    borderColor: 'accentBorderPrimary',
-    fill: 'surfaceSecondary',
-    shape: 'rounded',
-  },
-}

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',
-  },
-}