@itcase/ui 1.2.24 → 1.2.25

package/dist/stories/colors.mdx

@@ -0,0 +1,239 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+
+<Meta title="Tokens / Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Accent"
+    subtitle="--color-accent"
+    colors={{
+      Primary: 'hsla(92, 49%, 47%, 1)',
+      PrimaryHover: 'hsla(92, 29%, 62%, 1)',
+      Active: 'hsla(92, 46%, 40%, 1)',
+      Secondary: 'hsla(92, 29%, 62%, 1)',
+      Tertiary: 'hsla(93, 53%, 93%, 1)',
+      Disabled: 'hsla(93, 45%, 80%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Text"
+    subtitle="--color-accent-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+      Disabled: 'hsla(92, 49%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Item"
+    subtitle="--color-accent-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(92, 49%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Border"
+    subtitle="--color-accent-border"
+    colors={{
+      Primary: 'hsla(92, 49%, 47%, 1)',
+      Secondary: 'hsla(92, 29%, 62%, 1)',
+      Quaternary: 'hsla(92, 37%, 35%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary"
+    subtitle="--color-primary"
+    colors={{
+      Primary: 'hsla(36, 95%, 45%, 1)',
+      PrimaryHover: 'hsla(40, 75%, 58%, 1)',
+      Active: 'hsla(36, 95%, 40%, 1)',
+      Disabled: 'hsla(36, 13%, 80%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary Text"
+    subtitle="--color-primary-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Disabled: 'hsla(36, 60%, 65%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary Item"
+    subtitle="--color-primary-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary"
+    subtitle="--color-secondary"
+    colors={{
+      Primary: 'hsla(349, 96%, 44%, 1)',
+      PrimaryHover: 'hsla(349, 100%, 51%, 1)',
+      Active: 'hsla(349, 96%, 34%, 1)',
+      Disabled: 'hsla(349, 59%, 90%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary Text"
+    subtitle="--color-secondary-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(349, 96%, 44%, 1)',
+      Disabled: 'hsla(349, 53%, 68%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary Item"
+    subtitle="--color-secondary-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface"
+    subtitle="--color-surface"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      PrimaryHover: 'hsla(0, 0%, 83%, 1)',
+      Secondary: 'hsla(220, 14%, 96%, 1)',
+      SecondaryHover: 'hsla(0, 0%, 78%, 1)',
+      Accent: 'hsla(92, 54%, 93%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface"
+    subtitle="--color-surface"
+    colors={{
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      TertiaryHover: 'hsla(0, 0%, 73%, 1)',
+      Quaternary: 'hsla(0, 0%, 45%, 1)',
+      Active: 'hsla(0, 0%, 64%, 1)',
+      Disabled: 'hsla(0, 0%, 79%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Text"
+    subtitle="--color-surface-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 9%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Secondary: 'hsla(0, 0%, 45%, 1)',
+      Tertiary: 'hsla(213, 5%, 45%, 1)',
+      Quaternary: 'hsla(0, 0%, 75%, 1)',
+      Disabled: 'hsla(0, 0%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Item"
+    subtitle="--color-surface-item"
+    colors={{
+      Primary: 'hsla(35, 71%, 13%, 1)',
+      Secondary: 'hsla(0, 0%, 93%, 1)',
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Disabled: 'hsla(0, 0%, 61%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Border"
+    subtitle="--color-surface-border"
+    colors={{
+      Primary: 'hsla(36, 71%, 13%, 1)',
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      Quaternary: 'hsla(0, 0%, 45%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Active: 'hsla(40, 75%, 58%, 1)',
+      Disabled: 'hsla(0, 0%, 61%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error"
+    subtitle="--color-error"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Text"
+    subtitle="--color-error-text"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      PrimaryHover: 'hsla(0, 100%, 60%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Item"
+    subtitle="--color-error-item"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Border"
+    subtitle="--color-error-border"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success"
+    subtitle="--color-success"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Text"
+    subtitle="--color-success-text"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Item"
+    subtitle="--color-success-item"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Border"
+    subtitle="--color-success-border"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active"
+    subtitle="--color-active"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active Text"
+    subtitle="--color-active-text"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active Border"
+    subtitle="--color-active-border"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+    }}
+  />
+</ColorPalette>

package/dist/stories/elevation.mdx

@@ -0,0 +1,80 @@
+import { Meta, Typeset } from '@storybook/blocks'
+import { Divider } from '@itcase/ui/components/Divider'
+import { Group } from '@itcase/ui/components/Group'
+import { Text } from '@itcase/ui/components/Text'
+
+<Meta title="Tokens / Elevation" />
+
+# Elevation
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="1" height="64" width="64" />
+    <Text>elevation 1</Text>
+    <Text>box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="2" height="64" width="64" />
+    <Text>elevation 2</Text>
+    <Text>box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="4" height="64" width="64" />
+    <Text>elevation 4</Text>
+    <Text>box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="6" height="64" width="64" />
+    <Text>elevation 6</Text>
+    <Text>box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="8" height="64" width="64" />
+    <Text>elevation 8</Text>
+    <Text>box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="12" height="64" width="64" />
+    <Text>elevation 12</Text>
+    <Text>box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="16" height="64" width="64" />
+    <Text>elevation 16</Text>
+    <Text>box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="24" height="64" width="64" />
+    <Text>elevation 24</Text>
+    <Text>box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.12);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>

package/dist/stories/mixins_animation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Animation" />
+
+# Animation

package/dist/stories/mixins_dark-light.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Dark-Light" />
+
+# Dark/Light
+
+Для работы с темами используются пакеты `postcss-dark-theme-class` и `postcss-mixins`
+
+```css
+:root {
+	@media (prefers-color-scheme: light) {
+		--color-test: hsla(51, 98%, 61%, 1);
+	}
+	@media (prefers-color-scheme: dark) {
+		--color-test: hsla(221, 95%, 40%, 1);
+	}
+}
+```
+
+# Миксины для указания `CSS`
+
+```css
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}
+```
+
+# Пример использования
+
+```css
+.block {
+	width: 100px;
+	height: 100px;
+	@mixin dark {
+	    background: #000;
+	  }
+	@mixin light {
+	    background: #fff;
+	}
+}
+```

package/dist/stories/mixins_elevation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Elevation" />
+
+# Elevation

package/dist/stories/mixins_fill-gradient.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Fill Gradient" />
+
+# Fill Gradient

package/dist/stories/mixins_typography.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Typography" />
+
+# Typography
+
+
+Общие настройки для текста находятся в файле `fonts.css`
+
+Название переменных для шрифтов задаются в формате порядковых числительных за исключение шрифта для писем.
+
+```bash
+:root {
+  --font-primary: 'Inter', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
+  --font-email: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+```
+
+# Миксин `@font`
+
+В большинстве проектов используются отзывчивые шрифты с использованием миксина `@font` и пакетов: `postcss-mixins` и `postcss-responsive-type`
+
+```css
+@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+  font-size: responsive $minFontSize $maxFontSize;
+  font-range: var(--min-max);
+  font-weight: $fontWeight;
+  font-family: $fontFamily;
+  line-height: responsive $minLineHeight $maxLineHeight;
+  line-height-range: var(--min-max);
+  letter-spacing: responsive $minLetterSpacing $maxLetterSpacing;
+  letter-spacing-range: var(--min-max);
+  @media (--desktop-super-huge) {
+    font-size: $maxFontSize;
+    line-height: $maxLineHeight;
+    letter-spacing: $maxLetterSpacing;
+  }
+}
+```
+
+## Параметры миксина `@font`
+
+- `$fontWeight`  — вес шрифта `default: normal`
+- `$minFontSize` — минимальная высота строки
+- `$minLineHeight` — максимальный высота строки
+- `$maxFontSize` — минимальная ширина буквы
+- `$minLetterSpacing` — максимальный размер шрифта `default: normal`
+- `$maxLineHeight` — максимальная высота строки
+- `$maxLetterSpacing` — максимальная ширина буквы `default: normal`
+- `$fontFamily` — шрифт
+
+## Использование миксина `@font`
+
+Создание миксинов текстовых стилей с использование миксина `@font`
+
+```css
+@define-mixin h1 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 36px, 36px, $minLetterSpacing, 80px, 80px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin h5 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 48px, 48px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin text-l $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 32px, 40px, $maxLetterSpacing, var(--font-secondary);
+}
+
+@define-mixin text-xs $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 16px, 20px, $minLetterSpacing, 16px, 20px, $maxLetterSpacing, var(--font-secondary);
+}
+```
+
+## Пример использования миксинов текстовых стилей
+
+```css
+.title-block {
+    color: var(--color-surface-text-primary);
+    @mixin h1 bold;
+}
+```
+
+# Создание миксинов на основе `Text Styles`
+в Figma
+
+Например в Figma доступны следующий текстовые стили:
+
+
+
+## Пример созданных миксинов
+
+```css
+@define-mixin h1 $fontWeight: normal {
+  @mixin font $fontWeight, 24px, 28px, 24px, 28px, var(--font-primary);
+}
+
+@define-mixin h3 $fontWeight: normal {
+  @mixin font $fontWeight, 17px, 22px, 17px, 22px, var(--font-primary);
+}
+
+@define-mixin p $fontWeight: normal {
+  @mixin font $fontWeight, 14px, 18px, 14px, 18px, var(--font-primary);
+}
+
+@define-mixin text-xs $fontWeight: normal {
+  @mixin font $fontWeight, 16px, 20px, 16px, 20px, var(--font-primary);
+}
+
+@define-mixin text-l $fontWeight: normal {
+  @mixin font $fontWeight, 10px, 12px, 10px, 12px, var(--font-primary);
+}
+```
+
+## Использование в `CSS`
+
+```css
+.title-block-h1 {
+    @mixin h1 bold;
+}
+
+.title-block-3 {
+    @mixin h3 600;
+}
+
+p {
+    @mixin p;
+}
+
+.desc {
+    @mixin text-l;
+}
+```

package/dist/stories/mixins_utils.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Utils" />
+
+# Utils

package/dist/stories/typography.mdx

@@ -0,0 +1,82 @@
+import { Meta, Typeset } from '@storybook/blocks'
+
+<Meta title="Tokens / Typography" />
+
+export const typography = {
+  type: {
+    primary: 'PF Din Display Pro Family, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+  size: {
+    h1: 64,
+    h2: 46,
+    h3: 32,
+    h4: 24,
+    h5: 18,
+    h6: 16,
+  },
+}
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+
+# Typography
+
+
+**Font:** PF Din Display Pro Family
+
+**Title:** H1- H6
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.h1),
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.h4),
+    Number(typography.size.h5),
+    Number(typography.size.h6),
+  ]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+export const textography = {
+  type: {
+    primary: 'PF Din Display Pro Family, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    semibold: '600',
+  },
+  size: {
+    xxl: 24,
+    xl: 22,
+    l: 20,
+    m: 16,
+    s: 14,
+    xs: 12,
+    xxs: 10,
+  },
+}
+
+**Text:** xxl- xxs
+
+<Typeset
+  fontSizes={[
+    Number(textography.size.xxl),
+    Number(textography.size.xl),
+    Number(textography.size.l),
+    Number(textography.size.m),
+    Number(textography.size.s),
+    Number(textography.size.xs),
+    Number(textography.size.xxs),
+  ]}
+  fontWeight={textography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={textography.type.primary}
+/>

package/dist/types/components/Notification/Notification.interface.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { tFillProps, tSizeProps, tTextColorProps, tTextSizeProps, titleSizePropsType } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
@@ -36,6 +36,7 @@ export interface INotificationItemProps extends iStyleAttributes {
     titleTextColor?: tTextColorProps;
     titleTextSize?: titleSizePropsType;
     type?: string;
+    style?: CSSProperties;
     onClickClose?: (id?: number | string) => void;
     fill?: tFillProps;
 }

package/dist/types/components/Notification/NotificationItem.d.ts

@@ -1,10 +1,4 @@
 import { INotificationItemConfig, INotificationItemProps } from './Notification.interface';
 declare const notificationItemConfig: INotificationItemConfig;
 declare function NotificationItem(props: INotificationItemProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NotificationItem {
-    var defaultProps: {
-        titleTextSize: string;
-        textSize: string;
-    };
-}
 export { NotificationItem, notificationItemConfig };