docs(Select): docs review (#1521)

issue - #947
consta-design-system · Sep 8, 2021 · aadbecf · aadbecf
1 parent c53b08a
commit aadbecf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 71 deletions.
diff --git a/src/components/Select/__mocks__/data.mock.ts b/src/components/Select/__mocks__/data.mock.ts
@@ -12,136 +12,111 @@ export type Group = {
 
 export const items: Item[] = [
   {
-    label: 'Neptunium',
+    label: 'Синий',
     groupId: 1,
     id: 1,
   },
   {
-    label: 'Plutonium',
+    label: 'Красный',
     groupId: 1,
     id: 2,
   },
   {
-    label: 'Americium',
+    label: 'Жёлтый',
     groupId: 1,
     id: 3,
     disabled: true,
   },
   {
-    label: 'Curium',
+    label: 'Зелёный',
     groupId: 1,
     id: 4,
   },
   {
-    label: 'Berkelium',
+    label: 'Белый',
     groupId: 2,
     id: 5,
   },
   {
-    label: 'Californium Berkelium Curium Plutonium',
+    label: 'Серо-буро-малиновый',
     groupId: 2,
     id: 6,
   },
   {
-    label: 'Einsteinium',
+    label: 'Чёрный',
     groupId: 1,
     id: 7,
   },
   {
-    label: 'Fermium',
+    label: 'В полоску',
     groupId: 3,
     id: 8,
   },
   {
-    label: 'Mendelevium',
+    label: 'В клетку',
     groupId: 3,
     id: 9,
   },
   {
-    label: 'Nobelium',
+    label: 'Коричневый',
     groupId: 1,
     id: 10,
   },
   {
-    label: 'Lawrencium',
+    label: 'Фиолетовый',
     groupId: 2,
     id: 11,
   },
   {
-    label: 'Rutherfordium',
+    label: 'Лиловый',
     groupId: 2,
     id: 12,
   },
   {
-    label: 'Dubnium',
+    label: 'Серый',
     groupId: 1,
     id: 13,
   },
   {
-    label: 'Seaborgium',
+    label: 'В горошек',
     groupId: 3,
     id: 14,
   },
   {
-    label: 'Bohrium',
+    label: 'Голубой',
     groupId: 1,
     id: 15,
   },
   {
-    label: 'Hassium',
+    label: 'Индиго',
     groupId: 2,
     id: 16,
   },
   {
-    label: 'Meitnerium',
+    label: 'Серебряный',
     groupId: 2,
     id: 17,
   },
   {
-    label: 'Darmstadtium',
+    label: 'Золотой',
     groupId: 2,
     id: 18,
   },
   {
-    label: 'Roentgenium',
+    label: 'Оранжевый',
     groupId: 2,
     id: 19,
   },
   {
-    label: 'Copernicium',
+    label: 'Бирюзовый',
     groupId: 2,
     id: 20,
   },
   {
-    label: 'Nihonium',
+    label: 'В цветочек',
     groupId: 3,
     id: 21,
   },
-  {
-    label: 'Flerovium',
-    groupId: 2,
-    id: 22,
-  },
-  {
-    label: 'Moscovium',
-    groupId: 2,
-    id: 23,
-  },
-  {
-    label: 'Livermorium',
-    groupId: 2,
-    id: 24,
-  },
-  {
-    label: 'Tennessine',
-    groupId: 2,
-    id: 25,
-  },
-  {
-    label: 'Oganesson',
-    groupId: 1,
-    id: 26,
-  },
 ];
 
 export const groups: Group[] = [

diff --git a/src/components/Select/__stories__/Select.docs.mdx b/src/components/Select/__stories__/Select.docs.mdx
@@ -76,8 +76,6 @@ const items: Item[] = [
 
 Выбор варианта срабатывает по клику мыши или по нажатию `Enter` на клавиатуре.
 
-<SelectExampleItems />
-
 ```tsx
 type Item = {
   label: string;
@@ -105,15 +103,15 @@ export function SelectExampleItems() {
 }
 ```
 
+<SelectExampleItems />
+
 ### Подсказка
 
 Подсказка, которая видна, когда ни один вариант не выбран, задаётся в свойстве `placeholder`.
 Сформулируйте подсказку так, чтобы стало понятно, что по клику на поле раскроется список вариантов, один из которых нужно выбрать.
 
 Если не знаете, что написать в подсказке, используйте универсальное **Выберите**.
 
-<SelectExamplePlaceholder />
-
 ```tsx
 type Item = {
   label: string;
@@ -148,12 +146,12 @@ export function SelectExamplePlaceholder() {
 }
 ```
 
+<SelectExamplePlaceholder />
+
 ### Неактивный элемент списка
 
 Чтобы сделать вариант в списке неактивным, добавьте к элементу массива `items` свойство `disabled: true`. Если используете [кастомный тип `items`](#кастомные-типы-данных-для-групп-и-вариантов), можете добавить своё свойство.
 
-<SelectExampleDisabledItem />
-
 ```tsx
 type Item = {
   label: string;
@@ -192,15 +190,15 @@ export function SelectExampleDisabledItem() {
 }
 ```
 
+<SelectExampleDisabledItem />
+
 ### Группы вариантов
 
 Чтобы разбить элементы списка на группы, передайте массив групп в свойство `groups`. Тип свойства `groups` по умолчанию равен [DefaultGroup](#свойства). Что внутри:
 
 - `label` — название группы,
 - `id` — уникальный ключ.
 
-<SelectExampleGroups />
-
 ```tsx
 type Item = {
   label: string;
@@ -270,14 +268,14 @@ export function SelectExampleGroups() {
 }
 ```
 
+<SelectExampleGroups />
+
 ## Размер
 
 За размер компонента отвечает свойство `size`. Варианты: `xs`, `s` , `m` , `l` , по умолчанию `m`.
 
 Компонент занимает всю ширину родительского блока.
 
-<SelectExampleSize />
-
 ```tsx
 type Item = {
   label: string;
@@ -313,14 +311,14 @@ export function SelectExampleSize() {
 }
 ```
 
+<SelectExampleSize />
+
 ## Форма
 
 За форму селекта отвечает свойство `form`. Варианты:
 `default`, `brick`, `round`, `clearRound`, `roundClear`, `clearDefault`, `defaultClear`, `defaultBrick`, `brickDefault`, `brickClear`, `clearBrick`, `clearClear`,
 по умолчанию `default`.
 
-<SelectExampleForm />
-
 ```tsx
 type Item = {
   label: string;
@@ -363,12 +361,12 @@ export function SelectExampleForm() {
 }
 ```
 
+<SelectExampleForm />
+
 ## Внешний вид
 
 За вид компонента отвечает свойство `view`. Варианты: `default`, `clear`, по умолчанию `default`.
 
-<SelectExampleView />
-
 ```tsx
 type Item = {
   label: string;
@@ -404,12 +402,12 @@ export function SelectExampleView() {
 }
 ```
 
+<SelectExampleView />
+
 ## Неактивный выпадающий список
 
 Чтобы сделать список неактивным, добавьте `disabled`.
 
-<SelectExampleDisabled />
-
 ```tsx
 type Item = {
   label: string;
@@ -445,6 +443,8 @@ export function SelectExampleDisabled() {
 }
 ```
 
+<SelectExampleDisabled />
+
 ## Кастомизация
 
 ### Кастомный элемент списка
@@ -454,8 +454,6 @@ export function SelectExampleDisabled() {
 
 > У корневого DOM-элемента должно быть свойство `role="option"`.
 
-<SelectExampleRenderItem />
-
 ```tsx
 type Item = {
   label: string;
@@ -503,13 +501,13 @@ export function SelectExampleRenderItem() {
 }
 ```
 
+<SelectExampleRenderItem />
+
 ### Кастомное выбранное значение
 
 Сделать кастомное представление для выбранного значения можно с помощью свойства `renderValue`.
 Свойство принимает [функцию рендера](https://reactjs.org/docs/render-props.html).
 
-<SelectExampleRenderValue />
-
 ```tsx
 type Item = {
   label: string;
@@ -552,6 +550,8 @@ export function SelectExampleRenderValue() {
 }
 ```
 
+<SelectExampleRenderValue />
+
 ### Кастомные типы данных для вариантов и групп
 
 Вы можете использовать кастомные типы данных для элементов списка (`items`) и групп (`groups`) — они могут отличаться от [DefaultItem](#свойства) и [DefaultGroup](#свойства).
@@ -574,8 +574,6 @@ const defaultGetGroupLabel = (group) => group.label;
 
 #### Пример с кастомным Item
 
-<SelectExampleCustomTypes />
-
 ```tsx
 export function SelectExampleCustomTypes() {
   const [value, setValue] = useState<string | null>();
@@ -592,9 +590,9 @@ export function SelectExampleCustomTypes() {
 }
 ```
 
-#### Пример с кастомными Item и Group
+<SelectExampleCustomTypes />
 
-<SelectExampleCustomTypesWithGroups />
+#### Пример с кастомными Item и Group
 
 ```tsx
 export type Item = {
@@ -636,6 +634,8 @@ export function SelectExampleCustomTypesWithGroups() {
 }
 ```
 
+<SelectExampleCustomTypesWithGroups />
+
 ## Свойства
 
 ```tsx

diff --git a/src/components/Select/__stories__/Select.stories.tsx b/src/components/Select/__stories__/Select.stories.tsx
@@ -29,7 +29,7 @@ const getKnobs = () => ({
   size: select('size', propSize, defaultPropSize),
   view: select('view', propView, defaultPropView),
   form: select('form', propForm, defaultPropForm),
-  placeholder: text('placeholder', 'Placeholder'),
+  placeholder: text('placeholder', 'Выберите цвет'),
   withGroups: boolean('withGroups', false),
 });