@snack-uikit/accordion 0.3.4-preview-85c5f47b.0

package/src/helperComponents/CollapseBlockHeaderContainer/styles.module.scss

@@ -0,0 +1,47 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.button {
+  &[data-expanded] {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.header {
+  @include composite-var($collapse-block-container-header-container);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  margin: calc(0px - var(--accordion-header-padding-vertical, 0px)) calc(0px - var(--accordion-header-padding-horizontal, 0px));
+  padding: var(--accordion-header-padding-vertical, 0px) var(--accordion-header-padding-horizontal, 0px);
+  
+  > * {
+    cursor: pointer;
+  }
+
+  &:hover {
+    .button  { 
+      span {
+        color: $sys-neutral-accent-hovered;
+      }
+    }
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - var(--width, 0px) - $space-accordion-collapse-block-title-gap);
+}
+
+.functionLayout {
+  @include composite-var($collapse-block-container-header-function-layout);
+
+  display: flex;
+  flex-shrink: 0;
+}

package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx

@@ -0,0 +1,34 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../testIds';
+import styles from './styles.module.scss';
+
+export type CollapseBlockPrivateProps = WithSupportProps<{
+  children: ReactNode;
+  header: ReactNode;
+  expanded: boolean;
+  className?: string;
+}>;
+
+export function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps) {
+  return (
+    <div
+      className={cn(styles.accordion, className)}
+      // eslint-disable-next-line jsx-a11y/aria-role
+      role='accordion'
+      aria-expanded={expanded}
+      {...extractSupportProps(rest)}
+    >
+      {header}
+
+      <div className={styles.contentWrapper} aria-hidden={!expanded} data-test-id={TEST_IDS.content}>
+        <div className={styles.content} data-content>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/CollapseBlockPrivate/index.ts

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

package/src/helperComponents/CollapseBlockPrivate/styles.module.scss

@@ -0,0 +1,50 @@
+$duration: 300ms;
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  transition: gap $duration;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+  
+  &[aria-expanded='false'] {
+    gap: 0
+  }
+}
+
+.contentWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  transition: grid-template-rows $duration;
+
+  &[aria-hidden='true'] {
+    overflow: hidden;
+  }
+
+  &[aria-hidden='false'] {
+    grid-template-rows: 1fr;
+
+    >div[data-content] {
+      visibility: visible;
+    }
+  }
+}
+
+.content {
+  overflow: hidden;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+
+  visibility: hidden;
+
+  transition: visibility $duration;  
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './CollapseBlockPrivate';
+export * from './CollapseBlockHeader';
+export * from './Accordion';
+export * from './CollapseBlockHeaderContainer';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/src/testIds.ts

@@ -0,0 +1,11 @@
+export const TEST_IDS = {
+  accordion: 'accordion',
+  tooltip: 'accordion__collapse-block__tooltip',
+  chevron: 'accordion__collapse-block__chevron',
+  title: 'accordion__collapse-block__title',
+  description: 'accordion__collapse-block__description',
+  content: 'accordion__collapse-block__content',
+  collapseBlock: 'accordion__collapse-block',
+  header: 'accordion__collapse-block__header',
+  actions: 'accordion__collapse-block__actions',
+};

package/src/types.ts

@@ -0,0 +1,46 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+export type CollapseBlockProps = WithSupportProps<{
+  /** Уникальный id блока */
+  id: string;
+  /** Заголовок */
+  header: ReactNode;
+  /** Дополнительные действия */
+  actions?: ReactNode;
+  /** Вложенный контент */
+  children: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+export type AccordionProps = WithSupportProps<{
+  /** Вложенный контент */
+  children: ReactElement<CollapseBlockProps> | ReactElement<CollapseBlockProps>[];
+  /** CSS-класс */
+  className?: string;
+}> &
+  (
+    | {
+        /** Начальное состояние */
+        expandedDefault?: string;
+        /** Controlled состояние */
+        expanded?: string;
+        /** Controlled обработчик измения состояния */
+        onExpandedChange?(value: (string | undefined) | string): void;
+        /** Режим работы аккордиона */
+        selectionMode?: typeof ToggleGroup.selectionModes.Single;
+      }
+    | {
+        /** Начальное состояние */
+        expandedDefault?: string[];
+        /** Controlled состояние */
+        expanded?: string[];
+        /** Controlled обработчик измения состояния */
+        onExpandedChange?(value: (string[] | undefined) | string[]): void;
+        /** Режим работы аккордиона */
+        selectionMode: typeof ToggleGroup.selectionModes.Multiple;
+      }
+  );