@applique-ui/stepper - npm Package Compare versions

Comparing version 0.0.54 to 0.0.55

dist/step.d.ts

@@ -1,3 +0,2 @@
-import { PureComponent } from 'react';
-import StepSeparator from './step-separator';
+import { PureComponent, ReactNode } from 'react';
 export interface Props extends BaseProps {
@@ -13,3 +12,3 @@ /**
     /** Small description if required */
-    description?: string;
+    description?: string | ReactNode;
     /** Boolean to set if step error's out */
@@ -32,4 +31,3 @@ error?: boolean;
      */
-    static Separator: typeof StepSeparator;
     render(): JSX.Element;
 }

dist/stepper.cjs.js

@@ -18,26 +18,2 @@ 'use strict';
 
-function styleInject$3(css) {
-  if (!css || typeof document === 'undefined') return
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-  style.type = 'text/css';
-
-  head.appendChild(style);
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-styleInject$3(".aui-stepper-stepper{height:100%}.aui-stepper-stepper__pane{display:flex;padding:24px}.aui-stepper-stepper__pane--horizontal{flex-direction:row}.aui-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
-
-const locals$3 = {"stepper":"aui-stepper-stepper","stepper__pane":"aui-stepper-stepper__pane","stepper__pane--horizontal":"aui-stepper-stepper__pane--horizontal","stepper__pane--vertical":"aui-stepper-stepper__pane--vertical"};
-
-function classnames$3() {
-  return uikitUtils.classnames.apply(null, arguments).use(locals$3)
-}
-
 function styleInject$2(css) {
@@ -59,5 +35,5 @@ if (!css || typeof document === 'undefined') return
 
-styleInject$2(".aui-stepper-step{position:relative;flex:1 1 0}.aui-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.aui-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.aui-stepper-step__indicator:after{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.aui-stepper-step__indicator:hover{transform:scale(1.2)}.aui-stepper-step__label{position:absolute}.aui-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.aui-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.aui-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.aui-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.aui-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.aui-stepper-step__item--horizontal{flex-direction:row}.aui-stepper-step__item--vertical{flex-direction:column;height:100%}.aui-stepper-step__item--vertical .aui-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.aui-stepper-step__item--active .aui-stepper-step__indicator:after,.aui-stepper-step__item--active .aui-stepper-step__indicator:before{border-color:#4f46c8}.aui-stepper-step__item--active .aui-stepper-step__indicator:after{background:#4f46c8}.aui-stepper-step__item--completed .aui-stepper-step__indicator:after,.aui-stepper-step__item--completed .aui-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.aui-stepper-step__item--error .aui-stepper-step__indicator:after,.aui-stepper-step__item--error .aui-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.aui-stepper-step--vertical:last-child{flex:0}");
+styleInject$2(".aui-stepper-stepper{height:100%;padding:8px}.aui-stepper-stepper__pane{display:flex;padding:24px}.aui-stepper-stepper__pane--horizontal{flex-direction:row}.aui-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
 
-const locals$2 = {"step":"aui-stepper-step","step__indicator":"aui-stepper-step__indicator","step__label":"aui-stepper-step__label","step__label--horizontal":"aui-stepper-step__label--horizontal","step__label--vertical":"aui-stepper-step__label--vertical","step__icon":"aui-stepper-step__icon","step__half-complete":"aui-stepper-step__half-complete","step__item":"aui-stepper-step__item","step__item--horizontal":"aui-stepper-step__item--horizontal","step__item--vertical":"aui-stepper-step__item--vertical","step__item--active":"aui-stepper-step__item--active","step__item--completed":"aui-stepper-step__item--completed","step__item--error":"aui-stepper-step__item--error","step--vertical":"aui-stepper-step--vertical"};
+const locals$2 = {"stepper":"aui-stepper-stepper","stepper__pane":"aui-stepper-stepper__pane","stepper__pane--horizontal":"aui-stepper-stepper__pane--horizontal","stepper__pane--vertical":"aui-stepper-stepper__pane--vertical"};
 
@@ -84,5 +60,5 @@ function classnames$2() {
 
-styleInject$1(".aui-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.aui-stepper-step-separator--horizontal{width:100%}.aui-stepper-step-separator--vertical{flex-direction:column;height:100%}.aui-stepper-step-separator--completed{border-color:#4f46c8}.aui-stepper-step-separator--has-small-steps{border:none}.aui-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
+styleInject$1(".aui-stepper-step{position:relative;flex:1 1 0;width:100%;height:100%}.aui-stepper-step--horizontal{display:flex;border-top:2px solid #e6e6e6}.aui-stepper-step--horizontal:last-child{border-top:none}.aui-stepper-step--vertical{border-left:2px solid #e6e6e6}.aui-stepper-step--vertical:last-child{border-left:none}.aui-stepper-step--completed{border-left-color:#4f46c8}.aui-stepper-step__content{min-height:120px;min-width:120px}.aui-stepper-step__indicator{position:absolute;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.aui-stepper-step__indicator--horizontal{top:-10px;justify-content:flex-start}.aui-stepper-step__indicator--vertical{left:-11px;flex-direction:column}.aui-stepper-step__indicator--vertical .aui-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:before{border-color:#4f46c8}.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:after{background:#4f46c8}.aui-stepper-step__indicator--completed .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--completed .aui-stepper-step__indicator--icon:before{background:#4f46c8;border-color:#4f46c8}.aui-stepper-step__indicator--error .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--error .aui-stepper-step__indicator--icon:before{background:#c84646;border-color:#c84646}.aui-stepper-step__indicator--icon{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.aui-stepper-step__indicator--icon--design{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.aui-stepper-step__indicator--icon:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.aui-stepper-step__indicator--icon:after{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#e6e6e6;border:4px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.aui-stepper-step__indicator--icon:hover{transform:scale(1.2)}.aui-stepper-step__label{width:100%;height:100%}.aui-stepper-step__label--horizontal{padding-top:16px}.aui-stepper-step__label--vertical{padding-left:16px}.aui-stepper-step__label--heading{margin-top:0!important}.aui-stepper-step__label--description{margin:12px 0}");
 
-const locals$1 = {"step-separator":"aui-stepper-step-separator","step-separator--horizontal":"aui-stepper-step-separator--horizontal","step-separator--vertical":"aui-stepper-step-separator--vertical","step-separator--completed":"aui-stepper-step-separator--completed","step-separator--has-small-steps":"aui-stepper-step-separator--has-small-steps","step-separator__half-complete":"aui-stepper-step-separator__half-complete"};
+const locals$1 = {"step":"aui-stepper-step","step--horizontal":"aui-stepper-step--horizontal","step--vertical":"aui-stepper-step--vertical","step--completed":"aui-stepper-step--completed","step__content":"aui-stepper-step__content","step__indicator":"aui-stepper-step__indicator","step__indicator--horizontal":"aui-stepper-step__indicator--horizontal","step__indicator--vertical":"aui-stepper-step__indicator--vertical","step__half-complete":"aui-stepper-step__half-complete","step__indicator--active":"aui-stepper-step__indicator--active","step__indicator--icon":"aui-stepper-step__indicator--icon","step__indicator--completed":"aui-stepper-step__indicator--completed","step__indicator--error":"aui-stepper-step__indicator--error","step__indicator--icon--design":"aui-stepper-step__indicator--icon--design","step__label":"aui-stepper-step__label","step__label--horizontal":"aui-stepper-step__label--horizontal","step__label--vertical":"aui-stepper-step__label--vertical","step__label--heading":"aui-stepper-step__label--heading","step__label--description":"aui-stepper-step__label--description"};
 
@@ -93,20 +69,2 @@ function classnames$1() {
 
-/**
- * Connector between the steps
- *
- * @since 1.13.42
- * @status REVIEWING
- * @category basic
- * @see http://uikit.myntra.com/components/stepper/step-separator
- */
-class StepSeparator extends React.PureComponent {
-    render() {
-        const { orientation, children, hasSmallSteps, completed, className, } = this.props;
-        return (React__default["default"].createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, {
-                'step-separator--has-small-steps': hasSmallSteps,
-                'step-separator--completed': completed,
-            }) }, children));
-    }
-}
-
 const TimesSolid = () =>
@@ -159,33 +117,34 @@ React__default["default"].createElement(
 class Step extends React.PureComponent {
+    /**
+     * Your code goes here
+     */
     render() {
         const children = React.Children.toArray(this.props.children).filter((child) => React.isValidElement(child));
-        const { label, description, completed, error, className, orientation, hasSeparator, active, ...props } = this.props;
-        return (React__default["default"].createElement("div", { className: classnames$2('step', `step--${orientation}`) },
-            React__default["default"].createElement("div", { className: classnames$2('step__item', `step__item--${orientation}`, {
-                    'step__item--completed': completed,
-                    'step__item--has-small-step': !!children.length,
-                    'step__item--active': active,
-                    'step__item--error': error,
-                }) },
-                React__default["default"].createElement("div", { className: classnames$2('step__indicator') },
-                    completed && (React__default["default"].createElement(Icon__default["default"], { name: CheckSolid, color: "light", className: classnames$2('step__icon') })),
-                    error && (React__default["default"].createElement(Icon__default["default"], { name: TimesSolid, color: "light", className: classnames$2('step__icon') }))),
-                hasSeparator && (React__default["default"].createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, React.Children.map(children, (child, index) => React.cloneElement(child, {
-                    'data-index': `step.${this.props['data-index']}.${index}`,
-                    orientation,
-                    children: null,
-                    active: active &&
-                        index ===
-                            children.findIndex((child) => !child.props.completed),
-                })))),
-                !!children.length && completed && (React__default["default"].createElement("div", { className: classnames$2('step__half-complete') }))),
-            React__default["default"].createElement(Layout__default["default"], { type: "row", gutter: "none", className: classnames$2('step__label', `step__label--${orientation}`) },
-                React__default["default"].createElement(Text__default["default"], { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label),
-                description && (React__default["default"].createElement(Text__default["default"].p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)))));
+        const { label, description, completed, error, className, orientation, active, ...props } = this.props;
+        return (React__default["default"].createElement("div", { className: classnames$1('step', `step--${orientation}`, {
+                'step--completed': completed,
+            }) },
+            React__default["default"].createElement(Layout__default["default"], { type: orientation === 'vertical' ? "stack" : "row", className: classnames$1('step__content') },
+                React__default["default"].createElement("div", { className: classnames$1('step__indicator', `step__indicator--${orientation}`, {
+                        'step__indicator--completed': completed,
+                        'step__indicator--has-small-step': !!children.length,
+                        'step__indicator--active': active,
+                        'step__indicator--error': error,
+                    }) },
+                    React__default["default"].createElement("div", { className: classnames$1('step__indicator--icon') },
+                        completed && (React__default["default"].createElement(Icon__default["default"], { name: CheckSolid, color: "light", className: classnames$1('step__indicator--icon--design') })),
+                        error && (React__default["default"].createElement(Icon__default["default"], { name: TimesSolid, color: "light", className: classnames$1('step__indicator--icon--design') })))),
+                React__default["default"].createElement(Layout__default["default"], { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) },
+                    React__default["default"].createElement(Text__default["default"].H4, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null, className: classnames$1('step__label--heading') }, label),
+                    typeof description === 'string' ? (React__default["default"].createElement(Text__default["default"].p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)) : React__default["default"].createElement("div", { className: classnames$1('step__label--description') }, description))),
+            React.Children.map(children, (child, index) => React.cloneElement(child, {
+                'data-index': `step.${this.props['data-index']}.${index}`,
+                orientation,
+                children: null,
+                active: active &&
+                    index ===
+                        children.findIndex((child) => !child.props.completed),
+            }))));
     }
 }
-/**
- * Your code goes here
- */
-Step.Separator = StepSeparator;
 
@@ -208,5 +167,5 @@ function styleInject(css) {
 
-styleInject(".aui-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.aui-stepper-small-step:first-child .aui-stepper-small-step__left-separator,.aui-stepper-small-step:last-child .aui-stepper-small-step__right-separator{flex:1 1 100%}.aui-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__label{display:flex}.aui-stepper-small-step__left-separator,.aui-stepper-small-step__right-separator{flex:1 2 100%}.aui-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.aui-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.aui-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.aui-stepper-small-step__label--always-open{display:flex}.aui-stepper-small-step--vertical{flex-direction:column}.aui-stepper-small-step--vertical .aui-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.aui-stepper-small-step--vertical .aui-stepper-small-step__label:after{content:none}.aui-stepper-small-step--completed .aui-stepper-small-step__indicator{background:#4f46c8}.aui-stepper-small-step--error .aui-stepper-small-step__indicator{background:#c84646}");
+styleInject(".aui-stepper-small-step{display:flex;align-items:flex-start;width:100%;min-width:120px;min-height:120px}.aui-stepper-small-step:first-child .aui-stepper-small-step__left-separator,.aui-stepper-small-step:last-child .aui-stepper-small-step__right-separator{flex:1 1 100%}.aui-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__label{display:flex}.aui-stepper-small-step__left-separator,.aui-stepper-small-step__right-separator{flex:1 2 100%}.aui-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.aui-stepper-small-step__indicator--horizontal{top:-1px}.aui-stepper-small-step__indicator--vertical{top:12px;left:-1px}.aui-stepper-small-step__label{display:none;min-width:160px;padding:0 12px;margin-bottom:16px;background:#000}.aui-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.aui-stepper-small-step__label--always-open{display:flex}.aui-stepper-small-step__label--heading{margin-top:0!important}.aui-stepper-small-step--vertical{flex-direction:column}.aui-stepper-small-step--vertical .aui-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent}.aui-stepper-small-step--vertical .aui-stepper-small-step__label:after{content:none}.aui-stepper-small-step--completed .aui-stepper-small-step__indicator{background:#4f46c8}.aui-stepper-small-step--error .aui-stepper-small-step__indicator{background:#c84646}");
 
-const locals = {"small-step":"aui-stepper-small-step","small-step__left-separator":"aui-stepper-small-step__left-separator","small-step__right-separator":"aui-stepper-small-step__right-separator","small-step__tooltip":"aui-stepper-small-step__tooltip","small-step__indicator":"aui-stepper-small-step__indicator","small-step__label":"aui-stepper-small-step__label","small-step__label--always-open":"aui-stepper-small-step__label--always-open","small-step--vertical":"aui-stepper-small-step--vertical","small-step--completed":"aui-stepper-small-step--completed","small-step--error":"aui-stepper-small-step--error"};
+const locals = {"small-step":"aui-stepper-small-step","small-step__left-separator":"aui-stepper-small-step__left-separator","small-step__right-separator":"aui-stepper-small-step__right-separator","small-step__tooltip":"aui-stepper-small-step__tooltip","small-step__indicator":"aui-stepper-small-step__indicator","small-step__label":"aui-stepper-small-step__label","small-step__indicator--horizontal":"aui-stepper-small-step__indicator--horizontal","small-step__indicator--vertical":"aui-stepper-small-step__indicator--vertical","small-step__label--always-open":"aui-stepper-small-step__label--always-open","small-step__label--heading":"aui-stepper-small-step__label--heading","small-step--vertical":"aui-stepper-small-step--vertical","small-step--completed":"aui-stepper-small-step--completed","small-step--error":"aui-stepper-small-step--error"};
 
@@ -232,11 +191,9 @@ function classnames() {
             }) },
-            React__default["default"].createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__left-separator'), completed: completed }),
             React__default["default"].createElement("div", { className: classnames('small-step__tooltip') },
-                React__default["default"].createElement("div", { className: classnames('small-step__indicator') }),
+                React__default["default"].createElement("div", { className: classnames('small-step__indicator', `small-step__indicator--${orientation}`) }),
                 React__default["default"].createElement(Layout__default["default"], { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, {
                         'small-step__label--always-open': showLabel,
                     }) },
-                    React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, label),
-                    description && (React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))),
-            React__default["default"].createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__right-separator'), completed: completed })));
+                    React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null, className: classnames('small-step__label--heading') }, label),
+                    description && (React__default["default"].createElement(Text__default["default"].p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description))))));
     }
@@ -285,6 +242,5 @@ }
         const { activeStep } = this.state;
-        return (React__default["default"].createElement("div", Object.assign({ className: classnames$3('stepper', className) }, props),
-            React__default["default"].createElement("div", { className: classnames$3('stepper__pane', `stepper__pane--${orientation}`) }, React.Children.map(children, (child, index) => React.cloneElement(child, {
+        return (React__default["default"].createElement("div", Object.assign({ className: classnames$2('stepper', className) }, props),
+            React__default["default"].createElement("div", { className: classnames$2('stepper__pane', `stepper__pane--${orientation}`) }, React.Children.map(children, (child, index) => React.cloneElement(child, {
                 'data-index': index,
-                hasSeparator: !(index === children.length - 1),
                 orientation,
@@ -291,0 +247,0 @@ active: activeStep === index,

dist/stepper.esm.js

 import React, { PureComponent, Children, isValidElement, cloneElement } from 'react';
-import { classnames as classnames$4 } from '@applique-ui/uikit-utils';
+import { classnames as classnames$3 } from '@applique-ui/uikit-utils';
 import Text from '@applique-ui/text';
@@ -7,26 +7,2 @@ import Layout from '@applique-ui/layout';
 
-function styleInject$3(css) {
-  if (!css || typeof document === 'undefined') return
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-  style.type = 'text/css';
-
-  head.appendChild(style);
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-styleInject$3(".aui-stepper-stepper{height:100%}.aui-stepper-stepper__pane{display:flex;padding:24px}.aui-stepper-stepper__pane--horizontal{flex-direction:row}.aui-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
-
-const locals$3 = {"stepper":"aui-stepper-stepper","stepper__pane":"aui-stepper-stepper__pane","stepper__pane--horizontal":"aui-stepper-stepper__pane--horizontal","stepper__pane--vertical":"aui-stepper-stepper__pane--vertical"};
-
-function classnames$3() {
-  return classnames$4.apply(null, arguments).use(locals$3)
-}
-
 function styleInject$2(css) {
@@ -48,8 +24,8 @@ if (!css || typeof document === 'undefined') return
 
-styleInject$2(".aui-stepper-step{position:relative;flex:1 1 0}.aui-stepper-step__indicator{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.aui-stepper-step__indicator:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.aui-stepper-step__indicator:after{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#e6e6e6;border:1px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.aui-stepper-step__indicator:hover{transform:scale(1.2)}.aui-stepper-step__label{position:absolute}.aui-stepper-step__label--horizontal{left:10px;padding-top:4px;text-align:center;transform:translateX(-50%)}.aui-stepper-step__label--vertical{top:10px;left:100%;min-width:120px;padding-left:12px;transform:translateY(-50%)}.aui-stepper-step__icon{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.aui-stepper-step__half-complete{position:absolute;left:20px;width:15%;height:2px;background:#4f46c8}.aui-stepper-step__item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.aui-stepper-step__item--horizontal{flex-direction:row}.aui-stepper-step__item--vertical{flex-direction:column;height:100%}.aui-stepper-step__item--vertical .aui-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.aui-stepper-step__item--active .aui-stepper-step__indicator:after,.aui-stepper-step__item--active .aui-stepper-step__indicator:before{border-color:#4f46c8}.aui-stepper-step__item--active .aui-stepper-step__indicator:after{background:#4f46c8}.aui-stepper-step__item--completed .aui-stepper-step__indicator:after,.aui-stepper-step__item--completed .aui-stepper-step__indicator:before{background:#4f46c8;border-color:#4f46c8}.aui-stepper-step__item--error .aui-stepper-step__indicator:after,.aui-stepper-step__item--error .aui-stepper-step__indicator:before{background:#c84646;border-color:#c84646}.aui-stepper-step--vertical:last-child{flex:0}");
+styleInject$2(".aui-stepper-stepper{height:100%;padding:8px}.aui-stepper-stepper__pane{display:flex;padding:24px}.aui-stepper-stepper__pane--horizontal{flex-direction:row}.aui-stepper-stepper__pane--vertical{flex-direction:column;align-items:baseline;height:100%}");
 
-const locals$2 = {"step":"aui-stepper-step","step__indicator":"aui-stepper-step__indicator","step__label":"aui-stepper-step__label","step__label--horizontal":"aui-stepper-step__label--horizontal","step__label--vertical":"aui-stepper-step__label--vertical","step__icon":"aui-stepper-step__icon","step__half-complete":"aui-stepper-step__half-complete","step__item":"aui-stepper-step__item","step__item--horizontal":"aui-stepper-step__item--horizontal","step__item--vertical":"aui-stepper-step__item--vertical","step__item--active":"aui-stepper-step__item--active","step__item--completed":"aui-stepper-step__item--completed","step__item--error":"aui-stepper-step__item--error","step--vertical":"aui-stepper-step--vertical"};
+const locals$2 = {"stepper":"aui-stepper-stepper","stepper__pane":"aui-stepper-stepper__pane","stepper__pane--horizontal":"aui-stepper-stepper__pane--horizontal","stepper__pane--vertical":"aui-stepper-stepper__pane--vertical"};
 
 function classnames$2() {
-  return classnames$4.apply(null, arguments).use(locals$2)
+  return classnames$3.apply(null, arguments).use(locals$2)
 }
@@ -73,28 +49,10 @@
 
-styleInject$1(".aui-stepper-step-separator{position:relative;z-index:0;display:flex;justify-content:space-evenly;border:1px solid #e6e6e6}.aui-stepper-step-separator--horizontal{width:100%}.aui-stepper-step-separator--vertical{flex-direction:column;height:100%}.aui-stepper-step-separator--completed{border-color:#4f46c8}.aui-stepper-step-separator--has-small-steps{border:none}.aui-stepper-step-separator__half-complete{position:absolute;left:0;width:15%;border-color:#4f46c8}");
+styleInject$1(".aui-stepper-step{position:relative;flex:1 1 0;width:100%;height:100%}.aui-stepper-step--horizontal{display:flex;border-top:2px solid #e6e6e6}.aui-stepper-step--horizontal:last-child{border-top:none}.aui-stepper-step--vertical{border-left:2px solid #e6e6e6}.aui-stepper-step--vertical:last-child{border-left:none}.aui-stepper-step--completed{border-left-color:#4f46c8}.aui-stepper-step__content{min-height:120px;min-width:120px}.aui-stepper-step__indicator{position:absolute;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.aui-stepper-step__indicator--horizontal{top:-10px;justify-content:flex-start}.aui-stepper-step__indicator--vertical{left:-11px;flex-direction:column}.aui-stepper-step__indicator--vertical .aui-stepper-step__half-complete{top:20px;left:50%;width:2px;height:15%;transform:translateX(-50%)}.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:before{border-color:#4f46c8}.aui-stepper-step__indicator--active .aui-stepper-step__indicator--icon:after{background:#4f46c8}.aui-stepper-step__indicator--completed .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--completed .aui-stepper-step__indicator--icon:before{background:#4f46c8;border-color:#4f46c8}.aui-stepper-step__indicator--error .aui-stepper-step__indicator--icon:after,.aui-stepper-step__indicator--error .aui-stepper-step__indicator--icon:before{background:#c84646;border-color:#c84646}.aui-stepper-step__indicator--icon{position:relative;z-index:1;flex-grow:0;flex-shrink:0;width:20px;height:20px}.aui-stepper-step__indicator--icon--design{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.aui-stepper-step__indicator--icon:before{box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#fff;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform-origin:center center}.aui-stepper-step__indicator--icon:after{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:100%;height:100%;content:\"\";background:#e6e6e6;border:4px solid #e6e6e6;border-radius:50%;transform:scale(.5);transform-origin:center center}.aui-stepper-step__indicator--icon:hover{transform:scale(1.2)}.aui-stepper-step__label{width:100%;height:100%}.aui-stepper-step__label--horizontal{padding-top:16px}.aui-stepper-step__label--vertical{padding-left:16px}.aui-stepper-step__label--heading{margin-top:0!important}.aui-stepper-step__label--description{margin:12px 0}");
 
-const locals$1 = {"step-separator":"aui-stepper-step-separator","step-separator--horizontal":"aui-stepper-step-separator--horizontal","step-separator--vertical":"aui-stepper-step-separator--vertical","step-separator--completed":"aui-stepper-step-separator--completed","step-separator--has-small-steps":"aui-stepper-step-separator--has-small-steps","step-separator__half-complete":"aui-stepper-step-separator__half-complete"};
+const locals$1 = {"step":"aui-stepper-step","step--horizontal":"aui-stepper-step--horizontal","step--vertical":"aui-stepper-step--vertical","step--completed":"aui-stepper-step--completed","step__content":"aui-stepper-step__content","step__indicator":"aui-stepper-step__indicator","step__indicator--horizontal":"aui-stepper-step__indicator--horizontal","step__indicator--vertical":"aui-stepper-step__indicator--vertical","step__half-complete":"aui-stepper-step__half-complete","step__indicator--active":"aui-stepper-step__indicator--active","step__indicator--icon":"aui-stepper-step__indicator--icon","step__indicator--completed":"aui-stepper-step__indicator--completed","step__indicator--error":"aui-stepper-step__indicator--error","step__indicator--icon--design":"aui-stepper-step__indicator--icon--design","step__label":"aui-stepper-step__label","step__label--horizontal":"aui-stepper-step__label--horizontal","step__label--vertical":"aui-stepper-step__label--vertical","step__label--heading":"aui-stepper-step__label--heading","step__label--description":"aui-stepper-step__label--description"};
 
 function classnames$1() {
-  return classnames$4.apply(null, arguments).use(locals$1)
+  return classnames$3.apply(null, arguments).use(locals$1)
 }
 
-/**
- * Connector between the steps
- *
- * @since 1.13.42
- * @status REVIEWING
- * @category basic
- * @see http://uikit.myntra.com/components/stepper/step-separator
- */
-class StepSeparator extends PureComponent {
-    render() {
-        const { orientation, children, hasSmallSteps, completed, className, } = this.props;
-        return (React.createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, {
-                'step-separator--has-small-steps': hasSmallSteps,
-                'step-separator--completed': completed,
-            }) }, children));
-    }
-}
-
 const TimesSolid = () =>
@@ -147,33 +105,34 @@ React.createElement(
 class Step extends PureComponent {
+    /**
+     * Your code goes here
+     */
     render() {
         const children = Children.toArray(this.props.children).filter((child) => isValidElement(child));
-        const { label, description, completed, error, className, orientation, hasSeparator, active, ...props } = this.props;
-        return (React.createElement("div", { className: classnames$2('step', `step--${orientation}`) },
-            React.createElement("div", { className: classnames$2('step__item', `step__item--${orientation}`, {
-                    'step__item--completed': completed,
-                    'step__item--has-small-step': !!children.length,
-                    'step__item--active': active,
-                    'step__item--error': error,
-                }) },
-                React.createElement("div", { className: classnames$2('step__indicator') },
-                    completed && (React.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$2('step__icon') })),
-                    error && (React.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$2('step__icon') }))),
-                hasSeparator && (React.createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, Children.map(children, (child, index) => cloneElement(child, {
-                    'data-index': `step.${this.props['data-index']}.${index}`,
-                    orientation,
-                    children: null,
-                    active: active &&
-                        index ===
-                            children.findIndex((child) => !child.props.completed),
-                })))),
-                !!children.length && completed && (React.createElement("div", { className: classnames$2('step__half-complete') }))),
-            React.createElement(Layout, { type: "row", gutter: "none", className: classnames$2('step__label', `step__label--${orientation}`) },
-                React.createElement(Text, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label),
-                description && (React.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)))));
+        const { label, description, completed, error, className, orientation, active, ...props } = this.props;
+        return (React.createElement("div", { className: classnames$1('step', `step--${orientation}`, {
+                'step--completed': completed,
+            }) },
+            React.createElement(Layout, { type: orientation === 'vertical' ? "stack" : "row", className: classnames$1('step__content') },
+                React.createElement("div", { className: classnames$1('step__indicator', `step__indicator--${orientation}`, {
+                        'step__indicator--completed': completed,
+                        'step__indicator--has-small-step': !!children.length,
+                        'step__indicator--active': active,
+                        'step__indicator--error': error,
+                    }) },
+                    React.createElement("div", { className: classnames$1('step__indicator--icon') },
+                        completed && (React.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$1('step__indicator--icon--design') })),
+                        error && (React.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$1('step__indicator--icon--design') })))),
+                React.createElement(Layout, { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) },
+                    React.createElement(Text.H4, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null, className: classnames$1('step__label--heading') }, label),
+                    typeof description === 'string' ? (React.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description)) : React.createElement("div", { className: classnames$1('step__label--description') }, description))),
+            Children.map(children, (child, index) => cloneElement(child, {
+                'data-index': `step.${this.props['data-index']}.${index}`,
+                orientation,
+                children: null,
+                active: active &&
+                    index ===
+                        children.findIndex((child) => !child.props.completed),
+            }))));
     }
 }
-/**
- * Your code goes here
- */
-Step.Separator = StepSeparator;
 
@@ -196,8 +155,8 @@ function styleInject(css) {
 
-styleInject(".aui-stepper-small-step{display:flex;align-items:center;width:100%;height:100%}.aui-stepper-small-step:first-child .aui-stepper-small-step__left-separator,.aui-stepper-small-step:last-child .aui-stepper-small-step__right-separator{flex:1 1 100%}.aui-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__label{display:flex}.aui-stepper-small-step__left-separator,.aui-stepper-small-step__right-separator{flex:1 2 100%}.aui-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.aui-stepper-small-step__label{position:absolute;bottom:0;left:-50px;display:none;width:160px;padding:12px;margin-bottom:16px;background:#000}.aui-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.aui-stepper-small-step__label--always-open{display:flex}.aui-stepper-small-step--vertical{flex-direction:column}.aui-stepper-small-step--vertical .aui-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent;transform:translateY(50%)}.aui-stepper-small-step--vertical .aui-stepper-small-step__label:after{content:none}.aui-stepper-small-step--completed .aui-stepper-small-step__indicator{background:#4f46c8}.aui-stepper-small-step--error .aui-stepper-small-step__indicator{background:#c84646}");
+styleInject(".aui-stepper-small-step{display:flex;align-items:flex-start;width:100%;min-width:120px;min-height:120px}.aui-stepper-small-step:first-child .aui-stepper-small-step__left-separator,.aui-stepper-small-step:last-child .aui-stepper-small-step__right-separator{flex:1 1 100%}.aui-stepper-small-step__tooltip{position:relative;z-index:1;display:block!important}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__indicator{transform:translate(-50%,-50%) scale(.7)}.aui-stepper-small-step__tooltip:hover .aui-stepper-small-step__label{display:flex}.aui-stepper-small-step__left-separator,.aui-stepper-small-step__right-separator{flex:1 2 100%}.aui-stepper-small-step__indicator{position:absolute;box-sizing:border-box;display:block;width:20px;height:20px;background:#e6e6e6;border-radius:50%;box-shadow:0 1px 4px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(.5);transform-origin:center center}.aui-stepper-small-step__indicator--horizontal{top:-1px}.aui-stepper-small-step__indicator--vertical{top:12px;left:-1px}.aui-stepper-small-step__label{display:none;min-width:160px;padding:0 12px;margin-bottom:16px;background:#000}.aui-stepper-small-step__label:after{position:absolute;bottom:0;left:50px;content:\"\";border:8px solid transparent;border-top-color:#000;transform:translate(-50%,100%)}.aui-stepper-small-step__label--always-open{display:flex}.aui-stepper-small-step__label--heading{margin-top:0!important}.aui-stepper-small-step--vertical{flex-direction:column}.aui-stepper-small-step--vertical .aui-stepper-small-step__label{bottom:50%;left:10px;display:flex;margin-bottom:0;background:transparent}.aui-stepper-small-step--vertical .aui-stepper-small-step__label:after{content:none}.aui-stepper-small-step--completed .aui-stepper-small-step__indicator{background:#4f46c8}.aui-stepper-small-step--error .aui-stepper-small-step__indicator{background:#c84646}");
 
-const locals = {"small-step":"aui-stepper-small-step","small-step__left-separator":"aui-stepper-small-step__left-separator","small-step__right-separator":"aui-stepper-small-step__right-separator","small-step__tooltip":"aui-stepper-small-step__tooltip","small-step__indicator":"aui-stepper-small-step__indicator","small-step__label":"aui-stepper-small-step__label","small-step__label--always-open":"aui-stepper-small-step__label--always-open","small-step--vertical":"aui-stepper-small-step--vertical","small-step--completed":"aui-stepper-small-step--completed","small-step--error":"aui-stepper-small-step--error"};
+const locals = {"small-step":"aui-stepper-small-step","small-step__left-separator":"aui-stepper-small-step__left-separator","small-step__right-separator":"aui-stepper-small-step__right-separator","small-step__tooltip":"aui-stepper-small-step__tooltip","small-step__indicator":"aui-stepper-small-step__indicator","small-step__label":"aui-stepper-small-step__label","small-step__indicator--horizontal":"aui-stepper-small-step__indicator--horizontal","small-step__indicator--vertical":"aui-stepper-small-step__indicator--vertical","small-step__label--always-open":"aui-stepper-small-step__label--always-open","small-step__label--heading":"aui-stepper-small-step__label--heading","small-step--vertical":"aui-stepper-small-step--vertical","small-step--completed":"aui-stepper-small-step--completed","small-step--error":"aui-stepper-small-step--error"};
 
 function classnames() {
-  return classnames$4.apply(null, arguments).use(locals)
+  return classnames$3.apply(null, arguments).use(locals)
 }
@@ -220,11 +179,9 @@
             }) },
-            React.createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__left-separator'), completed: completed }),
             React.createElement("div", { className: classnames('small-step__tooltip') },
-                React.createElement("div", { className: classnames('small-step__indicator') }),
+                React.createElement("div", { className: classnames('small-step__indicator', `small-step__indicator--${orientation}`) }),
                 React.createElement(Layout, { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, {
                         'small-step__label--always-open': showLabel,
                     }) },
-                    React.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, label),
-                    description && (React.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))),
-            React.createElement(StepSeparator, { orientation: orientation, className: classnames('small-step__right-separator'), completed: completed })));
+                    React.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null, className: classnames('small-step__label--heading') }, label),
+                    description && (React.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description))))));
     }
@@ -273,6 +230,5 @@ }
         const { activeStep } = this.state;
-        return (React.createElement("div", Object.assign({ className: classnames$3('stepper', className) }, props),
-            React.createElement("div", { className: classnames$3('stepper__pane', `stepper__pane--${orientation}`) }, Children.map(children, (child, index) => cloneElement(child, {
+        return (React.createElement("div", Object.assign({ className: classnames$2('stepper', className) }, props),
+            React.createElement("div", { className: classnames$2('stepper__pane', `stepper__pane--${orientation}`) }, Children.map(children, (child, index) => cloneElement(child, {
                 'data-index': index,
-                hasSeparator: !(index === children.length - 1),
                 orientation,
@@ -279,0 +235,0 @@ active: activeStep === index,

package.json

 {
   "name": "@applique-ui/stepper",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "main": "dist/stepper.cjs.js",
@@ -37,4 +37,4 @@ "module": "dist/stepper.esm.js",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

51326

decreased by-6.83%

Number of package files

16

decreased by-15.79%

Lines of code

889

decreased by-13.44%

Dependency changes

• - Removed@myntra/uikit-icons@1.0.43(transitive)

• Updateduikit-icons@npm:@applique-ui/uikit-icons@latest