Merge branch 'main' into fix/share-popover-a11y

gravity-ui · Aug 30, 2024 · 796adb5 · 796adb5
2 parents 64377b3 + 70bf9f0
commit 796adb5
Show file tree

Hide file tree

Showing 23 changed files with 1,049 additions and 120 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [3.8.0](https://github.com/gravity-ui/components/compare/v3.7.0...v3.8.0) (2024-08-20)
+
+
+### Features
+
+* **DefinitionList:** add mobile view ([#205](https://github.com/gravity-ui/components/issues/205)) ([b94ee82](https://github.com/gravity-ui/components/commit/b94ee824f69f7ed075167ff6d16263a30ca62d71))
+* **Reactions:** added new Reactions component ([#197](https://github.com/gravity-ui/components/issues/197)) ([be23d4e](https://github.com/gravity-ui/components/commit/be23d4e5949ac918ac945bbf829044520c7d0106))
+
+
+### Bug Fixes
+
+* add aria-label for DefinitionList help popover ([#208](https://github.com/gravity-ui/components/issues/208)) ([ad93fec](https://github.com/gravity-ui/components/commit/ad93fec84c88702c52aad69e9b6542690c66e4d4))
+* **DefinitionList:** should be semantic correct ([#211](https://github.com/gravity-ui/components/issues/211)) ([8dcc87c](https://github.com/gravity-ui/components/commit/8dcc87c034669553bf52166aa3e9f417f6a8a287))
+* **Notification:** correct `onClick` type for action ([#212](https://github.com/gravity-ui/components/issues/212)) ([b87bad1](https://github.com/gravity-ui/components/commit/b87bad101aeaf29cf1b97138e34d1a2f283b3688))
+* **PasswordInput:** fix incorrect props usage ([#210](https://github.com/gravity-ui/components/issues/210)) ([c740204](https://github.com/gravity-ui/components/commit/c7402042ea8aac95823f2a7f852429d8fd8ab957))
+
 ## [3.7.0](https://github.com/gravity-ui/components/compare/v3.6.2...v3.7.0) (2024-06-14)
 
 

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -4,9 +4,11 @@
 /src/components/FilePreview @KirillDyachkovskiy
 /src/components/FormRow @ogonkov
 /src/components/HelpPopover @Raubzeug
+/src/components/Notifications @Ruminat
 /src/components/OnboardingMenu @nikita-jpg
 /src/components/PlaceholderContainer @Marginy605
 /src/components/PromoSheet @Avol-V
+/src/components/Reactions @Ruminat
 /src/components/SharePopover @niktverd
 /src/components/StoreBadge @NikitaCG
 /src/components/Stories @darkgenius

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/components",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "",
   "license": "MIT",
   "main": "./build/cjs/index.js",

diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss
@@ -4,20 +4,18 @@
 $block: '.#{variables.$ns}definition-list';
 
 #{$block} {
-    margin: 0;
+    &__list {
+        margin: 0;
+    }
 
-    &__title {
+    &__group-title {
         margin-block-end: var(--g-spacing-3);
 
         &:not(:first-of-type) {
             margin-block-start: var(--g-spacing-5);
         }
     }
 
-    #{$block}__item:is(#{$block}__item_grouped) + #{$block}__item:not(#{$block}__item_grouped) {
-        margin-block-start: var(--g-spacing-5);
-    }
-
     &__item {
         display: flex;
         align-items: baseline;
@@ -34,8 +32,16 @@ $block: '.#{variables.$ns}definition-list';
         }
     }
 
+    &_margin {
+        &:not(:first-of-type) {
+            margin-block-start: var(--g-spacing-5);
+        }
+    }
+
     &__term-container {
-        flex: 0 0 300px;
+        flex: 0 0 auto;
+        width: 300px;
+        max-width: 300px;
         display: flex;
         align-items: baseline;
 
@@ -133,10 +139,10 @@ $block: '.#{variables.$ns}definition-list';
     #{$block}__item + #{$block}__item {
         margin-block-start: var(--g-spacing-3);
     }
-    #{$block}__title:not(:first-of-type) {
+    #{$block}__group-title:not(:first-of-type) {
         margin-block-start: var(--g-spacing-8);
     }
-    #{$block}__item:is(#{$block}__item_grouped) + #{$block}__item:not(#{$block}__item_grouped) {
+    #{$block}_margin:not(:first-of-type) {
         margin-block-start: var(--g-spacing-8);
     }
 }
diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx
@@ -3,20 +3,16 @@ import React from 'react';
 import {Definition} from './components/Definition';
 import {GroupLabel} from './components/GroupLabel';
 import {Term} from './components/Term';
-import {DefinitionListProps} from './types';
 import {
-    b,
-    getFlattenItems,
-    getKeyStyles,
-    getTitle,
-    getValueStyles,
-    isGroup,
-    isUnbreakableOver,
-} from './utils';
+    DefinitionListGranularProps,
+    DefinitionListGroupedProps,
+    DefinitionListProps,
+} from './types';
+import {b, getAllItemsAsGroups, getTitle, isUnbreakableOver, onlySingleItems} from './utils';
 
 import './DefinitionList.scss';
 
-export function DefinitionList({
+function DefinitionListGranular({
     items,
     responsive,
     direction = 'horizontal',
@@ -26,68 +22,115 @@ export function DefinitionList({
     itemClassName,
     copyPosition = 'outside',
     qa,
-}: DefinitionListProps) {
-    const keyStyle = getKeyStyles({nameMaxWidth, direction});
+}: DefinitionListGranularProps) {
+    const keyStyle = nameMaxWidth ? {maxWidth: nameMaxWidth, width: nameMaxWidth} : {};
 
-    const valueStyle = getValueStyles({contentMaxWidth, direction});
+    const valueStyle =
+        typeof contentMaxWidth === 'number'
+            ? {width: contentMaxWidth, maxWidth: contentMaxWidth}
+            : {};
 
     const normalizedItems = React.useMemo(() => {
-        return getFlattenItems(items).map((value, index) => ({...value, key: index}));
+        return items.map((value, index) => ({...value, key: index}));
     }, [items]);
 
     return (
-        <dl className={b({responsive, vertical: direction === 'vertical'}, className)} data-qa={qa}>
+        <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', itemClassName)}>
+                            <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
+                                    copyPosition={copyPosition}
+                                    copyText={copyText}
+                                    content={content}
+                                />
+                            </dd>
+                        </div>
+                    );
+                })}
+            </dl>
+        </div>
+    );
+}
+
+function DefinitionListGrouped({
+    items,
+    className,
+    itemClassName,
+    ...rest
+}: DefinitionListGroupedProps) {
+    const normalizedItems = React.useMemo(() => {
+        return items.map((value, index) => ({...value, key: index}));
+    }, [items]);
+
+    return (
+        <div className={b({vertical: rest.direction === 'vertical'}, className)}>
             {normalizedItems.map((item) => {
-                if (isGroup(item)) {
-                    const {key, label} = item;
-                    return <GroupLabel key={key} label={label} />;
-                }
-                const {
-                    name,
-                    key,
-                    content,
-                    contentTitle,
-                    nameTitle,
-                    copyText,
-                    note,
-                    multilineName,
-                    isGrouped,
-                } = item;
+                const {key, label} = item;
 
                 return (
-                    <div key={key} className={b('item', {grouped: isGrouped}, itemClassName)}>
-                        <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
-                                copyPosition={copyPosition}
-                                copyText={copyText}
-                                content={content}
+                    <React.Fragment key={key}>
+                        {label && <GroupLabel label={label} />}
+                        {item.items && (
+                            <DefinitionListGranular
+                                {...rest}
+                                className={b({margin: !label})}
+                                items={item.items}
+                                itemClassName={b('item', {grouped: Boolean(label)}, itemClassName)}
                             />
-                        </dd>
-                    </div>
+                        )}
+                    </React.Fragment>
                 );
             })}
-        </dl>
+        </div>
     );
 }
+
+export function DefinitionList({items, ...rest}: DefinitionListProps) {
+    if (onlySingleItems(items)) {
+        return <DefinitionListGranular {...rest} items={items} />;
+    }
+
+    const preparedItems = getAllItemsAsGroups(items);
+
+    return <DefinitionListGrouped {...rest} items={preparedItems} />;
+}
diff --git a/src/components/DefinitionList/components/GroupLabel.tsx b/src/components/DefinitionList/components/GroupLabel.tsx
@@ -10,7 +10,7 @@ interface GroupLabelProps {
 
 export function GroupLabel({label}: GroupLabelProps) {
     return (
-        <div className={b('title')}>
+        <div className={b('group-title')}>
             <Text variant="subheader-1" color="complementary">
                 {label}
             </Text>

diff --git a/src/components/DefinitionList/types.ts b/src/components/DefinitionList/types.ts
@@ -20,10 +20,6 @@ export interface DefinitionListSingleItem {
     multilineName?: boolean;
 }
 
-export interface DefinitionListItemGrouped extends DefinitionListSingleItem {
-    isGrouped?: boolean;
-}
-
 export type DefinitionListItem = DefinitionListSingleItem | DefinitionListGroup;
 
 export type DefinitionListDirection = 'vertical' | 'horizontal';
@@ -38,3 +34,10 @@ export interface DefinitionListProps extends QAProps {
     className?: string;
     itemClassName?: string;
 }
+
+export interface DefinitionListGranularProps extends Omit<DefinitionListProps, 'items'> {
+    items: DefinitionListSingleItem[];
+}
+export interface DefinitionListGroupedProps extends Omit<DefinitionListProps, 'items'> {
+    items: DefinitionListGroup[];
+}