@synerise/ds-stepper 0.3.24 → 0.3.25

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@0.3.24...@synerise/ds-stepper@0.3.25) (2023-05-20)
+
+
+### Bug Fixes
+
+* **stepper:** enable warning mode in step, fix logic of clicable pointer ([5f257f9](https://github.com/Synerise/synerise-design/commit/5f257f95ececc549e4de0957995f5e13f664988b))
+
+
+
+
+
 ## [0.3.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@0.3.23...@synerise/ds-stepper@0.3.24) (2023-04-26)
 
 **Note:** Version bump only for package @synerise/ds-stepper

package/README.md

@@ -53,5 +53,8 @@ import Stepper from '@synerise/ds-stepper'
 | onClick    | Function called when user clicks on step  | `() => void`                 | -       |
 | stepNumber | Step number                               | `number`                     | -       |
 | tooltip    | Shows icon with tooltip if step is active | `string` \ `React.ReactNode` | -       |
-| validated  | Whether stop has some errors              | `boolean`                    | `false` |
+| validated  | Whether step has some errors              | `boolean`                    | `false` |
+| warning    | Whether step has warning status           | `boolean`                    | -       |
+
+'Acive', 'done', 'validated', 'warning' are properties that determinate what color will have internal wrappers. Please note that it might overwrite some css properties. Properties hierarchy: 'validated' < 'warning' < 'done' < 'active'
 

package/dist/Step/Step.js

@@ -11,6 +11,7 @@ var Step = function Step(_ref) {
       label = _ref.label,
       active = _ref.active,
       done = _ref.done,
+      warning = _ref.warning,
       validated = _ref.validated,
       tooltip = _ref.tooltip,
       onClick = _ref.onClick,
@@ -41,6 +42,7 @@ var Step = function Step(_ref) {
     active: Boolean(active),
     wasActive: wasActive,
     done: Boolean(done),
+    warning: Boolean(warning),
     validated: Boolean(validated),
     hasChildren: Boolean(children),
     size: size,

package/dist/Step/Step.styles.d.ts

@@ -13,6 +13,7 @@ export declare const Step: import("styled-components").StyledComponent<"div", an
     active: boolean;
     wasActive: boolean;
     done: boolean;
+    warning: boolean;
     validated: boolean;
     hasChildren: boolean;
     size: StepperSize;

package/dist/Step/Step.styles.js

@@ -28,7 +28,7 @@ export var StepWrapper = styled.div.withConfig({
   displayName: "Stepstyles__StepWrapper",
   componentId: "sc-1sayddf-4"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;cursor:", ";"], function (props) {
-  return props.onClick ? 'pointer' : 'default';
+  return props.clickable ? 'pointer' : 'default';
 });
 export var StepContent = styled.div.withConfig({
   displayName: "Stepstyles__StepContent",
@@ -64,6 +64,7 @@ export var Step = styled.div.withConfig({
   return false;
 }, function (props) {
   if (props.validated) return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['red-600'], StepNumber, StepLabel, props.theme.palette['red-600']);
+  if (props.warning) return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['yellow-600'], StepNumber, StepLabel, props.theme.palette['yellow-600']);
   if (props.done) return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['green-600'], StepNumber, StepLabel, props.theme.palette['green-600']);
   if (props.active) return css(["", "{border-color:", ";}", "{color:", ";font-weight:500;}", "{&::before{border-color:", ";color:", ";visibility:visible;}", "{visibility:hidden;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, props.theme.palette['grey-700'], StepName, props.theme.palette['grey-700'], props.theme.palette['grey-700'], StepLabel);
   return css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, StepLabel, props.theme.palette['grey-700']);

package/dist/Step/Step.types.d.ts

@@ -5,6 +5,7 @@ export declare type StepProps = {
     stepNumber: number;
     active?: boolean;
     done?: boolean;
+    warning?: boolean;
     validated?: boolean;
     tooltip?: string | React.ReactNode;
     onClick?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-stepper",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Stepper UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^0.56.0",
-    "@synerise/ds-tooltip": "^0.13.2",
+    "@synerise/ds-tooltip": "^0.13.3",
     "@synerise/ds-typography": "^0.12.7",
     "react-animate-height": "^2.0.23"
   },
@@ -41,5 +41,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787"
+  "gitHead": "5808615a55859820c255189f77977725ec79cd7d"
 }