@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/Tile.stories.js

@@ -1,180 +1,209 @@
-import { Tile } from '../Tile'
-import { Button, buttonConfig } from '../../Button'
-import buttonAppearance from '../../Button/appearance.json'
-
 import {
-  alignProps,
   alignDirectionProps,
-  borderColorProps,
+  alignProps,
   borderColorHoverProps,
+  borderColorProps,
   borderTypeProps,
   borderWidthProps,
   directionProps,
   fillProps,
-  sizeProps,
   shapeProps,
-  textWrapProps,
-  textWeightProps,
+  sizeProps,
   textAlignProps,
   textColorProps,
   textSizeProps,
+  textWeightProps,
+  textWrapProps,
   titleSizeProps,
 } from '../../../constants'
+import { icon24 } from '../../../icons'
+import { badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import { Button, buttonConfig } from '../../Button'
+import buttonAppearance from '../../Button/appearance.json'
+import { Tile } from '../Tile'
 
-buttonConfig.setAppearance(buttonAppearance)
+badgeConfig.setAppearance(badgeAppearance)
 
-import { icon24 } from '../../../icons'
+buttonConfig.setAppearance(buttonAppearance)
 
 export default {
-  title: 'Atoms / Tile',
-  component: Tile,
-  parameters: {
-    controls: {
-      exclude: [
-        'alignDesktop',
-        'alignMobile',
-        'alignTablet',
-        'alignDirectionDesktop',
-        'alignDirectionMobile',
-        'alignDirectionTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-      ],
-    },
-  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    onClick: {
+    children: {
       if: { arg: 'advancedProps' },
     },
-    textTag: {
-      if: { arg: 'advancedProps' },
+    borderWidth: {
+      control: 'inline-radio',
+      options: borderWidthProps,
+    },
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
+    },
+    direction: {
+      control: 'inline-radio',
+      options: directionProps,
     },
+    advancedProps: { control: 'boolean' },
     align: {
-      options: alignProps,
       control: 'inline-radio',
+      options: alignProps,
     },
     alignDirection: {
-      options: alignDirectionProps,
       control: 'inline-radio',
+      options: alignDirectionProps,
     },
     badge: {
-      control: { type: 'number', min: 1, max: 10, step: 1 },
+      control: { max: 10, min: 1, step: 1, type: 'number' },
+    },
+    badgeAppearance: {
+      control: 'inline-radio',
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+        'disabled',
+      ],
     },
     badgeSize: {
-      options: sizeProps,
       control: 'inline-radio',
+      options: sizeProps,
     },
     badgeTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     badgeType: {
-      options: ['accent', 'primary'],
       control: 'inline-radio',
-    },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
+      options: ['accent', 'primary'],
     },
     borderColorHover: {
-      options: borderColorHoverProps,
       control: 'select',
+      options: borderColorHoverProps,
     },
     borderType: {
-      options: borderTypeProps,
-      control: 'inline-radio',
-    },
-    borderWidth: {
-      options: borderWidthProps,
       control: 'inline-radio',
-    },
-    children: {
-      if: { arg: 'advancedProps' },
+      options: borderTypeProps,
     },
     className: {
       if: { arg: 'advancedProps' },
     },
-    direction: {
-      options: directionProps,
-      control: 'inline-radio',
-    },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     reverse: {
       control: 'boolean',
     },
     shape: {
-      options: shapeProps,
       control: 'inline-radio',
+      options: shapeProps,
     },
     size: {
-      options: ['normal', 'compact'],
       control: 'inline-radio',
+      options: ['normal', 'compact'],
     },
     textColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     textSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
+    },
+    textTag: {
+      if: { arg: 'advancedProps' },
     },
     textWrap: {
-      options: textWrapProps,
       control: 'inline-radio',
+      options: textWrapProps,
     },
     titleTextAlign: {
-      options: textAlignProps,
       control: 'inline-radio',
+      options: textAlignProps,
     },
     titleTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     titleTextSize: {
-      options: titleSizeProps,
       control: 'inline-radio',
+      options: titleSizeProps,
     },
     titleTextWeight: {
-      options: textWeightProps,
       control: 'inline-radio',
+      options: textWeightProps,
     },
     titleTextWrap: {
-      options: textWrapProps,
       control: 'inline-radio',
+      options: textWrapProps,
     },
     type: {
-      options: [null, 'icon'],
       control: 'inline-radio',
+      options: [null, 'icon'],
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Tile,
+  parameters: {
+    controls: {
+      exclude: [
+        'alignDesktop',
+        'alignMobile',
+        'alignTablet',
+        'alignDirectionDesktop',
+        'alignDirectionMobile',
+        'alignDirectionTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+      ],
+    },
+  },
+  title: 'Molecules / Tile',
 }
 
 export const Default = {
   args: {
+    children: 'Replacment Data',
+    borderColor: 'surfaceBorderTertiary',
+    after: (
+      <Button
+        width="fill"
+        labelTextSize="l"
+        appearance="accent"
+        label="Label"
+        shape="rounded"
+        size="xl"
+      />
+    ),
+    badge: 3,
+    badgeAppearance: 'accent',
+    badgeTextSize: 'm',
     before: (
       <Button
+        fill="accentPrimary"
         position="absolute"
-        right="0"
         top="0"
-        size="m"
+        right="0"
         iconBefore={icon24.Add}
-        shape="circular"
-        fill="accentPrimary"
-        iconBeforeSize="24"
         iconBeforeFill="accentItemPrimary"
+        iconBeforeSize="24"
+        shape="circular"
+        size="m"
       />
     ),
-    badge: 3,
-    badgeTextSize: 'm',
-    badgeType: 'accent',
+    fill: 'surfacePrimary',
+    shape: 'rounded',
     size: 'normal',
     text: 'text',
     textColor: 'surfaceTextPrimary',
@@ -183,20 +212,6 @@ export const Default = {
     titleTextColor: 'surfaceTextPrimary',
     titleTextSize: 'h4',
     titleTextWeight: 600,
-    borderColor: 'surfaceBorderTertiary',
-    fill: 'surfacePrimary',
-    shape: 'rounded',
-    children: 'Replacment Data',
-    after: (
-      <Button
-        appearance="accent"
-        label="Label"
-        labelTextSize="l"
-        shape="rounded"
-        size="xl"
-        width="fill"
-      />
-    ),
   },
 }
 
@@ -210,18 +225,18 @@ export const Normal = {
 export const Compact = {
   args: {
     ...Default.args,
-    badge: null,
-    size: 'compact',
     after: (
       <Button
+        width="fill"
+        labelTextSize="m"
         appearance="accent"
         label="Label"
-        labelTextSize="m"
         shape="rounded"
         size="m"
-        width="fill"
       />
     ),
+    badge: null,
+    size: 'compact',
   },
 }
 

package/dist/stories/Title.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as TitleStories from './Title.stories.js'
+
+<Meta of={TitleStories} />
+
+# Size
+
+## SizeH1
+
+<Canvas sourceState="shown" of={TitleStories.SizeH1} />
+
+## SizeH2
+
+<Canvas sourceState="shown" of={TitleStories.SizeH2} />
+
+## SizeH3
+
+<Canvas sourceState="shown" of={TitleStories.SizeH3} />
+
+## SizeH4
+
+<Canvas sourceState="shown" of={TitleStories.SizeH4} />
+
+## SizeH5
+
+<Canvas sourceState="shown" of={TitleStories.SizeH5} />
+
+## SizeH6
+
+<Canvas sourceState="shown" of={TitleStories.SizeH6} />

package/dist/stories/Title.stories.js

@@ -0,0 +1,168 @@
+import {
+  fillProps,
+  textAlignProps,
+  textColorActiveProps,
+  textColorHoverProps,
+  textColorProps,
+  textGradientProps,
+  textStyleProps,
+  textWeightProps,
+  textWrapProps,
+  titleSizeProps,
+} from '../../../constants'
+import { Title } from '../Title'
+
+export default {
+  argTypes: {
+    textAlign: {
+      control: 'inline-radio',
+      options: textAlignProps,
+    },
+    advancedProps: { control: 'boolean' },
+    appearance: {
+      control: 'inline-radio',
+      options: [null, 'dev'],
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      control: 'select',
+      options: fillProps,
+    },
+    mode: {
+      control: 'inline-radio',
+      options: [null, 'skeleton'],
+    },
+    size: {
+      control: 'inline-radio',
+      options: titleSizeProps,
+    },
+    tag: {
+      if: { arg: 'advancedProps' },
+    },
+    text: {
+      if: { arg: 'advancedProps' },
+    },
+    textColor: {
+      control: 'select',
+      options: textColorProps,
+    },
+    textColorActive: {
+      control: 'select',
+      options: textColorActiveProps,
+    },
+    textColorHover: {
+      control: 'select',
+      options: textColorHoverProps,
+    },
+    textGradient: {
+      control: 'inline-radio',
+      options: textGradientProps,
+    },
+    textStyle: {
+      control: 'inline-radio',
+      options: textStyleProps,
+    },
+    textWeight: {
+      control: 'inline-radio',
+      options: textWeightProps,
+    },
+    textWrap: {
+      control: 'inline-radio',
+      options: textWrapProps,
+    },
+    type: {
+      control: 'inline-radio',
+      options: ['accent', 'primary', 'secondary', 'tertiary'],
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+  },
+  component: Title,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'textAlignDesktop',
+        'textAlignMobile',
+        'textAlignTablet',
+        'textColorDesktop',
+        'textColorMobile',
+        'textColorTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Title',
+}
+
+const Default = {
+  args: {
+    children: 'title',
+    appearance: null,
+    textColor: 'surfaceTextPrimary',
+  },
+}
+
+export const Dev = {
+  args: {
+    ...Default.args,
+    appearance: 'dev',
+  },
+}
+
+export const SizeH1 = {
+  args: {
+    ...Default.args,
+    size: 'h1',
+  },
+}
+
+export const SizeH2 = {
+  args: {
+    ...Default.args,
+    size: 'h2',
+  },
+}
+
+export const SizeH3 = {
+  args: {
+    ...Default.args,
+    size: 'h3',
+  },
+}
+
+export const SizeH4 = {
+  args: {
+    ...Default.args,
+    size: 'h4',
+  },
+}
+
+export const SizeH5 = {
+  args: {
+    ...Default.args,
+    size: 'h5',
+  },
+}
+
+export const SizeH6 = {
+  args: {
+    ...Default.args,
+    size: 'h6',
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Default.args,
+    children: 'skeleton',
+    mode: 'skeleton',
+  },
+}

package/dist/stories/Tooltip.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as TooltipStories from './Tooltip.stories.js'
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+## surfacePrimary
+
+<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
+
+## surfaceSecondary
+
+<Canvas sourceState="shown" of={TooltipStories.surfaceSecondary} />
+
+## surfaceTertiary
+
+<Canvas sourceState="shown" of={TooltipStories.surfaceTertiary} />

package/dist/stories/Tooltip.stories.js

@@ -0,0 +1,164 @@
+import {
+  alignDirectionProps,
+  alignmentProps,
+  alignProps,
+  borderColorProps,
+  borderTypeProps,
+  borderWidthProps,
+  fillProps,
+  shapeProps,
+  textColorProps,
+  textSizeProps,
+  titleSizeProps,
+  widthProps,
+} from '../../../constants'
+import tooltipAppearance from '../appearance.json'
+import { Tooltip, tooltipConfig } from '../Tooltip'
+
+tooltipConfig.setAppearance(tooltipAppearance)
+
+export default {
+  argTypes: {
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
+    },
+    borderWidth: {
+      control: 'inline-radio',
+      options: borderWidthProps,
+    },
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
+    },
+    elevation: {
+      control: 'inline-radio',
+      options: [null, 1, 2, 4, 6, 8, 12, 16, 24],
+    },
+    isTooltipVisible: { control: 'boolean' },
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    align: {
+      control: 'inline-radio',
+      options: alignProps,
+    },
+    alignDirection: {
+      control: 'inline-radio',
+      options: alignDirectionProps,
+    },
+    alignment: {
+      control: 'inline-radio',
+      options: alignmentProps,
+    },
+    appearance: {
+      control: 'inline-radio',
+      options: ['surfacePrimary', 'surfaceSecondary', 'surfaceTertiary'],
+    },
+    arrowPosition: {
+      control: 'inline-radio',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    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'],
+    },
+    textColor: {
+      control: 'select',
+      options: textColorProps,
+    },
+    textSize: {
+      control: 'inline-radio',
+      options: textSizeProps,
+    },
+    titleSize: {
+      control: 'inline-radio',
+      options: titleSizeProps,
+    },
+    titleTextColor: {
+      control: 'select',
+      options: textColorProps,
+    },
+    type: {
+      control: 'inline-radio',
+      options: [null, 'arrow'],
+    },
+  },
+  component: Tooltip,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'textSizeDesktop',
+        'textSizeMobile',
+        'textSizeTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Tooltip',
+}
+
+const Default = {
+  args: {
+    padding: 10,
+    elevation: 8,
+    initialIsVisible: true,
+    shape: 'rounded',
+    size: 'm',
+    text: 'text',
+    textSize: 'm',
+    title: 'Title',
+    titleSize: 'h4',
+  },
+}
+
+export const surfacePrimary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfacePrimary',
+  },
+}
+
+export const surfaceSecondary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceSecondary',
+  },
+}
+
+export const surfaceTertiary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceTertiary',
+  },
+}