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

package/dist/helperComponents/CollapseBlockHeader/styles.module.css

@@ -0,0 +1,16 @@
+.headline{
+  gap:var(--space-accordion-collapse-block-title-headline-gap, 4px);
+  display:flex;
+  align-items:center;
+  max-width:100%;
+}
+
+.title{
+  max-width:100%;
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.subtitle{
+  max-width:100%;
+  color:var(--sys-neutral-text-support, #565656);
+}

package/dist/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type CollapseBlockHeaderContainerProps = {
+    children: ReactNode;
+    toggleExpanded(): void;
+    expanded: boolean;
+    actions?: ReactNode;
+};
+export declare function CollapseBlockHeaderContainer({ children, toggleExpanded, expanded, actions, }: CollapseBlockHeaderContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronDownSVG } from '@snack-uikit/icons';
+import { TEST_IDS } from '../../testIds';
+import styles from './styles.module.css';
+export function CollapseBlockHeaderContainer({ children, toggleExpanded, expanded, actions, }) {
+    const functionLayoutRef = useRef(null);
+    const [width, setWidth] = useState('0px');
+    useEffect(() => {
+        setWidth(() => {
+            if (functionLayoutRef.current) {
+                return getComputedStyle(functionLayoutRef.current, null).getPropertyValue('width');
+            }
+            return '0px';
+        });
+    }, [functionLayoutRef]);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", Object.assign({ className: styles.header, "data-test-id": TEST_IDS.header, onClick: toggleExpanded }, { children: [_jsx("div", Object.assign({ className: styles.text, style: { '--width': width } }, { children: children })), _jsxs("div", Object.assign({ className: styles.functionLayout, ref: functionLayoutRef }, { children: [actions, _jsx(ButtonFunction, { className: styles.button, "data-expanded": expanded || undefined, icon: _jsx(ChevronDownSVG, {}), size: ButtonFunction.sizes.Xs, "data-test-id": TEST_IDS.chevron })] }))] })));
+}

package/dist/helperComponents/CollapseBlockHeaderContainer/index.d.ts

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

package/dist/helperComponents/CollapseBlockHeaderContainer/index.js

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

package/dist/helperComponents/CollapseBlockHeaderContainer/styles.module.css

@@ -0,0 +1,31 @@
+.button[data-expanded] svg{
+  transform:rotate(180deg);
+}
+
+.header{
+  gap:var(--space-accordion-collapse-block-title-gap, 16px);
+  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);
+}
+.header > *{
+  cursor:pointer;
+}
+.header:hover .button span{
+  color:var(--sys-neutral-accent-hovered, #666666);
+}
+
+.text{
+  display:flex;
+  flex-direction:column;
+  max-width:calc(100% - var(--width, 0px) - var(--space-accordion-collapse-block-title-gap, 16px));
+}
+
+.functionLayout{
+  gap:var(--space-accordion-collapse-block-title-function-layout, 8px);
+  display:flex;
+  flex-shrink:0;
+}

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CollapseBlockPrivateProps = WithSupportProps<{
+    children: ReactNode;
+    header: ReactNode;
+    expanded: boolean;
+    className?: string;
+}>;
+export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../testIds';
+import styles from './styles.module.css';
+export function CollapseBlockPrivate(_a) {
+    var { children, expanded, className, header } = _a, rest = __rest(_a, ["children", "expanded", "className", "header"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), 
+        // eslint-disable-next-line jsx-a11y/aria-role
+        role: 'accordion', "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", Object.assign({ className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content }, { children: _jsx("div", Object.assign({ className: styles.content, "data-content": true }, { children: children })) }))] })));
+}

package/dist/helperComponents/CollapseBlockPrivate/index.d.ts

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

package/dist/helperComponents/CollapseBlockPrivate/index.js

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

package/dist/helperComponents/CollapseBlockPrivate/styles.module.css

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

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/testIds.d.ts

@@ -0,0 +1,11 @@
+export declare const TEST_IDS: {
+    accordion: string;
+    tooltip: string;
+    chevron: string;
+    title: string;
+    description: string;
+    content: string;
+    collapseBlock: string;
+    header: string;
+    actions: string;
+};

package/dist/testIds.js

@@ -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/dist/types.d.ts

@@ -0,0 +1,39 @@
+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;
+});

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@snack-uikit/accordion",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Accordion",
+  "version": "0.3.4-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/accordion",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/accordion"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/toggles": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/tooltip": "0.8.1-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/AccordionPrimary/AccordionPrimary.tsx

@@ -0,0 +1,13 @@
+import cn from 'classnames';
+
+import { ToggleGroup } from '@snack-uikit/toggles';
+
+import { Accordion } from '../../helperComponents';
+import { AccordionProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function AccordionPrimary({ className, ...rest }: AccordionProps) {
+  return <Accordion className={cn(styles.accordionPrimary, className)} {...rest} />;
+}
+
+AccordionPrimary.selectionModes = ToggleGroup.selectionModes;

package/src/components/AccordionPrimary/index.ts

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

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

@@ -0,0 +1,11 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.accordionPrimary {
+  --accordion-header-padding-horizontal: #{$space-accordion-collapse-block-primary-horizontal-padding};
+  --accordion-header-padding-vertical: #{$space-accordion-collapse-block-primary-vertical-padding};
+
+  @include composite-var($accordion-primary);
+
+  display: flex;
+  flex-direction: column;
+}

package/src/components/AccordionSecondary/AccordionSecondary.tsx

@@ -0,0 +1,13 @@
+import cn from 'classnames';
+
+import { ToggleGroup } from '@snack-uikit/toggles';
+
+import { Accordion } from '../../helperComponents';
+import { AccordionProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function AccordionSecondary({ className, ...rest }: AccordionProps) {
+  return <Accordion className={cn(styles.accordionSecondary, className)} {...rest} />;
+}
+
+AccordionSecondary.selectionModes = ToggleGroup.selectionModes;

package/src/components/AccordionSecondary/index.ts

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

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

@@ -0,0 +1,11 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.accordionSecondary {
+  --accordion-header-padding-horizontal: #{$space-accordion-collapse-block-secondary-horizontal-padding};
+  --accordion-header-padding-vertical: #{$space-accordion-collapse-block-secondary-vertical-padding};
+
+  @include composite-var($accordion-secondary);
+
+  display: flex;
+  flex-direction: column;
+}

package/src/components/CollapseBlockPrimary/CollapseBlockPrimary.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames';
+
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { CollapseBlockProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function CollapseBlockPrimary({ id, header, children, actions, className, ...rest }: CollapseBlockProps) {
+  const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+
+  return (
+    <CollapseBlockPrivate
+      className={cn(styles.container, className)}
+      header={
+        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
+          {header}
+        </CollapseBlockHeaderContainer>
+      }
+      expanded={isExpanded}
+      {...extractSupportProps(rest)}
+    >
+      {children}
+    </CollapseBlockPrivate>
+  );
+}

package/src/components/CollapseBlockPrimary/index.ts

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

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

@@ -0,0 +1,14 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.container {
+  @include composite-var($collapse-block-container-primary);
+
+  max-width: 100%;
+  background-color: $sys-neutral-background1-level;
+
+  &:focus-within,
+  &:hover{
+    background-color: $sys-neutral-background2-level;
+    box-shadow: $box-shadow-elevation-level2;
+  }
+}

package/src/components/CollapseBlockSecondary/CollapseBlockSecondary.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames';
+
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
+import { CollapseBlockProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function CollapseBlockSecondary({ header, children, id, actions, className, ...rest }: CollapseBlockProps) {
+  const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
+
+  return (
+    <CollapseBlockPrivate
+      className={cn(styles.container, className)}
+      header={
+        <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
+          {header}
+        </CollapseBlockHeaderContainer>
+      }
+      expanded={isExpanded}
+      {...extractSupportProps(rest)}
+    >
+      {children}
+    </CollapseBlockPrivate>
+  );
+}

package/src/components/CollapseBlockSecondary/index.ts

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

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

@@ -0,0 +1,18 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.container {
+  @include composite-var($collapse-block-container-secondary);
+
+  box-sizing: border-box;
+  max-width: 100%;
+
+  border-color: $sys-neutral-decor-default;
+  border-style: solid;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+
+  &:hover {
+    border-color: $sys-neutral-accent-hovered;
+  }
+} 

package/src/components/index.ts

@@ -0,0 +1,21 @@
+import { CollapseBlockHeader } from '../helperComponents';
+import { AccordionPrimary as AccordionPrimaryComponent } from './AccordionPrimary';
+import { AccordionSecondary as AccordionSecondaryComponent } from './AccordionSecondary';
+import { CollapseBlockPrimary } from './CollapseBlockPrimary';
+import { CollapseBlockSecondary } from './CollapseBlockSecondary';
+
+export const AccordionPrimary = AccordionPrimaryComponent as typeof AccordionPrimaryComponent & {
+  CollapseBlock: typeof CollapseBlockPrimary;
+  CollapseBlockHeader: typeof CollapseBlockHeader;
+};
+
+AccordionPrimary.CollapseBlock = CollapseBlockPrimary;
+AccordionPrimary.CollapseBlockHeader = CollapseBlockHeader;
+
+export const AccordionSecondary = AccordionSecondaryComponent as typeof AccordionSecondaryComponent & {
+  CollapseBlock: typeof CollapseBlockSecondary;
+  CollapseBlockHeader: typeof CollapseBlockHeader;
+};
+
+AccordionSecondary.CollapseBlock = CollapseBlockSecondary;
+AccordionSecondary.CollapseBlockHeader = CollapseBlockHeader;

package/src/helperComponents/Accordion/Accordion.tsx

@@ -0,0 +1,29 @@
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { AccordionProps } from '../../types';
+
+export function Accordion({
+  children,
+  expanded,
+  onExpandedChange,
+  expandedDefault,
+  selectionMode = ToggleGroup.selectionModes.Single,
+  className,
+  ...rest
+}: AccordionProps) {
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <ToggleGroup
+      value={expanded}
+      defaultValue={expandedDefault}
+      onChange={onExpandedChange}
+      selectionMode={selectionMode}
+    >
+      <div className={className} {...extractSupportProps(rest)}>
+        {children}
+      </div>
+    </ToggleGroup>
+  );
+}

package/src/helperComponents/Accordion/index.ts

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

package/src/helperComponents/CollapseBlockHeader/CollapseBlockHeader.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../testIds';
+import styles from './styles.module.scss';
+
+export type CollapseBlockHeaderProps = WithSupportProps<{
+  title: string;
+  description?: string;
+  tip?: ReactNode;
+}>;
+
+export function CollapseBlockHeader({ title, description, tip }: CollapseBlockHeaderProps) {
+  return (
+    <>
+      <div className={styles.headline}>
+        <Typography.SansTitleM className={styles.title} data-test-id={TEST_IDS.title}>
+          <TruncateString text={title} maxLines={1} />
+        </Typography.SansTitleM>
+
+        {tip && <QuestionTooltip size={QuestionTooltip.sizes.S} tip={tip} triggerDataTestId={TEST_IDS.tooltip} />}
+      </div>
+
+      {description && (
+        <Typography.SansBodyM className={styles.subtitle} data-test-id={TEST_IDS.description}>
+          <TruncateString text={description} maxLines={2} />
+        </Typography.SansBodyM>
+      )}
+    </>
+  );
+}

package/src/helperComponents/CollapseBlockHeader/index.ts

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

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

@@ -0,0 +1,19 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-accordion';
+
+.headline {
+  @include composite-var($collapse-block-container-header-headline);
+
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.title {
+  max-width: 100%;
+  color: $sys-neutral-text-main;
+}
+
+.subtitle {
+  max-width: 100%;
+  color: $sys-neutral-text-support;
+}

package/src/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.tsx

@@ -0,0 +1,56 @@
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronDownSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../testIds';
+import styles from './styles.module.scss';
+
+export type CollapseBlockHeaderContainerProps = {
+  children: ReactNode;
+  toggleExpanded(): void;
+  expanded: boolean;
+  actions?: ReactNode;
+};
+
+export function CollapseBlockHeaderContainer({
+  children,
+  toggleExpanded,
+  expanded,
+  actions,
+}: CollapseBlockHeaderContainerProps) {
+  const functionLayoutRef = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState<string>('0px');
+
+  useEffect(() => {
+    setWidth(() => {
+      if (functionLayoutRef.current) {
+        return getComputedStyle(functionLayoutRef.current, null).getPropertyValue('width');
+      }
+
+      return '0px';
+    });
+  }, [functionLayoutRef]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div className={styles.header} data-test-id={TEST_IDS.header} onClick={toggleExpanded}>
+      <div className={styles.text} style={{ '--width': width }}>
+        {children}
+      </div>
+
+      <div className={styles.functionLayout} ref={functionLayoutRef}>
+        {actions}
+
+        <ButtonFunction
+          className={styles.button}
+          data-expanded={expanded || undefined}
+          icon={<ChevronDownSVG />}
+          size={ButtonFunction.sizes.Xs}
+          data-test-id={TEST_IDS.chevron}
+        />
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/CollapseBlockHeaderContainer/index.ts

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