feat: card api preview

salute-developers · Nov 18, 2024 · 6722bf5 · 6722bf5
1 parent 2428b09
commit 6722bf5
Showing 1 changed file with 184 additions and 0 deletions.
diff --git a/packages/plasma-new-hope/src/components/Card/Card.api.mdx b/packages/plasma-new-hope/src/components/Card/Card.api.mdx
@@ -0,0 +1,184 @@
+---
+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>;
+```