@cloud-ru/uikit-product-site-section 0.23.3

package/src/components/SectionAccordion/SectionAccordion.tsx

@@ -0,0 +1,99 @@
+import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { AccordionPrimary } from '@snack-uikit/accordion';
+import { Typography } from '@snack-uikit/typography';
+
+import { SectionColor } from '../../types';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.scss';
+import { AccordionItem } from './types';
+import { getBlockDescriptionSize, getBlockTitleProps } from './utils';
+
+// Had to copy props to save proper typings
+type AccordionPropsCopy =
+  | {
+      selectionMode: 'single';
+      expandedDefault?: string;
+      onExpandedChange?(value?: string): void;
+    }
+  | {
+      selectionMode: 'multiple';
+      expandedDefault?: string[];
+      onExpandedChange?(value?: string[]): void;
+    };
+
+export type SectionAccordionProps = WithSupportProps<
+  AccordionPropsCopy &
+    WithLayoutType<{
+      /** id секции */
+      id?: string;
+      /** Название секции */
+      title: string;
+      /** Массив айтемов */
+      items: AccordionItem[];
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+      /** Внешний бордер для блоков */
+      outline?: boolean;
+      /** CSS-класс */
+      className?: string;
+    }>
+>;
+
+export function SectionAccordion({
+  id,
+  title,
+  items,
+  selectionMode = 'multiple',
+  layoutType,
+  backgroundColor,
+  outline,
+  onExpandedChange,
+  expandedDefault,
+  className,
+  ...rest
+}: SectionAccordionProps) {
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      layoutType={layoutType}
+      backgroundColor={backgroundColor}
+      {...extractSupportProps(rest)}
+    >
+      {/* @ts-expect-error types mismatch because of union */}
+      <AccordionPrimary
+        selectionMode={selectionMode}
+        expandedDefault={expandedDefault}
+        onExpandedChange={onExpandedChange}
+        className={styles.accordion}
+      >
+        {items.map(({ title, description, onClick }, index) => (
+          <AccordionPrimary.CollapseBlock
+            key={index}
+            id={index.toString()}
+            header={
+              <Typography family='sans' {...getBlockTitleProps(layoutType)} className={styles.title}>
+                <RichText richText={title} />
+              </Typography>
+            }
+            className={className}
+            removeContentFromDOM={false}
+            outline={outline}
+            onClick={onClick}
+          >
+            <Typography
+              family='sans'
+              purpose='body'
+              tag='div'
+              size={getBlockDescriptionSize(layoutType)}
+              className={styles.description}
+            >
+              <RichText richText={description} />
+            </Typography>
+          </AccordionPrimary.CollapseBlock>
+        ))}
+      </AccordionPrimary>
+    </SectionBasic>
+  );
+}

package/src/components/SectionAccordion/index.ts

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

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

@@ -0,0 +1,13 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.accordion {
+  gap: 1px;
+}
+
+.description {
+  color: ste.$sys-neutral-text-support;
+}
+
+.title {
+  color: ste.$sys-neutral-text-main;
+}

package/src/components/SectionAccordion/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import { CollapseBlockPrimaryProps } from '@snack-uikit/accordion';
+
+/** Элемент аккордиона */
+export type AccordionItem = Pick<CollapseBlockPrimaryProps, 'onClick'> & {
+  /** Заголовок блока */
+  title: string;
+  /** Описание блока (rich text) */
+  description: string | ReactNode;
+};

package/src/components/SectionAccordion/utils.ts

@@ -0,0 +1,29 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getBlockTitleProps = (layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> => {
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return {
+        purpose: 'title',
+        size: 'm',
+      };
+
+    default:
+      return {
+        purpose: 'headline',
+        size: 's',
+      };
+  }
+};
+
+export const getBlockDescriptionSize = (layoutType: LayoutType): TypographyProps['size'] => {
+  switch (layoutType) {
+    case 'tablet':
+    case 'mobile':
+      return 'm';
+    default:
+      return 'l';
+  }
+};

package/src/components/SectionBasic/SectionBasic.tsx

@@ -0,0 +1,157 @@
+import cn from 'classnames';
+import { MouseEvent, MouseEventHandler, ReactNode, useState } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldSelect, FieldSelectProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { Layout } from '@cloud-ru/uikit-product-site-layout';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonOutline } from '@snack-uikit/button';
+import { Pagination, PaginationProps } from '@snack-uikit/pagination';
+import { Tabs } from '@snack-uikit/tabs';
+
+import { SECTION_COLORS } from '../../constants';
+import { SectionTitle, SectionTitleProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+import styles from './styles.module.scss';
+
+type TabBarItem = WithSupportProps<{
+  value: string;
+  label: string;
+  disabled?: boolean;
+  className?: string;
+  counter?: number;
+  onClick?(event: MouseEvent<HTMLButtonElement>): void;
+}>;
+
+export type SectionBasicProps = WithLayoutType<
+  WithSupportProps<
+    Pick<
+      SectionTitleProps,
+      'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'subtitleTag' | 'titleAlign'
+    > & {
+      /** id секции */
+      id?: string;
+      children: ReactNode;
+      /** Массив табов */
+      tabBarItems?: TabBarItem[];
+      /** Массив фильтров */
+      filterItems?: FieldSelectProps[];
+      /** Настройки пагинации */
+      pagination?: PaginationProps;
+      /** Цвет фона */
+      backgroundColor?: SectionColor;
+      /** CSS-класс */
+      className?: string;
+      /** Кнопка внизу секции */
+      moreButton?: {
+        label?: string;
+        href?: string;
+        onClick: MouseEventHandler<HTMLElement>;
+        'data-test-id'?: string;
+      };
+    }
+  >
+>;
+
+const getInitialTab = (tabBarItems?: TabBarItem[]) => {
+  if (!tabBarItems || tabBarItems.length < 1) {
+    return undefined;
+  }
+
+  const [firstTab] = tabBarItems;
+  return firstTab.value;
+};
+
+export function SectionBasic({
+  id,
+  children,
+  title,
+  subtitle,
+  description,
+  titleSectionSize = 'm',
+  titleTag,
+  subtitleTag,
+  tabBarItems,
+  filterItems,
+  moreButton,
+  className,
+  pagination,
+  backgroundColor = SECTION_COLORS.NeutralBackground1Level,
+  layoutType,
+  titleAlign,
+  ...rest
+}: SectionBasicProps) {
+  const [currentTab, setCurrentTab] = useState<string | undefined>(getInitialTab(tabBarItems));
+  const { t } = useLocale('SiteSection');
+  const showFooter = Boolean(pagination || moreButton);
+
+  return (
+    <Layout.SectionWrapper
+      id={id}
+      layoutType={layoutType}
+      className={cn(className, styles.wrapper)}
+      data-section-background={backgroundColor}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.sectionBasic} data-layout-type={layoutType}>
+        <SectionTitle
+          layoutType={layoutType}
+          title={title}
+          description={description}
+          titleSectionSize={titleSectionSize}
+          titleTag={titleTag}
+          titleAlign={titleAlign}
+          subtitle={subtitle}
+          subtitleTag={subtitleTag}
+        />
+
+        {tabBarItems?.length && (
+          <div className={styles.sectionTabs}>
+            <Tabs value={currentTab} onChange={setCurrentTab}>
+              <Tabs.TabBar>
+                {tabBarItems.map(tabProps => (
+                  <Tabs.Tab key={tabProps.value} {...tabProps} />
+                ))}
+              </Tabs.TabBar>
+            </Tabs>
+          </div>
+        )}
+
+        {filterItems?.length && (
+          <div className={styles.sectionFilters} data-layout-type={layoutType}>
+            {filterItems.map(filterProps => (
+              <AdaptiveFieldSelect
+                key={filterProps.id}
+                {...filterProps}
+                className={cn(filterProps.className, styles.filter)}
+                layoutType={layoutType}
+                size='l'
+              />
+            ))}
+          </div>
+        )}
+
+        {children}
+
+        {showFooter && (
+          <div className={styles.footer} data-layout-type={layoutType}>
+            {pagination && <Pagination {...pagination} />}
+            {moreButton && (
+              <ButtonOutline
+                className={styles.showMoreButton}
+                label={moreButton.label ?? t('Basic.showMore')}
+                onClick={moreButton.onClick}
+                href={moreButton.href}
+                data-test-id={moreButton['data-test-id'] ?? 'section__more-btn'}
+                appearance='neutral'
+                size='l'
+                type='button'
+                data-layout-type={layoutType}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </Layout.SectionWrapper>
+  );
+}

package/src/components/SectionBasic/index.ts

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

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

@@ -0,0 +1,88 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.sectionBasic {
+  display: flex;
+  flex-direction: column;
+
+  gap: var.$dimension-5m;
+  padding: var.$dimension-7m 0;
+
+  &[data-layout-type='tablet'] {
+    gap: var.$dimension-4m;
+    padding: var.$dimension-5m 0;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: var.$dimension-3m;
+    padding: var.$dimension-4m 0;
+  }
+}
+
+.wrapper {
+  &[data-section-background='neutral-background1-level'] {
+    background-color: var.$sys-neutral-background1-level;
+  }
+
+  &[data-section-background='neutral-background'] {
+    background-color: var.$sys-neutral-background;
+  }
+}
+
+.sectionTitle {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-1m;
+}
+
+.title {
+  color: var.$sys-neutral-text-main;
+}
+
+.description {
+  color: var.$sys-neutral-text-support;
+}
+
+.sectionTabs {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-4m;
+  color: var.$sys-neutral-text-main;
+}
+
+.sectionFilters {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var.$dimension-4m;
+
+  &[data-layout-type='tablet'] {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var.$dimension-2m;
+  }
+
+  &[data-layout-type='mobile'] {
+    grid-template-columns: repeat(1, 1fr);
+    gap: var.$dimension-3m;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: var.$dimension-5m;
+
+  &[data-layout-type='tablet'] {
+    gap: var.$dimension-4m;
+  }
+
+  &[data-layout-type='mobile'] {
+    gap: var.$dimension-3m;
+  }
+}
+
+.showMoreButton {
+  &[data-layout-type='mobile'] {
+    width: 100%;
+  }
+}

package/src/components/SectionBenefits/SectionBenefits.tsx

@@ -0,0 +1,163 @@
+import { MouseEvent, useMemo, useState } from 'react';
+
+import { CardBasic, CardInfo, CardProduct } from '@cloud-ru/uikit-product-site-cards';
+import { Grid, GridProps } from '@cloud-ru/uikit-product-site-grid';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import { SectionButton, SectionTitleProps } from '../../helperComponents';
+import { SectionButtonProps } from '../../helperComponents/SectionButton/types';
+import { SectionColor } from '../../types';
+import { SectionBasic } from '../SectionBasic';
+import { CardNumeric } from './components';
+import styles from './styles.module.scss';
+import { ContentBasic, ContentInfo, ContentNumeric, ContentProduct } from './types';
+
+export type SectionBenefitsProps = WithSupportProps<
+  WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** Название секции */
+    title?: string;
+    /** Название подзаголовка секции */
+    subtitle?: string;
+    /** Цвет фона секции */
+    backgroundColor?: SectionColor;
+    /** Тег заголовка */
+    titleTag?: SectionTitleProps['titleTag'];
+    /** Тег заголовка */
+    subtitleTag?: SectionTitleProps['subtitleTag'];
+    /** Описание секции */
+    description?: string;
+    /** Конфигурация настройки колонок для разных layoutType */
+    columnsConfig: GridProps['columnsConfig'];
+    /** Текст нижней сноски */
+    note?: string;
+
+    buttons?: SectionButtonProps[];
+    /**
+     * Выравнивание кнопок по горизонтали
+     * @default 'left'
+     */
+    buttonsAlign?: 'left' | 'center';
+  }>
+> &
+  (ContentBasic | ContentInfo | ContentNumeric | ContentProduct);
+
+export function SectionBenefits({
+  id,
+  title,
+  titleTag,
+  subtitle,
+  subtitleTag,
+  description,
+  type,
+  content,
+  tabBarItems,
+  columnsConfig,
+  layoutType,
+  buttons,
+  note,
+  backgroundColor,
+  buttonsAlign = 'left',
+  ...rest
+}: SectionBenefitsProps) {
+  const [activeTab, setActiveTab] = useState(tabBarItems && tabBarItems[0].value);
+
+  const tabs = useMemo(
+    () =>
+      tabBarItems?.map(tab => ({
+        ...tab,
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          setActiveTab(tab.value);
+          tab.onClick?.(e);
+        },
+      })),
+    [tabBarItems],
+  );
+
+  const outline = (rest as ContentInfo).outline;
+  const gap = type === 'basic' ? 'l' : 's';
+  const backgroundColorSection = type === 'basic' || outline ? 'neutral-background1-level' : 'neutral-background';
+
+  return (
+    <SectionBasic
+      id={id}
+      title={title}
+      titleTag={titleTag}
+      subtitle={subtitle}
+      subtitleTag={subtitleTag}
+      description={description}
+      layoutType={layoutType}
+      backgroundColor={backgroundColor || backgroundColorSection}
+      tabBarItems={tabs}
+      {...extractSupportProps(rest)}
+    >
+      {!tabBarItems && (
+        <Grid layoutType={layoutType} columnsConfig={columnsConfig} gap={gap}>
+          {type === 'info' &&
+            content.map((item, index) => <CardInfo key={index} {...item} outline={outline} layoutType={layoutType} />)}
+
+          {type === 'numeric' &&
+            content.map((item, index) => (
+              <CardNumeric key={index} {...item} number={index + 1} layoutType={layoutType} />
+            ))}
+
+          {type === 'product' &&
+            content.map((item, index) => <CardProduct key={index} {...item} layoutType={layoutType} />)}
+
+          {type === 'basic' &&
+            content.map((item, index) => <CardBasic key={index} {...item} layoutType={layoutType} />)}
+        </Grid>
+      )}
+
+      {tabBarItems && (
+        <Grid layoutType={layoutType} columnsConfig={columnsConfig} gap={gap}>
+          {type === 'info' &&
+            content
+              .filter(({ tabValue }) => tabValue === activeTab)
+              .map(({ cards }) =>
+                cards.map((card, index) => (
+                  <CardInfo key={index} layoutType={layoutType} {...card} outline={outline} />
+                )),
+              )}
+
+          {type === 'numeric' &&
+            content
+              .filter(({ tabValue }) => tabValue === activeTab)
+              .map(({ cards }) =>
+                cards.map((card, index) => (
+                  <CardNumeric key={index} layoutType={layoutType} {...card} number={index + 1} />
+                )),
+              )}
+
+          {type === 'product' &&
+            content
+              .filter(({ tabValue }) => tabValue === activeTab)
+              .map(({ cards }) =>
+                cards.map((card, index) => <CardProduct key={index} layoutType={layoutType} {...card} />),
+              )}
+
+          {type === 'basic' &&
+            content
+              .filter(({ tabValue }) => tabValue === activeTab)
+              .map(({ cards }) =>
+                cards.map((card, index) => <CardBasic key={index} layoutType={layoutType} {...card} />),
+              )}
+        </Grid>
+      )}
+
+      {note && (
+        <Typography.SansBodyM className={styles.note}>
+          <span dangerouslySetInnerHTML={{ __html: note }} />
+        </Typography.SansBodyM>
+      )}
+
+      {buttons && (
+        <div className={styles.buttons} data-buttons-align={buttonsAlign}>
+          {buttons.map(button => SectionButton(button))}
+        </div>
+      )}
+    </SectionBasic>
+  );
+}

package/src/components/SectionBenefits/components/CardNumeric/CardNumeric.tsx

@@ -0,0 +1,17 @@
+import { CardInfo, CardInfoProps } from '@cloud-ru/uikit-product-site-cards';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type CardNumericProps = Omit<CardInfoProps, 'icon'> & {
+  number: number;
+};
+
+export function CardNumeric({ number, ...props }: CardNumericProps) {
+  return (
+    <CardInfo
+      {...props}
+      icon={<Typography.SansHeadlineM className={styles.number}>{number}</Typography.SansHeadlineM>}
+    />
+  );
+}

package/src/components/SectionBenefits/components/CardNumeric/index.ts

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

package/src/components/SectionBenefits/components/CardNumeric/styles.module.scss

@@ -0,0 +1,6 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.number {
+  color: var.$sys-neutral-text-main;
+  min-width: 20px;
+}

package/src/components/SectionBenefits/components/index.ts

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

package/src/components/SectionBenefits/index.ts

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

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

@@ -0,0 +1,15 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &[data-buttons-align='center'] {
+    justify-content: center;
+  }
+}
+
+.note {
+  color: ste.$sys-neutral-text-support;
+}