feat: add DefinitionList and HelpMark

CODEOWNERS

@@ -12,6 +12,8 @@
 /src/components/ClipboardIcon @Raubzeug
 /src/components/ControlLabel @korvin89
 /src/components/CopyToClipboard @SeqviriouM
+/src/components/DefinitionList @Raubzeug
+/src/components/HelpMark @Raubzeug
 #/src/components/Dialog
 /src/components/Disclosure @Raubzeug
 /src/components/Divider @v4dyar4

src/components/DefinitionList/DefinitionList.scss

@@ -0,0 +1,119 @@
+@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);
+
+        :where(& + &) {
+            margin-block-start: var(
+                --g-definition-list-item-block-start,
+                var(--_--item-block-start)
+            );
+        }
+    }
+
+    &__term-container {
+        flex: 0 0 auto;
+        width: var(--_--term-width);
+        max-width: var(--_--term-width);
+        display: flex;
+        align-items: baseline;
+
+        overflow: hidden;
+        position: relative;
+    }
+
+    &__term-wrapper {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        flex: 0 1 auto;
+        color: var(--g-color-text-secondary);
+
+        position: relative;
+    }
+
+    &__term-container_multiline &__term-wrapper {
+        white-space: unset;
+    }
+
+    &__term-container_multiline &__item-note-tooltip {
+        position: absolute;
+    }
+
+    &__dots {
+        box-sizing: border-box;
+        flex: 1 0 auto;
+        min-width: 40px;
+        margin: 0 2px;
+        border-block-end: 1px dotted var(--g-color-line-generic-active);
+    }
+
+    &__dots_with-note {
+        margin-inline-start: 15px;
+        min-width: 25px;
+    }
+
+    &__definition {
+        flex: 0 1 auto;
+        margin: 0;
+    }
+
+    &_responsive {
+        #{$block}__term-container {
+            --_--term-width: auto;
+            flex: 1 0 50%;
+        }
+    }
+
+    &__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;
+        }
+    }
+}
+
+#{$block}_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);
+    }
+}

src/components/DefinitionList/DefinitionList.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {Definition} from './components/Definition';
+import {Term} from './components/Term';
+import type {DefinitionListProps} from './types';
+import {b, getTitle, isUnbreakableOver} from './utils';
+
+import './DefinitionList.scss';
+
+export function DefinitionList({
+    items,
+    responsive,
+    direction = 'horizontal',
+    nameMaxWidth,
+    contentMaxWidth,
+    className,
+    qa,
+}: DefinitionListProps) {
+    const keyStyle = nameMaxWidth ? {maxWidth: nameMaxWidth, width: nameMaxWidth} : {};
+
+    const valueStyle =
+        typeof contentMaxWidth === 'number'
+            ? {width: contentMaxWidth, maxWidth: contentMaxWidth}
+            : {};
+
+    const normalizedItems = React.useMemo(() => {
+        return items.map((value, index) => ({...value, key: index}));
+    }, [items]);
+
+    return (
+        <div
+            className={b({responsive, vertical: direction === 'vertical'}, className)}
+            data-qa={qa}
+        >
+            <dl className={b('list')}>
+                {normalizedItems.map((item) => {
+                    const {
+                        name,
+                        key,
+                        content,
+                        contentTitle,
+                        nameTitle,
+                        copyText,
+                        note,
+                        multilineName,
+                    } = item;
+
+                    return (
+                        <div key={key} className={b('item')}>
+                            <dt
+                                className={b('term-container', {multiline: multilineName})}
+                                style={keyStyle}
+                            >
+                                <Term
+                                    direction={direction}
+                                    name={name}
+                                    nameTitle={nameTitle}
+                                    note={note}
+                                    multilineName={multilineName}
+                                />
+                            </dt>
+                            <dd
+                                className={b('definition')}
+                                title={getTitle(contentTitle, content)}
+                                style={{
+                                    ...valueStyle,
+                                    lineBreak:
+                                        typeof content === 'string' &&
+                                        isUnbreakableOver(20)(content)
+                                            ? 'anywhere'
+                                            : undefined,
+                                }}
+                            >
+                                <Definition copyText={copyText} content={content} />
+                            </dd>
+                        </div>
+                    );
+                })}
+            </dl>
+        </div>
+    );
+}

src/components/DefinitionList/README.md

@@ -0,0 +1,93 @@
+<!--GITHUB_BLOCK-->
+
+# DefinitionList
+
+<!--/GITHUB_BLOCK-->
+
+The component to display definition list with term and definition separated by dots.
+
+## Examples
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<DefinitionList
+  items={[
+    {
+      name: 'Node value with copy',
+      content: <strong>value with copy</strong>,
+      copyText: 'value',
+    },
+    {name: 'Empty value with copy', copyText: 'nothing to copy'},
+  ]}
+  nameMaxWidth={100}
+  contentMaxWidth={100}
+/>
+`}
+>
+    <UIKit.DefinitionList
+      items={[
+        {
+          name: 'Node value with copy',
+          content: <strong>value with copy</strong>,
+          copyText: 'value',
+        },
+        {name: 'Empty value with copy', copyText: 'nothing to copy'},
+      ]}
+  nameMaxWidth={100}
+  contentMaxWidth={100}
+    />
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<DefinitionList
+  items={[
+    {
+      name: 'Node value with copy',
+      content: <strong>value with copy</strong>,
+      copyText: 'value',
+    },
+    {name: 'Empty value with copy', copyText: 'nothing to copy'},
+  ]}
+  nameMaxWidth="100"
+  contentMaxWidth="100"
+/>
+```
+
+<!--/GITHUB_BLOCK-->
+
+## Properties
+
+| Property        | Type                           | Required | Default      | Description                                                                                         |
+| :-------------- | :----------------------------- | :------: | :----------- | :-------------------------------------------------------------------------------------------------- |
+| [items](#items) | `DefinitionListItem[]`         |   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
+
+Configuration for list items
+
+| Property      | Type                      | Required | Default | Description                                                    |
+| ------------- | ------------------------- | -------- | ------- | -------------------------------------------------------------- |
+| name          | `ReactNode`               | true     |         | Term                                                           |
+| multilineName | `boolean`                 |          |         | If set, term will be multiline                                 |
+| content       | `ReactNode`               |          |         | Definition                                                     |
+| contentTitle  | `string`                  |          |         | Title for definition. If not set, `content` value will be used |
+| nameTitle     | `string`                  |          |         | Title for term. If not set, `name` value will be used          |
+| 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-block-start` | Space between definition list items |