@synerise/ds-stepper 0.3.31 → 0.3.33

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@0.3.32...@synerise/ds-stepper@0.3.33) (2023-08-25)
+
+
+### Bug Fixes
+
+* **stepper:** fixed warning step styles ([8dd3b0a](https://github.com/Synerise/synerise-design/commit/8dd3b0a8af0a343c9c5c6d796479809af1c8b2fd))
+
+
+
+
+
+## [0.3.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@0.3.31...@synerise/ds-stepper@0.3.32) (2023-08-22)
+
+**Note:** Version bump only for package @synerise/ds-stepper
+
+
+
+
+
 ## [0.3.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@0.3.30...@synerise/ds-stepper@0.3.31) (2023-08-20)
 
 **Note:** Version bump only for package @synerise/ds-stepper

package/dist/Step/Step.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { StepProps } from './Step.types';
-declare const Step: React.FC<StepProps>;
+declare const Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: StepProps) => JSX.Element;
 export default Step;

package/dist/Step/Step.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import AnimateHeight from 'react-animate-height';
 import Icon, { CheckS, WarningFillS } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import Tooltip from '@synerise/ds-tooltip';
-import AnimateHeight from 'react-animate-height';
 import * as S from './Step.styles';
 import { ORIENTATIONS } from '../Stepper.types';
 
@@ -21,14 +21,14 @@ var Step = function Step(_ref) {
       _ref$orientation = _ref.orientation,
       orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation;
 
-  var _React$useState = React.useState(Boolean(active)),
-      wasActive = _React$useState[0],
-      setWasActive = _React$useState[1];
+  var _useState = useState(Boolean(active)),
+      wasActive = _useState[0],
+      setWasActive = _useState[1];
 
-  var handleClick = React.useCallback(function () {
+  var handleClick = useCallback(function () {
     onClick && onClick();
   }, [onClick]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (!active && wasActive) {
       setWasActive(false);
     }
@@ -57,7 +57,7 @@ var Step = function Step(_ref) {
     noMargin: !label
   }, done && !validated ? /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CheckS, null),
-    color: theme.palette['green-600']
+    color: warning ? theme.palette['yellow-600'] : theme.palette['green-600']
   }) : /*#__PURE__*/React.createElement(S.StepNumber, null, stepNumber))), /*#__PURE__*/React.createElement(S.StepName, {
     "data-label": label
   }, /*#__PURE__*/React.createElement(S.StepLabel, null, label), tooltip && active && /*#__PURE__*/React.createElement(Tooltip, {

package/dist/Step/Step.styles.js

@@ -63,8 +63,8 @@ export var Step = styled.div.withConfig({
   if (props.active) return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? '16px' : '0', props.hasChildren ? '16px' : '0');
   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.validated) return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['red-600'], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette['red-600']);
+  if (props.warning) return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['yellow-600'], StepNumber, StepNumber, StepLabel, 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

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { StepperOrientation, StepperSize } from '../Stepper.types';
 export declare type StepProps = {
-    label: string | React.ReactNode;
+    label: string | ReactNode;
     stepNumber: number;
     active?: boolean;
     done?: boolean;
     warning?: boolean;
     validated?: boolean;
-    tooltip?: string | React.ReactNode;
+    children?: ReactNode;
+    tooltip?: string | ReactNode;
     onClick?: () => void;
     size?: StepperSize;
     orientation?: StepperOrientation;

package/dist/Stepper.types.d.ts

@@ -1,5 +1,5 @@
-import Step from 'Step/Step';
 import { CSSProperties } from 'styled-components';
+import Step from './Step/Step';
 export declare type StepperOrientation = 'vertical' | 'horizontal' | string;
 export declare type StepperSize = 'small' | 'default' | string;
 export declare const ORIENTATIONS: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-stepper",
-  "version": "0.3.31",
+  "version": "0.3.33",
   "description": "Stepper UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,13 +33,13 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^0.58.0",
-    "@synerise/ds-tooltip": "^0.14.1",
-    "@synerise/ds-typography": "^0.12.8",
+    "@synerise/ds-tooltip": "^0.14.2",
+    "@synerise/ds-utils": "^0.24.13",
     "react-animate-height": "^2.0.23"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "0795eb5071d9160e429731ba8f8807c1ae509085"
+  "gitHead": "9d424b025fe368bbf3beccea2102f000f4d7e82c"
 }