@cloud-ru/ds-accordion 1.0.0

package/src/components/CollapseBlock/hooks.ts

@@ -0,0 +1,49 @@
+import { useToggleGroup } from '@cloud-ru/ds-toggles';
+import { useEffect, useRef, useState } from 'react';
+
+import { ANIMATION_DURATION } from '../../constants';
+
+type UseCollapseStateProps = {
+  id: string;
+  keepMounted?: boolean;
+};
+
+export function useCollapseState({ id, keepMounted = false }: UseCollapseStateProps) {
+  const { isChecked: isOpen, handleClick: toggleOpen } = useToggleGroup({ value: id });
+  // Контент доживает до конца закрывающей анимации, но при открытии появляется синхронно с
+  // `isOpen` — если монтировать его эффектом, первый кадр раскрытия считается по пустому телу
+  // и высота стартует рывком.
+  const [keepMountedWhileClosing, setKeepMountedWhileClosing] = useState(false);
+  const isMounted = isOpen || keepMounted || keepMountedWhileClosing;
+  const [isCompletelyOpen, setIsCompletelyOpen] = useState(isOpen);
+  const [isCompletelyClose, setIsCompletelyClose] = useState(!isOpen);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setKeepMountedWhileClosing(true);
+      setIsCompletelyClose(false);
+      timeoutRef.current = setTimeout(() => {
+        setIsCompletelyOpen(true);
+      }, ANIMATION_DURATION);
+    } else {
+      setIsCompletelyOpen(false);
+      timeoutRef.current = setTimeout(() => {
+        setIsCompletelyClose(true);
+        setKeepMountedWhileClosing(false);
+      }, ANIMATION_DURATION);
+    }
+
+    return () => {
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+    };
+  }, [isOpen, keepMounted]);
+
+  return {
+    isOpen,
+    isMounted,
+    toggleOpen,
+    isCompletelyOpen,
+    isCompletelyClose,
+  };
+}

package/src/components/CollapseBlock/index.ts

@@ -0,0 +1 @@
+export * from './CollapseBlock';

package/src/components/CollapseBlock/styles.module.scss

@@ -0,0 +1,207 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/accordion.module' as accordion;
+@use '@cloud-ru/ds-materials' as m;
+
+$components: 'accordionPrimary', 'accordionSecondary', 'accordionTertiary';
+
+.acrylic {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.stateLayer {
+  visibility: initial;
+}
+
+.wrapper {
+  @each $component in $components {
+    &[data-component='#{$component}'] {
+      @include base.composite-var(accordion.$accordion, 'anatomy', $component, 'container');
+
+      // Нижний отступ карточки одинаков в закрытом и открытом состоянии (в Figma закрытому его
+      // даёт titleContent, открытому — bodyContent, и это один и тот же токен). Держим его на
+      // обёртке: если переключать между заголовком и телом, два padding'а анимируются навстречу
+      // друг другу и суммарная высота блока идёт не монотонно — на старте проседает, в конце прыгает.
+      padding-bottom: base.simple-var(
+        accordion.$accordion,
+        'anatomy',
+        $component,
+        'container',
+        'bodyContent',
+        'padding-bottom'
+      );
+    }
+  }
+
+  position: relative;
+  display: block;
+  flex-direction: column;
+  align-self: stretch;
+
+  &[data-component='accordionPrimary'],
+  &[data-component='accordionSecondary'] {
+    @include m.with-material('acrylic', #{acrylic});
+
+    &[data-view='elevated'] {
+      box-shadow: base.$sn-boxShadow-elevation-level2;
+    }
+
+    &[data-view='simple'],
+    &[data-view='elevated'] {
+      &:hover,
+      &:focus-within {
+        box-shadow: base.$sn-boxShadow-elevation-level3;
+      }
+    }
+
+    &[data-view='outline'] {
+      @include m.has-state-layer-as-child(#{stateLayer});
+    }
+  }
+}
+
+.titleWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 100%;
+  min-width: 0;
+}
+
+// Цвет заголовка (типографику даёт Typography variant='title').
+.title {
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+// Подзаголовок — обычный div: задаём и типографику body-m, и цвет.
+.subTitle {
+  @include base.composite-var(base.$sn-regular, 'body', 'm');
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.titleContent {
+  @each $component in $components {
+    [data-component='#{$component}'] & {
+      @include base.composite-var(accordion.$accordion, 'anatomy', $component, 'container', 'titleContent');
+
+      // Нижний отступ живёт на `.wrapper` — заголовок его не дублирует.
+      padding-bottom: 0;
+    }
+  }
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+
+  &[data-chevron-position='before'] {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+}
+
+.afterTitle {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  min-width: 0;
+}
+
+.chevronWrapper {
+  @each $component in $components {
+    [data-component='#{$component}'] & {
+      @include base.composite-var(
+        accordion.$accordion,
+        'anatomy',
+        $component,
+        'container',
+        'titleContent',
+        'chevronWrapper'
+      );
+    }
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titleLine {
+  display: flex;
+  align-items: center;
+
+  @each $component in $components {
+    [data-component='#{$component}'] & {
+      @include base.composite-var(
+        accordion.$accordion,
+        'anatomy',
+        $component,
+        'container',
+        'titleContent',
+        'titleWrapper',
+        'titleLine'
+      );
+    }
+  }
+}
+
+.collapse {
+  position: relative;
+
+  display: grid;
+  grid-template-rows: 0fr;
+
+  box-sizing: border-box;
+
+  transition: grid-template-rows var(--sn-collapse-block-animation-duration, 300ms) ease-out;
+
+  &[data-expanded] {
+    grid-template-rows: 1fr;
+  }
+}
+
+.container {
+  @each $component in $components {
+    [data-component='#{$component}'] & {
+      box-sizing: border-box;
+
+      @include base.composite-var(accordion.$accordion, 'anatomy', $component, 'container', 'bodyContent');
+
+      // Вертикальные отступы тела схлопываются вместе с ним: `grid-template-rows: 0fr` обнуляет
+      // только content-box, padding остаётся и держит лишнюю высоту до размонтирования контента —
+      // в конце закрытия блок проседал ступенькой.
+      &:not([data-expanded]) {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      // Нижний отступ карточки уже на `.wrapper` — тело его не дублирует.
+      &[data-expanded] {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  min-height: 0;
+
+  transition:
+    padding-top var(--sn-collapse-block-animation-duration, 300ms) ease-out,
+    padding-bottom var(--sn-collapse-block-animation-duration, 300ms) ease-out;
+
+  &.containerCompletelyOpen {
+    overflow: visible;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './CollapseBlock';

package/src/constants.ts

@@ -0,0 +1,26 @@
+export const VIEW = {
+  Simple: 'simple',
+  Outline: 'outline',
+  Elevated: 'elevated',
+} as const;
+
+export const CHEVRON_POSITION = {
+  Before: 'before',
+  After: 'after',
+} as const;
+
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;
+
+export const TEST_IDS = {
+  collapseBlock: 'accordion__collapse-block',
+  chevron: 'accordion__collapse-block__chevron',
+  title: 'accordion__collapse-block__title',
+  subTitle: 'accordion__collapse-block__sub-title',
+  content: 'accordion__collapse-block__content',
+  afterTitle: 'accordion__collapse-block__after-title',
+};
+
+export const ANIMATION_DURATION = 300;

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './components';
+export * from './constants';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { CHEVRON_POSITION, SELECTION_MODE, VIEW } from './constants';
+
+export type View = ValueOf<typeof VIEW>;
+
+export type ChevronPosition = ValueOf<typeof CHEVRON_POSITION>;
+
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;