@itcase/ui 1.8.19 → 1.8.21

package/dist/css/components/Icon/Icon.css

@@ -117,15 +117,139 @@
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
     &_$(palette) {
+      &:hover {
+        & svg {
+          stroke: none;
+          fill: var(--color-$(type)-fill-$(color));
+        }
+      }
       &-item {
+        &:hover {
+          & svg {
+            stroke: none;
+            fill: var(--color-$(type)-item-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.icon_fill {
+  &_active {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
+          &-$(color) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-fill-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &-item {
+          & svg {
+            stroke: none;
+            fill: var(--color-palette-$(palette));
+          }
+        }
         & svg {
           stroke: none;
-          fill: var(--color-$(type)-item-$(color));
+          fill: var(--color-palette-$(palette));
         }
       }
-      & svg {
-        stroke: none;
-        fill: var(--color-$(type)-fill-$(color));
+    }
+  }
+}
+.icon_fill {
+  &_active {
+    &_hover {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover, inverse {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover, inverse {
+              &-$(color) {
+                &:hover {
+                  & svg {
+                    stroke: none;
+                    fill: var(--color-$(type)-item-$(color));
+                  }
+                }
+              }
+            }
+          }
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              &:hover {
+                & svg {
+                  stroke: none;
+                  fill: var(--color-$(type)-fill-$(color));
+                }
+              }
+            }
+          }
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+        clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+        rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+        canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+        spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+        surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+        denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+        lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+        storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+        alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+        gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+        alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            & svg {
+              stroke: none;
+              fill: var(--color-palette-$(palette));
+            }
+          }
+          &-item {
+            &:hover {
+              & svg {
+                stroke: none;
+                fill: var(--color-palette-$(palette));
+              }
+            }
+          }
+        }
       }
     }
   }

package/dist/css/components/Text/Text.css

@@ -50,14 +50,5 @@
     }
   }
 }
-.text {
-  &&_type {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        color: var(--color-$(type)-text-$(type));
-      }
-    }
-  }
-}
 :root {
 }

package/dist/css/styles/border-color/border-color_hover.css

@@ -5,17 +5,15 @@
       @each $color in primary, secondary, tertiary, quaternary, accent,
         disabled, hover, inverse {
         &_$(type) {
-          &_$(type) {
-            &-border {
-              &-$(color) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                border-color: var(--color-$(type)-border-$(color));
+              }
+              &-hover {
                 &:hover {
                   border-color: var(--color-$(type)-border-$(color));
                 }
-                &-hover {
-                  &:hover {
-                    border-color: var(--color-$(type)-border-$(color));
-                  }
-                }
               }
             }
           }

package/dist/css/styles/fill/fill_active.css

@@ -1,7 +1,8 @@
 .fill {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      error, success, danger, warning, info, danger, gradient, disabled, hover,
+      inverse {
       @each $color in primary, secondary, tertiary, quaternary, accent,
         disabled, hover, inverse {
         &_$(type) {
@@ -13,16 +14,25 @@
           &-$(color) {
             background: var(--color-$(type)-fill-$(color));
           }
-
-          /*
-          &-primary {
-            &-active {
-              background: var(--color-$(type)-fill--primary-active);
-            }
-          }
-          */
         }
       }
     }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        background: var(--color-palette-$(palette));
+      }
+    }
   }
 }

package/dist/css/styles/fill/fill_active_hover.css

@@ -74,6 +74,25 @@
           /* } */
         }
       }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
     }
   }
 }

package/dist/css/styles/fill/fill_hover.css

@@ -60,5 +60,24 @@
         /* } */
       }
     }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
   }
 }

package/dist/css/styles/text-color/text-color_active.css

@@ -15,6 +15,23 @@
           }
         }
       }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          color: var(--color-palette-$(palette));
+        }
+      }
     }
   }
 }

package/dist/css/styles/text-color/text-color_active_hover.css

@@ -0,0 +1,40 @@
+.text {
+  &&-color {
+    &_active {
+      &_hover {
+        @each $type in accent, primary, secondary, tertiary, quaternary,
+          surface, error, success, warning, info, danger, gradient, disabled,
+          hover, inverse {
+          @each $color in primary, secondary, tertiary, quaternary, accent,
+            disabled, hover, inverse {
+            &_$(type) {
+              &-text {
+                &-$(color) {
+                  color: var(--color-$(type)-text-$(color));
+                }
+              }
+            }
+          }
+        }
+        @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+          pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+          orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+          flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+          mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+          dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+          light-blue, cerulian, surf-blue, pacific-green, blue-cobalt,
+          dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+          midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
+          indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+          pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+          dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
+          walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
+          athens-gray, sonic-silver {
+          &_$(palette) {
+            color: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/stories/index.stories.js

@@ -0,0 +1,49 @@
+import AvatarStack from '.'
+
+const meta = {
+  title: 'Atoms / Avatar Stack',
+  component: AvatarStack,
+  args: {
+    avatarSize: 48,
+    users: [
+      {
+        id: 0,
+        src: 'https://as2.ftcdn.net/v2/jpg/07/52/13/37/1000_F_752133729_dz4GYDkaKZ6vRCNadT5Pz2EBe43ShRos.jpg',
+        firstName: 'firstName',
+        secondName: 'secondName',
+      },
+      {
+        id: 1,
+        src: 'https://as2.ftcdn.net/v2/jpg/07/52/13/37/1000_F_752133729_dz4GYDkaKZ6vRCNadT5Pz2EBe43ShRos.jpg',
+        firstName: 'firstName',
+        secondName: 'secondName',
+      },
+      {
+        id: 2,
+        src: 'https://as2.ftcdn.net/v2/jpg/07/52/13/37/1000_F_752133729_dz4GYDkaKZ6vRCNadT5Pz2EBe43ShRos.jpg',
+        firstName: 'firstName',
+        secondName: 'secondName',
+      },
+      {
+        id: 3,
+        src: 'https://as2.ftcdn.net/v2/jpg/07/52/13/37/1000_F_752133729_dz4GYDkaKZ6vRCNadT5Pz2EBe43ShRos.jpg',
+        firstName: 'firstName',
+        secondName: 'secondName',
+      },
+      {
+        id: 4,
+        src: 'https://as2.ftcdn.net/v2/jpg/07/52/13/37/1000_F_752133729_dz4GYDkaKZ6vRCNadT5Pz2EBe43ShRos.jpg',
+        firstName: 'firstName',
+        secondName: 'secondName',
+      },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  render: (args) => {
+    return <AvatarStack {...args} />
+  },
+}

package/dist/stories/useDevicePropsGenerator.mdx

@@ -3,7 +3,62 @@ import { Meta } from '@storybook/blocks'
 <Meta title="Hooks / useDevicePropsGenerator" />
 
 # `useDevicePropsGenerator`
-Хук позволяет автоматически получать значения пропсов или appearance, соответствующие viewport пользователя, а также преобразовывать их в CSS‑классы.
+Хук позволяет автоматически получать значения `props` или `appearance`, которые соответствуют `viewport` пользователя, а также преобразовывать их в `CSS‑классы`.
+
+Важно учитывать приоритет при котором будут применяться стили:
+
+1. Сначала используется значение из props, соответствующее текущему устройству
+- Передали
+
+```jsx
+<Component textAlignMobile="center" />
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'center' }} />
+```
+
+2. Если такого нет — используется значение из props без учёта устройства
+- Передали
+
+```jsx
+<Component textAlign="right" />
+```
+
+ - Получили
+
+```jsx
+<Component style={{ textAlign: 'right' }} />
+```
+
+3. Если и его нет — берётся значение из appearance-конфига для текущего устройства
+
+- Передали
+
+```js
+{
+  textAlignMobile: 'left'
+}
+```
+
+- Получили
+
+```jsx
+<Component style={{ textAlign: 'left' }} />
+```
+
+4. И в последнюю очередь — значение из appearance-конфига без учёта устройства
+
+- Передали
+```jsx
+textAlign: 'justify'
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'justify' }} />
+```
 
 ## Использование
 
@@ -19,35 +74,25 @@ const componentConfig: ComponentConfig = {
 ```
 
 2. Для того чтобы передавать несколько appearance в одной строке, например:
-
 ```jsx
 <Component appearance='errorPrimary sizeM' />
 ```
 
 где `errorPrimary` это
-
 ```js
 {
   fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
 }
 ```
 
 а `sizeM` это
-
-```js
+```ts
 {
   size: 'm',
-  textSize: 'm',
 }
 ```
 
-нужен appearanceConfig
+Нужен appearanceConfig
 ```js
   const appearanceConfig = appearance?.split(' ').reduce(
     (resultConfig, appearanceKey) => ({
@@ -57,19 +102,12 @@ const componentConfig: ComponentConfig = {
     {},
   )
 ```
-которому передается созданный ранее componentConfig и его результатом будет единный объект со свойствами из разных appearance
+Которому передается созданный ранее componentConfig и его результатом будет единый объект со свойствами из разных appearance
 
 ```js
 {
   fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
   size: "m",
-  textSize: "m"
 }
 ```
 
@@ -106,7 +144,7 @@ const componentConfig: ComponentConfig = {
 </table>
 
 
-Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто fill, то получим `errorTertiary`,
+Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто `fill`, то получим `errorTertiary`,
 если укажем `fillClass` то получим `error-tertiary`, поэтому везде в приведенном ниже примере указан суффикс `Class`.
 
 ```js
@@ -114,100 +152,36 @@ const componentConfig: ComponentConfig = {
 
   const {
     fillClass,
-    borderColorClass,
-    borderHoverClass,
-    borderWidthClass,
-    textColorClass,
-    textSizeClass,
-    textWeightClass,
-    caretClass,
-    placeholderTextColorClass,
-    shapeClass,
     sizeClass,
-    widthClass,
   } = propsGenerator
 ```
 
 4. Применяем стили к компоненту. Важно учитывать, если в названии класса указывается сначала название компонента, это означает что он ссылается на стили,
-которые определены внутри директории этого компонента
+которые определены внутри директории этого компонента `src/components/Component/css`
 
-```js
-`border-width_${borderWidthClass}
+```jsx
+'textarea__input'
 ```
 
-если в названии класса нет название комопнента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
-
-```js
+Если в названии класса нет название компонента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
+```jsx
 `fill_${fillClass}`
 ```
 
-``jsx
+```jsx
 <textarea
-  id={id}
   className={clsx(
     'textarea__input',
-    (textSizeClass || textColorClass || textWeightClass) && 'text',
-    caretClass && `caret-color_${caretClass}`,
     fillClass && `fill_${fillClass}`,
-    borderColorClass && `border-color_${borderColorClass}`,
-    borderWidthClass && `border-width_${borderWidthClass}`,
-    borderHoverClass && `border-color_hover_${borderHoverClass}`,
-    placeholderTextColorClass && `placeholder-text-color_${placeholderTextColorClass}`,
-    textSizeClass && `text_size_${textSizeClass}`,
-    textColorClass && `text-color_${textColorClass}`,
-    textWeightClass && `text-weight_${textWeightClass}`,
-    widthClass && `width_${widthClass}`,
+    sizeClass && `size_${sizeClass}`,
   )}
 />
 ```
-к примеру `fill`, будет отображаться в браузере как `fill_`
 
-Возьмем к примеру fillClass
+К примеру fill, будет отображаться в браузере как `fill_error-tertiary`.
 
-Возьмем appearance из приведенного ранее примера
-```js
-{
-  fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
-  size: "m",
-  textSize: "m"
-}
-```
-
-и возьмем из него свойство `fill_error-tertiary`
-
-5. Cоздаются классы, которые соответствуют структуре определенной в css-файлах, например глобальный класс `fill`
-
-```css
-.fill {
-  &_none {
-    background-color: transparent;
-  }
-  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-    error, success, warning, info, danger, gradient, disabled, hover, inverse {
-    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
-      hover, inverse {
-      &_$(type) {
-        &-item {
-          &-$(color) {
-            background: var(--color-$(type)-item-$(color));
-          }
-        }
-        &-$(color) {
-          background: var(--color-$(type)-$(color));
-        }
-      }
-    }
-  }
-}
-```
 
-6. Чтобы применить стили в зависимости от viewPort, для этого нужно указать в appearance
+6. Чтобы применить стили в зависимости от `viewPort`, для этого нужно указать в `appearance` суффикс `Mobile` или `Desktop` или `Tablet`
 
 ```js
 {
@@ -215,16 +189,16 @@ const componentConfig: ComponentConfig = {
   textSizeMobile: 'm',
 }
 ```
-или напрямую при использовании компонента
+
+Или напрямую при использовании компонента
 
 ```js
 <Component sizeMobile="m"/>
 ```
 
-всего доступны 3 типа размеров
-
-1. Mobile
-2. Tablet
-3. Desktop
+Всего доступны 3 типа размеров
+1. Mobile (от `240px` до `768px`)
+2. Tablet (от `768px` до `960px`)
+3. Desktop (от `960px` до `1920px`)
 
-подробнее об этом можно узнать в `UIContext.tsx`.
+Подробнее об этом можно узнать в `src/context/UIContext.tsx`, ознакомиться с размерами для (`Mobile`, `Tablet`, `Desktop`) можно в `src/hooks/useMediaQueries/mediaQueries.json`