@cloud-ru/uikit-product-mobile-layout 0.20.7

package/src/components/AdaptiveLayout/AdaptiveLayout.tsx

@@ -0,0 +1,88 @@
+import { CardBanner, CardBannerProps } from '@cloud-ru/uikit-product-card-predefined';
+import { BlockBasic, BlockBasicProps, EmptyBlock, EmptyBlockProps } from '@cloud-ru/uikit-product-layout';
+import {
+  PageCatalog,
+  PageCatalogProps,
+  PageForm,
+  PageFormProps,
+  PageServices,
+  PageServicesProps,
+} from '@cloud-ru/uikit-product-page-layout';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { DesktopActions } from '../../helperComponents';
+import { MobileBlockBasic } from '../MobileBlockBasic';
+import { MobileCardBanner } from '../MobileCardBanner';
+import { MobileEmptyBlock } from '../MobileEmptyBlock';
+import { MobilePageCatalog, MobilePageCatalogProps } from '../MobilePageCatalog';
+import { MobilePageForm } from '../MobilePageForm';
+import { MobilePageServices, MobilePageServicesProps } from '../MobilePageServices';
+
+export type ButtonVariant = NonNullable<NonNullable<MobilePageServicesProps['actions']>[0]['variant']>;
+
+export type Action = Omit<NonNullable<MobilePageServicesProps['actions']>[0], 'variant'> & {
+  variant: ButtonVariant;
+};
+
+export type AdaptiveBlockBasicProps = WithLayoutType<BlockBasicProps>;
+
+export function AdaptiveBlockBasic({ layoutType, ...props }: AdaptiveBlockBasicProps) {
+  const isMobile = layoutType === 'mobile';
+  return isMobile ? <MobileBlockBasic {...props} /> : <BlockBasic {...props} />;
+}
+
+export type AdaptiveCardBannerProps = WithLayoutType<CardBannerProps>;
+
+export function AdaptiveCardBanner({ layoutType, ...props }: AdaptiveCardBannerProps) {
+  const isMobile = layoutType === 'mobile';
+
+  return isMobile ? <MobileCardBanner {...props} /> : <CardBanner {...props} />;
+}
+
+export type AdaptiveEmptyBlockProps = WithLayoutType<EmptyBlockProps>;
+
+export function AdaptiveEmptyBlock({ layoutType, ...props }: AdaptiveEmptyBlockProps) {
+  const isMobile = layoutType === 'mobile';
+  return isMobile ? <MobileEmptyBlock {...props} /> : <EmptyBlock {...props} />;
+}
+
+export type AdaptivePageFormProps = WithLayoutType<PageFormProps>;
+
+export function AdaptivePageForm({ layoutType, ...props }: AdaptivePageFormProps) {
+  const isMobile = layoutType === 'mobile';
+  return isMobile ? <MobilePageForm {...props} /> : <PageForm {...props} />;
+}
+
+export type AdaptivePageServicesProps = WithLayoutType &
+  Omit<PageServicesProps, 'actions'> &
+  Pick<MobilePageServicesProps, 'actions'>;
+
+export function AdaptivePageServices({ layoutType, actions, ...props }: AdaptivePageServicesProps) {
+  const isMobile = layoutType === 'mobile';
+
+  if (isMobile) {
+    return <MobilePageServices actions={actions} {...props} />;
+  }
+
+  const actionsNode = actions ? <DesktopActions items={actions} /> : undefined;
+
+  return <PageServices {...props} actions={actionsNode} />;
+}
+
+export type AdaptivePageCatalogProps = WithLayoutType &
+  Omit<PageCatalogProps, 'actions'> &
+  Pick<MobilePageCatalogProps, 'actions'>;
+
+export function AdaptivePageCatalog({ layoutType, actions, ...props }: AdaptivePageCatalogProps) {
+  const isMobile = layoutType === 'mobile';
+
+  if (isMobile) {
+    return <MobilePageCatalog actions={actions} {...props} />;
+  }
+
+  const actionsNode = actions ? <DesktopActions items={actions} /> : undefined;
+
+  return <PageCatalog {...props} actions={actionsNode} />;
+}
+
+export type { BlockBasicProps, CardBannerProps, EmptyBlockProps, PageFormProps, PageServicesProps, PageCatalogProps };

package/src/components/AdaptiveLayout/index.ts

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

package/src/components/MobileBlockBasic/MobileBlockBasic.tsx

@@ -0,0 +1,11 @@
+import cn from 'classnames';
+
+import { BlockBasic, BlockBasicProps } from '@cloud-ru/uikit-product-layout';
+
+import styles from './styles.module.scss';
+
+export type MobileBlockBasicProps = BlockBasicProps;
+
+export function MobileBlockBasic(props: MobileBlockBasicProps) {
+  return <BlockBasic {...props} className={cn(styles.wrapper, props.className)} data-mobile />;
+}

package/src/components/MobileBlockBasic/index.ts

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

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

@@ -0,0 +1,5 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper[data-mobile] {
+  padding: styles-theme-variables.$dimension-2m;
+}

package/src/components/MobileCardBanner/MobileCardBanner.tsx

@@ -0,0 +1,75 @@
+import { MouseEventHandler } from 'react';
+
+import { ArrowRightSVG, CrossSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Card, CardProps } from '@snack-uikit/card';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type MobileCardBannerProps = WithSupportProps<
+  Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'href'> & {
+    title: string;
+    description: string;
+    actionLabel: string;
+    image: {
+      src: string;
+      alt: string;
+    };
+    onClose?: MouseEventHandler<HTMLElement>;
+  }
+>;
+
+export function MobileCardBanner({
+  href,
+  title,
+  description,
+  onClick,
+  actionLabel,
+  image,
+  className,
+  onClose,
+  disabled,
+  ...rest
+}: MobileCardBannerProps) {
+  return (
+    <Card {...extractSupportProps(rest)} href={href} className={className} onClick={onClick} disabled={disabled}>
+      <>
+        {onClose && (
+          <div className={styles.cardFunctionBadgeWrapper}>
+            <ButtonTonal
+              icon={<CrossSVG />}
+              appearance='neutral'
+              onClick={e => {
+                e.stopPropagation();
+                onClose(e);
+              }}
+              size='xs'
+            />
+          </div>
+        )}
+
+        <div className={styles.cardBannerContent}>
+          <div className={styles.cardBannerLeft}>
+            <div className={styles.cardBannerTitle}>{title}</div>
+
+            <Typography.SansBodyM>
+              <div data-test-id='card-banner__description' className={styles.cardBannerDescription}>
+                {description}
+              </div>
+            </Typography.SansBodyM>
+
+            <Card.Footer.CallToAction
+              className={styles.cardBannerFooter}
+              label={actionLabel}
+              icon={<ArrowRightSVG />}
+            />
+          </div>
+
+          <img src={image.src} alt={image.alt} className={styles.cardBannerImage} data-test-id='card-banner__image' />
+        </div>
+      </>
+    </Card>
+  );
+}

package/src/components/MobileCardBanner/index.ts

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

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

@@ -0,0 +1,48 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+.cardBannerContent {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: styles-theme-variables.$dimension-2m;
+  width: 100%;
+  height: 100%;
+}
+
+.cardBannerLeft {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: calc(styles-theme-variables.$dimension-050m + styles-theme-variables.$dimension-1m);
+}
+
+.cardBannerDescription {
+  color: styles-theme-variables.$sys-neutral-text-support;
+}
+
+.cardBannerTitle {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-m);
+
+  max-width: 100%;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}
+
+.cardBannerImage {
+  width: calc(styles-theme-variables.$dimension-5m + styles-theme-variables.$dimension-7m);
+  flex-shrink: 0;
+  object-position: center;
+  object-fit: cover;
+}
+
+.cardFunctionBadgeWrapper {
+  position: absolute;
+  right: styles-theme-variables.$dimension-1m;
+  top: styles-theme-variables.$dimension-1m;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.cardBannerFooter {
+  margin-top: auto;
+}

package/src/components/MobileEmptyBlock/MobileEmptyBlock.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Footer, FooterProps } from './components';
+import styles from './styles.module.scss';
+
+export type MobileEmptyBlockProps = WithSupportProps<{
+  /** Заголовок */
+  title?: string;
+  /** Подзаголовок */
+  description?: ReactNode;
+  /** Иконка */
+  icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+
+  className?: string;
+}> &
+  (Pick<FooterProps, 'primaryButton' | 'secondaryButton'> | { primaryButton?: never; secondaryButton?: never });
+
+export function MobileEmptyBlock({
+  primaryButton,
+  secondaryButton,
+  className,
+  title,
+  description,
+  icon,
+  ...rest
+}: MobileEmptyBlockProps) {
+  return (
+    <div className={cn(styles.emptyBlock, className)} {...extractSupportProps(rest)}>
+      <div className={cn(styles.infoBlock, className)} {...extractSupportProps(rest)}>
+        {icon && (
+          <IconPredefined
+            icon={icon.icon}
+            appearance={icon.appearance ?? 'primary'}
+            decor={icon.decor ?? true}
+            size='m'
+          />
+        )}
+
+        <div className={styles.contentLayout}>
+          <div className={styles.textWrap}>
+            {title && (
+              <Typography family='sans' purpose='title' size='m' className={styles.title}>
+                {title}
+              </Typography>
+            )}
+
+            {description && (
+              <Typography family='sans' purpose='body' size='m' className={styles.description}>
+                {description}
+              </Typography>
+            )}
+          </div>
+
+          {primaryButton && <Footer primaryButton={primaryButton} secondaryButton={secondaryButton} />}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MobileEmptyBlock/components/Footer/Footer.tsx

@@ -0,0 +1,29 @@
+import cn from 'classnames';
+
+import { MobileTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
+
+import { useButtonWithTooltip } from './hooks';
+import styles from './styles.module.scss';
+
+export type FooterProps = {
+  /** Основная кнопка */
+  primaryButton: Omit<ButtonFilledProps, 'size'> & { tooltip?: MobileTooltipProps };
+  /** Дополнительная кнопка */
+  secondaryButton?: Omit<ButtonTonalProps, 'size'> & { tooltip?: MobileTooltipProps };
+  className?: string;
+};
+
+export function Footer({ primaryButton, secondaryButton, className }: FooterProps) {
+  const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: primaryButton.tooltip });
+  const SecondaryButton = useButtonWithTooltip({ Button: ButtonTonal, tooltip: secondaryButton?.tooltip });
+
+  return (
+    <div className={cn(styles.infoBlockFooter, className)}>
+      <PrimaryButton {...primaryButton} size='m' data-test-id={primaryButton['data-test-id']} fullWidth />
+      {secondaryButton && (
+        <SecondaryButton {...secondaryButton} size='m' data-test-id={secondaryButton['data-test-id']} fullWidth />
+      )}
+    </div>
+  );
+}

package/src/components/MobileEmptyBlock/components/Footer/hooks.tsx

@@ -0,0 +1,25 @@
+import { JSXElementConstructor } from 'react';
+
+import { MobileTooltip, MobileTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+
+export function useButtonWithTooltip<T>({
+  Button,
+  tooltip,
+}: {
+  tooltip?: MobileTooltipProps;
+  Button: JSXElementConstructor<T>;
+}) {
+  if (tooltip) {
+    return function ButtonWithTooltip(props: T) {
+      return (
+        <MobileTooltip {...tooltip}>
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore */}
+          <Button {...props} />
+        </MobileTooltip>
+      );
+    };
+  }
+
+  return Button;
+}

package/src/components/MobileEmptyBlock/components/Footer/index.ts

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

package/src/components/MobileEmptyBlock/components/Footer/styles.module.scss

@@ -0,0 +1,11 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-infoBlock';
+
+.infoBlockFooter {
+  @include styles-tokens-infoBlock.composite-var(styles-tokens-infoBlock.$info-block-footer);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 100%;
+}

package/src/components/MobileEmptyBlock/components/index.ts

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

package/src/components/MobileEmptyBlock/index.ts

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

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

@@ -0,0 +1,75 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-infoBlock';
+
+div.emptyBlock {
+  background-color: styles-tokens-infoBlock.$sys-neutral-background1-level;
+  border-radius: calc(styles-tokens-infoBlock.$dimension-1m + styles-tokens-infoBlock.$dimension-050m);
+  padding: styles-tokens-infoBlock.$dimension-4m styles-tokens-infoBlock.$dimension-2m;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.contentLayout {
+  display: flex;
+  flex-direction: column;
+}
+
+.textWrap {
+  display: flex;
+  flex-direction: column;
+
+  word-wrap: break-all;
+  max-width: 100%;
+}
+
+.footer {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.title {
+  color: styles-tokens-infoBlock.$sys-neutral-text-main;
+}
+
+.description {
+  color: styles-tokens-infoBlock.$sys-neutral-text-support;
+}
+
+.infoBlock {
+  display: flex;
+  box-sizing: border-box;
+
+  flex-direction: column;
+  align-items: center;
+
+  width: 100%;
+
+  @include styles-tokens-infoBlock.composite-var(styles-tokens-infoBlock.$info-block, 'm', 'container');
+
+  .footer {
+    text-align: center;
+  }
+
+  .description,
+  .title {
+    text-align: center;
+  }
+
+  .contentLayout {
+    @include styles-tokens-infoBlock.composite-var(styles-tokens-infoBlock.$info-block, 'm', 'content-layout');
+
+    align-items: center;
+
+    width: 100%;
+  }
+
+  .textWrap {
+    @include styles-tokens-infoBlock.composite-var(styles-tokens-infoBlock.$info-block, 'm', 'text-wrap');
+
+    align-items: center;
+
+    width: 100%;
+  }
+}

package/src/components/MobilePageCatalog/MobilePageCatalog.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { ActionsProps, Headline, HeadlineProps, MobileActions } from '../../helperComponents';
+import styles from './styles.module.scss';
+
+export type MobilePageCatalogProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title'> & {
+      className?: string;
+      actions?: ActionsProps['items'];
+      maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+    }
+  >
+>;
+
+export function MobilePageCatalog({
+  children,
+  title,
+  actions = [],
+  maxVisibleActionsItems,
+  className,
+  ...rest
+}: MobilePageCatalogProps) {
+  return (
+    <div className={cn(styles.catalog, className)} {...extractSupportProps(rest)}>
+      <Headline title={title} />
+
+      {actions.length > 0 && <MobileActions items={actions} maxVisibleItems={maxVisibleActionsItems} />}
+
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}

package/src/components/MobilePageCatalog/index.ts

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

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

@@ -0,0 +1,17 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.catalog {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-3m;
+  padding: styles-theme-variables.$dimension-3m;
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

package/src/components/MobilePageForm/MobilePageForm.tsx

@@ -0,0 +1,153 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { ChevronRightSVG, KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDropdown, MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { PageFormProps } from '@cloud-ru/uikit-product-page-layout';
+import { ButtonFilled, ButtonFunction, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, ValueOf } from '@snack-uikit/utils';
+
+import { Headline } from '../../helperComponents';
+import { useGetButtonLabel } from '../../helpers';
+import { useButtonWithTooltip } from './hooks';
+import styles from './styles.module.scss';
+
+export const BUTTON_PRIMARY_VARIANT = {
+  Continue: 'continue',
+  Create: 'create',
+  Save: 'save',
+  Rent: 'rent',
+  Send: 'send',
+} as const;
+
+export const BUTTON_SECONDARY_VARIANT = {
+  Cancel: 'cancel',
+  Back: 'back',
+} as const;
+
+export type ButtonPrimaryVariant = ValueOf<typeof BUTTON_PRIMARY_VARIANT>;
+export type ButtonSecondaryVariant = ValueOf<typeof BUTTON_SECONDARY_VARIANT>;
+
+export type MobilePageFormProps = PageFormProps;
+
+export function MobilePageForm({
+  children,
+  title,
+  subHeader,
+  className,
+  footer,
+  stepper,
+  priceSummary,
+  sideBlock,
+  ...rest
+}: PageFormProps) {
+  const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: footer?.buttonPrimary.tooltip });
+  const SecondaryButton = useButtonWithTooltip({ Button: ButtonOutline, tooltip: footer?.buttonSecondary?.tooltip });
+  const AdditionalButton = useButtonWithTooltip({ Button: ButtonSimple, tooltip: footer?.buttonAdditional?.tooltip });
+
+  const [openPriceSummary, setOpenPriceSummary] = useState<boolean>(false);
+  const [openMore, setOpenMore] = useState<boolean>(false);
+  const [openMoreContentIndex, setOpenMoreContentIndex] = useState<number | undefined>(undefined);
+
+  const getButtonLabel = useGetButtonLabel();
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)}>
+      <Headline
+        title={title}
+        subHeader={subHeader}
+        moreActions={
+          sideBlock ? (
+            <MobileDroplist
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              size='l'
+              open={openMore}
+              onOpenChange={setOpenMore}
+              items={sideBlock.map(({ label }, idx) => ({
+                id: idx,
+                content: {
+                  option: label,
+                },
+                onClick: () => {
+                  (setOpenMoreContentIndex(idx), setOpenMore(false));
+                },
+              }))}
+            >
+              <ButtonFunction icon={<KebabSVG />} size='m' />
+            </MobileDroplist>
+          ) : undefined
+        }
+      />
+
+      {sideBlock && (
+        <MobileModalCustom open={openMoreContentIndex !== undefined} onClose={() => setOpenMoreContentIndex(undefined)}>
+          <MobileModalCustom.Body content={sideBlock?.[openMoreContentIndex ?? 0].content} />
+        </MobileModalCustom>
+      )}
+
+      {stepper && <div className={styles.stepper}>{stepper}</div>}
+
+      <div className={styles.body}>{children}</div>
+
+      {(priceSummary || footer) && (
+        <div className={styles.footer}>
+          {priceSummary && (
+            <div className={styles.priceSummary}>
+              <Typography.SansBodyM className={styles.priceSummaryText}>Оценка бюджета</Typography.SansBodyM>
+
+              <MobileDropdown
+                open={openPriceSummary}
+                onOpenChange={setOpenPriceSummary}
+                content={<div className={styles.modalContent}>{priceSummary.content}</div>}
+              >
+                <div className={styles.priceSummaryRight}>
+                  <Typography.SansLabelL className={styles.priceSummaryTotal}>
+                    {priceSummary.total}
+                  </Typography.SansLabelL>
+                  {priceSummary.content && <ButtonFunction size='m' icon={<ChevronRightSVG />} />}
+                </div>
+              </MobileDropdown>
+            </div>
+          )}
+
+          {footer && (
+            <div
+              className={styles.actions}
+              data-column={(footer.buttonAdditional && footer.buttonSecondary) || undefined}
+            >
+              {footer.buttonAdditional && <AdditionalButton {...footer.buttonAdditional} size='m' fullWidth />}
+
+              {footer.buttonSecondary && (
+                <SecondaryButton
+                  {...footer.buttonSecondary}
+                  size='m'
+                  fullWidth
+                  appearance='neutral'
+                  label={
+                    footer.buttonSecondary.variant === 'custom'
+                      ? footer.buttonSecondary.label
+                      : getButtonLabel(footer.buttonSecondary.variant)
+                  }
+                />
+              )}
+
+              <PrimaryButton
+                {...footer.buttonPrimary}
+                size='m'
+                fullWidth
+                label={
+                  footer.buttonPrimary.variant === 'custom'
+                    ? footer.buttonPrimary.label
+                    : getButtonLabel(footer.buttonPrimary.variant)
+                }
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}