@snack-uikit/card 0.4.9-preview-85c5f47b.0

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

@@ -0,0 +1,181 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes:  'm', 'l';
+
+$snack-ui-card-background-color: var(--snack-ui-card-background-color);
+
+.functionBadgeWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+
+  &[data-visible] {
+    display: block;
+  }
+}
+
+.composition {
+  @include composite-var($card-composition-container);
+
+  box-sizing: border-box; 
+}
+
+.card {
+  --snack-ui-card-background-color: #{$sys-neutral-background1-level};
+
+  @include composite-var($card-container);
+  
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  text-align: left;
+  
+  background-color: $snack-ui-card-background-color;
+  border: 0;
+  outline-color: transparent;
+
+  &:hover {
+    .functionBadgeWrapper {
+      display: block;
+    }
+  }
+
+  &:hover,
+  &:focus-visible {
+    --snack-ui-card-background-color: #{$sys-neutral-background2-level};
+  }
+
+
+  &:focus-visible {
+    @include outline-var($container-focused-l);
+
+    outline-color: $sys-primary-accent-default;
+
+    .functionBadgeWrapper {
+      display: block;
+    }
+
+    .check {
+      background-color: $sys-primary-accent-default;
+    }
+  }
+
+  &:focus-within {
+    .functionBadgeWrapper {
+      display: block;
+    }
+  }
+
+  &[data-outline] {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-neutral-decor-default;
+    outline-width: $border-width-card-container;
+  }
+
+  &[data-pointer] {
+    * {
+      cursor: pointer;
+    }
+
+    &[data-outline] {
+      &:hover {
+        outline-color: $sys-neutral-decor-hovered;
+        box-shadow: none;
+      }
+
+      &:focus-visible {
+        @include outline-var($container-focused-l);
+
+        outline-color: $sys-primary-accent-default;
+      }
+    }
+
+    &[data-checked] {
+      @include outline-var($container-focused-s);
+
+      outline-color: $sys-primary-decor-activated;
+      outline-width: $border-width-card-container;
+
+      &:hover {
+        outline-color: $sys-primary-decor-hovered;
+        box-shadow: none;
+      }
+
+      .contentWrapper {
+        background-color: color-on-background-with-opacity($sys-primary-accent-default, $snack-ui-card-background-color, $opacity-a008);
+      }
+
+      .check {
+        color: $sys-primary-on-accent;
+        background-color: $sys-primary-accent-default;
+      }
+    }
+
+    &[data-checked]:focus-visible {
+      @include outline-var($container-focused-l);
+
+      outline-color: $sys-primary-accent-default;
+
+      .check {
+        color: $sys-primary-on-accent;
+        background-color: $sys-primary-accent-default;
+      }
+    }
+
+    &:hover {
+      box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
+    }
+  }
+
+  &[data-disabled] {
+    @include outline-var($container-focused-s);
+
+    cursor: not-allowed;
+    background-color: $sys-neutral-background;
+    outline-color: $sys-neutral-decor-default;
+    outline-width: $border-width-card-container;
+    
+    * {
+      cursor: not-allowed;
+    }
+  }
+}
+
+
+.body {
+  display: block;
+  color: $sys-neutral-text-support;
+  text-align: initial;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  box-sizing: border-box;
+  max-width: 100%;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($card, 'content', $size, 'container');
+    }
+  }
+}
+
+.footer {
+  @include composite-var($card-footer);
+
+  position: relative;
+  box-sizing: border-box;
+}
+

package/src/components/Footer/components/Action/Action.tsx

@@ -0,0 +1,39 @@
+import cn from 'classnames';
+
+import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
+import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { useCardContext } from '../../../../context';
+import styles from './styles.module.scss';
+
+export type FooterActionProps = WithSupportProps<{
+  /** Параметры для основной кнопки */
+  button: Pick<ButtonFilledProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+  /** Параметры для вторичной кнопки */
+  secondaryButton?: Pick<ButtonTonalProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+}>;
+
+export function FooterAction({ button, secondaryButton, className, ...rest }: FooterActionProps) {
+  const { disabled } = useCardContext();
+
+  return (
+    <div className={cn(styles.action, className)} {...excludeSupportProps(rest)}>
+      <ButtonFilled
+        {...button}
+        appearance={ButtonFilled.appearances.Primary}
+        size={ButtonFilled.sizes.M}
+        disabled={disabled}
+      />
+      {secondaryButton && (
+        <ButtonTonal
+          {...secondaryButton}
+          appearance={ButtonTonal.appearances.Neutral}
+          size={ButtonTonal.sizes.M}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,10 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.action {
+  @include composite-var($card-action);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}

package/src/components/Footer/components/CallToAction/CallToAction.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { Typography } from '@snack-uikit/typography';
+import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type FooterCallToActionProps = WithSupportProps<{
+  /** Лейбл */
+  label: string;
+  /** Иконка */
+  icon?: ReactNode;
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+}>;
+
+export function FooterCallToAction({ label, icon, className, ...rest }: FooterCallToActionProps) {
+  return (
+    <div className={cn(styles.callToAction, className)} {...excludeSupportProps(rest)}>
+      <Typography.SansLabelL className={styles.label}>{label}</Typography.SansLabelL>
+      <span className={styles.icon}>{icon}</span>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,27 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.callToAction {
+  @include composite-var($card-call-to-action);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}
+
+.label {
+  color: $sys-primary-accent-default;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $sys-primary-accent-default;
+  
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/src/components/Footer/components/Dimension/Dimension.tsx

@@ -0,0 +1,50 @@
+import { Typography } from '@snack-uikit/typography';
+
+import { Size } from '../../../../constants';
+import { useCardContext } from '../../../../context';
+import { TYPOGRAPHY_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+
+export type DimensionProps = {
+  /** Единица измерения */
+  dimension?: string;
+  /** Текущее значение */
+  currentValue: string;
+  /** Старое значение */
+  oldValue?: string;
+  /** Размер */
+  size?: Size;
+};
+
+export function Dimension({ dimension, currentValue, oldValue, size: sizeProp }: DimensionProps) {
+  const { size: sizeContext } = useCardContext();
+
+  const size = TYPOGRAPHY_SIZE_MAP[sizeProp || sizeContext];
+
+  return (
+    <div className={styles.wrapper}>
+      {dimension && (
+        <Typography
+          role={Typography.roles.Title}
+          family={Typography.families.Sans}
+          size={size}
+          className={styles.dimension}
+        >
+          {dimension}
+        </Typography>
+      )}
+      <div className={styles.valueContainer}>
+        <Typography
+          role={Typography.roles.Title}
+          family={Typography.families.Sans}
+          size={size}
+          className={styles.currentValue}
+        >
+          {currentValue}
+        </Typography>
+
+        {oldValue && <Typography.CrossedOutBodyS className={styles.oldValue}>{oldValue}</Typography.CrossedOutBodyS>}
+      </div>
+    </div>
+  );
+}

package/src/components/Footer/components/Dimension/constants.ts

@@ -0,0 +1,8 @@
+import { Typography } from '@snack-uikit/typography';
+
+import { Size } from '../../../../constants';
+
+export const TYPOGRAPHY_SIZE_MAP = {
+  [Size.M]: Typography.sizes.M,
+  [Size.L]: Typography.sizes.L,
+};

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

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

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

@@ -0,0 +1,31 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.wrapper {
+  @include composite-var($card-dimension);
+
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+
+.valueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+
+  box-sizing: border-box;
+}
+
+.currentValue {
+  color: $sys-neutral-text-main;
+}
+
+.oldValue {
+  color: $sys-neutral-text-light;
+}
+
+.dimension {
+  color: $sys-neutral-text-light;
+}

package/src/components/Footer/components/Promo/Promo.tsx

@@ -0,0 +1,40 @@
+import cn from 'classnames';
+
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../../../constants';
+import { useCardContext } from '../../../../context';
+import { Dimension, DimensionProps } from '../Dimension';
+import styles from './styles.module.scss';
+
+export type FooterPromoProps = WithSupportProps<{
+  /** Параметры для блока значений */
+  volume?: DimensionProps;
+  /** Параметры для основной кнопки */
+  button?: Pick<ButtonFilledProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+  /** Размер */
+  size?: Size;
+}>;
+
+export function FooterPromo({ volume, button, className, size, ...rest }: FooterPromoProps) {
+  const { disabled } = useCardContext();
+
+  return (
+    <div className={cn(styles.promo, className)} {...excludeSupportProps(rest)}>
+      {button && (
+        <ButtonFilled
+          {...button}
+          appearance={ButtonFilled.appearances.Primary}
+          size={ButtonFilled.sizes.M}
+          disabled={disabled}
+        />
+      )}
+      {volume && <Dimension {...volume} size={size} />}
+    </div>
+  );
+}
+
+FooterPromo.sizes = Size;

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

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

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

@@ -0,0 +1,8 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.promo {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,3 @@
+export * from './Promo';
+export * from './Action';
+export * from './CallToAction';

package/src/components/Footer/index.ts

@@ -0,0 +1,20 @@
+import {
+  FooterAction,
+  FooterActionProps,
+  FooterCallToAction,
+  FooterCallToActionProps,
+  FooterPromo,
+  FooterPromoProps,
+} from './components';
+
+export const Footer = {
+  Promo: FooterPromo,
+  Action: FooterAction,
+  CallToAction: FooterCallToAction,
+};
+
+export namespace Footer {
+  export type PromoProps = FooterPromoProps;
+  export type ActionProps = FooterActionProps;
+  export type CallToActionProps = FooterCallToActionProps;
+}

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -0,0 +1,79 @@
+import { MouseEvent, ReactNode, useCallback, useContext, useLayoutEffect, useState } from 'react';
+
+import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../constants';
+import { FunctionBadgeContext } from '../../context';
+import styles from './styles.module.scss';
+
+export type FunctionBadgeProps = {
+  /** Иконка */
+  icon?: ReactNode;
+  /** Вложенные опции */
+  options: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+};
+
+export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const { setVisible } = useContext(FunctionBadgeContext);
+
+  useLayoutEffect(() => {
+    setVisible && setVisible(isOpen);
+  }, [isOpen, setVisible]);
+
+  const {
+    firstElementRefCallback,
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleDroplistItemClick,
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen: setIsOpen });
+
+  const onClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setIsOpen(isOpen => !isOpen);
+  }, []);
+
+  return (
+    <span className={styles.wrapper}>
+      <Droplist
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        firstElementRefCallback={firstElementRefCallback}
+        widthStrategy={Droplist.widthStrategies.Gte}
+        useScroll
+        onFocusLeave={handleDroplistFocusLeave}
+        data-test-id={TEST_IDS.droplist}
+        triggerClassName={styles.triggerClassName}
+        placement={Droplist.placements.BottomEnd}
+        triggerElement={
+          <button
+            data-test-id={TEST_IDS.functionBadge}
+            className={styles.button}
+            onKeyDown={handleTriggerKeyDown}
+            onClick={onClick}
+            ref={triggerElementRef}
+          >
+            {icon || <KebabSVG />}
+          </button>
+        }
+      >
+        {options.map(item => (
+          <Droplist.ItemSingle
+            {...item}
+            key={item.option}
+            className={styles.item}
+            data-test-id={TEST_IDS.option}
+            onClick={e => {
+              handleDroplistItemClick(e, item.onClick);
+            }}
+            onKeyDown={handleDroplistItemKeyDown}
+          />
+        ))}
+      </Droplist>
+    </span>
+  );
+}

package/src/components/FunctionBadge/constants.ts

@@ -0,0 +1,6 @@
+export const TRIGGER_OPEN_DROPLIST_KEY_KEYS = [
+  ' ', // <- Space key
+  'ArrowDown',
+];
+
+export const TRIGGER_CLOSE_DROPLIST_KEY_CODES = ['Escape', 'Tab'];

package/src/components/FunctionBadge/index.ts

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

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

@@ -0,0 +1,48 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+
+.button {
+  @include composite-var($card-button);
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $sys-neutral-text-main;
+
+  background-color: transparent;
+  border: 0;
+  outline-color: transparent;
+
+  &:hover {
+    color: $sys-neutral-text-support;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    color: $sys-neutral-text-support;
+    outline-color: $sys-available-complementary;
+  }
+
+  &:active {
+    color: $sys-neutral-text-light;
+  }
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.triggerClassName {
+  --offset: #{$space-drop-list-drop-offset};
+}
+
+.wrapper {
+  position: relative;
+}

package/src/components/Header/Header.tsx

@@ -0,0 +1,79 @@
+import cn from 'classnames';
+
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Size, TEST_IDS } from '../../constants';
+import { useCardContext } from '../../context';
+import { Emblem, EmblemProps } from '../../helperComponents';
+import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+
+export type HeaderProps = WithSupportProps<{
+  /** Заголовок */
+  title: string;
+  /** Подзаголовок */
+  description?: string;
+  /** Метаинформация */
+  metadata?: string;
+  /** Эмблема иконка/картинка */
+  emblem?: EmblemProps;
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+  /** Размер */
+  size?: Size;
+}>;
+
+export function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps) {
+  const { size: sizeContext } = useCardContext();
+
+  const size = sizeProp || sizeContext;
+
+  return (
+    <div className={cn(styles.titleLayout, className)} {...excludeSupportProps(rest)} data-size={size}>
+      {emblem && <Emblem {...emblem} />}
+
+      <div className={styles.contentLayout}>
+        <Typography
+          family={Typography.families.Sans}
+          size={TITLE_SIZE_MAP[size]}
+          role={Typography.roles.Title}
+          className={styles.title}
+          data-test-id={TEST_IDS.title}
+        >
+          <TruncateString variant={TruncateString.variants.End} maxLines={1} text={title} />
+        </Typography>
+
+        {metadata && (
+          <Typography.SansBodyS className={styles.metadata}>
+            <TruncateString
+              variant={TruncateString.variants.End}
+              maxLines={1}
+              text={metadata}
+              data-test-id={TEST_IDS.metadata}
+            />
+          </Typography.SansBodyS>
+        )}
+
+        {description && (
+          <Typography
+            family={Typography.families.Sans}
+            size={DESCRIPTION_SIZE_MAP[size]}
+            role={Typography.roles.Body}
+            className={styles.description}
+          >
+            <TruncateString
+              variant={TruncateString.variants.End}
+              maxLines={2}
+              text={description}
+              data-test-id={TEST_IDS.description}
+            />
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+Header.emblemIconAppearances = Emblem.appearances;