@itcase/ui 1.8.108 → 1.8.110

package/dist/stories/useActiveClasses.mdx

@@ -0,0 +1,134 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useActiveClasses" />
+
+# `useActiveClasses`
+Генерирует CSS‑классы по правилам `CLASS_RULES` из `propsGenerator` с учетом состояний (`isActive`, `isDisabled`).
+
+> ℹ️ Данный хук использует термины, о которых рассказывается в `useDevicePropsGenerator`, необходимо предварительно ознакомиться с ним
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Обязательный</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>isDisabled</td>
+    <td>Нет</td>
+    <td>`boolean`</td>
+    <td>false</td>
+    <td>`Boolean` флаг</td>
+  </tr>
+  <tr>
+    <td>propsGenerator</td>
+    <td>Да</td>
+    <td>`[key: string]: string`</td>
+    <td>
+      propsGenerator[propsKey]
+    </td>
+    <td>Генератор классов</td>
+  </tr>
+  <tr>
+    <td>suffixes</td>
+    <td>Нет</td>
+    <td>`string[]`</td>
+    <td>
+      ['Checkmark']
+    </td>
+    <td>Массив суффиксов</td>
+  </tr>
+  <tr>
+    <td>isActive</td>
+    <td>Нет</td>
+    <td>`boolean`</td>
+    <td>false</td>
+    <td>`Boolean` флаг</td>
+  </tr>
+  </tbody>
+</table>
+
+### Результат
+
+Возвращает объект, значения объекта:
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>rootClasses</td>
+    <td>`string`</td>
+    <td>`'fill_surface-secondary borderColor_surface-border-quaternary'`</td>
+    <td>Строка из классами для корневого `html-тега`</td>
+  </tr>
+  <tr>
+    <td>suffixClasses</td>
+    <td>`string`</td>
+    <td>
+      `'fill_surface-secondary borderColor_accent-primary'`
+    </td>
+    <td>Строка из классов для вложенных `html-тэгов`</td>
+  </tr>
+  </tbody>
+</table>
+
+### Примечание
+Чтобы на выходе получалась строка из классов, необходимо предварительно в `appearance` прописать значения, например:
+
+```js
+const radioAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    fillRado: 'accentPrimary',
+    fillCheckmark: 'surfaceQuaternary'
+  }
+}
+```
+
+### Использование
+Для генерации классов вложенных `html-тегов`, задаем массив суффиксов
+
+```jsx
+function Radio({ isActive, isDisabled, propsGenerator }) {
+  const { rootClasses, suffixClasses } = useActiveClasses({
+    isDisabled,
+    propsGenerator,
+    suffixes: ['Checkmark', 'Radio'],
+    isActive,
+  })
+
+  return (
+    <label className={clsx('radio', rootClasses)}>
+        <div className={clsx('radio__state', suffixClasses.Radio)}>
+          <span>State</span>
+        </div>
+        <div className={clsx('radio__state-checkmark', suffixClasses.Checkmark)}>
+          <span>Checkmark</span>
+        </div>
+    </label>
+  )
+}
+
+export { Radio }
+```
+
+В данном случае
+- `rootClasses` = 'fill_surface-secondary'
+- `suffixClasses.Radio` = 'fill_surface-quaternary',
+- `suffixClasses.Chekmark` = 'fill_accent-primary'
+
+И все данные значение получены из `appearance`, которые указали ранее