@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.tsx

@@ -0,0 +1,64 @@
+import { InnerLink } from '../../../../../types';
+import { hasNestedItems } from '../../../../../utils/innerLink';
+import { DraggableServiceCard, ServiceCardProps } from '../../../../ServiceCard';
+import styles from '../styles.module.scss';
+import { SubCategory } from './SubCategory';
+
+export type SortableGroupCardsProps = Pick<
+  ServiceCardProps,
+  'showDescription' | 'isMobile' | 'favorite' | 'onServiceClick'
+> & {
+  groupId: string;
+  items: InnerLink[];
+  enableServiceDrag?: boolean;
+};
+
+export function SortableGroupCards({
+  groupId,
+  items,
+  showDescription,
+  isMobile,
+  enableServiceDrag,
+  favorite,
+  onServiceClick,
+}: SortableGroupCardsProps) {
+  return (
+    <div className={styles.groupBody} data-mobile={isMobile || undefined}>
+      {items.map(service => {
+        if (service.hidden) {
+          return null;
+        }
+
+        const key = String(groupId) + service.id;
+
+        if (hasNestedItems(service)) {
+          return (
+            <SubCategory
+              key={key}
+              groupId={groupId}
+              service={service}
+              showDescription={showDescription}
+              isMobile={isMobile}
+              dragDisabled={!enableServiceDrag}
+              favorite={favorite}
+              onServiceClick={onServiceClick}
+            />
+          );
+        }
+
+        return (
+          <DraggableServiceCard
+            key={key}
+            groupId={groupId}
+            service={service}
+            favorite={favorite}
+            isMobile={isMobile}
+            onServiceClick={onServiceClick}
+            showDescription={showDescription}
+            dragDisabled={!enableServiceDrag}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.tsx

@@ -0,0 +1,29 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
+import { stopEventPropagation } from '@cloud-ru/ds-utils';
+
+import { headerLocale } from '../../../../../../../locale';
+import styles from '../styles.module.scss';
+
+export type SortableGroupDragHandleProps = {
+  attributes?: DraggableAttributes;
+  listeners?: DraggableSyntheticListeners;
+};
+
+export function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps) {
+  const { t } = headerLocale.useTranslations();
+
+  return (
+    <button
+      {...attributes}
+      {...listeners}
+      type='button'
+      className={styles.dragHandle}
+      aria-label={t('dragGroup')}
+      data-test-id='header__drawer-menu__group-card-drag-handle'
+      onClick={stopEventPropagation}
+    >
+      <DragDropSVG size={24} />
+    </button>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Typography } from '@cloud-ru/ds-typography';
+
+import { LinksGroupTitle } from '../../../../../types';
+import styles from '../styles.module.scss';
+import { SortableGroupDragHandle, SortableGroupDragHandleProps } from './SortableGroupDragHandle';
+
+export type SortableGroupHeaderProps = {
+  label: LinksGroupTitle;
+  isExpanded?: boolean;
+  enableServiceDrag?: boolean;
+  isMobile?: boolean;
+} & SortableGroupDragHandleProps;
+
+export function SortableGroupHeader({
+  label,
+  isExpanded,
+  enableServiceDrag,
+  attributes,
+  listeners,
+  isMobile,
+}: SortableGroupHeaderProps) {
+  return (
+    <div className={styles.header} data-expanded={isExpanded || undefined}>
+      <Typography variant='title' size='m' className={styles.headerTitle}>
+        {label.text}
+      </Typography>
+
+      {(enableServiceDrag || !isMobile) && (
+        <div className={styles.headerActions} data-always-visible={isMobile || undefined}>
+          {enableServiceDrag && <SortableGroupDragHandle attributes={attributes} listeners={listeners} />}
+
+          {!isMobile && (
+            <Button
+              view='elevated'
+              appearance='neutral'
+              size='s'
+              icon={isExpanded ? <ChevronUpSVG /> : <ChevronDownSVG />}
+              data-test-id='header__drawer-menu__group-card-collapse'
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.tsx

@@ -0,0 +1,35 @@
+import { Skeleton, SkeletonContext, SkeletonText } from '@cloud-ru/ds-skeleton';
+
+import styles from '../styles.module.scss';
+
+type SortableGroupSkeletonProps = {
+  isMobile?: boolean;
+};
+
+export function SortableGroupSkeleton({ isMobile }: SortableGroupSkeletonProps) {
+  return (
+    <div className={styles.group}>
+      <SkeletonContext.Provider value={true}>
+        <div className={styles.skeletonTitle}>
+          <SkeletonText lines={1} width={isMobile ? '50%' : '30%'} />
+        </div>
+        <div className={styles.skeletonBody}>
+          <div className={styles.groupBody} data-mobile={isMobile || undefined}>
+            <div className={styles.skeletonService}>
+              <Skeleton height={24} borderRadius={2} />
+            </div>
+            <div className={styles.skeletonService}>
+              <Skeleton height={24} borderRadius={2} />
+            </div>
+            <div className={styles.skeletonService}>
+              <Skeleton height={24} borderRadius={2} />
+            </div>
+            <div className={styles.skeletonService}>
+              <Skeleton height={24} borderRadius={2} />
+            </div>
+          </div>
+        </div>
+      </SkeletonContext.Provider>
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.tsx

@@ -0,0 +1,79 @@
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { useCallback, useMemo, useState } from 'react';
+
+import { getNestedServiceGroupId, getSubCategoryId } from '../../../../../../utils/innerLink';
+import { DraggableServiceCard, ServiceCardProps } from '../../../../../ServiceCard';
+import baseGroupStyles from '../../styles.module.scss';
+import styles from './styles.module.scss';
+import { SubCategoryTitle } from './SubCategoryTitle';
+
+export type SubCategoryProps = Pick<
+  ServiceCardProps,
+  'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'
+> & {
+  groupId: string;
+  dragDisabled?: boolean;
+};
+
+export function SubCategory({
+  groupId,
+  service,
+  showDescription,
+  isMobile,
+  dragDisabled,
+  favorite,
+  onServiceClick,
+}: SubCategoryProps) {
+  const subcategoryId = getSubCategoryId(groupId, service.id);
+  const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
+  const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
+
+  // TODO: в будущем должно быть API для управления expanded state
+  const [isExpanded, setIsExpanded] = useState<string | undefined>(subcategoryId);
+
+  const handleExpandedChange = useCallback(() => {
+    setIsExpanded(isExpanded ? undefined : subcategoryId);
+  }, [isExpanded, subcategoryId]);
+
+  return (
+    <div className={styles.subcategory} data-test-id={`header__drawer-menu__subcategory-${service.id}`}>
+      <Accordion selectionMode='single' expanded={isExpanded} onExpandedChange={handleExpandedChange}>
+        <Accordion.CollapseBlockTertiary
+          id={subcategoryId}
+          showChevron={false}
+          className={styles.subcategoryAccordion}
+          afterTitle={
+            <SubCategoryTitle
+              groupId={groupId}
+              service={service}
+              expandable={{
+                value: Boolean(isExpanded),
+                onClick: handleExpandedChange,
+              }}
+              showDescription={showDescription}
+              isMobile={isMobile}
+              dragDisabled={dragDisabled}
+              favorite={favorite}
+              onServiceClick={onServiceClick}
+            />
+          }
+        >
+          <div className={baseGroupStyles.groupBody} data-subcategory-body data-mobile={isMobile || undefined}>
+            {nestedItems.map(nestedService => (
+              <DraggableServiceCard
+                key={nestedGroupId + nestedService.id}
+                groupId={nestedGroupId}
+                service={nestedService}
+                favorite={favorite}
+                isMobile={isMobile}
+                onServiceClick={onServiceClick}
+                showDescription={showDescription}
+                dragDisabled={dragDisabled}
+              />
+            ))}
+          </div>
+        </Accordion.CollapseBlockTertiary>
+      </Accordion>
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.tsx

@@ -0,0 +1,128 @@
+import { Typography } from '@cloud-ru/ds-typography';
+import { CardActionsSurface, createCardActionsKeyDownHandler } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
+import { stopEventPropagation } from '@cloud-ru/ds-utils';
+import { MouseEvent, useRef } from 'react';
+
+import { getLinkEmblem } from '../../../../../../utils';
+import { DraggableServiceCard, DraggableServiceCardProps } from '../../../../../ServiceCard';
+import styles from './styles.module.scss';
+
+export type SubCategoryTitleProps = {
+  groupId: string;
+} & Pick<
+  DraggableServiceCardProps,
+  'expandable' | 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile' | 'dragDisabled'
+>;
+
+export function SubCategoryTitle({
+  groupId,
+  service,
+  showDescription: showDescriptionProp,
+  isMobile,
+  dragDisabled,
+  favorite,
+  onServiceClick,
+  expandable,
+}: SubCategoryTitleProps) {
+  const titleRef = useRef<HTMLAnchorElement>(null);
+  const tooltipTriggerRef = useRef<HTMLButtonElement>(null);
+  const favoriteRef = useRef<HTMLButtonElement>(null);
+
+  const handleServiceClick = (event: MouseEvent<HTMLElement>) => {
+    stopEventPropagation(event);
+    onServiceClick?.(service, event);
+  };
+
+  const isFavorite = Boolean(favorite?.value.includes(service.id));
+  const showDescription = showDescriptionProp && Boolean(service.description);
+  const hasTooltip = !showDescription && service.description;
+
+  const handleKeyDown = createCardActionsKeyDownHandler({
+    cardRef: titleRef,
+    items: [
+      hasTooltip ? { ref: tooltipTriggerRef } : null,
+      favorite
+        ? {
+            ref: favoriteRef,
+            onActivate: () => favorite.onChange(service.id)(!isFavorite),
+          }
+        : null,
+    ],
+  });
+
+  if (expandable?.value) {
+    return (
+      <div className={styles.subcategoryTitle}>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div className={styles.subcategoryTitleRow} onKeyDown={handleKeyDown}>
+          <TitleClickable
+            as='a'
+            href={service.href}
+            onClick={handleServiceClick}
+            innerRef={titleRef}
+            title={service.label}
+            before={getLinkEmblem(service)}
+            className={styles.subcategoryTitleClickable}
+            data-test-id={`header__drawer-menu__subcategory-title-${service.id}`}
+          />
+
+          <CardActionsSurface
+            className={styles.subcategoryTitleActions}
+            visibilityStrategy='always'
+            tooltip={
+              hasTooltip
+                ? {
+                    tip: service.description,
+                    buttonRef: tooltipTriggerRef,
+                    trigger: isMobile ? 'click' : 'hoverAndFocusVisible',
+                    'data-test-id': `header__drawer-menu__subcategory-title-${service.id}-tooltip`,
+                  }
+                : undefined
+            }
+            favorite={
+              favorite
+                ? {
+                    enabled: true,
+                    checked: isFavorite,
+                    onChange: favorite.onChange(service.id),
+                    buttonRef: favoriteRef,
+                    'data-test-id': `header__drawer-menu__subcategory-title-${service.id}-favorite`,
+                  }
+                : undefined
+            }
+            // TODO: скрыто, пока не проработаны "мегасервисы" FF-8674
+            // expandable={expandable ? { value: expandable.value, onClick: expandable.onClick } : undefined}
+          />
+        </div>
+
+        {showDescription && (
+          <Typography
+            as='p'
+            variant='body'
+            size='s'
+            className={styles.subcategoryDescription}
+            data-test-id={`header__drawer-menu__subcategory-title-${service.id}-description`}
+          >
+            {service.description}
+          </Typography>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.subcategoryTitleDraggable} onPointerDown={stopEventPropagation}>
+      <DraggableServiceCard
+        groupId={groupId}
+        service={service}
+        favorite={favorite}
+        isMobile={isMobile}
+        onServiceClick={onServiceClick}
+        showDescription={showDescriptionProp}
+        dragDisabled={dragDisabled}
+        expandable={expandable}
+      />
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/index.ts

@@ -0,0 +1,2 @@
+export * from './SubCategoryTitle';
+export * from './SubCategory';

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.scss

@@ -0,0 +1,77 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.subcategoryTitleActions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+
+  min-width: 0;
+
+  visibility: hidden;
+}
+
+.subcategory {
+  min-width: 0;
+
+  &:has([data-subcategory-body]) {
+    grid-column: 1 / -1;
+    padding: 0 base.$sn-primitive-dimension-4;
+    border-radius: base.$sn-density-radius-2xs;
+    background-color: base.$sn-theme-color-neutral-decorTransparent;
+  }
+}
+
+.subcategoryAccordion {
+  min-width: 0;
+}
+
+.subcategoryTitle {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+
+  min-width: 0;
+  padding-left: base.$sn-primitive-dimension-4;
+
+  &:hover,
+  &:focus-within {
+    .subcategoryTitleActions {
+      visibility: visible;
+    }
+  }
+}
+
+.subcategoryTitleRow {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  min-width: 0;
+  min-height: base.$sn-primitive-dimension-32;
+}
+
+.subcategoryTitleClickable {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.subcategoryDescription {
+  width: 100%;
+  padding-bottom: base.$sn-primitive-dimension-4;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.subcategoryTitleDraggable {
+  touch-action: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.subcategoryCollapsedCard {
+  flex: 1;
+  min-width: 0;
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/index.ts

@@ -0,0 +1,5 @@
+export * from '../../../../ServiceCard/ServiceCard';
+export * from './SubCategory/SubCategory';
+export * from './SubCategory';
+export * from './SortableGroupCards';
+export * from './SortableGroupHeader';

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/index.ts

@@ -0,0 +1,3 @@
+export * from './SortableGroup';
+export * from './components/SortableGroupCards';
+export * from './components/SortableGroupSkeleton';