@salutejs/plasma-new-hope 0.320.1-canary.1893.14259826529.0 → 0.321.0-canary.1872.14258030126.0

package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { IconMic } from '../../../../components/_Icon';
 import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { StepItemProps } from '../../../../components/Steps/ui';
 
+import { config } from './Steps.config';
 import { Steps, mergedConfig } from './Steps';
 
+const { views, sizes } = getConfigVariations(config);
+
 const meta: Meta<typeof Steps> = {
     title: 'web/Navigation/Steps',
     decorators: [WithTheme],
@@ -133,9 +136,11 @@ const DefaultStory = (args) => {
 
 export const Default: Story = {
     args: {
+        view: 'default',
+        itemView: 'default',
+        size: 'm',
         maxWidth: '100%',
         quantity: 6,
-        size: 'm',
         title: 'Title',
         content: 'Content',
         contentAlign: 'left',
@@ -153,10 +158,22 @@ export const Default: Story = {
                 type: 'text',
             },
         },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        itemView: {
+            options: ['default', 'negative', 'warning', 'positive'],
+            control: {
+                type: 'select',
+            },
+        },
         size: {
-            options: ['xs', 's', 'm', 'l'],
+            options: sizes,
             control: {
-                type: 'inline-radio',
+                type: 'select',
             },
         },
         orientation: {
@@ -189,7 +206,6 @@ export const Default: Story = {
                 type: 'boolean',
             },
         },
-        ...disableProps(['view']),
     },
     render: (args) => <DefaultStory {...args} />,
 };

package/emotion/es/components/Steps/Steps.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["view", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
+var _excluded = ["view", "itemView", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,11 +21,14 @@ import { StepItem } from './ui';
 import { base } from './Steps.styles';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
+import { base as itemViewCSS } from './variations/_itemView/base';
 import { getItemStatus } from './utils/getItemStatus';
 export var stepsRoot = function stepsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var _props$view = props.view,
       view = _props$view === void 0 ? 'default' : _props$view,
+      _props$itemView = props.itemView,
+      itemView = _props$itemView === void 0 ? 'default' : _props$itemView,
       size = props.size,
       _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
@@ -86,6 +89,7 @@ export var stepsRoot = function stepsRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,
       view: view,
+      itemView: itemView,
       ref: outerRef,
       className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
     }, rest), innerItems.map(function (item, index) {
@@ -120,10 +124,12 @@ export var stepsConfig = {
   base: base,
   variations: {
     size: sizeCSS,
-    view: viewCSS
+    view: viewCSS,
+    itemView: itemViewCSS
   },
   defaults: {
     view: 'default',
-    size: 'm'
+    size: 'm',
+    itemView: 'default'
   }
 };

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

@@ -10,7 +10,29 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Steps" />
 <PropsTable name="Steps" />
 
-## Вариант использования с управлением текущим элементом из вне
+## Внешнее вид
+
+:::info
+Важно! Значения `ItemView` применяются к шагу только когда его статус — inProgress.
+:::
+
+Внешний вид компонента регулируется 2 свойствами:
+
+#### View
+
+Свойство применяется ко всему компоненту и принимает следующие значения:
+- `default`
+- `accent`
+
+#### ItemView
+
+Свойство применяется к индикатору шага и заголовку, и принимает следующие значения:
+- `default`
+- `negative`
+- `warning`
+- `positive`
+
+## Внешнее управление
 
 ```tsx live
 import React, { useState } from 'react';
@@ -30,9 +52,7 @@ export function App() {
 
     return (
         <section>
-            <Steps items={items}
-                current={current}
-            />
+            <Steps items={items} current={current} />
             <br />
             <Button view="secondary" onClick={onClick}>
                 Next
@@ -42,7 +62,7 @@ export function App() {
 }
 ```
 
-## Вариант более гибкого использования через onChange и status в items
+## Управление через onChange и статус шага
 
 ```tsx live
 import React, { useState } from 'react';
@@ -82,3 +102,45 @@ export function App() {
     );
 }
 ```
+
+
+## Использование свойства ItemView
+
+```tsx live
+import React, { useState } from 'react';
+import { Steps, StepItemProps  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const initialItems = [{
+        indicator: 1,
+        title: 'Title',
+        content: 'Content',
+    }, {
+        indicator: 2,
+        title: 'Title',
+        content: 'Content',
+    }, {
+        indicator: 3,
+        title: 'Title',
+        content: 'Content',
+    }];
+
+    const [items, setItems] = useState(initialItems);
+
+    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
+        if (prevIndex !== undefined) {
+            items[prevIndex].status = 'completed';
+        }
+
+        items[index].status = 'active';
+
+        setItems([...items]);
+    };
+
+    return (
+        <section>
+            <Steps items={items} itemView="positive" onChange={onChange} />
+        </section>
+    );
+}
+```

package/emotion/es/components/Steps/Steps.tokens.js

@@ -63,6 +63,7 @@ export var tokens = {
   activeIndicatorColorHover: '--plasma-step-item-active-indicator-color-hover',
   activeIndicatorBackground: '--plasma-step-item-active-indicator-background',
   completedTitleColor: '--plasma-step-item-completed-title-color',
+  completedTitleColorHover: '--plasma-step-item-completed-title-color-hover',
   completedIndicatorColor: '--plasma-step-item-completed-indicator-color',
   completedIndicatorColorHover: '--plasma-step-item-completed-indicator-color-hover',
   completedIndicatorBackground: '--plasma-step-item-completed-indicator-background',
@@ -72,5 +73,6 @@ export var tokens = {
   inactiveIndicatorBackground: '--plasma-step-item-inactive-indicator-background',
   inactiveIndicatorBackgroundHover: '--plasma-step-item-inactive-indicator-background-hover',
   disabledOpacity: '--plasma-step-item-disabled-opacity',
-  dividerThickness: '--plasma-step-item-divider-thickness'
+  dividerThickness: '--plasma-step-item-divider-thickness',
+  dividerColor: '--plasma-step-item-divider-color'
 };