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

package/src/components/Header/constants.ts

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

package/src/components/Header/index.ts

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

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

@@ -0,0 +1,39 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+$sizes:  'm', 'l';
+
+.titleLayout {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($card, 'content', $size, 'header');
+    }
+  }
+}
+
+.contentLayout {
+  overflow: hidden;
+  display: block;
+  max-width: 100%;
+}
+
+.title {
+  display: block;
+  max-width: 100%;
+  color: $sys-neutral-text-main;
+}
+
+.metadata {
+  max-width: 100%;
+  color: $sys-neutral-text-light;
+}
+
+.description {
+  max-width: 100%;
+  color: $sys-neutral-text-support;
+}
+

package/src/components/Image/Image.tsx

@@ -0,0 +1,18 @@
+import { Mode } from './constants';
+import styles from './styles.module.scss';
+
+export type ImageProps = {
+  /** Путь до картинки */
+  src: string;
+  /** Описание картинки */
+  alt: string;
+} /**  Image mode */ & (
+  | { mode?: Mode.Little | Mode.Middle; hideFading?: never }
+  | { mode: Mode.Background; hideFading?: boolean }
+);
+
+export function Image({ src, alt, mode = Mode.Little, hideFading }: ImageProps) {
+  return <img src={src} alt={alt} data-mode={mode} className={styles.image} data-fading={!hideFading || undefined} />;
+}
+
+Image.modes = Mode;

package/src/components/Image/constants.ts

@@ -0,0 +1,5 @@
+export enum Mode {
+  Little = 'little',
+  Middle = 'middle',
+  Background = 'background',
+}

package/src/components/Image/index.ts

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

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

@@ -0,0 +1,38 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+$modes: 'little', 'middle', 'background';
+
+.image {
+  display: block;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+
+  object-fit: cover;
+
+  @each $mode in $modes {
+    &[data-mode='#{$mode}'] {
+      @if $mode == 'background' {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        object-fit: cover;
+
+        &[data-fading]{
+          -webkit-mask-image: $gradient-linear-mask-90deg;
+          mask-image: $gradient-linear-mask-90deg;
+        }
+      }
+
+      @else {
+        @include composite-var($card, 'image', $mode);
+      }
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,28 @@
+import { Card as CardComponent, CardProps } from './Card';
+import { Footer } from './Footer';
+import { FunctionBadge, FunctionBadgeProps as FunctionBadgeComponentProps } from './FunctionBadge';
+import { Header, HeaderProps as HeaderComponentProps } from './Header';
+import { Image, ImageProps as ImageComponentProps } from './Image';
+
+export const Card = CardComponent as typeof CardComponent & {
+  Header: typeof Header;
+  Image: typeof Image;
+  Footer: typeof Footer;
+  FunctionBadge: typeof FunctionBadge;
+};
+
+Card.Header = Header;
+Card.Footer = Footer;
+Card.Image = Image;
+Card.FunctionBadge = FunctionBadge;
+
+export { type CardProps };
+
+export namespace Card {
+  export type HeaderProps = HeaderComponentProps;
+  export type ImageProps = ImageComponentProps;
+  export type FooterActionProps = Footer.ActionProps;
+  export type FooterPromoProps = Footer.PromoProps;
+  export type FooterCallToActionProps = Footer.CallToActionProps;
+  export type FunctionBadgeProps = FunctionBadgeComponentProps;
+}

package/src/constants.ts

@@ -0,0 +1,17 @@
+export enum Size {
+  M = 'm',
+  L = 'l',
+}
+
+export const TEST_IDS = {
+  promoBadge: 'card__promo-badge',
+  functionBadge: 'card__function-badge',
+  droplist: 'card__function-badge__droplist',
+  option: 'card__function-badge__option',
+  check: 'card__check',
+  emblemPicture: 'card__header__emblem-picture',
+  emblemIcon: 'card__header__emblem-icon',
+  title: 'card__header__title',
+  description: 'card__header__description',
+  metadata: 'card__header__metadata',
+};

package/src/context.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react';
+
+import { Size } from './constants';
+
+type CardContextValue = {
+  size: Size;
+  disabled: boolean;
+};
+
+export const CardContext = createContext<CardContextValue>({
+  size: Size.M,
+  disabled: false,
+});
+
+export function useCardContext() {
+  return useContext(CardContext);
+}
+
+type FunctionBadgeContextValue = {
+  visible?: boolean;
+  setVisible?(v: boolean): void;
+};
+
+export const FunctionBadgeContext = createContext<FunctionBadgeContextValue>({
+  visible: false,
+  setVisible: () => {},
+});

package/src/helperComponents/Check/Check.tsx

@@ -0,0 +1,20 @@
+import cn from 'classnames';
+
+import { CheckSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+type CheckProps = {
+  className?: string;
+};
+
+export function Check({ className }: CheckProps) {
+  return (
+    <div className={styles.checkWrapper}>
+      <div className={cn(styles.checkContainer, className)} data-test-id={TEST_IDS.check}>
+        <CheckSVG size={16} />
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/Check/index.ts

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

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

@@ -0,0 +1,17 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.checkWrapper {
+  @include composite-var($card-check-badge);
+  
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.checkContainer {
+  @include composite-var($card-check);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/helperComponents/Emblem/Emblem.tsx

@@ -0,0 +1,44 @@
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+
+import { TEST_IDS } from '../../constants';
+import { useCardContext } from '../../context';
+import styles from './styled.module.scss';
+
+type PictureProps = {
+  src: string;
+  alt: string;
+};
+
+export type EmblemProps = PictureProps | Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+
+function isPictureProps(props: EmblemProps): props is PictureProps {
+  return 'src' in props && 'alt' in props;
+}
+
+export function Emblem(props: EmblemProps) {
+  const { size } = useCardContext();
+
+  if (isPictureProps(props)) {
+    return (
+      <img
+        src={props.src}
+        alt={props.alt}
+        data-size={size || undefined}
+        className={styles.img}
+        data-test-id={TEST_IDS.emblemPicture}
+      />
+    );
+  }
+
+  return (
+    <IconPredefined
+      icon={props.icon}
+      appearance={props.appearance ?? IconPredefined.appearances.Primary}
+      decor={props.decor ?? true}
+      size={size}
+      data-test-id={TEST_IDS.emblemIcon}
+    />
+  );
+}
+
+Emblem.appearances = IconPredefined.appearances;

package/src/helperComponents/Emblem/index.ts

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

package/src/helperComponents/Emblem/styled.module.scss

@@ -0,0 +1,20 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+$sizes:  'm', 'l';
+
+.img {
+  overflow: hidden;
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+
+  object-fit: cover;
+  border-color: $sys-neutral-decor-disabled;
+  border-style: solid;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($card, 'picture', $size);
+    }
+  }
+}

package/src/helperComponents/FunctionBadgeWrapper/FunctionBadgeWrapper.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, useState } from 'react';
+
+import { FunctionBadgeContext } from '../../context';
+import styles from './styles.module.scss';
+
+export type FunctionBadgeWrapperProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function FunctionBadgeWrapper({ children, className }: FunctionBadgeWrapperProps) {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  return (
+    <FunctionBadgeContext.Provider value={{ visible, setVisible }}>
+      <div className={className} data-visible={visible || undefined} tabIndex={-1}>
+        <div className={styles.functionBadge}>
+          <div className={styles.functionRow}>{children}</div>
+        </div>
+      </div>
+    </FunctionBadgeContext.Provider>
+  );
+}

package/src/helperComponents/FunctionBadgeWrapper/index.ts

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

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

@@ -0,0 +1,30 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.functionBadge {
+  @include composite-var($card-function-badge);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+}
+
+.functionRow {
+  position: relative;
+
+  &::before {
+    @include composite-var($card-function-row-transparent-background);
+
+    content: '';
+
+    position: absolute;
+    top:0;
+    left:0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: $sys-neutral-background1-level;
+    box-shadow: $box-shadow-elevation-level2;
+  }
+}

package/src/helperComponents/PromoBadge/PromoBadge.tsx

@@ -0,0 +1,16 @@
+import { PromoTag } from '@snack-uikit/promo-tag';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type PromoBadgeProps = {
+  text: string;
+};
+
+export function PromoBadge({ text }: PromoBadgeProps) {
+  return (
+    <div className={styles.promoBadge}>
+      <PromoTag appearance={PromoTag.appearances.Primary} text={text} data-test-id={TEST_IDS.promoBadge} />
+    </div>
+  );
+}

package/src/helperComponents/PromoBadge/index.ts

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

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

@@ -0,0 +1,10 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
+
+.promoBadge {
+  @include composite-var($card-promo-badge);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './Emblem';
+export * from './PromoBadge';
+export * from './Check';
+export * from './FunctionBadgeWrapper';

package/src/index.ts

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