@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/Drawer.stories.js

@@ -0,0 +1,75 @@
+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.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DropdownStories from './Dropdown.stories.js'
+import * as DropdownItemStories from './DropdownItem.stories.js'
+
+<Meta of={DropdownStories} />
+
+# Dropdown
+
+## Default
+
+<Canvas sourceState="shown" of={DropdownStories.Default} />

package/dist/stories/Dropdown.stories.js

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

package/dist/stories/DropdownItem.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DropdownItemStories from './DropdownItem.stories.js'
+
+<Meta of={DropdownItemStories} />
+
+# DropdownItem
+
+## Default
+
+<Canvas sourceState="shown" of={DropdownItemStories.Default} />
+
+## Active
+
+<Canvas sourceState="shown" of={DropdownItemStories.Active} />
+
+## Disabled
+
+<Canvas sourceState="shown" of={DropdownItemStories.Disabled} />

package/dist/stories/DropdownItem.stories.js

@@ -1,40 +1,19 @@
-import React from 'react'
-
-import { DropdownItem } from '@itcase/ui/components/Dropdown'
-
 import {
+  fillHoverProps,
+  fillProps,
   textColorProps,
   textSizeProps,
-  fillProps,
-  fillHoverProps,
   textWrapProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+
+import { DropdownItem } from '../DropdownItem'
 
 export default {
-  title: 'Atoms / Dropdown / Item',
-  component: DropdownItem,
-  parameters: {
-    controls: {
-      exclude: [
-        'fillDesktop',
-        'fillTablet',
-        'fillMobile',
-        'linkFillDesktop',
-        'linkFillTablet',
-        'linkFillMobile',
-        'sizeDesktop',
-        'sizeTablet',
-        'sizeMobile',
-        'shapeDesktop',
-        'shapeTablet',
-        'shapeMobile',
-        'typeDesktop',
-        'typeTablet',
-        'typeMobile',
-      ],
-    },
-  },
   argTypes: {
+    children: {
+      control: 'text',
+      if: { arg: 'advancedProps' },
+    },
     advancedProps: { control: 'boolean' },
     after: {
       if: { arg: 'advancedProps' },
@@ -42,41 +21,61 @@ export default {
     before: {
       if: { arg: 'advancedProps' },
     },
-    children: {
-      if: { arg: 'advancedProps' },
-      control: 'text',
-    },
     className: {
-      if: { arg: 'advancedProps' },
       control: 'text',
+      if: { arg: 'advancedProps' },
     },
     desc: {
-      if: { arg: 'advancedProps' },
       control: 'text',
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      control: 'select',
+      options: fillProps,
+    },
+    fillHover: {
+      control: 'select',
+      options: fillHoverProps,
     },
     href: {
       if: { arg: 'advancedProps' },
     },
-    link: {
-      if: { arg: 'advancedProps' },
+    labelTextColor: {
+      control: 'select',
+      options: textColorProps,
     },
-    linkFill: {
-      if: { arg: 'advancedProps' },
+    labelTextSize: {
+      control: 'inline-radio',
+      options: textSizeProps,
     },
-    LinkComponent: {
+    labelTextWrap: {
+      control: 'select',
+      options: textWrapProps,
+    },
+    link: {
       if: { arg: 'advancedProps' },
     },
-    onClick: {
+    LinkComponent: {
       if: { arg: 'advancedProps' },
-      control: 'text',
     },
-    onMouseEnter: {
+    linkFill: {
       if: { arg: 'advancedProps' },
-      control: 'text',
     },
     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' },
     },
@@ -86,52 +85,51 @@ export default {
     underline: {
       if: { arg: 'advancedProps' },
     },
-    fill: {
-      options: fillProps,
-      control: 'select',
-    },
-    fillHover: {
-      options: fillHoverProps,
-      control: 'select',
-    },
-    labelTextColor: {
-      options: textColorProps,
-      control: 'select',
-    },
-    labelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    labelTextWrap: {
-      options: textWrapProps,
-      control: 'select',
-    },
-    set: {
-      options: [null, 'normal', 'compact'],
-      control: 'inline-radio',
+    onClick: {
+      control: 'text',
+      if: { arg: 'advancedProps' },
     },
-    size: {
-      options: [null, 'normal', 'compact'],
-      control: 'inline-radio',
+    onMouseEnter: {
+      control: 'text',
+      if: { arg: 'advancedProps' },
     },
-    shape: {
-      options: [null, 'geometric', 'rounded'],
-      control: 'inline-radio',
+  },
+  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: {
-    set: 'normal',
-    shape: 'rounded',
     isOpen: true,
-    size: 'normal',
     fill: 'surfacePrimary',
     fillHover: 'surfacePrimaryHover',
     label: 'Label',
-    labelTextSize: 'm',
     labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 'm',
+    set: 'normal',
+    shape: 'rounded',
+    size: 'normal',
   },
 }
 

package/dist/stories/Flex.stories.js

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

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

package/dist/stories/FlexAlignItems.stories.js

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