@itcase/ui 1.2.18 → 1.2.20

package/dist/stories/Accordion.stories.js

@@ -1,10 +1,33 @@
 import React from 'react'
 
-import { Accordion, AccordionItem } from '@itcase/ui/components/Accordion'
-import { borderColorProps, directionProps, fillProps, shapeProps } from '@itcase/ui/constants'
+import { borderColorProps, directionProps, fillProps, shapeProps } from '../../../constants'
+import { Icon } from '../../Icon'
+import { Accordion } from '../Accordion'
+import { AccordionItem } from '../AccordionItem'
 
 export default {
-  title: 'Atoms / Accordion / Default',
+  argTypes: {
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
+    },
+    direction: {
+      control: 'inline-radio',
+      options: directionProps,
+    },
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      control: 'select',
+      options: fillProps,
+    },
+    shape: {
+      control: 'inline-radio',
+      options: shapeProps,
+    },
+  },
   component: Accordion,
   parameters: {
     controls: {
@@ -21,68 +44,62 @@ export default {
       ],
     },
   },
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
-    },
-    fill: {
-      options: fillProps,
-      control: 'select',
-    },
-    direction: {
-      options: directionProps,
-      control: 'inline-radio',
-    },
-    shape: {
-      options: shapeProps,
-      control: 'inline-radio',
-    },
-  },
+  title: 'Molecules / Accordion / Default',
 }
 
 export const Default = {
   args: {
-    borderColor: 'accentBorderPrimary',
-    fill: 'surfaceSecondary',
-    shape: 'rounded',
     children: (
       <React.Fragment>
         <AccordionItem
+          fillHover="accentTertiary"
           content="content 1"
           contentFill="primaryPrimary"
           contentTextColor="surfaceTextPrimary"
           contentTextSize="m"
-          fillHover="accentTertiary"
-          isExpanded={true}
           size="xs"
           title="Title 1"
           titleFill="secondaryPrimary"
           titleFillHover="secondaryPrimaryHover"
           titleTextColor="surfaceTextPrimary"
           titleTextSize="m"
+          icon=<Icon
+            iconFill="surfaceItemSecondary"
+            imageSrc="assets/16/ChevronDown.svg"
+            size="16"
+          />
+          isExpanded={true}
         />
         <AccordionItem
-          content="content 2"
           fillHover="accentTertiary"
+          content="content 2"
           size="xs"
           title="Title 2"
           titleTextColor="surfaceTextPrimary"
           titleTextSize="m"
+          icon=<Icon
+            iconFill="surfaceItemSecondary"
+            imageSrc="assets/16/ChevronDown.svg"
+            size="16"
+          />
         />
         <AccordionItem
-          content="content 3"
           fillHover="accentTertiary"
+          content="content 3"
           size="xs"
           title="Title 3"
           titleTextColor="surfaceTextPrimary"
           titleTextSize="m"
+          icon=<Icon
+            iconFill="surfaceItemSecondary"
+            imageSrc="assets/16/ChevronDown.svg"
+            size="16"
+          />
         />
       </React.Fragment>
     ),
+    borderColor: 'accentBorderPrimary',
+    fill: 'surfaceSecondary',
+    shape: 'rounded',
   },
 }

package/dist/stories/AccordionItem.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AccordionItemStories from './AccordionItem.stories.js'
+
+<Meta of={AccordionItemStories} />
+
+# AccordionItem
+
+## Closed
+
+<Canvas of={AccordionItemStories.Closed} />
+
+## Opened
+
+<Canvas of={AccordionItemStories.Opened} />

package/dist/stories/AccordionItem.stories.js

@@ -1,135 +1,135 @@
-import { AccordionItem } from '@itcase/ui/components/Accordion'
-
 import {
   borderColorProps,
-  fillProps,
   fillHoverProps,
+  fillProps,
   shapeProps,
-  sizeProps,
-  textSizeProps,
   textColorProps,
+  textSizeProps,
   textWeightProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Icon } from '../../Icon'
+import { AccordionItem } from '../AccordionItem'
 
 export default {
-  title: 'Atoms / Accordion / Item',
-  component: AccordionItem,
-  parameters: {
-    controls: {
-      exclude: [
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'iconFillDesktop',
-        'iconFillMobile',
-        'iconFillTablet',
-      ],
-    },
-  },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    afterContent: {
-      if: { arg: 'advancedProps' },
-    },
-    beforeContent: {
+    id: {
       if: { arg: 'advancedProps' },
     },
     children: {
       if: { arg: 'advancedProps' },
     },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    id: {
-      if: { arg: 'advancedProps' },
+    borderColor: {
+      control: 'select',
+      options: borderColorProps,
     },
     isExpanded: {
       control: 'boolean',
     },
-    onClick: {
+    advancedProps: { control: 'boolean' },
+    afterContent: {
       if: { arg: 'advancedProps' },
     },
-    iconFill: {
-      options: fillProps,
-      control: 'select',
+    beforeContent: {
+      if: { arg: 'advancedProps' },
     },
-    borderColor: {
-      options: borderColorProps,
-      control: 'select',
+    className: {
+      if: { arg: 'advancedProps' },
     },
     contentBorderColor: {
+      control: 'select',
       options: borderColorProps,
+    },
+    contentFill: {
       control: 'select',
+      options: fillProps,
     },
-    titleBorderColor: {
-      options: borderColorProps,
+    contentTextColor: {
       control: 'select',
+      options: textColorProps,
+    },
+    contentTextSize: {
+      control: 'inline-radio',
+      options: textSizeProps,
     },
 
-    fill: {
-      options: fillProps,
+    contentTextWeight: {
       control: 'select',
+      options: textWeightProps,
     },
-    fillHover: {
-      options: fillHoverProps,
+    fill: {
       control: 'select',
-    },
-    contentFill: {
       options: fillProps,
-      control: 'select',
     },
-    titleFill: {
-      options: fillProps,
+    fillHover: {
       control: 'select',
-    },
-    titleFillHover: {
       options: fillHoverProps,
+    },
+    iconFill: {
       control: 'select',
+      options: fillProps,
     },
     shape: {
+      control: 'inline-radio',
       options: shapeProps,
+    },
+    size: {
       control: 'inline-radio',
+      options: ['xs', 'l'],
     },
-    contentTextColor: {
-      options: textColorProps,
+    titleBorderColor: {
       control: 'select',
+      options: borderColorProps,
     },
-    contentTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    contentTextWeight: {
-      options: textWeightProps,
+    titleFill: {
       control: 'select',
+      options: fillProps,
     },
-    size: {
-      options: ['xs', 'l'],
-      control: 'inline-radio',
+    titleFillHover: {
+      control: 'select',
+      options: fillHoverProps,
     },
     titleTextColor: {
-      options: textColorProps,
       control: 'select',
+      options: textColorProps,
     },
     titleTextSize: {
-      options: textSizeProps,
       control: 'inline-radio',
+      options: textSizeProps,
     },
     titleTextWeight: {
-      options: textWeightProps,
       control: 'select',
+      options: textWeightProps,
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
     },
   },
+  component: AccordionItem,
+  parameters: {
+    controls: {
+      exclude: [
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'iconFillDesktop',
+        'iconFillMobile',
+        'iconFillTablet',
+      ],
+    },
+  },
+  title: 'Molecules / Accordion / Item',
 }
 
-export const Default = {
+const Default = {
   args: {
     content: 'content 1',
-    title: 'Title 1',
     contentTextColor: 'surfaceTextPrimary',
     contentTextSize: 'm',
+    icon: <Icon iconFill="surfaceItemSecondary" imageSrc="assets/16/ChevronDown.svg" size="16" />,
+    title: 'Title 1',
     titleTextColor: 'surfaceTextPrimary',
     titleTextSize: 'm',
   },

package/dist/stories/AlignContent.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AlignContentStories from './FlexAlignContent.stories.js'
+
+<Meta title="Layout / Flex / AlignContent" />
+
+# AlignContent
+
+Свойство `alignContent` распределяет пространство между и вокруг элементов вдоль поперечной оси контейнера.
+
+```js
+<Flex alignContent="...">...</Flex>
+```
+
+## Значения
+
+- `flexStart` — Элементы будут расположены вплотную друг к другу, в начале поперечной оси
+- `flexEnd` — Элементы будут расположены вплотную друг к другу, начиная с конца поперечной оси
+- `center` — Элементы будут расположены по центру контейнера
+- `spaceBetween` — Элементы будут равномерно распределяться в контейнере и расстояние между ними одинаково
+- `spaceAround` — Элементы будут расположены таким образом, чтобы пространство между двумя соседними элементами было одинаковым. Пустое пространство перед первым элементом и после последнего равно половине пространства между двумя соседними элементами
+- `stretch` — Элементы равномерно растягиваются, заполняя свободное пространство
+
+# Примеры использования
+
+### flexStart
+
+Элементы будут расположены вплотную друг к другу, в начале поперечной оси
+
+```js
+<Flex alignContent="flexStart">...</Flex>
+```
+
+<Canvas of={AlignContentStories.FlexStart} />
+
+### flexEnd
+
+Элементы будут расположены вплотную друг к другу, начиная с конца поперечной оси
+
+```js
+<Flex alignContent="flexEnd">...</Flex>
+```
+
+<Canvas of={AlignContentStories.FlexEnd} />
+
+### center
+
+Элементы будут расположены по центру контейнера
+
+```js
+<Flex alignContent="center">...</Flex>
+```
+
+<Canvas of={AlignContentStories.Center} />
+
+### spaceBetween
+
+Элементы будут равномерно распределяться в контейнере и расстояние между ними одинаково
+
+```js
+<Flex alignContent="spaceBetween">...</Flex>
+```
+
+<Canvas of={AlignContentStories.SpaceBetween} />
+
+### spaceAround
+
+Элементы будут расположены таким образом, чтобы пространство между двумя соседними элементами было одинаковым.
+Пустое пространство перед первым элементом и после последнего равно половине пространства между двумя соседними элементами
+
+```js
+<Flex alignContent="spaceAround">...</Flex>
+```
+
+<Canvas of={AlignContentStories.SpaceAround} />
+
+### stretch
+
+Элементы равномерно растягиваются, заполняя свободное пространство
+
+```js
+<Flex alignContent="stretch">...</Flex>
+```
+
+<Canvas of={AlignContentStories.Stretch} />

package/dist/stories/AlignItems.mdx

@@ -0,0 +1,74 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AlignItemsStories from './AlignItems.stories.js'
+
+<Meta title="Layout / Group / AlignItems" />
+
+# AlignItems
+
+Свойство `alignItems` выравнивает элементы внутри контейнера в перпендикулярном направлении.
+То есть, если `direction="row"` выравнивает по горизонтали, если `direction="column"` выравнивает по вертикали.
+
+```js
+<Group alignItems="...">...</Group>
+```
+
+## Значения
+
+- `flexStart` — Элементы будут располагаться в начале поперечной оси контейнера
+- `flexEnd` — Элементы будут располагаться в конце поперечной оси контейнера
+- `center` — Элементы будут располагаться по центру поперечной оси контейнера
+- `baseline` — Элементы будут располагаться по базовой линии поперечной оси контейнера
+- `stretch` — Элементы растянутся таким образом, чтобы занять всё доступное пространство контейнера
+
+# Примеры использования
+
+### flexStart
+
+Элементы будут располагаться в начале поперечной оси контейнера
+
+```js
+<Group alignItems="flexStart">...</Group>
+```
+
+<Canvas of={AlignItemsStories.FlexStart} />
+
+### flexEnd
+
+Элементы будут располагаться в конце поперечной оси контейнера
+
+```js
+<Group alignItems="flexEnd">...</Group>
+```
+
+<Canvas of={AlignItemsStories.FlexEnd} />
+
+### center
+
+Элементы будут располагаться по центру поперечной оси контейнера
+
+```js
+<Group alignItems="center">...</Group>
+```
+
+<Canvas of={AlignItemsStories.Center} />
+
+### baseline
+
+Элементы будут располагаться по базовой линии поперечной оси контейнера
+
+```js
+<Group alignItems="baseline">...</Group>
+```
+
+<Canvas of={AlignItemsStories.Baseline} />
+
+### stretch
+
+Элементы растянутся таким образом, чтобы занять всё доступное пространство контейнера
+
+```js
+<Group alignItems="stretch">...</Group>
+```
+
+<Canvas of={AlignItemsStories.Stretch} />

package/dist/stories/AlignItems.stories.js

@@ -0,0 +1,88 @@
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      alignItems={args.alignItems}
+      direction={args.direction}
+    >
+      <Group height="60" minWidth="25%" fill="accentPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group height="60" minWidth="25%" fill="primaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group height="60" minWidth="25%" fill="secondaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group height="60" minWidth="25%" fill="infoPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / AlignItems',
+}
+
+const Default = {
+  args: {
+    width: '500',
+    padding: '20',
+    borderColor: 'surfaceBorderPrimary',
+    direction: 'vertical',
+    fill: 'surfacePrimary',
+  },
+}
+
+export const Stretch = {
+  args: {
+    ...Default.args,
+    alignItems: 'stretch',
+  },
+}
+
+export const FlexStart = {
+  args: {
+    ...Default.args,
+    alignItems: 'flex-start',
+  },
+}
+
+export const FlexEnd = {
+  args: {
+    ...Default.args,
+    alignItems: 'flex-end',
+  },
+}
+
+export const Center = {
+  args: {
+    ...Default.args,
+    alignItems: 'center',
+  },
+}
+
+export const Baseline = {
+  args: {
+    ...Default.args,
+    alignItems: 'baseline',
+  },
+}

package/dist/stories/AlignSelf.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AlignSelfStories from './AlignSelf.stories.js'
+
+<Meta title="Layout / Group / AlignSelf" />
+
+# AlignSelf
+
+Свойство `alignSelf` выравнивает элементы по текущей линии, переопределяя значение свойства `alignItems`.
+Если у какого-либо элемента margin в поперечной оси выставлен в auto, то `alignSelf` игнорируется.
+
+```js
+<Group alignSelf="...">...</Group>
+```
+
+## Значения
+
+- `stretch` — Элемент растянется таким образом, чтобы занять всё доступное пространство контейнера
+- `flexStart` — Элемент будет располагаться в начале поперечной оси контейнера
+- `flexEnd` — Элемент будет располагаться в конце поперечной оси контейнера
+- `center` — Элемент будет располагаться по центральной линии на поперечной оси
+- `baseline` — Элемент выравнивается по базовой линии контейнера
+- `auto` — Значение по умолчанию, элемент будет находиться в начале поперечной оси контейнера
+
+# Примеры использования
+
+### stretch
+
+Элемент растянется таким образом, чтобы занять всё доступное пространство контейнера
+
+```js
+<Group alignSelf="stretch">...</Group>
+```
+
+<Canvas of={AlignSelfStories.Stretch} />
+
+### flexStart
+
+Элемент будет располагаться в начале поперечной оси контейнера
+
+```js
+<Group alignSelf="flexStart">...</Group>
+```
+
+<Canvas of={AlignSelfStories.FlexStart} />
+
+### flexEnd
+
+Элемент будет располагаться в конце поперечной оси контейнера
+
+```js
+<Group alignSelf="flexEnd">...</Group>
+```
+
+<Canvas of={AlignSelfStories.FlexEnd} />
+
+### center
+
+Элемент будет располагаться по центральной линии на поперечной оси
+
+```js
+<Group alignSelf="center">...</Group>
+```
+
+<Canvas of={AlignSelfStories.Center} />
+
+### baseline
+
+Элемент выравнивается по базовой линии контейнера
+
+```js
+<Group alignSelf="baseline">...</Group>
+```
+
+<Canvas of={AlignSelfStories.Baseline} />
+
+### auto
+
+Значение по умолчанию, элемент будет находиться в начале поперечной оси контейнера
+
+```js
+<Group alignSelf="auto">...</Group>
+```
+
+<Canvas of={AlignSelfStories.Auto} />