@itcase/ui 1.0.99 → 1.0.101

package/dist/stories/Tab.appearance.stories.js

@@ -0,0 +1,260 @@
+import { Tab, tabConfig } from '@itcase/ui/components/Tab'
+import {
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorActiveProps,
+  textColorHoverProps,
+  textColorProps,
+  textGradientProps,
+  textSizeProps,
+  textStyleProps,
+  textWeightProps,
+  textWrapProps,
+  underlineProps,
+} from '@itcase/ui/constants'
+
+import tabAppearance from 'src/components/Tab/appearance.json'
+
+tabConfig.setAppearance(tabAppearance)
+
+export default {
+  title: 'Atoms / Tab / Appearance',
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
+    },
+    rel: {
+      if: { arg: 'advancedProps' },
+    },
+    target: {
+      if: { arg: 'advancedProps' },
+    },
+    isActive: {
+      control: 'boolean',
+    },
+    appearance: {
+      options: [
+        null,
+        'any',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+      ],
+      control: 'inline-radio',
+    },
+    badge: {
+      control: 'boolean',
+    },
+    badgeSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    badgeFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    badgeTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    badgeTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    labelColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelColorActive: {
+      if: { arg: 'advancedProps' },
+      options: textColorActiveProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextColorHover: {
+      if: { arg: 'advancedProps' },
+      options: textColorHoverProps,
+      control: 'inline-radio',
+    },
+    labelTextGradient: {
+      if: { arg: 'advancedProps' },
+      options: textGradientProps,
+      control: 'inline-radio',
+    },
+    labelTextStyle: {
+      options: textStyleProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+    labelTextWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    labelTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    linkFill: {
+      if: { arg: 'advancedProps' },
+      options: fillProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+      control: 'inline-radio',
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    underline: {
+      if: { arg: 'advancedProps' },
+      options: underlineProps,
+      control: 'inline-radio',
+    },
+    badgeAppearance: {
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+        'disabled',
+      ],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    appearance: 'any',
+    label: 'Label',
+    size: 'normal',
+    labelTextSize: 'm',
+    badge: true,
+    badgeSize: 'xs',
+    badgeAppearance: 'accent',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+  },
+}
+
+export const SurfacePrimary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfacePrimary',
+  },
+}
+
+export const SurfaceSecondary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceSecondary',
+  },
+}
+
+export const SurfaceTertiary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceTertiary',
+  },
+}
+
+export const SurfaceQuaternary = {
+  args: {
+    ...Default.args,
+    appearance: 'surfaceQuaternary',
+  },
+}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    appearance: 'accent',
+    badgeAppearance: 'surfacePrimary',
+  },
+}
+
+export const Primary = {
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+  },
+}
+
+export const Secondary = {
+  args: {
+    ...Default.args,
+    appearance: 'secondary',
+  },
+}

package/dist/stories/Tab.group.stories.js

@@ -0,0 +1,149 @@
+import { Tab, tabConfig, TabGroup } from '@itcase/ui/components/Tab'
+import {
+  directionProps,
+  fillProps,
+  shapeProps,
+  stackingProps,
+  widthProps,
+  wrapProps,
+} from '@itcase/ui/constants'
+
+import tabAppearance from 'src/components/Tab/appearance.json'
+
+tabConfig.setAppearance(tabAppearance)
+
+const tabs = {
+  1: {
+    badgeValue: 3,
+    label: 'Все',
+    isActive: true,
+  },
+  2: {
+    badgeValue: null,
+    label: 'Непрочитанные',
+    isActive: false,
+  },
+  3: {
+    badgeValue: null,
+    label: 'Прочитанные',
+    isActive: false,
+  },
+}
+
+let currentTabIndex = ''
+
+function setTabIndex(index) {
+  currentTabIndex = index
+}
+
+export default {
+  title: 'Atoms / Tab / TabGroup',
+  component: TabGroup,
+  parameters: {
+    controls: {
+      exclude: [
+        'direction',
+        'directionDesktop',
+        'directionMobile',
+        'directionTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'contentAlign',
+        'contentAlignDesktop',
+        'contentAlignMobile',
+        'contentAlignTablet',
+        'stackingDesktop',
+        'stackingMobile',
+        'stackingTablet',
+        'wrapDesktop',
+        'wrapMobile',
+        'wrapTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'spaceBetweenItems',
+        'spaceBetweenItemsDesktop',
+        'spaceBetweenItemsMobile',
+        'spaceBetweenItemsTablet',
+        'widthDesktop',
+        'widthMobile',
+        'widthTablet',
+        'columnsDesktop',
+        'columnsMobile',
+        'columnsTablet',
+      ],
+    },
+  },
+  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',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    direction: 'horizontal',
+    children: (
+      <>
+        {Object.entries(tabs).map(([index, tabItem]) => (
+          <Tab
+            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"
+            onClick={() => setTabIndex(index)}
+          />
+        ))}
+      </>
+    ),
+  },
+}

package/dist/stories/Tab.size.stories.js

@@ -0,0 +1,259 @@
+import { Tab, tabConfig } from '@itcase/ui/components/Tab'
+import {
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorActiveProps,
+  textColorHoverProps,
+  textColorProps,
+  textGradientProps,
+  textSizeProps,
+  textStyleProps,
+  textWeightProps,
+  textWrapProps,
+  underlineProps,
+} from '@itcase/ui/constants'
+
+import tabAppearance from 'src/components/Tab/appearance.json'
+
+tabConfig.setAppearance(tabAppearance)
+
+export default {
+  title: 'Atoms / Tab / Size',
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    onMouseEnter: {
+      if: { arg: 'advancedProps' },
+    },
+    after: {
+      if: { arg: 'advancedProps' },
+    },
+    before: {
+      if: { arg: 'advancedProps' },
+    },
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    href: {
+      if: { arg: 'advancedProps' },
+    },
+    link: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
+    },
+    rel: {
+      if: { arg: 'advancedProps' },
+    },
+    target: {
+      if: { arg: 'advancedProps' },
+    },
+    isActive: {
+      control: 'boolean',
+    },
+    appearance: {
+      options: [
+        null,
+        'any',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+      ],
+      control: 'inline-radio',
+    },
+    badge: {
+      control: 'boolean',
+    },
+    badgeSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    badgeFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    badgeTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    badgeTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    labelColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelColorActive: {
+      if: { arg: 'advancedProps' },
+      options: textColorActiveProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextColorHover: {
+      if: { arg: 'advancedProps' },
+      options: textColorHoverProps,
+      control: 'inline-radio',
+    },
+    labelTextGradient: {
+      if: { arg: 'advancedProps' },
+      options: textGradientProps,
+      control: 'inline-radio',
+    },
+    labelTextStyle: {
+      options: textStyleProps,
+      control: 'inline-radio',
+      if: { arg: 'advancedProps' },
+    },
+    labelTextWeight: {
+      options: textWeightProps,
+      control: 'inline-radio',
+    },
+    labelTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    linkFill: {
+      if: { arg: 'advancedProps' },
+      options: fillProps,
+      control: 'select',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    size: {
+      options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+      control: 'inline-radio',
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    underline: {
+      if: { arg: 'advancedProps' },
+      options: underlineProps,
+      control: 'inline-radio',
+    },
+    badgeAppearance: {
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accent',
+        'primary',
+        'secondary',
+        'disabled',
+      ],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    appearance: 'primary',
+    label: 'Label',
+    size: 'm',
+    labelTextSize: 'm',
+    badge: true,
+    badgeSize: 'xs',
+    badgeAppearance: 'accent',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+  },
+}
+
+export const SizeXXS = {
+  args: {
+    ...Default.args,
+    size: 'xxs',
+  },
+}
+
+export const SizeXS = {
+  args: {
+    ...Default.args,
+    size: 'xs',
+  },
+}
+
+export const SizeS = {
+  args: {
+    ...Default.args,
+    size: 's',
+  },
+}
+
+export const SizeM = {
+  args: {
+    ...Default.args,
+    size: 'm',
+  },
+}
+
+export const SizeL = {
+  args: {
+    ...Default.args,
+    size: 'l',
+  },
+}
+
+export const SizeXL = {
+  args: {
+    ...Default.args,
+    size: 'xl',
+  },
+}
+
+export const SizeXXL = {
+  args: {
+    ...Default.args,
+    size: 'xxl',
+  },
+}