feat: add DefinitionList and HelpMark

CODEOWNERS

@@ -1,61 +1,63 @@
-* @amje @ValeraS @korvin89
-/src/components/ActionTooltip @amje
-/src/components/Alert @IsaevAlexandr
-/src/components/ArrowToggle @Marginy605
-/src/components/Avatar @DakEnviy
-/src/components/AvatarStack @ogonkov
-#/src/components/Breadcrumbs
-/src/components/Button @amje
-/src/components/Card @Lunory
-/src/components/Checkbox @zamkovskaya
-/src/components/ClipboardButton @Raubzeug
-/src/components/ClipboardIcon @Raubzeug
-/src/components/ControlLabel @korvin89
-/src/components/CopyToClipboard @SeqviriouM
-#/src/components/Dialog
-/src/components/Disclosure @Raubzeug
-/src/components/Divider @v4dyar4
-/src/components/DropdownMenu @axtk
-/src/components/Hotkey @d3m1d0v
-/src/components/Icon @amje
-/src/components/Label @goshander
-/src/components/Link @Estasie
-/src/components/List @korvin89
-/src/components/Loader @SeqviriouM
-/src/components/Menu @NikitaCG
-/src/components/Modal @amje
-/src/components/Overlay @Vladeeg
-/src/components/Pagination @jhoncool
-/src/components/Palette @Ruminat
-/src/components/PinInput @amje
-/src/components/PlaceholderContainer @Marginy605
-/src/components/Popover @kseniya57
-/src/components/Popup @amje
-/src/components/Portal @amje
-/src/components/Progress @Lunory
-/src/components/Radio @zamkovskaya
-/src/components/RadioButton @zamkovskaya
-/src/components/RadioGroup @zamkovskaya
-/src/components/User @DakEnviy
-/src/components/UserLabel @DakEnviy
-/src/components/useList @IsaevAlexandr
-/src/components/Select @korvin89
-/src/components/Sheet @mournfulCoroner
-/src/components/Skeleton @SeqviriouM
-/src/components/Slider @Arucard89
-/src/components/Spin @SeqviriouM
-/src/components/Stories @DarkGenius
-/src/components/Switch @zamkovskaya
-/src/components/Table @Raubzeug
-/src/components/Tabs @sofiushko
-/src/components/Text @IsaevAlexandr
-/src/components/TreeList @IsaevAlexandr
-/src/components/TreeSelect @IsaevAlexandr
-/src/components/controls/TextArea @korvin89
-/src/components/controls/TextInput @korvin89
-/src/components/Toaster @ogonkov
-/src/components/Tooltip @amje
-/src/components/layout @IsaevAlexandr
+-   @amje @ValeraS @korvin89
+    /src/components/ActionTooltip @amje
+    /src/components/Alert @IsaevAlexandr
+    /src/components/ArrowToggle @Marginy605
+    /src/components/Avatar @DakEnviy
+    /src/components/AvatarStack @ogonkov
+    #/src/components/Breadcrumbs
+    /src/components/Button @amje
+    /src/components/Card @Lunory
+    /src/components/Checkbox @zamkovskaya
+    /src/components/ClipboardButton @Raubzeug
+    /src/components/ClipboardIcon @Raubzeug
+    /src/components/ControlLabel @korvin89
+    /src/components/CopyToClipboard @SeqviriouM
+    /src/components/DefinitionList @Raubzeug
+    #/src/components/Dialog
+    /src/components/Disclosure @Raubzeug
+    /src/components/Divider @v4dyar4
+    /src/components/DropdownMenu @axtk
+    /src/components/HelpMark @Raubzeug
+    /src/components/Hotkey @d3m1d0v
+    /src/components/Icon @amje
+    /src/components/Label @goshander
+    /src/components/Link @Estasie
+    /src/components/List @korvin89
+    /src/components/Loader @SeqviriouM
+    /src/components/Menu @NikitaCG
+    /src/components/Modal @amje
+    /src/components/Overlay @Vladeeg
+    /src/components/Pagination @jhoncool
+    /src/components/Palette @Ruminat
+    /src/components/PinInput @amje
+    /src/components/PlaceholderContainer @Marginy605
+    /src/components/Popover @kseniya57
+    /src/components/Popup @amje
+    /src/components/Portal @amje
+    /src/components/Progress @Lunory
+    /src/components/Radio @zamkovskaya
+    /src/components/RadioButton @zamkovskaya
+    /src/components/RadioGroup @zamkovskaya
+    /src/components/User @DakEnviy
+    /src/components/UserLabel @DakEnviy
+    /src/components/useList @IsaevAlexandr
+    /src/components/Select @korvin89
+    /src/components/Sheet @mournfulCoroner
+    /src/components/Skeleton @SeqviriouM
+    /src/components/Slider @Arucard89
+    /src/components/Spin @SeqviriouM
+    /src/components/Stories @DarkGenius
+    /src/components/Switch @zamkovskaya
+    /src/components/Table @Raubzeug
+    /src/components/Tabs @sofiushko
+    /src/components/Text @IsaevAlexandr
+    /src/components/TreeList @IsaevAlexandr
+    /src/components/TreeSelect @IsaevAlexandr
+    /src/components/controls/TextArea @korvin89
+    /src/components/controls/TextInput @korvin89
+    /src/components/Toaster @ogonkov
+    /src/components/Tooltip @amje
+    /src/components/layout @IsaevAlexandr
 
 /src/hooks/useActionHandlers @ogonkov
 /src/hooks/useFileInput @korvin89
@@ -67,5 +69,6 @@
 /src/hooks/useUniqId @ValeraS
 
 # Allow everyone to update dependencies
+
 /package.json
 /package-lock.json

src/components/DefinitionList/DefinitionList.scss

@@ -0,0 +1,95 @@
+@use '../../../styles/mixins.scss';
+@use '../variables';
+
+$block: '.#{variables.$ns}definition-list';
+
+#{$block} {
+    --_--item-block-start: var(--g-spacing-4);
+    --_--term-width: 300px;
+    &__list {
+        margin: 0;
+    }
+
+    &__item {
+        display: flex;
+        align-items: baseline;
+        gap: var(--g-spacing-1);
+
+        & + & {
+            margin-block-start: var(--g-definition-list-item-gap, var(--_--item-block-start));
+        }
+    }
+
+    &__term-container {
+        display: flex;
+        flex: 0 0 auto;
+        width: var(--_--term-width);
+        max-width: var(--_--term-width);
+        align-items: baseline;
+
+        overflow: hidden;
+        position: relative;
+    }
+
+    &__term-wrapper {
+        color: var(--g-color-text-secondary);
+    }
+
+    &__dots {
+        box-sizing: border-box;
+        flex: 1 0 auto;
+        min-width: 25px;
+        margin: 0 2px;
+        border-block-end: 1px dotted var(--g-color-line-generic-active);
+    }
+
+    &__definition {
+        flex: 0 1 auto;
+        margin: 0;
+    }
+
+    &_responsive {
+        #{$block}__term-container {
+            --_--term-width: auto;
+            flex: 1 0 50%;
+        }
+    }
+    &_vertical {
+        --_--item-block-start: var(--g-spacing-3);
+        --_--term-width: auto;
+
+        #{$block}__term-container {
+            flex: 1 0 auto;
+        }
+        #{$block}__item {
+            flex-direction: column;
+            gap: var(--g-spacing-half);
+        }
+    }
+
+    &__copy-container {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding-inline-end: var(--g-spacing-7);
+
+        margin-inline-end: calc(-1 * var(--g-spacing-7));
+
+        &:hover {
+            #{$block}__copy-button {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__copy-button {
+        position: absolute;
+        display: inline-block;
+        inset-inline-end: 0;
+        margin-inline-start: 10px;
+        opacity: 0;
+        &:focus-visible {
+            opacity: 1;
+        }
+    }
+}

src/components/DefinitionList/DefinitionList.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {isOfType} from '../utils/isOfType';
+
+import {DefinitionListProvider} from './components/DefinitionListContext';
+import {DefinitionListItem} from './components/DefinitionListItem';
+import type {DefinitionListProps} from './types';
+import {b} from './utils';
+
+import './DefinitionList.scss';
+
+export function DefinitionList({
+    responsive,
+    direction = 'horizontal',
+    nameMaxWidth,
+    contentMaxWidth,
+    className,
+    children,
+    qa,
+}: DefinitionListProps) {
+    const normalizedChildren = prepareChildren(children);
+    return (
+        <div
+            className={b({responsive, vertical: direction === 'vertical'}, className)}
+            data-qa={qa}
+        >
+            <DefinitionListProvider
+                direction={direction}
+                nameMaxWidth={nameMaxWidth}
+                contentMaxWidth={contentMaxWidth}
+            >
+                <dl className={b('list')}>{normalizedChildren}</dl>
+            </DefinitionListProvider>
+        </div>
+    );
+}
+
+const isDefinitionListItem = isOfType(DefinitionListItem);
+
+function prepareChildren(children: React.ReactNode) {
+    const items = React.Children.toArray(children);
+
+    for (const item of items) {
+        const isItem = isDefinitionListItem(item);
+        if (!isItem) {
+            throw new Error(
+                'Only <DefinitionList.Item> components is allowed inside <DefinitionList>',
+            );
+        }
+    }
+    return children;
+}
+
+DefinitionList.Item = DefinitionListItem;
+DefinitionList.displayName = 'DefinitionList';

src/components/DefinitionList/README.md

@@ -0,0 +1,72 @@
+<!--GITHUB_BLOCK-->
+
+# DefinitionList
+
+<!--/GITHUB_BLOCK-->
+
+The component to display definition list with term and definition separated by dots.
+
+## Examples
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<DefinitionList nameMaxWidth={100} contentMaxWidth={100}>
+    <DefinitionList.Item name="Node value with copy" copyText="value">
+        <strong>value with copy</strong>
+    </DefinitionList.Item>
+    <DefinitionList.Item name="Empty value with copy" copyText="nothing to copy" />
+</DefinitionList>
+`}
+>
+<UIKit.DefinitionList nameMaxWidth={100} contentMaxWidth={100}>
+    <UIKit.DefinitionList.Item name="Node value with copy" copyText="value">
+        <strong>value with copy</strong>
+    </UIKit.DefinitionList.Item>
+    <UIKit.DefinitionList.Item name="Empty value with copy" copyText="nothing to copy" />
+</UIKit.DefinitionList>;
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<DefinitionList nameMaxWidth={100} contentMaxWidth={100}>
+  <DefinitionList.Item name="Node value with copy" copyText="value">
+    <strong>value with copy</strong>
+  </DefinitionList.Item>
+  <DefinitionList.Item name="Empty value with copy" copyText="nothing to copy" />
+</DefinitionList>
+```
+
+<!--/GITHUB_BLOCK-->
+
+## Properties
+
+| Property           | Type                           | Required | Default      | Description                                                                                         |
+| :----------------- | :----------------------------- | :------: | :----------- | :-------------------------------------------------------------------------------------------------- |
+| [children](#items) | `React.ReactNode`              |   yes    |              | Items of the list                                                                                   |
+| responsive         | `boolean`                      |          |              | If set to `true` list will take 100% width of its parent                                            |
+| direction          | `'horizontal'` \| `'vertical'` |          | 'horizontal' | If set to `vertical` content will be located under name and list will take 100% width of its parent |
+| nameMaxWidth       | `number`                       |          |              | Maximum width of term                                                                               |
+| contentMaxWidth    | `number`                       |          |              | Maximum width of definition                                                                         |
+| className          | `string`                       |          |              | Class name for the definition list                                                                  |
+
+### Items
+
+DefinitionList children should be components of type `DefinitionList.Item` with following properties:
+
+| Property | Type                      | Required | Default | Description                                      |
+| -------- | ------------------------- | -------- | ------- | ------------------------------------------------ |
+| name     | `ReactNode`               | true     |         | Term                                             |
+| children | `ReactNode`               |          |         | Definition                                       |
+| copyText | `string`                  |          |         | If set, it will be shown icon for copy this text |
+| note     | `string \| HelpMarkProps` |          |         | If set, HelpMark will be shown next to term      |
+
+## CSS API
+
+| Name                           | Description                         |
+| :----------------------------- | :---------------------------------- |
+| `--g-definition-list-item-gap` | Space between definition list items |