@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/Switch.stories.js

@@ -1,39 +1,39 @@
-import { Switch } from '@itcase/ui/components/Switch'
+import { Switch } from '../Switch'
 
 export default {
-  title: 'Atoms / Switch ',
-  component: Switch,
   argTypes: {
+    id: {
+      if: { arg: 'advancedProps' },
+    },
     advancedProps: { control: 'boolean' },
+    checked: {
+      control: 'boolean',
+    },
     className: {
       if: { arg: 'advancedProps' },
     },
-    id: {
-      if: { arg: 'advancedProps' },
+    disabled: {
+      control: 'boolean',
     },
     set: {
       if: { arg: 'advancedProps' },
     },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
     size: {
-      options: ['normal', 'compact'],
       control: 'inline-radio',
+      options: ['normal', 'compact'],
     },
-    checked: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
+    onChange: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Switch,
+  title: 'Atoms / Switch ',
 }
 
 export const Default = {
   args: {
-    disabled: false,
     checked: false,
+    disabled: false,
     size: 'normal',
   },
 }
@@ -41,44 +41,44 @@ export const Default = {
 export const Active = {
   args: {
     ...Default.args,
-    disabled: false,
     checked: false,
+    disabled: false,
   },
 }
 export const ActiveChecked = {
   args: {
     ...Default.args,
-    disabled: false,
     checked: true,
+    disabled: false,
   },
 }
 export const Disabled = {
   args: {
     ...Default.args,
-    disabled: true,
     checked: false,
+    disabled: true,
   },
 }
 export const DisabledChecked = {
   args: {
     ...Default.args,
-    disabled: true,
     checked: true,
+    disabled: true,
   },
 }
 
 export const Normal = {
   args: {
-    size: 'normal',
-    disabled: false,
     checked: true,
+    disabled: false,
+    size: 'normal',
   },
 }
 
 export const Compact = {
   args: {
-    size: 'compact',
-    disabled: false,
     checked: true,
+    disabled: false,
+    size: 'compact',
   },
 }

package/dist/stories/Text.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as SizeStories from './Text.stories.js'
+
+<Meta of={SizeStories} />
+
+# Size
+
+## XXL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXXL} />
+
+## XL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXL} />
+
+## L
+
+<Canvas sourceState="shown" of={SizeStories.SizeL} />
+
+## M
+
+<Canvas sourceState="shown" of={SizeStories.SizeM} />
+
+## S
+
+<Canvas sourceState="shown" of={SizeStories.SizeS} />
+
+## XS
+
+<Canvas sourceState="shown" of={SizeStories.SizeXS} />
+
+## XXS
+
+<Canvas sourceState="shown" of={SizeStories.SizeXXS} />

package/dist/stories/Text.stories.js

@@ -0,0 +1,172 @@
+import {
+  textAlignProps,
+  textColorActiveProps,
+  textColorHoverProps,
+  textColorProps,
+  textGradientProps,
+  textSizeProps,
+  textStyleProps,
+  textWeightProps,
+  textWrapProps,
+} from '../../../constants'
+import { Text } from '../Text'
+
+export default {
+  argTypes: {
+    textAlign: {
+      control: 'inline-radio',
+      options: textAlignProps,
+    },
+    cursor: {
+      if: { arg: 'advancedProps' },
+    },
+    advancedProps: { control: 'boolean' },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    appearance: {
+      control: 'inline-radio',
+      options: [null, 'dev'],
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    htmlFor: {
+      if: { arg: 'advancedProps' },
+    },
+    size: {
+      control: 'inline-radio',
+      options: textSizeProps,
+    },
+    tag: {
+      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', 'surface', 'success', 'error'],
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+  },
+  component: Text,
+  parameters: {
+    controls: {
+      exclude: [
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'textColorDesktop',
+        'textColorMobile',
+        'textColorTablet',
+        'textWeightDesktop',
+        'textWeightMobile',
+        'textWeightTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Text',
+}
+
+const Default = {
+  args: {
+    appearance: null,
+    textColor: 'surfaceTextPrimary',
+  },
+}
+
+export const SizeXXS = {
+  args: {
+    ...Default.args,
+    children: 'text 10px',
+    size: 'xxs',
+  },
+}
+
+export const SizeXS = {
+  args: {
+    ...Default.args,
+    children: 'text 12px',
+    size: 'xs',
+  },
+}
+
+export const SizeS = {
+  args: {
+    ...Default.args,
+    children: 'text 14px',
+    size: 's',
+  },
+}
+
+export const SizeM = {
+  args: {
+    ...Default.args,
+    children: 'text 16px',
+    size: 'm',
+  },
+}
+
+export const SizeL = {
+  args: {
+    ...Default.args,
+    children: 'text 18px',
+    size: 'l',
+  },
+}
+
+export const SizeXL = {
+  args: {
+    ...Default.args,
+    children: 'text 20px',
+    size: 'xl',
+  },
+}
+
+export const SizeXXL = {
+  args: {
+    ...Default.args,
+    children: 'text 24px',
+    size: 'xxl',
+  },
+}
+
+export const SkeletonMode = {
+  args: {
+    ...Default.args,
+    children: 'hidden text',
+    mode: 'skeleton',
+    size: 'm',
+  },
+}

package/dist/stories/Textarea.mdx

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

package/dist/stories/Textarea.stories.js

@@ -1,38 +1,35 @@
-import { Textarea, textareaConfig } from '@itcase/ui/components/Textarea'
-import textareaState from 'src/components/Textarea/state.json'
-import { borderColorProps, textColorProps, sizeProps, textSizeProps } from '@itcase/ui/constants'
+import { borderColorProps, sizeProps, textColorProps, textSizeProps } from '../../../constants'
+import textareaState from '../state.json'
+import { Textarea, textareaConfig } from '../Textarea'
 
 textareaConfig.setState(textareaState)
 
 export default {
-  title: 'Atoms / Textarea',
-  component: Textarea,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
     id: {
       if: { arg: 'advancedProps' },
     },
-    onBlur: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
     borderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
+    },
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     disabled: {
       control: 'boolean',
     },
     shape: {
+      control: 'inline-radio',
       options: [null, 'rounded', 'underline'],
+    },
+    size: {
       control: 'inline-radio',
+      options: sizeProps,
     },
     state: {
+      control: 'inline-radio',
       options: [
         null,
         'normal',
@@ -46,32 +43,35 @@ export default {
         'success',
         'require',
       ],
-      control: 'inline-radio',
-    },
-    size: {
-      options: sizeProps,
-      control: 'inline-radio',
     },
     textColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     textSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
+    },
+    onBlur: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Textarea,
+  title: 'Atoms / Textarea',
 }
 
 export const Default = {
   args: {
-    size: 'm',
-    textColor: 'surfaceTextPrimary',
-    textSize: 'm',
     borderColor: 'surfaceBorderTertiary',
+    placeholder: 'Placeholder',
     shape: 'rounded',
+    size: 'm',
     state: null,
-    placeholder: 'Placeholder',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'm',
     value: 'Filled',
   },
 }

package/dist/stories/Tile.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as TileStories from './Tile.stories.js'
+
+<Meta of={TileStories} />
+
+# Tile
+
+## Normal
+
+<Canvas of={TileStories.Normal} />
+
+## Compact
+
+<Canvas of={TileStories.Compact} />
+
+## WithBadge
+
+<Canvas of={TileStories.WithBadge} />