@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Label/appearance/labelSize.ts

@@ -1,13 +1,62 @@
 import type { LabelAppearanceSize } from '../Label.interface'
 
 const labelAppearanceSize = {
-  sizeXXL: { size: 'xxl', textSize: 'xxl' },
-  sizeXL: { size: 'xl', textSize: 'l' },
-  sizeL: { size: 'l', textSize: 'l' },
-  sizeM: { size: 'm', textSize: 'm' },
-  sizeS: { size: 's', textSize: 's' },
-  sizeXS: { size: 'xs', textSize: 'xs' },
-  sizeXXS: { size: 'xxs', textSize: 'xs' },
+  sizeXXL: {
+    size: 'xxl',
+    textSize: 'xxl',
+    iconAfterFillSize: '24',
+    iconAfterSize: '24',
+    iconBeforeFillSize: '24',
+    iconBeforeSize: '24',
+  },
+  sizeXL: {
+    size: 'xl',
+    textSize: 'l',
+    iconAfterFillSize: '24',
+    iconAfterSize: '24',
+    iconBeforeFillSize: '24',
+    iconBeforeSize: '24',
+  },
+  sizeL: {
+    size: 'l',
+    textSize: 'l',
+    iconAfterFillSize: '24',
+    iconAfterSize: '24',
+    iconBeforeFillSize: '24',
+    iconBeforeSize: '24',
+  },
+  sizeM: {
+    size: 'm',
+    textSize: 'm',
+    iconAfterFillSize: '24',
+    iconAfterSize: '24',
+    iconBeforeFillSize: '24',
+    iconBeforeSize: '24',
+  },
+  sizeS: {
+    size: 's',
+    textSize: 's',
+    iconAfterFillSize: '20',
+    iconAfterSize: '20',
+    iconBeforeFillSize: '20',
+    iconBeforeSize: '20',
+  },
+  sizeXS: {
+    size: 'xs',
+    textSize: 'xs',
+    iconAfterFillSize: '16',
+    iconAfterSize: '16',
+    iconBeforeFillSize: '16',
+    iconBeforeSize: '16',
+  },
+  sizeXXS: {
+    size: 'xxs',
+    textSize: 'xs',
+    iconAfterFillSize: '14',
+    iconAfterSize: '14',
+    iconBeforeFillSize: '14',
+    iconBeforeSize: '14',
+  },
 } satisfies LabelAppearanceSize
 
 export { labelAppearanceSize }

package/src/components/Label/appearance/labelSpecial.ts

@@ -0,0 +1,20 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceSpecial = {
+  specialMutedPrimary: {
+    fill: 'specialTertiary',
+    borderColor: 'specialBorderSecondary',
+    textColor: 'specialTextQuaternary',
+    iconAfterFillIcon: 'specialItemQuaternary',
+    iconBeforeFillIcon: 'specialItemQuaternary',
+  },
+  specialPrimary: {
+    fill: 'specialPrimary',
+    borderColor: 'specialBorderSecondary',
+    textColor: 'specialTextPrimary',
+    iconAfterFillIcon: 'specialItemPrimary',
+    iconBeforeFillIcon: 'specialItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceSpecial }

package/src/components/Label/appearance/labelStyle.ts

@@ -0,0 +1,17 @@
+import type { LabelAppearanceStyle } from '../Label.interface'
+
+const labelAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies LabelAppearanceStyle
+
+export { labelAppearanceStyle }

package/src/components/Label/appearance/labelSuccess.ts

@@ -0,0 +1,20 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceSuccess = {
+  successMutedPrimary: {
+    fill: 'successTertiary',
+    borderColor: 'successBorderQuaternary',
+    textColor: 'successTextQuaternary',
+    iconAfterFillIcon: 'successItemQuaternary',
+    iconBeforeFillIcon: 'successItemQuaternary',
+  },
+  successPrimary: {
+    fill: 'successPrimary',
+    borderColor: 'successBorderSecondary',
+    textColor: 'successTextPrimary',
+    iconAfterFillIcon: 'successItemPrimary',
+    iconBeforeFillIcon: 'successItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceSuccess }

package/src/components/Label/appearance/labelSurface.ts

@@ -1,13 +1,23 @@
 import type { LabelAppearance } from '../Label.interface'
 
 const labelAppearanceSurface = {
+  surfaceMutedPrimary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderQuaternary',
+    textColor: 'surfaceTextQuaternary',
+    iconAfterFillIcon: 'surfaceItemQuaternary',
+    iconBeforeFillIcon: 'surfaceItemQuaternary',
+  },
   surfacePrimary: {
     fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderQuaternary',
     textColor: 'surfaceTextPrimary',
+    iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeFillIcon: 'surfaceItemPrimary',
   },
   surfaceQuaternary: {
     fill: 'surfaceQuaternary',
-    textColor: 'accentTextPrimary',
+    textColor: 'surfaceTextPrimary',
   },
   surfaceSecondary: {
     fill: 'surfaceSecondary',

package/src/components/Label/appearance/labelWarning.ts

@@ -0,0 +1,20 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceWarning = {
+  warningMutedPrimary: {
+    fill: 'warningTertiary',
+    borderColor: 'warningBorderSecondary',
+    textColor: 'warningTextSecondary',
+    iconAfterFillIcon: 'warningItemSecondary',
+    iconBeforeFillIcon: 'warningItemSecondary',
+  },
+  warningPrimary: {
+    fill: 'warningPrimary',
+    borderColor: 'warningBorderSecondary',
+    textColor: 'warningTextPrimary',
+    iconAfterFillIcon: 'warningItemPrimary',
+    iconBeforeFillIcon: 'warningItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceWarning }

package/src/components/Label/stories/LabelDemo.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { labelAppearanceShape } from '../appearance/labelShape'
+import { labelAppearanceSize } from '../appearance/labelSize'
+import { labelAppearanceStyle } from '../appearance/labelStyle'
+import { Label } from '../Label'
+import { labelAppearance } from '../Label.appearance'
+import type { LabelProps, LabelStoryArgs } from '../Label.interface'
+import { labelStoryParameters } from './LabelStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(labelAppearance, {
+  appearanceShape: labelAppearanceShape,
+  appearanceSize: labelAppearanceSize,
+  appearanceStyle: labelAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Label / Demo',
+  component: Label,
+  args: {
+    text: 'Label',
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'surfacePrimary',
+  },
+  parameters: {
+    ...labelStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'text',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceSize: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceSize'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<LabelStoryArgs>
+export default meta
+
+export const Demo: StoryObj<LabelStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Label
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as LabelProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Label/stories/LabelGallery.stories.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Label } from '../Label'
+import type { LabelGalleryStory } from '../Label.interface'
+import {
+  galleryIconsBySizeKey,
+  labelGallery,
+  labelStoryParameters,
+} from './LabelStories.config'
+
+const meta = {
+  title: 'Atoms / Label',
+  args: {
+    appearance: 'surface',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    text: 'Label',
+    iconBefore: false,
+    iconAfter: false,
+    isDisabled: false,
+    isSkeleton: false,
+  },
+  parameters: labelStoryParameters,
+  argTypes: {
+    appearance: labelGallery.argTypes.appearance,
+    tier: labelGallery.argTypes.tier,
+    style: labelGallery.argTypes.style,
+    shape: labelGallery.argTypes.shape,
+  },
+} satisfies Meta<LabelGalleryStory>
+
+export default meta
+
+type Story = StoryObj<LabelGalleryStory>
+
+const renderLabelGallery = (
+  args: LabelGalleryStory,
+  options: {
+    iconAfter?: boolean
+    iconBefore?: boolean
+  } = {},
+) =>
+  labelGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => {
+    const icon =
+      galleryIconsBySizeKey[sizeKey as keyof typeof galleryIconsBySizeKey]
+    const withIconBefore = options.iconBefore ?? Boolean(storyArgs.iconBefore)
+    const withIconAfter = options.iconAfter ?? Boolean(storyArgs.iconAfter)
+
+    return (
+      <Label
+        appearance={appearance}
+        text={storyArgs.text}
+        iconAfter={withIconAfter ? icon : undefined}
+        iconBefore={withIconBefore ? icon : undefined}
+        isDisabled={storyArgs.isDisabled}
+        isSkeleton={storyArgs.isSkeleton}
+      />
+    )
+  })
+
+export const LabelType: Story = {
+  name: 'Label',
+  args: {
+    iconBefore: false,
+    iconAfter: false,
+  },
+  render: (args) =>
+    renderLabelGallery(args, {
+      iconBefore: false,
+      iconAfter: false,
+    }),
+}
+
+export const IconBefore: Story = {
+  name: 'Icon Before',
+  args: {
+    iconBefore: true,
+    iconAfter: false,
+  },
+  render: (args) =>
+    renderLabelGallery(args, {
+      iconBefore: true,
+      iconAfter: false,
+    }),
+}
+
+export const IconAfter: Story = {
+  name: 'Icon After',
+  args: {
+    iconBefore: false,
+    iconAfter: true,
+  },
+  render: (args) =>
+    renderLabelGallery(args, {
+      iconBefore: false,
+      iconAfter: true,
+    }),
+}
+
+export const Icons: Story = {
+  name: 'Icons',
+  args: {
+    iconBefore: true,
+    iconAfter: true,
+  },
+  render: (args) =>
+    renderLabelGallery(args, {
+      iconBefore: true,
+      iconAfter: true,
+    }),
+}

package/src/components/Label/stories/LabelIconAfter.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
+
+import { icons24 } from '@itcase/icons-default'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+import {
+  LABEL_APPEARANCE_GROUPS,
+  labelGallery,
+  labelStoryParameters,
+} from './LabelStories.config'
+
+const meta = {
+  title: 'Atoms / Label / Icon After',
+  component: Label,
+  args: {
+    dataTestId: 'labelIconAfterTestId',
+    text: 'Label',
+    iconAfter: icons24.Placeholder.Default,
+  },
+  parameters: labelStoryParameters,
+  tags: ['test'],
+} satisfies Meta<typeof Label>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const labelIconAfterPlay: NonNullable<Story['play']> = async ({
+  args,
+  canvas,
+  step,
+}) => {
+  await step('Label renders with after icon', async () => {
+    const label = canvas.getByTestId(args.dataTestId!)
+    await storybookTest.expect(label).toBeInTheDocument()
+    await storybookTest.expect(label).toHaveTextContent(String(args.text))
+    await storybookTest
+      .expect(
+        (label as unknown as Element).querySelector('.label__icon_before'),
+      )
+      .not.toBeInTheDocument()
+    await storybookTest
+      .expect((label as unknown as Element).querySelector('.label__icon_after'))
+      .toBeInTheDocument()
+  })
+}
+
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, dataTestId, args }) => (
+    <Label
+      {...args}
+      appearance={appearance as LabelProps['appearance']}
+      dataTestId={dataTestId}
+    />
+  ),
+  play: labelIconAfterPlay,
+  appearanceGroups: LABEL_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXXL',
+  tiersByAppearance: labelGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled
+export const Gradient = stories.Gradient

package/src/components/Label/stories/LabelIconBefore.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
+
+import { icons24 } from '@itcase/icons-default'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+import {
+  LABEL_APPEARANCE_GROUPS,
+  labelGallery,
+  labelStoryParameters,
+} from './LabelStories.config'
+
+const meta = {
+  title: 'Atoms / Label / Icon Before',
+  component: Label,
+  args: {
+    dataTestId: 'labelIconBeforeTestId',
+    text: 'Label',
+    iconBefore: icons24.Placeholder.Default,
+  },
+  parameters: labelStoryParameters,
+  tags: ['test'],
+} satisfies Meta<typeof Label>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const labelIconBeforePlay: NonNullable<Story['play']> = async ({
+  args,
+  canvas,
+  step,
+}) => {
+  await step('Label renders with before icon', async () => {
+    const label = canvas.getByTestId(args.dataTestId!)
+    await storybookTest.expect(label).toBeInTheDocument()
+    await storybookTest.expect(label).toHaveTextContent(String(args.text))
+    await storybookTest
+      .expect(
+        (label as unknown as Element).querySelector('.label__icon_before'),
+      )
+      .toBeInTheDocument()
+    await storybookTest
+      .expect((label as unknown as Element).querySelector('.label__icon_after'))
+      .not.toBeInTheDocument()
+  })
+}
+
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, dataTestId, args }) => (
+    <Label
+      {...args}
+      appearance={appearance as LabelProps['appearance']}
+      dataTestId={dataTestId}
+    />
+  ),
+  play: labelIconBeforePlay,
+  appearanceGroups: LABEL_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXXL',
+  tiersByAppearance: labelGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled
+export const Gradient = stories.Gradient

package/src/components/Label/stories/LabelIcons.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
+
+import { icons24 } from '@itcase/icons-default'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+import {
+  LABEL_APPEARANCE_GROUPS,
+  labelGallery,
+  labelStoryParameters,
+} from './LabelStories.config'
+
+const meta = {
+  title: 'Atoms / Label / Icons',
+  component: Label,
+  args: {
+    dataTestId: 'labelIconsTestId',
+    text: 'Label',
+    iconAfter: icons24.Placeholder.Default,
+    iconBefore: icons24.Placeholder.Default,
+  },
+  parameters: labelStoryParameters,
+  tags: ['test'],
+} satisfies Meta<typeof Label>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const labelIconsPlay: NonNullable<Story['play']> = async ({
+  args,
+  canvas,
+  step,
+}) => {
+  await step(
+    'Label renders with label text and before/after icons',
+    async () => {
+      const label = canvas.getByTestId(args.dataTestId!)
+      await storybookTest.expect(label).toBeInTheDocument()
+      await storybookTest.expect(label).toHaveTextContent(String(args.text))
+      await storybookTest
+        .expect(
+          (label as unknown as Element).querySelector('.label__icon_before'),
+        )
+        .toBeInTheDocument()
+      await storybookTest
+        .expect(
+          (label as unknown as Element).querySelector('.label__icon_after'),
+        )
+        .toBeInTheDocument()
+    },
+  )
+}
+
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, dataTestId, args }) => (
+    <Label
+      {...args}
+      appearance={appearance as LabelProps['appearance']}
+      dataTestId={dataTestId}
+    />
+  ),
+  play: labelIconsPlay,
+  appearanceGroups: LABEL_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXXL',
+  tiersByAppearance: labelGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled
+export const Gradient = stories.Gradient