@applique-ui/stepper
Advanced tools
Comparing version 0.0.35 to 0.0.36
@@ -5,16 +5,12 @@ 'use strict'; | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
var React = require('react'); | ||
var React__default = _interopDefault(React); | ||
var uikitUtils = require('@applique-ui/uikit-utils'); | ||
var Text = require('@applique-ui/text'); | ||
var Layout = require('@applique-ui/layout'); | ||
var Icon = require('@applique-ui/icon'); | ||
var Text = _interopDefault(require('@applique-ui/text')); | ||
var Layout = _interopDefault(require('@applique-ui/layout')); | ||
var Icon = _interopDefault(require('@applique-ui/icon')); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text); | ||
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout); | ||
var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon); | ||
function styleInject$3(css) { | ||
function styleInject(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -35,11 +31,11 @@ | ||
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%}"); | ||
styleInject(".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"}; | ||
const locals = {"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 classnames() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
} | ||
function styleInject$2(css) { | ||
function styleInject$1(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -60,11 +56,11 @@ | ||
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$1(".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}"); | ||
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$1 = {"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"}; | ||
function classnames$2() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$2) | ||
function classnames$1() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
} | ||
function styleInject$1(css) { | ||
function styleInject$2(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -85,8 +81,8 @@ | ||
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$2(".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}"); | ||
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$2 = {"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"}; | ||
function classnames$1() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
function classnames$2() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$2) | ||
} | ||
@@ -105,3 +101,3 @@ | ||
const { orientation, children, hasSmallSteps, completed, className, } = this.props; | ||
return (React__default["default"].createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, { | ||
return (React__default.createElement("div", { className: classnames$2(className, 'step-separator', `step-separator--${orientation}`, { | ||
'step-separator--has-small-steps': hasSmallSteps, | ||
@@ -114,3 +110,3 @@ 'step-separator--completed': completed, | ||
const TimesSolid = () => | ||
React__default["default"].createElement( | ||
React__default.createElement( | ||
'svg', | ||
@@ -126,3 +122,3 @@ { | ||
}, | ||
React__default["default"].createElement('path', { | ||
React__default.createElement('path', { | ||
fill: 'currentColor', | ||
@@ -135,3 +131,3 @@ d: | ||
const CheckSolid = () => | ||
React__default["default"].createElement( | ||
React__default.createElement( | ||
'svg', | ||
@@ -147,3 +143,3 @@ { | ||
}, | ||
React__default["default"].createElement('path', { | ||
React__default.createElement('path', { | ||
fill: 'currentColor', | ||
@@ -167,4 +163,4 @@ d: | ||
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}`, { | ||
return (React__default.createElement("div", { className: classnames$1('step', `step--${orientation}`) }, | ||
React__default.createElement("div", { className: classnames$1('step__item', `step__item--${orientation}`, { | ||
'step__item--completed': completed, | ||
@@ -175,6 +171,6 @@ 'step__item--has-small-step': !!children.length, | ||
}) }, | ||
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, { | ||
React__default.createElement("div", { className: classnames$1('step__indicator') }, | ||
completed && (React__default.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$1('step__icon') })), | ||
error && (React__default.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$1('step__icon') }))), | ||
hasSeparator && (React__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}`, | ||
@@ -187,6 +183,6 @@ orientation, | ||
})))), | ||
!!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))))); | ||
!!children.length && completed && (React__default.createElement("div", { className: classnames$1('step__half-complete') }))), | ||
React__default.createElement(Layout, { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) }, | ||
React__default.createElement(Text, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label), | ||
description && (React__default.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description))))); | ||
} | ||
@@ -199,3 +195,3 @@ } | ||
function styleInject(css) { | ||
function styleInject$3(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -216,8 +212,8 @@ | ||
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$3(".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}"); | ||
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$3 = {"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"}; | ||
function classnames() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
function classnames$3() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$3) | ||
} | ||
@@ -236,15 +232,15 @@ | ||
const { label, description, completed, error, orientation, showLabel, active, ...props } = this.props; | ||
return (React__default["default"].createElement("div", { className: classnames('small-step', `small-step--${orientation}`, { | ||
return (React__default.createElement("div", { className: classnames$3('small-step', `small-step--${orientation}`, { | ||
'small-step--completed': completed, | ||
'small-step--error': error, | ||
}) }, | ||
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(Layout__default["default"], { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, { | ||
React__default.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__left-separator'), completed: completed }), | ||
React__default.createElement("div", { className: classnames$3('small-step__tooltip') }, | ||
React__default.createElement("div", { className: classnames$3('small-step__indicator') }), | ||
React__default.createElement(Layout, { type: "row", gutter: "none", className: classnames$3('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.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, label), | ||
description && (React__default.createElement(Text.p, { color: orientation === 'horizontal' ? 'light' : 'dark', weight: active ? 'bolder' : null }, description)))), | ||
React__default.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__right-separator'), completed: completed }))); | ||
} | ||
@@ -293,4 +289,4 @@ } | ||
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.createElement("div", Object.assign({ className: classnames('stepper', className) }, props), | ||
React__default.createElement("div", { className: classnames('stepper__pane', `stepper__pane--${orientation}`) }, React.Children.map(children, (child, index) => React.cloneElement(child, { | ||
'data-index': index, | ||
@@ -316,2 +312,2 @@ hasSeparator: !(index === children.length - 1), | ||
exports["default"] = Stepper; | ||
exports.default = Stepper; |
@@ -7,3 +7,3 @@ import React, { PureComponent, Children, isValidElement, cloneElement } from 'react'; | ||
function styleInject$3(css) { | ||
function styleInject(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -24,11 +24,11 @@ | ||
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%}"); | ||
styleInject(".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"}; | ||
const locals = {"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 classnames() { | ||
return classnames$4.apply(null, arguments).use(locals) | ||
} | ||
function styleInject$2(css) { | ||
function styleInject$1(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -49,11 +49,11 @@ | ||
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$1(".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}"); | ||
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$1 = {"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"}; | ||
function classnames$2() { | ||
return classnames$4.apply(null, arguments).use(locals$2) | ||
function classnames$1() { | ||
return classnames$4.apply(null, arguments).use(locals$1) | ||
} | ||
function styleInject$1(css) { | ||
function styleInject$2(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -74,8 +74,8 @@ | ||
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$2(".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}"); | ||
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$2 = {"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"}; | ||
function classnames$1() { | ||
return classnames$4.apply(null, arguments).use(locals$1) | ||
function classnames$2() { | ||
return classnames$4.apply(null, arguments).use(locals$2) | ||
} | ||
@@ -94,3 +94,3 @@ | ||
const { orientation, children, hasSmallSteps, completed, className, } = this.props; | ||
return (React.createElement("div", { className: classnames$1(className, 'step-separator', `step-separator--${orientation}`, { | ||
return (React.createElement("div", { className: classnames$2(className, 'step-separator', `step-separator--${orientation}`, { | ||
'step-separator--has-small-steps': hasSmallSteps, | ||
@@ -152,4 +152,4 @@ 'step-separator--completed': completed, | ||
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}`, { | ||
return (React.createElement("div", { className: classnames$1('step', `step--${orientation}`) }, | ||
React.createElement("div", { className: classnames$1('step__item', `step__item--${orientation}`, { | ||
'step__item--completed': completed, | ||
@@ -160,5 +160,5 @@ 'step__item--has-small-step': !!children.length, | ||
}) }, | ||
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') }))), | ||
React.createElement("div", { className: classnames$1('step__indicator') }, | ||
completed && (React.createElement(Icon, { name: CheckSolid, color: "light", className: classnames$1('step__icon') })), | ||
error && (React.createElement(Icon, { name: TimesSolid, color: "light", className: classnames$1('step__icon') }))), | ||
hasSeparator && (React.createElement(StepSeparator, { orientation: orientation, hasSmallSteps: !!children.length, completed: completed }, Children.map(children, (child, index) => cloneElement(child, { | ||
@@ -172,4 +172,4 @@ 'data-index': `step.${this.props['data-index']}.${index}`, | ||
})))), | ||
!!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}`) }, | ||
!!children.length && completed && (React.createElement("div", { className: classnames$1('step__half-complete') }))), | ||
React.createElement(Layout, { type: "row", gutter: "none", className: classnames$1('step__label', `step__label--${orientation}`) }, | ||
React.createElement(Text, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, label), | ||
@@ -184,3 +184,3 @@ description && (React.createElement(Text.p, { emphasis: completed || active ? 'high' : 'disabled', weight: active ? 'bolder' : null }, description))))); | ||
function styleInject(css) { | ||
function styleInject$3(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -201,8 +201,8 @@ | ||
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$3(".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}"); | ||
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$3 = {"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"}; | ||
function classnames() { | ||
return classnames$4.apply(null, arguments).use(locals) | ||
function classnames$3() { | ||
return classnames$4.apply(null, arguments).use(locals$3) | ||
} | ||
@@ -221,10 +221,10 @@ | ||
const { label, description, completed, error, orientation, showLabel, active, ...props } = this.props; | ||
return (React.createElement("div", { className: classnames('small-step', `small-step--${orientation}`, { | ||
return (React.createElement("div", { className: classnames$3('small-step', `small-step--${orientation}`, { | ||
'small-step--completed': completed, | ||
'small-step--error': error, | ||
}) }, | ||
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(Layout, { type: "row", gutter: "none", className: classnames('small-step__label', `small-step__label--${orientation}`, { | ||
React.createElement(StepSeparator, { orientation: orientation, className: classnames$3('small-step__left-separator'), completed: completed }), | ||
React.createElement("div", { className: classnames$3('small-step__tooltip') }, | ||
React.createElement("div", { className: classnames$3('small-step__indicator') }), | ||
React.createElement(Layout, { type: "row", gutter: "none", className: classnames$3('small-step__label', `small-step__label--${orientation}`, { | ||
'small-step__label--always-open': showLabel, | ||
@@ -234,3 +234,3 @@ }) }, | ||
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(StepSeparator, { orientation: orientation, className: classnames$3('small-step__right-separator'), completed: completed }))); | ||
} | ||
@@ -279,4 +279,4 @@ } | ||
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('stepper', className) }, props), | ||
React.createElement("div", { className: classnames('stepper__pane', `stepper__pane--${orientation}`) }, Children.map(children, (child, index) => cloneElement(child, { | ||
'data-index': index, | ||
@@ -302,2 +302,2 @@ hasSeparator: !(index === children.length - 1), | ||
export { Stepper as default }; | ||
export default Stepper; |
{ | ||
"name": "@applique-ui/stepper", | ||
"version": "0.0.35", | ||
"version": "0.0.36", | ||
"main": "dist/stepper.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/stepper.esm.js", |
@@ -1,2 +0,2 @@ | ||
import Stepper from './Stepper' | ||
import Stepper from './stepper' | ||
@@ -3,0 +3,0 @@ describe('Floating action button', () => { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
0
54483
1024