@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/{Search-input.stories.js → SearchInput.stories.js}

@@ -1,4 +1,5 @@
-import { SearchInput } from '@itcase/ui/components/Search'
+import { SearchInput, searchInputConfig } from '@itcase/ui/components/Search'
+
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -6,15 +7,20 @@ import {
   iconSizeProps,
   textColorProps,
   textSizeProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import searchInputAppearance from '../appearance.json'
+
+searchInputConfig.setAppearance(searchInputAppearance)
 
 export default {
-  title: 'Components / Search / SearchInput',
-  component: SearchInput,
-  parameters: {
-    controls: { exclude: ['fillDesktop', 'fillMobile', 'fillTablet'] },
-  },
   argTypes: {
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
+    },
     advancedProps: { control: 'boolean' },
     after: {
       if: { arg: 'advancedProps' },
@@ -22,123 +28,133 @@ export default {
     before: {
       if: { arg: 'advancedProps' },
     },
-    children: {
-      if: { arg: 'advancedProps' },
+    borderHover: {
+      control: 'select',
+      options: borderColorHoverProps,
     },
     className: {
       control: 'text',
       if: { arg: 'advancedProps' },
     },
-    onChange: {
-      if: { arg: 'advancedProps' },
-    },
-    onClickClean: {
-      if: { arg: 'advancedProps' },
-    },
-    onFocus: {
-      if: { arg: 'advancedProps' },
-    },
-    onKeyDown: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
-    },
-    borderHover: {
-      options: borderColorHoverProps,
-      control: 'select',
-    },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     iconAfter: {
       if: { arg: 'advancedProps' },
     },
-    iconAfterSrc: {
-      options: [null, 'assets/16/Dots.svg'],
-      control: 'inline-radio',
-    },
     iconAfterFill: {
-      options: fillProps,
       control: 'select',
       if: { arg: 'iconAfterSrc', neq: null },
+      options: fillProps,
     },
     iconAfterSize: {
+      control: 'select',
+      if: { arg: 'iconAfterSrc', neq: null },
       options: iconSizeProps,
+    },
+    iconAfterSrc: {
+      control: 'inline-radio',
+      options: [null, 'assets/16/Mores.svg'],
+    },
+    iconAfterStroke: {
       control: 'select',
       if: { arg: 'iconAfterSrc', neq: null },
+      options: fillProps,
     },
     iconBefore: {
       if: { arg: 'advancedProps' },
     },
-    iconBeforeSrc: {
-      options: [null, 'assets/16/Search.svg'],
-      control: 'inline-radio',
-    },
     iconBeforeFill: {
-      options: fillProps,
       control: 'select',
       if: { arg: 'iconBeforeSrc', neq: null },
+      options: fillProps,
     },
     iconBeforeSize: {
+      control: 'select',
+      if: { arg: 'iconBeforeSrc', neq: null },
       options: iconSizeProps,
+    },
+    iconBeforeSrc: {
+      control: 'inline-radio',
+      options: [null, 'assets/16/Search.svg'],
+    },
+    iconBeforeStroke: {
       control: 'select',
       if: { arg: 'iconBeforeSrc', neq: null },
+      options: fillProps,
     },
     iconClear: {
       if: { arg: 'advancedProps' },
     },
-    iconClearSrc: {
-      options: [null, 'assets/16/Clear.svg'],
-      control: 'inline-radio',
-    },
     iconClearFill: {
-      options: fillProps,
       control: 'select',
       if: { arg: 'iconClearSrc', neq: null },
+      options: fillProps,
     },
     iconClearSize: {
-      options: iconSizeProps,
       control: 'select',
       if: { arg: 'iconClearSrc', neq: null },
+      options: iconSizeProps,
+    },
+    iconClearSrc: {
+      control: 'inline-radio',
+      options: [null, 'assets/16/Clear.svg'],
     },
     inputTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     placeholderTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     placeholderTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     shape: {
-      options: [null, 'geometric', 'rounded'],
       control: 'inline-radio',
+      options: [null, 'geometric', 'rounded'],
     },
     size: {
-      options: [null, 'normal', 'compact'],
       control: 'inline-radio',
+      options: [null, 'normal', 'compact'],
     },
     type: {
-      options: ['text', 'number', 'password'],
       control: 'inline-radio',
+      options: ['text', 'number', 'password'],
+    },
+    onChange: {
+      if: { arg: 'advancedProps' },
+    },
+    onClickClean: {
+      if: { arg: 'advancedProps' },
+    },
+    onFocus: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: SearchInput,
+  parameters: {
+    controls: { exclude: ['fillDesktop', 'fillMobile', 'fillTablet'] },
+  },
+  title: 'Molecules / Search',
 }
 
 export const Default = {
   args: {
-    fill: 'surfacePrimary',
-    shape: 'rounded',
     borderColor: 'surfaceBorderTertiary',
     borderHover: 'surfaceBorderQuaternary',
+    fill: 'surfacePrimary',
+    iconClearFill: 'surfaceItemPrimary',
+    iconClearSize: '16',
     placeholder: 'Поиск',
     placeholderTextColor: 'surfaceTextQuaternary',
+    shape: 'rounded',
     size: 'normal',
     value: 'value',
   },
@@ -147,9 +163,7 @@ export const Default = {
 export const ClearIcon = {
   args: {
     ...Default.args,
-    iconClearSrc: 'assets/16/Clear.svg',
-    iconClearSize: '16',
-    iconClearFill: 'surfaceItemPrimary',
+    iconClearSrc: 'assets/16/Remove.svg',
   },
 }
 
@@ -157,16 +171,19 @@ export const BeforeIcon = {
   args: {
     ...Default.args,
     iconBeforeSrc: 'assets/16/Search.svg',
-    iconBeforeFill: 'surfaceItemPrimary',
-    iconBeforeSize: '16',
   },
 }
 
 export const AfterIcon = {
   args: {
     ...Default.args,
-    iconAfterSrc: 'assets/16/Dots.svg',
-    iconAfterFill: 'surfaceItemPrimary',
-    iconAfterSize: '16',
+    iconAfterSrc: 'assets/16/More.svg',
+  },
+}
+
+export const Dev = {
+  args: {
+    ...Default.args,
+    appearance: 'dev',
   },
 }

package/dist/stories/Segmented.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as SegmentedStories from './Segmented.stories.js'
+
+<Meta of={SegmentedStories} />
+
+# Segmented
+
+## Default
+
+<Canvas sourceState="shown" of={SegmentedStories.Default} />

package/dist/stories/Segmented.stories.js

@@ -1,110 +1,109 @@
-import { Segmented } from '@itcase/ui/components/Segmented'
-
 import {
   borderColorProps,
   borderTypeProps,
   borderWidthProps,
-  fillProps,
   fillHoverProps,
+  fillProps,
   shapeProps,
   textColorProps,
   textSizeProps,
   textWrapProps,
   widthProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Segmented } from '../Segmented'
 
 export default {
-  title: 'Atoms / Segmented',
-  component: Segmented,
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    name: {
-      if: { arg: 'advancedProps' },
-    },
-    type: {
-      if: { arg: 'advancedProps' },
-    },
-    setActiveSegment: {
-      if: { arg: 'advancedProps' },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
     },
-    indicatorFill: {
-      options: fillProps,
-      control: 'select',
+    borderWidth: {
+      control: 'inline-radio',
+      options: borderWidthProps,
     },
     borderColor: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
-    borderWidth: {
-      options: borderWidthProps,
-      control: 'inline-radio',
-    },
+    advancedProps: { control: 'boolean' },
     borderType: {
-      options: borderTypeProps,
       control: 'inline-radio',
+      options: borderTypeProps,
     },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
+    className: {
+      if: { arg: 'advancedProps' },
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     fillHover: {
-      options: fillHoverProps,
       control: 'select',
+      options: fillHoverProps,
     },
-    size: {
-      options: ['normal', 'compact'],
-      control: 'inline-radio',
-    },
-    labelTextColor: {
-      options: textColorProps,
+    indicatorFill: {
       control: 'select',
+      options: fillProps,
     },
     labelTextActiveColor: {
+      control: 'select',
       options: textColorProps,
+    },
+    labelTextColor: {
       control: 'select',
+      options: textColorProps,
     },
     labelTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     labelTextWrap: {
+      control: 'inline-radio',
       options: textWrapProps,
+    },
+    name: {
+      if: { arg: 'advancedProps' },
+    },
+    setActiveSegment: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
       control: 'inline-radio',
+      options: shapeProps,
     },
-    width: {
-      options: widthProps,
+    size: {
       control: 'inline-radio',
+      options: ['normal', 'compact'],
+    },
+    type: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: Segmented,
+  title: 'Atoms / Segmented',
 }
 
 export const Default = {
   args: {
     width: 'fill',
-    size: 'normal',
+    activeSegment: {
+      value: 1,
+    },
     fill: 'surfaceSecondary',
     fillHover: 'surfacePrimaryHover',
-    shape: 'rounded',
     indicatorFill: 'accentPrimary',
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     labelTextSize: 'm',
     labelTextWrap: 'wrap',
     segments: [
-      { value: 1, label: 'Label 1 Lorem ipsum dolor sit amet' },
-      { value: 2, label: 'Label 2' },
-      { value: 3, label: 'Label 3' },
-      { value: 4, label: 'Label 4' },
+      { label: 'Label 1 Lorem ipsum dolor sit amet', value: 1 },
+      { label: 'Label 2', value: 2 },
+      { label: 'Label 3', value: 3 },
+      { label: 'Label 4', value: 4 },
     ],
-    activeSegment: {
-      value: 1,
-    },
+    shape: 'rounded',
+    size: 'normal',
   },
 }