@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/FlexAlignSelf.stories.js

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,89 @@
+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',
+  },
+}