@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/Divider.stories.js

@@ -1,131 +0,0 @@
-import { fillHoverProps } from '../../../constants'
-import { Divider } from '../Divider'
-
-export default {
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'inline-radio',
-      options: [
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-        'surfaceQuaternary',
-        'accentPrimary',
-        'primaryPrimary',
-        'secondaryPrimary',
-      ],
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-  },
-  component: Divider,
-  parameters: {
-    controls: {
-      exclude: [
-        'direction',
-        'directionDesktop',
-        'directionTablet',
-        'directionMobile',
-        'fillDesktop',
-        'fillTablet',
-        'fillMobile',
-        'size',
-        'sizeDesktop',
-        'sizeTablet',
-        'sizeMobile',
-        'widthDesktop',
-        'widthTablet',
-        'widthMobile',
-      ],
-    },
-  },
-  title: 'Atoms / Divider',
-}
-
-export const Horizontal = {
-  args: {
-    width: 300,
-    height: 3,
-    fill: 'surfaceTertiary',
-  },
-}
-
-export const SurfacePrimary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'surfacePrimary',
-  },
-}
-
-export const SurfaceSecondary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'surfaceSecondary',
-  },
-}
-
-export const SurfaceTertiary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'surfaceTertiary',
-  },
-}
-
-export const SurfaceQuaternary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'surfaceQuaternary',
-  },
-}
-
-export const AccentPrimary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'accentPrimary',
-  },
-}
-
-export const PrimaryPrimary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'primaryPrimary',
-  },
-}
-
-export const SecondaryPrimary = {
-  args: {
-    ...Horizontal.args,
-    width: 300,
-    height: 3,
-    fill: 'secondaryPrimary',
-  },
-}
-
-export const Vertical = {
-  args: {
-    width: 3,
-    height: 300,
-    fill: 'surfaceTertiary',
-  },
-}

package/dist/stories/Dot.stories.js

@@ -1,85 +0,0 @@
-import { borderColorProps, borderTypeProps, fillProps, shapeProps } from '../../../constants'
-import { Dot } from '../Dot'
-
-export default {
-  args: {
-    shape: 'circular',
-  },
-  argTypes: {
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    border: {
-      control: 'select',
-      options: borderColorProps,
-    },
-    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'],
-    },
-  },
-  component: Dot,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderDesktop',
-        'borderMobile',
-        'borderTablet',
-        'borderTypeDesktop',
-        'borderTypeMobile',
-        'borderTypeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-      ],
-    },
-  },
-  title: 'Atoms / Dot',
-}
-
-export const Default = {
-  args: {
-    fill: 'accentPrimary',
-    size: 'm',
-  },
-}
-
-export const Accent = {
-  args: {
-    ...Default.args,
-    fill: 'accentPrimary',
-  },
-}
-
-export const Primary = {
-  args: {
-    ...Default.args,
-    fill: 'primaryPrimary',
-  },
-}
-
-export const Secondary = {
-  args: {
-    ...Default.args,
-    fill: 'secondaryPrimary',
-  },
-}

package/dist/stories/Drawer.stories.js

@@ -1,75 +0,0 @@
-import { directionProps } from '../../../constants'
-import { Button } from '../../Button'
-import { Drawer } from '../../Drawer'
-import { Group } from '../../Group'
-import { Text } from '../../Text'
-import { Title } from '../../Title'
-
-export default {
-  argTypes: {
-    direction: {
-      control: 'inline-radio',
-      if: { arg: 'advancedProps' },
-      options: directionProps,
-    },
-    isOpenModal: { control: 'boolean' },
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    closeModal: {
-      if: { arg: 'advancedProps' },
-    },
-    dataTour: {
-      if: { arg: 'advancedProps' },
-    },
-    size: {
-      control: 'inline-radio',
-      options: [300, 400, 500, 600, 700, 800],
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: Drawer,
-  title: 'Molecules / Drawer',
-}
-
-export const Default = {
-  args: {
-    children: (
-      <Group
-        height="100%"
-        padding="24"
-        alignItems="center"
-        direction="vertical"
-        justifyContent="center"
-      >
-        <Title size="h4" textColor="surfaceTextPrimary">
-          Drawer content
-        </Title>
-      </Group>
-    ),
-    isOpenModal: true,
-    after: (
-      <Group padding="24" alignItems="center" direction="vertical" justifyContent="center">
-        <Button
-          width="fill"
-          labelTextSize="l"
-          appearance="accent"
-          label="btn after"
-          shape="rounded"
-          size="xxl"
-        />
-      </Group>
-    ),
-    before: (
-      <Group padding="24" alignItems="center" direction="vertical" justifyContent="center">
-        <Text size="m" textColor="surfaceTextPrimary">
-          Before content
-        </Text>
-      </Group>
-    ),
-    size: 600,
-  },
-}

package/dist/stories/Dropdown.stories.js

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import { Dropdown } from '../Dropdown'
-import { DropdownItem } from '../DropdownItem'
-
-export default {
-  argTypes: {
-    elevation: {
-      control: 'inline-radio',
-      options: [null, 1, 2, 4, 6, 8, 12, 16, 24],
-    },
-    isCloseByClickOutside: {
-      if: { arg: 'advancedProps' },
-    },
-    isOpen: {
-      control: 'boolean',
-    },
-    advancedProps: { control: 'boolean' },
-    animationClose: {
-      if: { arg: 'advancedProps' },
-    },
-    animationOpen: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    shape: {
-      control: 'inline-radio',
-      options: [null, 'geometric', 'rounded'],
-    },
-  },
-  component: Dropdown,
-  title: 'Molecules / Dropdown / Default',
-}
-
-export const Default = {
-  args: {
-    children: (
-      <React.Fragment>
-        <DropdownItem
-          labelTextColor="surfaceTextPrimary"
-          labelTextSize="m"
-          fill="surfacePrimary"
-          fillHover="surfacePrimaryHover"
-          label="Label Primary"
-          labelTextWrap="nowrap"
-          size="normal"
-        />
-        <DropdownItem
-          labelTextColor="surfaceTextPrimary"
-          labelTextSize="m"
-          fill="surfacePrimary"
-          fillHover="surfacePrimaryHover"
-          label="Label Secondary"
-          labelTextWrap="nowrap"
-          size="normal"
-        />
-        <DropdownItem
-          labelTextColor="surfaceTextPrimary"
-          labelTextSize="m"
-          fill="surfacePrimary"
-          fillHover="surfacePrimaryHover"
-          label="Label Tertiary"
-          labelTextWrap="nowrap"
-          size="normal"
-        />
-      </React.Fragment>
-    ),
-    elevation: 8,
-    isOpen: true,
-    shape: 'rounded',
-  },
-}

package/dist/stories/DropdownItem.stories.js

@@ -1,150 +0,0 @@
-import {
-  fillHoverProps,
-  fillProps,
-  textColorProps,
-  textSizeProps,
-  textWrapProps,
-} from '../../../constants'
-
-import { DropdownItem } from '../DropdownItem'
-
-export default {
-  argTypes: {
-    children: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    advancedProps: { control: 'boolean' },
-    after: {
-      if: { arg: 'advancedProps' },
-    },
-    before: {
-      if: { arg: 'advancedProps' },
-    },
-    className: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    desc: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      control: 'select',
-      options: fillProps,
-    },
-    fillHover: {
-      control: 'select',
-      options: fillHoverProps,
-    },
-    href: {
-      if: { arg: 'advancedProps' },
-    },
-    labelTextColor: {
-      control: 'select',
-      options: textColorProps,
-    },
-    labelTextSize: {
-      control: 'inline-radio',
-      options: textSizeProps,
-    },
-    labelTextWrap: {
-      control: 'select',
-      options: textWrapProps,
-    },
-    link: {
-      if: { arg: 'advancedProps' },
-    },
-    LinkComponent: {
-      if: { arg: 'advancedProps' },
-    },
-    linkFill: {
-      if: { arg: 'advancedProps' },
-    },
-    rel: {
-      if: { arg: 'advancedProps' },
-    },
-    set: {
-      control: 'inline-radio',
-      options: [null, 'normal', 'compact'],
-    },
-    shape: {
-      control: 'inline-radio',
-      options: [null, 'geometric', 'rounded'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: [null, 'normal', 'compact'],
-    },
-    target: {
-      if: { arg: 'advancedProps' },
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-    underline: {
-      if: { arg: 'advancedProps' },
-    },
-    onClick: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-    onMouseEnter: {
-      control: 'text',
-      if: { arg: 'advancedProps' },
-    },
-  },
-  component: DropdownItem,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillTablet',
-        'fillMobile',
-        'linkFillDesktop',
-        'linkFillTablet',
-        'linkFillMobile',
-        'sizeDesktop',
-        'sizeTablet',
-        'sizeMobile',
-        'shapeDesktop',
-        'shapeTablet',
-        'shapeMobile',
-        'typeDesktop',
-        'typeTablet',
-        'typeMobile',
-      ],
-    },
-  },
-  title: 'Molecules / Dropdown / Item',
-}
-
-export const Default = {
-  args: {
-    isOpen: true,
-    fill: 'surfacePrimary',
-    fillHover: 'surfacePrimaryHover',
-    label: 'Label',
-    labelTextColor: 'surfaceTextPrimary',
-    labelTextSize: 'm',
-    set: 'normal',
-    shape: 'rounded',
-    size: 'normal',
-  },
-}
-
-export const Active = {
-  args: {
-    ...Default.args,
-  },
-}
-
-export const Disabled = {
-  args: {
-    ...Default.args,
-    fill: 'surfaceSecondary',
-    fillHover: null,
-    labelTextColor: 'surfaceTextSecondary',
-    labelTextWrap: 'nowrap',
-  },
-}

package/dist/stories/Flex.stories.js

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import { Flex, FlexItem } from '@itcase/ui/components/Flex'
-import { Group } from '@itcase/ui/components/Group'
-import { Text } from '@itcase/ui/components/Text'
-
-import { argTypes, parameters } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  parameters: {
-    ...parameters,
-  },
-  render: ({ ...args }) => (
-    <Flex flex="1" direction="horizontal" maxWidthWrapper="100%">
-      <FlexItem maxWidth="260px" fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="infoTextPrimary">
-          Menu
-        </Text>
-      </FlexItem>
-      <FlexItem direction="vertical" grow={1}>
-        <Group fill="accentPrimary" padding="20">
-          <Text size="xl" textColor="accentTextPrimary">
-            Header
-          </Text>
-        </Group>
-        <Group fill="primaryPrimary" padding="20">
-          <Text size="xl" textColor="primaryTextPrimary">
-            Component
-          </Text>
-        </Group>
-        <Group fill="secondaryPrimary" padding="20">
-          <Text size="xl" textColor="secondaryTextPrimary">
-            Footer
-          </Text>
-        </Group>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Flex',
-}
-
-export const Default = {
-  args: {},
-}

package/dist/stories/FlexAlignContent.stories.js

@@ -1,102 +0,0 @@
-import React from 'react'
-
-import { Flex, FlexItem } from '@itcase/ui/components/Flex'
-import { Text } from '@itcase/ui/components/Text'
-
-import { argTypes, parameters } from './args'
-
-export default {
-  argTypes: {
-    ...argTypes,
-  },
-  component: Flex,
-  parameters: {
-    ...parameters,
-  },
-  render: ({ ...args }) => (
-    <Flex
-      width={args.width}
-      height={args.height}
-      padding={args.padding}
-      borderColor={args.borderColor}
-      alignContent={args.alignContent}
-      gap={args.gap}
-      wrap={args.wrap}
-    >
-      <FlexItem width="30%" fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem width="30%" fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem width="30%" fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem width="30%" fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Alignment / AlignContent',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    gap: 10,
-    borderColor: 'surfaceBorderTertiary',
-    wrap: 'wrap',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    alignContent: 'flexStart',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    alignContent: 'flexEnd',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    alignContent: 'center',
-  },
-}
-
-export const SpaceBetween = {
-  args: {
-    ...Default.args,
-    alignContent: 'spaceBetween',
-  },
-}
-
-export const SpaceAround = {
-  args: {
-    ...Default.args,
-    alignContent: 'spaceAround',
-  },
-}
-
-export const Stretch = {
-  args: {
-    ...Default.args,
-    alignContent: 'stretch',
-  },
-}