@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/FlexWrap.stories.js

@@ -0,0 +1,89 @@
+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,
+  },
+  parameters: {
+    ...parameters,
+  },
+  render: ({ ...args }) => (
+    <Flex
+      width={args.width}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      direction={args.direction}
+      wrap={args.wrap}
+    >
+      <FlexItem width={args.itemWidth} fill="accentPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </FlexItem>
+      <FlexItem width={args.itemWidth} fill="primaryPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          2
+        </Text>
+      </FlexItem>
+      <FlexItem width={args.itemWidth} fill="secondaryPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          3
+        </Text>
+      </FlexItem>
+      <FlexItem width={args.itemWidth} fill="infoPrimary" padding="20">
+        <Text size="xl" textColor="accentTextPrimary">
+          4
+        </Text>
+      </FlexItem>
+    </Flex>
+  ),
+  title: 'Layout / Flex / Variants / Wrap',
+}
+
+const Default = {
+  args: {
+    width: '400',
+    padding: '20',
+    borderColor: 'surfaceBorderSecondary',
+  },
+}
+
+export const NoWrap = {
+  args: {
+    ...Default.args,
+    direction: 'horizontal',
+    itemWidth: '50%',
+    wrap: 'nowrap',
+  },
+}
+
+export const Wrap = {
+  args: {
+    ...Default.args,
+    direction: 'horizontal',
+    itemWidth: '50%',
+    wrap: 'wrap',
+  },
+}
+
+export const WrapReverse = {
+  args: {
+    ...Default.args,
+    direction: 'horizontal',
+    itemWidth: '50%',
+    wrap: 'wrapReverse',
+  },
+}
+
+export const WrapVerticalReverse = {
+  args: {
+    ...Default.args,
+    itemWidth: '100%',
+    wrap: 'wrapReverse',
+  },
+}

package/dist/stories/Grid.stories.js

@@ -0,0 +1,202 @@
+import { Grid, GridItem, GridRow } from '../../Grid'
+import { argTypes, parameters } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Grid,
+  parameters: {
+    ...parameters,
+  },
+  title: 'Layout / Grid / Variants',
+}
+
+const Default = {
+  args: {
+    width: '600',
+    height: '400',
+    padding: '20',
+    gap: 10,
+    borderColor: 'surfaceBorderTertiary',
+  },
+}
+
+export const Regular = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20">
+            2
+          </GridItem>
+          <GridItem fill="secondaryPrimary" padding="20">
+            3
+          </GridItem>
+        </GridRow>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
+          <GridItem fill="infoPrimary" padding="20">
+            4
+          </GridItem>
+
+          <GridItem fill="surfaceQuaternary" padding="20">
+            5
+          </GridItem>
+          <GridItem fill="gradientPrimary" padding="20">
+            6
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}
+
+export const VariantOne = {
+  args: {
+    ...Default.args,
+    children: (
+      <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
+        <GridItem fill="accentPrimary" padding="20">
+          1
+        </GridItem>
+        <GridItem fill="primaryPrimary" padding="20">
+          2
+        </GridItem>
+        <GridItem fill="secondaryPrimary" padding="20">
+          3
+        </GridItem>
+      </GridRow>
+    ),
+  },
+}
+
+export const VariantTwo = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20">
+            2
+          </GridItem>
+        </GridRow>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
+          <GridItem fill="secondaryPrimary" padding="20">
+            3
+          </GridItem>
+          <GridItem fill="infoPrimary" padding="20">
+            4
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}
+
+export const VariantThree = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20" gridRow="span 2">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20">
+            2
+          </GridItem>
+          <GridItem fill="secondaryPrimary" padding="20">
+            3
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}
+
+export const VariantFour = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20" gridColumn="span 2">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20">
+            2
+          </GridItem>
+          <GridItem fill="secondaryPrimary" padding="20">
+            3
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}
+
+export const VariantFive = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20" gridColumn="span 2">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20">
+            2
+          </GridItem>
+          <GridItem fill="secondaryPrimary" padding="20" gridRow="span 2">
+            3
+          </GridItem>
+          <GridItem fill="infoPrimary" padding="20">
+            4
+          </GridItem>
+          <GridItem fill="surfaceQuaternary" padding="20" gridColumn="span 2">
+            5
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}
+
+export const VariantSix = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <GridRow gap="10" gridTemplateColumns="1fr 1fr 1fr">
+          <GridItem fill="accentPrimary" padding="20">
+            1
+          </GridItem>
+          <GridItem fill="primaryPrimary" padding="20" gridColumn="span 2">
+            2
+          </GridItem>
+
+          <GridItem fill="secondaryPrimary" padding="20" gridColumn="span 2">
+            3
+          </GridItem>
+          <GridItem fill="infoPrimary" padding="20" gridRow="span 2">
+            4
+          </GridItem>
+
+          <GridItem fill="surfaceQuaternary" padding="20">
+            5
+          </GridItem>
+          <GridItem fill="gradientPrimary" padding="20">
+            6
+          </GridItem>
+        </GridRow>
+      </>
+    ),
+  },
+}

package/dist/stories/Group.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as GroupStories from './Group.stories.js'
+
+<Meta title="Atoms / Tab / TabGroub" />
+
+# TabGroub
+
+<Canvas sourceState="shown" of={GroupStories.Default} />

package/dist/stories/{Tab.group.stories.js → Group.stories.js}

@@ -1,4 +1,3 @@
-import { Tab, tabConfig, TabGroup } from '@itcase/ui/components/Tab'
 import {
   directionProps,
   fillProps,
@@ -6,27 +5,32 @@ import {
   stackingProps,
   widthProps,
   wrapProps,
-} from '@itcase/ui/constants'
-
-import tabAppearance from 'src/components/Tab/appearance.json'
+} from '../../../constants'
+import { badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import tabAppearance from '../appearance.json'
+import { Tab, tabConfig } from '../Tab'
+import { TabGroup } from '../TabGroup'
 
 tabConfig.setAppearance(tabAppearance)
 
+badgeConfig.setAppearance(badgeAppearance)
+
 const tabs = {
   1: {
+    isActive: true,
     badgeValue: 3,
     label: 'Все',
-    isActive: true,
   },
   2: {
+    isActive: false,
     badgeValue: null,
     label: 'Непрочитанные',
-    isActive: false,
   },
   3: {
+    isActive: false,
     badgeValue: null,
     label: 'Прочитанные',
-    isActive: false,
   },
 }
 
@@ -37,7 +41,50 @@ function setTabIndex(index) {
 }
 
 export default {
-  title: 'Atoms / Tab / TabGroup',
+  argTypes: {
+    id: {
+      if: { arg: 'advancedProps' },
+    },
+    width: {
+      control: 'inline-radio',
+      options: widthProps,
+    },
+    direction: {
+      control: 'inline-radio',
+      options: directionProps,
+    },
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    columns: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      control: 'select',
+      options: fillProps,
+    },
+    horizontalScroll: {
+      control: 'boolean',
+    },
+    set: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
+      control: 'select',
+      if: { arg: 'advancedProps' },
+      options: shapeProps,
+    },
+    stacking: {
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+      options: stackingProps,
+    },
+    wrap: {
+      control: 'inline-radio',
+      options: wrapProps,
+    },
+  },
   component: TabGroup,
   parameters: {
     controls: {
@@ -75,75 +122,32 @@ export default {
       ],
     },
   },
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    id: {
-      if: { arg: 'advancedProps' },
-    },
-    set: {
-      if: { arg: 'advancedProps' },
-    },
-    columns: {
-      if: { arg: 'advancedProps' },
-    },
-    direction: {
-      options: directionProps,
-      control: 'inline-radio',
-    },
-    fill: {
-      options: fillProps,
-      control: 'select',
-    },
-    horizontalScroll: {
-      control: 'boolean',
-    },
-    shape: {
-      if: { arg: 'advancedProps' },
-      options: shapeProps,
-      control: 'select',
-    },
-    stacking: {
-      if: { arg: 'advancedProps' },
-      options: stackingProps,
-      control: 'inline-radio',
-    },
-    width: {
-      options: widthProps,
-      control: 'inline-radio',
-    },
-    wrap: {
-      options: wrapProps,
-      control: 'inline-radio',
-    },
-  },
+  title: 'Atoms / Tab / TabGroup',
 }
 
 export const Default = {
   args: {
-    direction: 'horizontal',
     children: (
       <>
         {Object.entries(tabs).map(([index, tabItem]) => (
           <Tab
+            key={index}
+            labelTextSize="s"
             appearance="any"
             badgeAppearance="accent"
             badgeSize="xs"
             badgeTextSize="xxs"
             badgeValue={Boolean(tabItem.badgeValue) && tabItem.badgeValue}
             dividerFill={tabItem.isActive ? 'surfaceItemAccent' : 'surfaceTertiary'}
-            isActive={index === currentTabIndex}
-            key={index}
             label={tabItem.label}
             labelColor={tabItem.isActive ? 'surfaceTextAccent' : 'surfaceTextPrimary'}
-            labelTextSize="s"
             size="l"
+            isActive={index === currentTabIndex}
             onClick={() => setTabIndex(index)}
           />
         ))}
       </>
     ),
+    direction: 'horizontal',
   },
 }

package/dist/stories/Grow.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as GrowStories from './FlexGrow.stories.js'
+
+<Meta title="Layout / Flex / Grow" />
+
+# Grow
+
+Свойство `grow` определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу. Отрицательное значение не валидно.
+
+```js
+<FlexItem grow="...">...</FlexItem>
+```
+
+## Значения
+
+- `0` — Значение по умолчанию. Элемент займет нужное пространство, не больше своей ширины
+- `1` — Элемент займет все свободное оставшееся пространство
+
+# Примеры использования
+
+### Значение 0
+
+Значение по умолчанию. Элемент займет нужное пространство, не больше своей ширины
+
+```js
+<FlexItem grow="0">...</FlexItem>
+```
+
+<Canvas of={GrowStories.Regular} />
+
+### Значение 1
+
+Элемент займет все свободное оставшееся пространство
+
+```js
+<FlexItem grow="1">...</FlexItem>
+```
+
+<Canvas of={GrowStories.One} />

package/dist/stories/Icon.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as IconStories from './Icon.stories.js'
+
+<Meta of={IconStories} />
+
+# Icon
+
+## WithBadge
+
+<Canvas sourceState="shown" of={IconStories.WithBadge} />
+
+## WithTooltip
+
+<Canvas sourceState="shown" of={IconStories.WithTooltip} />