@salutejs/plasma-new-hope 0.149.0-dev.0 → 0.150.0-canary.1443.10955942474.0

package/emotion/cjs/components/Steps/Steps.template-doc.mdx

@@ -0,0 +1,82 @@
+---
+id: steps
+title: Steps
+---
+
+# Steps
+Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
+
+```tsx live
+import React, { ReactNode, useState } from "react";
+
+interface StepItemSimple {
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+interface StepItem {
+  title?: string;
+  content?: string | ReactNode;
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+type StepItemType = StepItemSimple | StepItem;
+
+interface Steps {
+  orientation?: "horizontal" | "vertical";
+  /* выравнивание заголовков и контента
+   * @default 'left' */
+  contentAlign?: "left" | "center"; //
+  size?: "xs" | "s" | "m" | "l";
+  indicatorSize?: 8 | 16 | 24 | 36;
+  /* наличие разделительной линии
+   * @default 'left' */
+  hasLine?: boolean;
+  /* включает упрощенное отображение, то есть без title и content
+   * даже если они есть в items */
+  simple?: boolean;
+  /* обработчик кликов по StepItem
+    при наличии onClick у полей появляется :hover
+    без onClick можно разместить в content кнопки и обрабатывать переходы через них
+  */
+  onClick?: (item: StepItemType, index: number) => void;
+  items: StepItemType[];
+}
+
+export const fullItems = [
+  {
+    title: 'Просто заголовок',
+    indicator: 1,
+    content: text,
+    progress: 'completed',
+  },
+  {
+    title: 'Очень длинный и неприятный заголовок',
+    indicator: 2,
+    content: text,
+    progress: 'inProgress',
+  },
+  {
+    title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
+    indicator: 3,
+    content: text,
+    progress: 'notStarted',
+  },
+];
+
+// пример использования
+const [exampleItems, setExampleItems] = useState<StepItem>(() =>
+  fullItems.map((item) => ({ ...item, progress: "notStarted" })),
+);
+
+<Steps
+  onClick={(item, index) => {
+    exampleItems[index].progress = "completed";
+    setExampleItems([...exampleItems]);
+  }}
+  items={exampleItems}
+/>;
+```

package/emotion/es/components/Steps/Steps.template-doc.mdx

@@ -0,0 +1,82 @@
+---
+id: steps
+title: Steps
+---
+
+# Steps
+Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
+
+```tsx live
+import React, { ReactNode, useState } from "react";
+
+interface StepItemSimple {
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+interface StepItem {
+  title?: string;
+  content?: string | ReactNode;
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+type StepItemType = StepItemSimple | StepItem;
+
+interface Steps {
+  orientation?: "horizontal" | "vertical";
+  /* выравнивание заголовков и контента
+   * @default 'left' */
+  contentAlign?: "left" | "center"; //
+  size?: "xs" | "s" | "m" | "l";
+  indicatorSize?: 8 | 16 | 24 | 36;
+  /* наличие разделительной линии
+   * @default 'left' */
+  hasLine?: boolean;
+  /* включает упрощенное отображение, то есть без title и content
+   * даже если они есть в items */
+  simple?: boolean;
+  /* обработчик кликов по StepItem
+    при наличии onClick у полей появляется :hover
+    без onClick можно разместить в content кнопки и обрабатывать переходы через них
+  */
+  onClick?: (item: StepItemType, index: number) => void;
+  items: StepItemType[];
+}
+
+export const fullItems = [
+  {
+    title: 'Просто заголовок',
+    indicator: 1,
+    content: text,
+    progress: 'completed',
+  },
+  {
+    title: 'Очень длинный и неприятный заголовок',
+    indicator: 2,
+    content: text,
+    progress: 'inProgress',
+  },
+  {
+    title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
+    indicator: 3,
+    content: text,
+    progress: 'notStarted',
+  },
+];
+
+// пример использования
+const [exampleItems, setExampleItems] = useState<StepItem>(() =>
+  fullItems.map((item) => ({ ...item, progress: "notStarted" })),
+);
+
+<Steps
+  onClick={(item, index) => {
+    exampleItems[index].progress = "completed";
+    setExampleItems([...exampleItems]);
+  }}
+  items={exampleItems}
+/>;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.149.0-dev.0",
+  "version": "0.150.0-canary.1443.10955942474.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -123,5 +123,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "5e091a99416b158aad15a24710aef1843dfb41b1"
+  "gitHead": "7ef4b72a01412464354b9b86cda2e8a1de5c39ba"
 }

package/styled-components/cjs/components/Steps/Steps.template-doc.mdx

@@ -0,0 +1,82 @@
+---
+id: steps
+title: Steps
+---
+
+# Steps
+Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
+
+```tsx live
+import React, { ReactNode, useState } from "react";
+
+interface StepItemSimple {
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+interface StepItem {
+  title?: string;
+  content?: string | ReactNode;
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+type StepItemType = StepItemSimple | StepItem;
+
+interface Steps {
+  orientation?: "horizontal" | "vertical";
+  /* выравнивание заголовков и контента
+   * @default 'left' */
+  contentAlign?: "left" | "center"; //
+  size?: "xs" | "s" | "m" | "l";
+  indicatorSize?: 8 | 16 | 24 | 36;
+  /* наличие разделительной линии
+   * @default 'left' */
+  hasLine?: boolean;
+  /* включает упрощенное отображение, то есть без title и content
+   * даже если они есть в items */
+  simple?: boolean;
+  /* обработчик кликов по StepItem
+    при наличии onClick у полей появляется :hover
+    без onClick можно разместить в content кнопки и обрабатывать переходы через них
+  */
+  onClick?: (item: StepItemType, index: number) => void;
+  items: StepItemType[];
+}
+
+export const fullItems = [
+  {
+    title: 'Просто заголовок',
+    indicator: 1,
+    content: text,
+    progress: 'completed',
+  },
+  {
+    title: 'Очень длинный и неприятный заголовок',
+    indicator: 2,
+    content: text,
+    progress: 'inProgress',
+  },
+  {
+    title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
+    indicator: 3,
+    content: text,
+    progress: 'notStarted',
+  },
+];
+
+// пример использования
+const [exampleItems, setExampleItems] = useState<StepItem>(() =>
+  fullItems.map((item) => ({ ...item, progress: "notStarted" })),
+);
+
+<Steps
+  onClick={(item, index) => {
+    exampleItems[index].progress = "completed";
+    setExampleItems([...exampleItems]);
+  }}
+  items={exampleItems}
+/>;
+```

package/styled-components/es/components/Steps/Steps.template-doc.mdx

@@ -0,0 +1,82 @@
+---
+id: steps
+title: Steps
+---
+
+# Steps
+Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
+
+```tsx live
+import React, { ReactNode, useState } from "react";
+
+interface StepItemSimple {
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+interface StepItem {
+  title?: string;
+  content?: string | ReactNode;
+  indicator?: number | string | ReactNode;
+  progress?: "notStarted" | "completed" | "inProgress";
+  disabled?: boolean;
+}
+
+type StepItemType = StepItemSimple | StepItem;
+
+interface Steps {
+  orientation?: "horizontal" | "vertical";
+  /* выравнивание заголовков и контента
+   * @default 'left' */
+  contentAlign?: "left" | "center"; //
+  size?: "xs" | "s" | "m" | "l";
+  indicatorSize?: 8 | 16 | 24 | 36;
+  /* наличие разделительной линии
+   * @default 'left' */
+  hasLine?: boolean;
+  /* включает упрощенное отображение, то есть без title и content
+   * даже если они есть в items */
+  simple?: boolean;
+  /* обработчик кликов по StepItem
+    при наличии onClick у полей появляется :hover
+    без onClick можно разместить в content кнопки и обрабатывать переходы через них
+  */
+  onClick?: (item: StepItemType, index: number) => void;
+  items: StepItemType[];
+}
+
+export const fullItems = [
+  {
+    title: 'Просто заголовок',
+    indicator: 1,
+    content: text,
+    progress: 'completed',
+  },
+  {
+    title: 'Очень длинный и неприятный заголовок',
+    indicator: 2,
+    content: text,
+    progress: 'inProgress',
+  },
+  {
+    title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
+    indicator: 3,
+    content: text,
+    progress: 'notStarted',
+  },
+];
+
+// пример использования
+const [exampleItems, setExampleItems] = useState<StepItem>(() =>
+  fullItems.map((item) => ({ ...item, progress: "notStarted" })),
+);
+
+<Steps
+  onClick={(item, index) => {
+    exampleItems[index].progress = "completed";
+    setExampleItems([...exampleItems]);
+  }}
+  items={exampleItems}
+/>;
+```