@synerise/ds-stepper 1.0.11 → 1.0.13

package/README.md

@@ -6,6 +6,7 @@ title: Stepper
 Stepper UI Component
 
 ## Installation
+
 ```
 npm i @synerise/ds-stepper
 or
@@ -13,6 +14,7 @@ yarn add @synerise/ds-stepper
 ```
 
 ## Usage
+
 ```
 import Stepper from '@synerise/ds-stepper'
 
@@ -39,14 +41,14 @@ import Stepper from '@synerise/ds-stepper'
 
 ### Stepper
 
-| Property | Description                        | Type                      | Default      |
-| ---      | ---                                | ---                       | ---          |
-| orientation     | Defines direction of Stepper steps | `horizontal` \ `vertical` | `horizontal` |
+| Property    | Description                        | Type                      | Default      |
+| ----------- | ---------------------------------- | ------------------------- | ------------ |
+| orientation | Defines direction of Stepper steps | `horizontal` \ `vertical` | `horizontal` |
 
 ### Stepper.Step
 
 | Property   | Description                               | Type                         | Default |
-| ---        | ---                                       | ---                          | ---     |
+| ---------- | ----------------------------------------- | ---------------------------- | ------- |
 | active     | Whether current step is active            | `boolean`                    | `false` |
 | done       | Whether step was completed                | `boolean`                    | `false` |
 | label      | Label of step                             | `string` \ `React.ReactNode` | -       |
@@ -57,4 +59,3 @@ import Stepper from '@synerise/ds-stepper'
 | 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.d.ts

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

package/dist/Step/Step.js

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import AnimateHeight from 'react-animate-height';
-import Icon, { CheckS, WarningFillS } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
+import Icon, { CheckS, WarningFillS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Step.styles';
 import { ORIENTATIONS } from '../Stepper.types';
+import * as S from './Step.styles';
 var Step = function Step(_ref) {
   var stepNumber = _ref.stepNumber,
     label = _ref.label,

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

@@ -1,4 +1,4 @@
-import { StepperOrientation, StepperSize } from '../Stepper.types';
+import { type StepperOrientation, type StepperSize } from '../Stepper.types';
 export declare const StepPrefix: import("styled-components").StyledComponent<"div", any, {
     noMargin: boolean;
 }, never>;

package/dist/Step/Step.styles.js

@@ -54,13 +54,23 @@ export var Step = styled.div.withConfig({
   if (props.active && props.size === 'small' && props.orientation === ORIENTATIONS.HORIZONTAL) {
     return css(["", "{margin-right:8px;}", "{max-width:100px;opacity:1;}"], StepPrefix, StepName);
   }
-  if (props.active) return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? '16px' : '0', props.hasChildren ? '16px' : '0');
+  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, 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);
+  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 props.clickable && css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, StepLabel, props.theme.palette['grey-700']);
 }, StepContent, StepWrapper, function (props) {
   return props.clickable ? 'pointer' : 'default';

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StepperOrientation, StepperSize } from '../Stepper.types';
+import { type ReactNode } from 'react';
+import { type StepperOrientation, type StepperSize } from '../Stepper.types';
 export type StepProps = {
     label: string | ReactNode;
     stepNumber: number;

package/dist/Stepper.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StepperProps } from './Stepper.types';
+import { type StepperProps } from './Stepper.types';
 declare const Stepper: {
-    ({ orientation, style, children, size }: StepperProps): React.JSX.Element;
+    ({ orientation, style, children, size, }: StepperProps): React.JSX.Element;
     Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: import("./Step/Step.types").StepProps) => React.JSX.Element;
 };
 export default Stepper;

package/dist/Stepper.js

@@ -1,7 +1,7 @@
 import React, { Children, cloneElement, isValidElement } from 'react';
+import Step from './Step/Step';
 import * as S from './Stepper.styles';
 import { ORIENTATIONS } from './Stepper.types';
-import Step from './Step/Step';
 var Stepper = function Stepper(_ref) {
   var _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation,
@@ -17,7 +17,9 @@ var Stepper = function Stepper(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/isValidElement(Child) ? /*#__PURE__*/cloneElement(Child, {
       size: size,
       orientation: orientation
-    }) : Child, orientation === ORIENTATIONS.HORIZONTAL && index < children.length - 1 && /*#__PURE__*/React.createElement(S.StepDivider, null));
+    }) : Child, orientation === ORIENTATIONS.HORIZONTAL &&
+    // @ts-expect-error Property 'length' does not exist on type 'number'.
+    index < children.length - 1 && /*#__PURE__*/React.createElement(S.StepDivider, null));
   }));
 };
 Stepper.Step = Step;

package/dist/Stepper.styles.d.ts

@@ -1,4 +1,4 @@
-import { StepperOrientation } from './Stepper.types';
+import { type StepperOrientation } from './Stepper.types';
 export declare const StepperWrapper: import("styled-components").StyledComponent<"div", any, {
     orientation: StepperOrientation;
 }, never>;

package/dist/Stepper.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { ORIENTATIONS } from './Stepper.types';
 import { Step, StepContent, StepWrapper } from './Step/Step.styles';
+import { ORIENTATIONS } from './Stepper.types';
 export var StepperWrapper = styled.div.withConfig({
   displayName: "Stepperstyles__StepperWrapper",
   componentId: "sc-2yak4n-0"

package/dist/Stepper.types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-stepper",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Stepper UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.5.3",
-    "@synerise/ds-tooltip": "^1.1.10",
-    "@synerise/ds-utils": "^1.3.0",
+    "@synerise/ds-icon": "^1.5.4",
+    "@synerise/ds-tooltip": "^1.1.12",
+    "@synerise/ds-utils": "^1.3.1",
     "react-animate-height": "^2.0.23"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "f2713cd35cfe22f63a159f05144585834897a132"
+  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
 }