@itcase/ui 1.3.11 → 1.3.13

package/dist/stories/FlexAlignItems.stories.js

@@ -1,91 +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}
-      alignItems={args.alignItems}
-    >
-      <FlexItem fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Alignment / AlignItems',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const Stretch = {
-  args: {
-    ...Default.args,
-    alignItems: 'stretch',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    alignItems: 'flexStart',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    alignItems: 'flexEnd',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    alignItems: 'center',
-  },
-}
-
-export const Baseline = {
-  args: {
-    ...Default.args,
-    alignItems: 'baseline',
-  },
-}

package/dist/stories/FlexAlignSelf.stories.js

@@ -1,97 +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}
-    >
-      <FlexItem fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem fill="secondaryPrimary" padding="20" alignSelf={args.alignSelf}>
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Alignment / AlignSelf',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const Auto = {
-  args: {
-    ...Default.args,
-    alignSelf: 'auto',
-  },
-}
-
-export const Stretch = {
-  args: {
-    ...Default.args,
-    alignSelf: 'stretch',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    alignSelf: 'flexStart',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    alignSelf: 'flexEnd',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    alignSelf: 'center',
-  },
-}
-
-export const Baseline = {
-  args: {
-    ...Default.args,
-    alignSelf: 'baseline',
-  },
-}

package/dist/stories/FlexDirection.stories.js

@@ -1,112 +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}
-      direction={args.direction}
-    >
-      <FlexItem fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Direction',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const Row = {
-  args: {
-    ...Default.args,
-    direction: 'row',
-  },
-}
-
-export const RowReverse = {
-  args: {
-    ...Default.args,
-    direction: 'rowReverse',
-  },
-}
-
-export const Column = {
-  args: {
-    ...Default.args,
-    direction: 'column',
-  },
-}
-
-export const ColumnReverse = {
-  args: {
-    ...Default.args,
-    direction: 'columnReverse',
-  },
-}
-
-export const Horizontal = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-  },
-}
-
-export const HorizontalReverse = {
-  args: {
-    ...Default.args,
-    direction: 'horizontalReverse',
-  },
-}
-
-export const Vertical = {
-  args: {
-    ...Default.args,
-    direction: 'vertical',
-  },
-}
-
-export const VerticalReverse = {
-  args: {
-    ...Default.args,
-    direction: 'verticalReverse',
-  },
-}

package/dist/stories/FlexGrow.stories.js

@@ -1,69 +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}
-    >
-      <FlexItem fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem fill="secondaryPrimary" padding="20" grow={args.grow}>
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Grow',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const Regular = {
-  args: {
-    ...Default.args,
-    grow: '0',
-  },
-}
-
-export const One = {
-  args: {
-    ...Default.args,
-    grow: '1',
-  },
-}

package/dist/stories/FlexJustifyContent.stories.js

@@ -1,98 +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}
-      justifyContent={args.justifyContent}
-    >
-      <FlexItem width="80" fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem width="80" fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem width="80" fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem width="80" fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Alignment / JustifyContent',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const FlexStart = {
-  args: {
-    ...Default.args,
-    justifyContent: 'flexStart',
-  },
-}
-
-export const FlexEnd = {
-  args: {
-    ...Default.args,
-    justifyContent: 'flexEnd',
-  },
-}
-
-export const Center = {
-  args: {
-    ...Default.args,
-    justifyContent: 'center',
-  },
-}
-
-export const SpaceBetween = {
-  args: {
-    ...Default.args,
-    justifyContent: 'spaceBetween',
-  },
-}
-
-export const SpaceAround = {
-  args: {
-    ...Default.args,
-    justifyContent: 'spaceAround',
-  },
-}
-
-export const SpaceEvenly = {
-  args: {
-    ...Default.args,
-    justifyContent: 'spaceEvenly',
-  },
-}

package/dist/stories/FlexOrder.stories.js

@@ -1,76 +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}
-    >
-      <FlexItem fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem fill="secondaryPrimary" padding="20" order={args.order}>
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Order',
-}
-
-const Default = {
-  args: {
-    width: '500',
-    height: '300',
-    padding: '20',
-    borderColor: 'surfaceBorderTertiary',
-  },
-}
-
-export const First = {
-  args: {
-    ...Default.args,
-    order: '-1',
-  },
-}
-
-export const Regular = {
-  args: {
-    ...Default.args,
-    order: '0',
-  },
-}
-
-export const Last = {
-  args: {
-    ...Default.args,
-    order: '1',
-  },
-}

package/dist/stories/FlexWrap.stories.js

@@ -1,89 +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,
-  },
-  parameters: {
-    ...parameters,
-  },
-  render: ({ ...args }) => (
-    <Flex
-      width={args.width}
-      padding={args.padding}
-      borderColor={args.borderColor}
-      direction={args.direction}
-      wrap={args.wrap}
-    >
-      <FlexItem width={args.itemWidth} fill="accentPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          1
-        </Text>
-      </FlexItem>
-      <FlexItem width={args.itemWidth} fill="primaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          2
-        </Text>
-      </FlexItem>
-      <FlexItem width={args.itemWidth} fill="secondaryPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          3
-        </Text>
-      </FlexItem>
-      <FlexItem width={args.itemWidth} fill="infoPrimary" padding="20">
-        <Text size="xl" textColor="accentTextPrimary">
-          4
-        </Text>
-      </FlexItem>
-    </Flex>
-  ),
-  title: 'Layout / Flex / Variants / Wrap',
-}
-
-const Default = {
-  args: {
-    width: '400',
-    padding: '20',
-    borderColor: 'surfaceBorderSecondary',
-  },
-}
-
-export const NoWrap = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-    itemWidth: '50%',
-    wrap: 'nowrap',
-  },
-}
-
-export const Wrap = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-    itemWidth: '50%',
-    wrap: 'wrap',
-  },
-}
-
-export const WrapReverse = {
-  args: {
-    ...Default.args,
-    direction: 'horizontal',
-    itemWidth: '50%',
-    wrap: 'wrapReverse',
-  },
-}
-
-export const WrapVerticalReverse = {
-  args: {
-    ...Default.args,
-    itemWidth: '100%',
-    wrap: 'wrapReverse',
-  },
-}