@salutejs/plasma-new-hope 0.194.0-canary.1568.11891833298.0 → 0.194.1-canary.1569.11907567976.0

package/styled-components/es/components/Card/Card.api.mdx

@@ -1,184 +0,0 @@
----
-id: card
-title: Card
----
-
-отличия от https://plasma.sberdevices.ru/b2c/components/card/:
-* избавляемся от CardBody
-* убираем дублирование disabled
-
-примеры дизайна https://www.figma.com/design/MXl0ZkXEqEhIFDS2H6b3yk/StarDS-Cards?node-id=2-690&node-type=instance&t=TJN8Nqyiky3Dfw2T-0
-
-другие либы:
-https://ant.design/components/card#
-https://mui.com/material-ui/react-card/
-
-```tsx live
-import React, { ReactNode } from "react";
-
-/**
- * Набор часто встречающихся скруглений.
- */
-
-export const radiuses = {
-  250: 15.625,
-  32: 2,
-  28: 1.75,
-  24: 1.5,
-  20: 1.25,
-  18: 1.125,
-  16: 1,
-  14: 0.875,
-  12: 0.75,
-  8: 0.5,
-  0: 0,
-};
-
-export type Roundness = keyof typeof radiuses;
-
-export interface RoundnessProps {
-  /** Скругленность */
-  roundness: Roundness;
-}
-
-interface Card {
-  /** Компонент в фокусе */
-  focused?: boolean;
-  /** Увеличение по фокусу */
-  scaleOnFocus?: boolean;
-  /** Компонент неактивен */
-  disabled?: boolean;
-  /** Добавить рамку при фокусе */
-  outlined?: boolean;
-  /** Цвет подложки */
-  background?: string;
-  /** Делает карточку квадратной */
-  square?: boolean;
-  /** Заголовок */
-  title?: string | ReactNode;
-  /** Подзаголовок */
-  subtitle?: string | ReactNode;
-  /** Расположение заголовка и подзаголовка, пока нет в дизайне */
-  titlePlacement?: "inner" | "outer";
-  /** Выравнивание заголовка и подзаголовка */
-  titleAlign?: "left" | "center";
-  /** Подвал, или вынести в
-   * <CardContent footer={<CardTimeline />} /> или <CardFooter><CardTimeline /></CardFooter>
-   * */
-  footer?: ReactNode;
-}
-
-const ratios = {
-  "1 / 1": "100",
-  "1/1": "100",
-  "3 / 4": "133.3333",
-  "3/4": "133.3333",
-  "4 / 3": "75",
-  "4/3": "75",
-  "9 / 16": "177.7778",
-  "9/16": "177.7778",
-  "16 / 9": "56.25",
-  "16/9": "56.25",
-  "1 / 2": "200",
-  "1/2": "200",
-  "2 / 1": "50",
-  "2/1": "50",
-};
-
-export type Ratio = keyof typeof ratios;
-
-/**
- * CardMedia из текущей реализации
- * Стоит ли заменить пропсом `cover?: ReactNode;` в Card как в Ant?
- * а width и height передавать в style...
- *
- * имхо, нет. у Card может быть title и subtitle под карточкой
- * скорее всего, на них свойство height не должно распространяться
- * стоит подождать финальный дизайн
- */
-interface CardMedia {
-  base?: "img" | "div";
-  height?: string | number;
-  ratio?: Ratio;
-  customRatio?: string;
-}
-
-interface CardContent {
-  topLeft?: string | ReactNode;
-  topRight?: string | ReactNode;
-  bottomLeft?: string | ReactNode;
-  bottomRight?: string | ReactNode;
-  children?: ReactNode;
-}
-
-/** или */
-interface CardContent {
-  placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-  children?: ReactNode;
-}
-
-interface CardTimeline {
-  /**
-   * Описание, например время до конца фильма. Возможно,
-   * не нужно и стоит указывать bottomRight контент
-   */
-  text?: string;
-  progress?: string | number;
-  /**
-   * Не увеличивать высоту карточки
-   * @default true
-   */
-  inline?: boolean;
-}
-```
-
-```tsx live
-<Card title="Title" subtitle="Subtitle">
-  <CardContent placement="top-left">
-    <SomeIcon />
-  </CardContent>
-  <CardContent placement="top-right">
-    <SaveButton saved={isSaved} />
-  </CardContent>
-  <CardContent placement="bottom-right">18+</CardContent>
-</Card>;
-
-<Card title="Title" subtitle="Subtitle">
-  <CardContent
-    topLeft={<SomeIcon />}
-    topRight={<SaveButton saved={isSaved} />}
-    bottomRight="18+"
-  />
-</Card>;
-
-<Card title="Title" subtitle="Subtitle">
-  <CardMedia src={someSrc} alt="trailer" />
-  <CardContent
-    topLeft={<SomeIcon />}
-    topRight={<SaveButton saved={isSaved} />}
-    bottomRight="18+"
-  />
-  <CardTimeline text="еще 1ч 23мин" progress={56} />
-</Card>;
-
-<Card title="Title" subtitle="Subtitle">
-  <CardContent topLeft={<SomeIcon />} topRight={<SaveButton saved={isSaved} />}>
-    <CardMedia src={someSrc} alt="trailer" />
-  </CardContent>
-  <CardTimeline text="еще 1ч 23мин" progress={56} />
-</Card>;
-
-<Card
-  title="Title"
-  subtitle="Subtitle"
-  // как в ant, но кажется, что так менее гибко
-  cover={<CardMedia src={someSrc} alt="trailer" />}
-  square
->
-  <CardContent
-    topLeft={<SomeIcon />}
-    topRight={<SaveButton saved={isSaved} />}
-  />
-  <CardTimeline text="еще 1ч 23мин" progress={56} />
-</Card>;
-```