@elliemae/ds-stepper 2.2.0-alpha.3 → 3.0.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Stepper.js +58 -61
- package/cjs/StepperButton.js +57 -58
- package/cjs/index.js +13 -29
- package/cjs/props.js +29 -60
- package/cjs/styled.js +29 -69
- package/esm/Stepper.js +43 -33
- package/esm/StepperButton.js +42 -29
- package/esm/index.js +2 -4
- package/esm/props.js +20 -29
- package/esm/styled.js +18 -40
- package/package.json +5 -5
- package/cjs/Stepper.js.map +0 -7
- package/cjs/StepperButton.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/props.js.map +0 -7
- package/cjs/styled.js.map +0 -7
- package/esm/Stepper.js.map +0 -7
- package/esm/StepperButton.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/props.js.map +0 -7
- package/esm/styled.js.map +0 -7
package/cjs/Stepper.js
CHANGED
|
@@ -1,64 +1,61 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var import_react_desc = __toESM(require("react-desc"));
|
|
37
|
-
var import_ds_props_helpers = __toESM(require("@elliemae/ds-props-helpers"));
|
|
38
|
-
var import_props = __toESM(require("./props"));
|
|
39
|
-
var import_styled = __toESM(require("./styled"));
|
|
40
|
-
const DSStepper = (props) => {
|
|
41
|
-
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.defaultProps);
|
|
42
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.dsStepperProps);
|
|
43
|
-
const { steps, current, visited } = propsWithDefaults;
|
|
44
|
-
const stepsArray = import_react.default.useMemo(() => new Array(steps).fill(1), [steps]);
|
|
45
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styled.StepperWrapper, {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
14
|
+
var React = require('react');
|
|
15
|
+
var uid = require('uid');
|
|
16
|
+
var reactDesc = require('react-desc');
|
|
17
|
+
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
18
|
+
var props = require('./props.js');
|
|
19
|
+
var styled = require('./styled.js');
|
|
20
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
25
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
26
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
27
|
+
|
|
28
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
29
|
+
|
|
30
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
31
|
+
|
|
32
|
+
const DSStepper = props$1 => {
|
|
33
|
+
const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
|
|
34
|
+
dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.dsStepperProps);
|
|
35
|
+
const {
|
|
46
36
|
steps,
|
|
47
37
|
current,
|
|
48
|
-
visited
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
visited: visited
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
|
|
58
|
-
|
|
38
|
+
visited
|
|
39
|
+
} = propsWithDefaults;
|
|
40
|
+
const stepsArray = React__default["default"].useMemo(() => new Array(steps).fill(1), [steps]);
|
|
41
|
+
return /*#__PURE__*/jsxRuntime.jsx(styled.StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
|
|
42
|
+
steps: steps,
|
|
43
|
+
current: current,
|
|
44
|
+
visited: visited
|
|
45
|
+
}, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
|
|
46
|
+
children: stepsArray.map((item, index) => /*#__PURE__*/_jsx__default["default"](styled.Step // eslint-disable-next-line react/no-array-index-key
|
|
47
|
+
, {
|
|
48
|
+
active: current === index,
|
|
49
|
+
visited: visited.includes(index),
|
|
50
|
+
"data-testid": props$1['data-testid'] ? "".concat(props$1['data-testid'], "-step") : undefined,
|
|
51
|
+
"data-active": current === index,
|
|
52
|
+
"data-visited": visited.includes(index)
|
|
53
|
+
}, "".concat(uid.uid(4), "step-key-").concat(index)))
|
|
54
|
+
}));
|
|
59
55
|
};
|
|
60
|
-
|
|
61
|
-
const StepperWithSchema =
|
|
62
|
-
StepperWithSchema.propTypes =
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
|
|
57
|
+
const StepperWithSchema = reactDesc.describe(DSStepper);
|
|
58
|
+
StepperWithSchema.propTypes = props.dsStepperProps;
|
|
59
|
+
|
|
60
|
+
exports.DSStepper = DSStepper;
|
|
61
|
+
exports.StepperWithSchema = StepperWithSchema;
|
package/cjs/StepperButton.js
CHANGED
|
@@ -1,61 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var import_props = __toESM(require("./props"));
|
|
40
|
-
var import_styled = __toESM(require("./styled"));
|
|
41
|
-
const DSStepperButton = (props) => {
|
|
42
|
-
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.defaultButtonProps);
|
|
43
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.dsStepperButtonProps);
|
|
44
|
-
const { chevron, fontSize, label, disabled, onClick, innerRef } = propsWithDefaults;
|
|
45
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledButton, {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
12
|
+
require('react');
|
|
13
|
+
var reactDesc = require('react-desc');
|
|
14
|
+
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
15
|
+
var dsButton = require('@elliemae/ds-button');
|
|
16
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
17
|
+
var props = require('./props.js');
|
|
18
|
+
var styled = require('./styled.js');
|
|
19
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
20
|
+
|
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
|
+
|
|
23
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
24
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
25
|
+
|
|
26
|
+
var _ChevronLeft, _ChevronRight;
|
|
27
|
+
|
|
28
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
29
|
+
|
|
30
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
31
|
+
|
|
32
|
+
const DSStepperButton = props$1 => {
|
|
33
|
+
const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultButtonProps);
|
|
34
|
+
dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.dsStepperButtonProps);
|
|
35
|
+
const {
|
|
36
|
+
chevron,
|
|
37
|
+
fontSize,
|
|
38
|
+
label,
|
|
46
39
|
disabled,
|
|
47
40
|
onClick,
|
|
48
|
-
innerRef
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
41
|
+
innerRef
|
|
42
|
+
} = propsWithDefaults;
|
|
43
|
+
return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledButton, _objectSpread(_objectSpread(_objectSpread({
|
|
44
|
+
disabled: disabled,
|
|
45
|
+
onClick: onClick,
|
|
46
|
+
innerRef: innerRef,
|
|
47
|
+
buttonType: dsButton.BUTTON_TYPES.TEXT,
|
|
48
|
+
fontSize: fontSize
|
|
49
|
+
}, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
|
|
50
|
+
children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {})) : null, /*#__PURE__*/_jsx__default["default"](styled.Label, {
|
|
51
|
+
value: label
|
|
52
|
+
}), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {})) : null]
|
|
53
|
+
}));
|
|
56
54
|
};
|
|
57
|
-
|
|
58
|
-
const DSStepperButtonWithSchema =
|
|
59
|
-
DSStepperButtonWithSchema.propTypes =
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
|
|
56
|
+
const DSStepperButtonWithSchema = reactDesc.describe(DSStepperButton);
|
|
57
|
+
DSStepperButtonWithSchema.propTypes = props.dsStepperButtonProps;
|
|
58
|
+
|
|
59
|
+
exports.DSStepperButton = DSStepperButton;
|
|
60
|
+
exports.DSStepperButtonWithSchema = DSStepperButtonWithSchema;
|
package/cjs/index.js
CHANGED
|
@@ -1,29 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return target;
|
|
15
|
-
};
|
|
16
|
-
var __toESM = (module2, isNodeMode) => {
|
|
17
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
24
|
-
var src_exports = {};
|
|
25
|
-
var React = __toESM(require("react"));
|
|
26
|
-
__reExport(src_exports, __toESM(require("./Stepper")));
|
|
27
|
-
__reExport(src_exports, __toESM(require("./StepperButton")));
|
|
28
|
-
module.exports = __toCommonJS(src_exports);
|
|
29
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Stepper = require('./Stepper.js');
|
|
6
|
+
var StepperButton = require('./StepperButton.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.DSStepper = Stepper.DSStepper;
|
|
11
|
+
exports.StepperWithSchema = Stepper.StepperWithSchema;
|
|
12
|
+
exports.DSStepperButton = StepperButton.DSStepperButton;
|
|
13
|
+
exports.DSStepperButtonWithSchema = StepperButton.DSStepperButtonWithSchema;
|
package/cjs/props.js
CHANGED
|
@@ -1,73 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var props_exports = {};
|
|
29
|
-
__export(props_exports, {
|
|
30
|
-
defaultButtonProps: () => defaultButtonProps,
|
|
31
|
-
defaultProps: () => defaultProps,
|
|
32
|
-
dsStepperButtonProps: () => dsStepperButtonProps,
|
|
33
|
-
dsStepperProps: () => dsStepperProps
|
|
34
|
-
});
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
var import_lodash = __toESM(require("lodash"));
|
|
37
|
-
var import_react_desc = __toESM(require("react-desc"));
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var lodash = require('lodash');
|
|
6
|
+
var reactDesc = require('react-desc');
|
|
7
|
+
|
|
38
8
|
const BUTTON_SIZES = {
|
|
39
|
-
normal:
|
|
40
|
-
large:
|
|
41
|
-
};
|
|
42
|
-
const CHEVRON_TYPE = {
|
|
43
|
-
left: "left",
|
|
44
|
-
right: "right"
|
|
9
|
+
normal: 'normal',
|
|
10
|
+
large: 'large'
|
|
45
11
|
};
|
|
46
12
|
const defaultProps = {
|
|
47
13
|
steps: 5,
|
|
48
|
-
current:
|
|
14
|
+
current: undefined,
|
|
49
15
|
visited: []
|
|
50
16
|
};
|
|
51
17
|
const dsStepperProps = {
|
|
52
|
-
steps:
|
|
53
|
-
current:
|
|
54
|
-
visited:
|
|
18
|
+
steps: reactDesc.PropTypes.number.description('Number of steps').isRequired,
|
|
19
|
+
current: reactDesc.PropTypes.number.description('Index of active step'),
|
|
20
|
+
visited: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('Array of visited steps').isRequired
|
|
55
21
|
};
|
|
56
22
|
const defaultButtonProps = {
|
|
57
|
-
chevron:
|
|
23
|
+
chevron: undefined,
|
|
58
24
|
fontSize: BUTTON_SIZES.normal,
|
|
59
25
|
disabled: false,
|
|
60
|
-
onClick:
|
|
26
|
+
onClick: lodash.noop
|
|
61
27
|
};
|
|
62
28
|
const dsStepperButtonProps = {
|
|
63
|
-
chevron:
|
|
64
|
-
fontSize:
|
|
65
|
-
label:
|
|
66
|
-
disabled:
|
|
67
|
-
onClick:
|
|
68
|
-
innerRef:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
|
|
29
|
+
chevron: reactDesc.PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
|
|
30
|
+
fontSize: reactDesc.PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
|
|
31
|
+
label: reactDesc.PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
|
|
32
|
+
disabled: reactDesc.PropTypes.bool.description('Adds disabled state.'),
|
|
33
|
+
onClick: reactDesc.PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
|
|
34
|
+
innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Inner ref to button component.'),
|
|
35
|
+
'aria-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
|
|
36
|
+
'data-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the data-* props')
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
exports.defaultButtonProps = defaultButtonProps;
|
|
40
|
+
exports.defaultProps = defaultProps;
|
|
41
|
+
exports.dsStepperButtonProps = dsStepperButtonProps;
|
|
42
|
+
exports.dsStepperProps = dsStepperProps;
|
package/cjs/styled.js
CHANGED
|
@@ -1,69 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Label: () => Label,
|
|
31
|
-
Step: () => Step,
|
|
32
|
-
StepperWrapper: () => StepperWrapper,
|
|
33
|
-
StyledButton: () => StyledButton
|
|
34
|
-
});
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
37
|
-
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
38
|
-
var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
|
|
39
|
-
const StepperWrapper = import_styled_components.default.div`
|
|
40
|
-
display: grid;
|
|
41
|
-
align-items: flex-end;
|
|
42
|
-
grid-template-columns repeat(${(props) => props.steps}, 1fr);
|
|
43
|
-
column-gap: ${(props) => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs};
|
|
44
|
-
`;
|
|
45
|
-
const Step = import_styled_components.default.div`
|
|
46
|
-
display: grid;
|
|
47
|
-
border-radius: 1px;
|
|
48
|
-
height: ${(props) => props.active ? "5px" : "3px"};
|
|
49
|
-
background: ${(props) => props.active || props.visited ? props.theme.colors.brand[700] : "#A9B1BE"};
|
|
50
|
-
`;
|
|
51
|
-
const Label = (0, import_styled_components.default)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText)`
|
|
52
|
-
position: relative;
|
|
53
|
-
top: 1px;
|
|
54
|
-
`;
|
|
55
|
-
const StyledButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
56
|
-
white-space: nowrap;
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
max-width: 100%;
|
|
59
|
-
padding-left: ${(props) => props.theme.space.xxs};
|
|
60
|
-
padding-right: ${(props) => props.theme.space.xxs};
|
|
61
|
-
color: ${(props) => props.theme.colors.brand[600]};
|
|
62
|
-
& > span:not(.em-ds-icon) {
|
|
63
|
-
position: relative;
|
|
64
|
-
top: ${(props) => props.fontSize === "large" ? "2px" : "1px"};
|
|
65
|
-
font-size: ${(props) => props.fontSize === "large" ? "22px" : "18px"};
|
|
66
|
-
}
|
|
67
|
-
`;
|
|
68
|
-
module.exports = __toCommonJS(styled_exports);
|
|
69
|
-
//# sourceMappingURL=styled.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var dsButton = require('@elliemae/ds-button');
|
|
7
|
+
var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
const StepperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
14
|
+
componentId: "sc-fgtqnq-0"
|
|
15
|
+
})(["display:grid;align-items:flex-end;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs);
|
|
16
|
+
const Step = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
17
|
+
componentId: "sc-fgtqnq-1"
|
|
18
|
+
})(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE');
|
|
19
|
+
const Label = /*#__PURE__*/styled__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText).withConfig({
|
|
20
|
+
componentId: "sc-fgtqnq-2"
|
|
21
|
+
})(["position:relative;top:1px;"]);
|
|
22
|
+
const StyledButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
|
|
23
|
+
componentId: "sc-fgtqnq-3"
|
|
24
|
+
})(["white-space:nowrap;overflow:hidden;max-width:100%;padding-left:", ";padding-right:", ";color:", ";& > span:not(.em-ds-icon){position:relative;top:", ";font-size:", ";}"], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.brand[600], props => props.fontSize === 'large' ? '2px' : '1px', props => props.fontSize === 'large' ? '22px' : '18px');
|
|
25
|
+
|
|
26
|
+
exports.Label = Label;
|
|
27
|
+
exports.Step = Step;
|
|
28
|
+
exports.StepperWrapper = StepperWrapper;
|
|
29
|
+
exports.StyledButton = StyledButton;
|
package/esm/Stepper.js
CHANGED
|
@@ -1,40 +1,50 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import { uid } from 'uid';
|
|
12
|
+
import { describe } from 'react-desc';
|
|
13
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
|
|
14
|
+
import { dsStepperProps, defaultProps } from './props.js';
|
|
15
|
+
import { StepperWrapper, Step } from './styled.js';
|
|
16
|
+
import { jsx } from 'react/jsx-runtime';
|
|
17
|
+
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
+
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
+
|
|
22
|
+
const DSStepper = props => {
|
|
14
23
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
15
24
|
useValidateTypescriptPropTypes(propsWithDefaults, dsStepperProps);
|
|
16
|
-
const {
|
|
17
|
-
const stepsArray = React2.useMemo(() => new Array(steps).fill(1), [steps]);
|
|
18
|
-
return /* @__PURE__ */ React2.createElement(StepperWrapper, {
|
|
25
|
+
const {
|
|
19
26
|
steps,
|
|
20
27
|
current,
|
|
21
|
-
visited
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
visited: visited
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
visited
|
|
29
|
+
} = propsWithDefaults;
|
|
30
|
+
const stepsArray = React.useMemo(() => new Array(steps).fill(1), [steps]);
|
|
31
|
+
return /*#__PURE__*/jsx(StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
|
|
32
|
+
steps: steps,
|
|
33
|
+
current: current,
|
|
34
|
+
visited: visited
|
|
35
|
+
}, getAriaProps(props)), getDataProps(props)), {}, {
|
|
36
|
+
children: stepsArray.map((item, index) => /*#__PURE__*/_jsx(Step // eslint-disable-next-line react/no-array-index-key
|
|
37
|
+
, {
|
|
38
|
+
active: current === index,
|
|
39
|
+
visited: visited.includes(index),
|
|
40
|
+
"data-testid": props['data-testid'] ? "".concat(props['data-testid'], "-step") : undefined,
|
|
41
|
+
"data-active": current === index,
|
|
42
|
+
"data-visited": visited.includes(index)
|
|
43
|
+
}, "".concat(uid(4), "step-key-").concat(index)))
|
|
44
|
+
}));
|
|
32
45
|
};
|
|
33
|
-
|
|
46
|
+
|
|
34
47
|
const StepperWithSchema = describe(DSStepper);
|
|
35
48
|
StepperWithSchema.propTypes = dsStepperProps;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
StepperWithSchema
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=Stepper.js.map
|
|
49
|
+
|
|
50
|
+
export { DSStepper, StepperWithSchema };
|
package/esm/StepperButton.js
CHANGED
|
@@ -1,37 +1,50 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} from
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
8
|
+
import 'react';
|
|
9
|
+
import { describe } from 'react-desc';
|
|
10
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
|
|
11
|
+
import { BUTTON_TYPES } from '@elliemae/ds-button';
|
|
12
|
+
import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
|
|
13
|
+
import { dsStepperButtonProps, defaultButtonProps } from './props.js';
|
|
14
|
+
import { StyledButton, Label } from './styled.js';
|
|
15
|
+
import { jsxs } from 'react/jsx-runtime';
|
|
16
|
+
|
|
17
|
+
var _ChevronLeft, _ChevronRight;
|
|
18
|
+
|
|
19
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
+
|
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
+
|
|
23
|
+
const DSStepperButton = props => {
|
|
15
24
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultButtonProps);
|
|
16
25
|
useValidateTypescriptPropTypes(propsWithDefaults, dsStepperButtonProps);
|
|
17
|
-
const {
|
|
18
|
-
|
|
26
|
+
const {
|
|
27
|
+
chevron,
|
|
28
|
+
fontSize,
|
|
29
|
+
label,
|
|
19
30
|
disabled,
|
|
20
31
|
onClick,
|
|
21
|
-
innerRef
|
|
32
|
+
innerRef
|
|
33
|
+
} = propsWithDefaults;
|
|
34
|
+
return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread(_objectSpread({
|
|
35
|
+
disabled: disabled,
|
|
36
|
+
onClick: onClick,
|
|
37
|
+
innerRef: innerRef,
|
|
22
38
|
buttonType: BUTTON_TYPES.TEXT,
|
|
23
|
-
fontSize
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
})
|
|
39
|
+
fontSize: fontSize
|
|
40
|
+
}, getAriaProps(props)), getDataProps(props)), {}, {
|
|
41
|
+
children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {})) : null, /*#__PURE__*/_jsx(Label, {
|
|
42
|
+
value: label
|
|
43
|
+
}), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {})) : null]
|
|
44
|
+
}));
|
|
29
45
|
};
|
|
30
|
-
|
|
46
|
+
|
|
31
47
|
const DSStepperButtonWithSchema = describe(DSStepperButton);
|
|
32
48
|
DSStepperButtonWithSchema.propTypes = dsStepperButtonProps;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
DSStepperButtonWithSchema
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=StepperButton.js.map
|
|
49
|
+
|
|
50
|
+
export { DSStepperButton, DSStepperButtonWithSchema };
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export * from "./StepperButton";
|
|
4
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { DSStepper, StepperWithSchema } from './Stepper.js';
|
|
2
|
+
export { DSStepperButton, DSStepperButtonWithSchema } from './StepperButton.js';
|
package/esm/props.js
CHANGED
|
@@ -1,44 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { noop } from 'lodash';
|
|
2
|
+
import { PropTypes } from 'react-desc';
|
|
3
|
+
|
|
4
4
|
const BUTTON_SIZES = {
|
|
5
|
-
normal:
|
|
6
|
-
large:
|
|
7
|
-
};
|
|
8
|
-
const CHEVRON_TYPE = {
|
|
9
|
-
left: "left",
|
|
10
|
-
right: "right"
|
|
5
|
+
normal: 'normal',
|
|
6
|
+
large: 'large'
|
|
11
7
|
};
|
|
12
8
|
const defaultProps = {
|
|
13
9
|
steps: 5,
|
|
14
|
-
current:
|
|
10
|
+
current: undefined,
|
|
15
11
|
visited: []
|
|
16
12
|
};
|
|
17
13
|
const dsStepperProps = {
|
|
18
|
-
steps: PropTypes.number.description(
|
|
19
|
-
current: PropTypes.number.description(
|
|
20
|
-
visited: PropTypes.arrayOf(PropTypes.number).description(
|
|
14
|
+
steps: PropTypes.number.description('Number of steps').isRequired,
|
|
15
|
+
current: PropTypes.number.description('Index of active step'),
|
|
16
|
+
visited: PropTypes.arrayOf(PropTypes.number).description('Array of visited steps').isRequired
|
|
21
17
|
};
|
|
22
18
|
const defaultButtonProps = {
|
|
23
|
-
chevron:
|
|
19
|
+
chevron: undefined,
|
|
24
20
|
fontSize: BUTTON_SIZES.normal,
|
|
25
21
|
disabled: false,
|
|
26
22
|
onClick: noop
|
|
27
23
|
};
|
|
28
24
|
const dsStepperButtonProps = {
|
|
29
|
-
chevron: PropTypes.oneOf([
|
|
30
|
-
fontSize: PropTypes.oneOf([
|
|
31
|
-
label: PropTypes.string.description(
|
|
32
|
-
disabled: PropTypes.bool.description(
|
|
33
|
-
onClick: PropTypes.func.description(
|
|
34
|
-
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
export {
|
|
39
|
-
defaultButtonProps,
|
|
40
|
-
defaultProps,
|
|
41
|
-
dsStepperButtonProps,
|
|
42
|
-
dsStepperProps
|
|
25
|
+
chevron: PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
|
|
26
|
+
fontSize: PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
|
|
27
|
+
label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
|
|
28
|
+
disabled: PropTypes.bool.description('Adds disabled state.'),
|
|
29
|
+
onClick: PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
|
|
30
|
+
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),
|
|
31
|
+
'aria-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
|
|
32
|
+
'data-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the data-* props')
|
|
43
33
|
};
|
|
44
|
-
|
|
34
|
+
|
|
35
|
+
export { defaultButtonProps, defaultProps, dsStepperButtonProps, dsStepperProps };
|
package/esm/styled.js
CHANGED
|
@@ -1,40 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
const StepperWrapper = styled.div
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
top: 1px;
|
|
20
|
-
`;
|
|
21
|
-
const StyledButton = styled(DSButtonV2)`
|
|
22
|
-
white-space: nowrap;
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
max-width: 100%;
|
|
25
|
-
padding-left: ${(props) => props.theme.space.xxs};
|
|
26
|
-
padding-right: ${(props) => props.theme.space.xxs};
|
|
27
|
-
color: ${(props) => props.theme.colors.brand[600]};
|
|
28
|
-
& > span:not(.em-ds-icon) {
|
|
29
|
-
position: relative;
|
|
30
|
-
top: ${(props) => props.fontSize === "large" ? "2px" : "1px"};
|
|
31
|
-
font-size: ${(props) => props.fontSize === "large" ? "22px" : "18px"};
|
|
32
|
-
}
|
|
33
|
-
`;
|
|
34
|
-
export {
|
|
35
|
-
Label,
|
|
36
|
-
Step,
|
|
37
|
-
StepperWrapper,
|
|
38
|
-
StyledButton
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=styled.js.map
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { DSButtonV2 } from '@elliemae/ds-button';
|
|
3
|
+
import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
|
|
4
|
+
|
|
5
|
+
const StepperWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
6
|
+
componentId: "sc-fgtqnq-0"
|
|
7
|
+
})(["display:grid;align-items:flex-end;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs);
|
|
8
|
+
const Step = /*#__PURE__*/styled.div.withConfig({
|
|
9
|
+
componentId: "sc-fgtqnq-1"
|
|
10
|
+
})(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE');
|
|
11
|
+
const Label = /*#__PURE__*/styled(SimpleTruncatedTooltipText).withConfig({
|
|
12
|
+
componentId: "sc-fgtqnq-2"
|
|
13
|
+
})(["position:relative;top:1px;"]);
|
|
14
|
+
const StyledButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
|
|
15
|
+
componentId: "sc-fgtqnq-3"
|
|
16
|
+
})(["white-space:nowrap;overflow:hidden;max-width:100%;padding-left:", ";padding-right:", ";color:", ";& > span:not(.em-ds-icon){position:relative;top:", ";font-size:", ";}"], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.brand[600], props => props.fontSize === 'large' ? '2px' : '1px', props => props.fontSize === 'large' ? '22px' : '18px');
|
|
17
|
+
|
|
18
|
+
export { Label, Step, StepperWrapper, StyledButton };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-stepper",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Stepper",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -48,10 +48,10 @@
|
|
|
48
48
|
"build": "node ../../scripts/build/build.js"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@elliemae/ds-button": "
|
|
52
|
-
"@elliemae/ds-icons": "
|
|
53
|
-
"@elliemae/ds-props-helpers": "
|
|
54
|
-
"@elliemae/ds-truncated-tooltip-text": "
|
|
51
|
+
"@elliemae/ds-button": "3.0.0-next.0",
|
|
52
|
+
"@elliemae/ds-icons": "3.0.0-next.0",
|
|
53
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.0",
|
|
54
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.0",
|
|
55
55
|
"react-desc": "~4.1.3",
|
|
56
56
|
"uid": "~2.0.0"
|
|
57
57
|
},
|
package/cjs/Stepper.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Stepper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport { describe } from 'react-desc';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n getAriaProps,\n getDataProps,\n} from '@elliemae/ds-props-helpers';\nimport { dsStepperProps, defaultProps, DSStepperInternalsT } from './props';\nimport { Step, StepperWrapper } from './styled';\n\nconst DSStepper = (props: DSStepperInternalsT.StepperPropsT) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSStepperInternalsT.StepperPropsT;\n useValidateTypescriptPropTypes(propsWithDefaults, dsStepperProps);\n\n const { steps, current, visited } = propsWithDefaults;\n const stepsArray = React.useMemo(() => new Array(steps).fill(1) as number[], [steps]);\n return (\n <StepperWrapper steps={steps} current={current} visited={visited} {...getAriaProps(props)} {...getDataProps(props)}>\n {stepsArray.map((item, index) => (\n <Step\n // eslint-disable-next-line react/no-array-index-key\n key={`${uid(4)}step-key-${index}`}\n active={current === index}\n visited={visited.includes(index)}\n data-testid={props['data-testid'] ? `${props['data-testid'] as string}-step` : undefined}\n data-active={current === index}\n data-visited={visited.includes(index)}\n />\n ))}\n </StepperWrapper>\n );\n};\n\nDSStepper.propTypes = dsStepperProps;\n\nconst StepperWithSchema = describe(DSStepper);\nStepperWithSchema.propTypes = dsStepperProps;\n\nexport { DSStepper, StepperWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iBAAoB;AACpB,wBAAyB;AACzB,8BAKO;AACP,mBAAkE;AAClE,oBAAqC;AAErC,MAAM,YAAY,CAAC,UAA6C;AAC9D,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,EAAE,OAAO,SAAS,YAAY;AACpC,QAAM,aAAa,qBAAM,QAAQ,MAAM,IAAI,MAAM,OAAO,KAAK,IAAgB,CAAC;AAC9E,SACE,mDAAC,8BAAD;AAAA,IAAgB;AAAA,IAAc;AAAA,IAAkB;AAAA,OAAsB,0CAAa;AAAA,OAAY,0CAAa;AAAA,KACzG,WAAW,IAAI,CAAC,MAAM,UACrB,mDAAC,oBAAD;AAAA,IAEE,KAAK,GAAG,oBAAI,cAAc;AAAA,IAC1B,QAAQ,YAAY;AAAA,IACpB,SAAS,QAAQ,SAAS;AAAA,IAC1B,eAAa,MAAM,iBAAiB,GAAG,MAAM,wBAAkC;AAAA,IAC/E,eAAa,YAAY;AAAA,IACzB,gBAAc,QAAQ,SAAS;AAAA;AAAA;AAOzC,UAAU,YAAY;AAEtB,MAAM,oBAAoB,gCAAS;AACnC,kBAAkB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/StepperButton.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/StepperButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from 'react-desc';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n getAriaProps,\n getDataProps,\n} from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';\nimport { dsStepperButtonProps, defaultButtonProps, DSStepperInternalsT } from './props';\nimport { StyledButton, Label } from './styled';\n\nconst DSStepperButton = (props: DSStepperInternalsT.StepperButtonPropsT) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n defaultButtonProps,\n ) as DSStepperInternalsT.StepperButtonPropsT;\n useValidateTypescriptPropTypes(propsWithDefaults, dsStepperButtonProps);\n\n const { chevron, fontSize, label, disabled, onClick, innerRef } = propsWithDefaults;\n\n return (\n <StyledButton\n disabled={disabled}\n onClick={onClick}\n innerRef={innerRef}\n buttonType={BUTTON_TYPES.TEXT}\n fontSize={fontSize}\n {...getAriaProps(props)}\n {...getDataProps(props)}\n >\n {chevron === 'left' ? <ChevronLeft /> : null}\n <Label value={label} />\n {chevron === 'right' ? <ChevronRight /> : null}\n </StyledButton>\n );\n};\n\nDSStepperButton.propTypes = dsStepperButtonProps;\n\nconst DSStepperButtonWithSchema = describe(DSStepperButton);\nDSStepperButtonWithSchema.propTypes = dsStepperButtonProps;\n\nexport { DSStepperButton, DSStepperButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAKO;AACP,uBAA6B;AAC7B,sBAA0C;AAC1C,mBAA8E;AAC9E,oBAAoC;AAEpC,MAAM,kBAAkB,CAAC,UAAmD;AAC1E,QAAM,oBAAoB,0DACxB,OACA;AAEF,8DAA+B,mBAAmB;AAElD,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,SAAS,aAAa;AAElE,SACE,mDAAC,4BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,8BAAa;AAAA,IACzB;AAAA,OACI,0CAAa;AAAA,OACb,0CAAa;AAAA,KAEhB,YAAY,SAAS,mDAAC,6BAAD,QAAkB,MACxC,mDAAC,qBAAD;AAAA,IAAO,OAAO;AAAA,MACb,YAAY,UAAU,mDAAC,8BAAD,QAAmB;AAAA;AAKhD,gBAAgB,YAAY;AAE5B,MAAM,4BAA4B,gCAAS;AAC3C,0BAA0B,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './Stepper';\nexport * from './StepperButton';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/props.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { noop } from 'lodash';\nimport { PropTypes } from 'react-desc';\n\nconst BUTTON_SIZES = {\n normal: 'normal',\n large: 'large',\n} as const;\n\ntype ButtonSizesT = typeof BUTTON_SIZES[keyof typeof BUTTON_SIZES];\n\nconst CHEVRON_TYPE = {\n left: 'left',\n right: 'right',\n} as const;\n\ntype ChevronT = typeof CHEVRON_TYPE[keyof typeof CHEVRON_TYPE];\n\nexport declare namespace DSStepperInternalsT {\n export interface StepperPropsT {\n [property: string]: unknown;\n steps: number;\n current: number | null;\n visited: number[];\n }\n\n export interface StepperButtonPropsT {\n [property: string]: unknown;\n chevron?: ChevronT;\n fontSize?: ButtonSizesT;\n label: string;\n disabled?: boolean;\n onClick: VoidFunction;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n 'aria-label'?: string;\n 'aria-pressed'?: boolean;\n 'data-testid'?: string;\n }\n}\nexport const defaultProps = {\n steps: 5,\n current: undefined,\n visited: [],\n};\n\nexport const dsStepperProps = {\n steps: PropTypes.number.description('Number of steps').isRequired,\n current: PropTypes.number.description('Index of active step'),\n visited: PropTypes.arrayOf(PropTypes.number).description('Array of visited steps').isRequired,\n};\n\nexport const defaultButtonProps = {\n chevron: undefined,\n fontSize: BUTTON_SIZES.normal,\n disabled: false,\n onClick: noop,\n};\n\nexport const dsStepperButtonProps = {\n chevron: PropTypes.oneOf(['left', 'right', null])\n .description('Chevron icon position, if null/undefined no chevron will be shown')\n .defaultValue(null),\n fontSize: PropTypes.oneOf(['normal', 'large'])\n .description('Label size, used for marking last step')\n .defaultValue('normal'),\n label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,\n disabled: PropTypes.bool.description('Adds disabled state.'),\n onClick: PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'aria-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description(\n 'accept all the aria-* props, MUST receive aria-label',\n ),\n 'data-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the data-* props'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAqB;AACrB,wBAA0B;AAE1B,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA;AAKT,MAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,OAAO;AAAA;AA0BF,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA;AAGJ,MAAM,iBAAiB;AAAA,EAC5B,OAAO,4BAAU,OAAO,YAAY,mBAAmB;AAAA,EACvD,SAAS,4BAAU,OAAO,YAAY;AAAA,EACtC,SAAS,4BAAU,QAAQ,4BAAU,QAAQ,YAAY,0BAA0B;AAAA;AAG9E,MAAM,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,UAAU,aAAa;AAAA,EACvB,UAAU;AAAA,EACV,SAAS;AAAA;AAGJ,MAAM,uBAAuB;AAAA,EAClC,SAAS,4BAAU,MAAM,CAAC,QAAQ,SAAS,OACxC,YAAY,qEACZ,aAAa;AAAA,EAChB,UAAU,4BAAU,MAAM,CAAC,UAAU,UAClC,YAAY,0CACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,OAAO,YAAY,qDAAqD;AAAA,EACzF,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,SAAS,4BAAU,KAAK,YAAY,6BAA6B,aAAa;AAAA,EAC9E,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OAAO,YAAY;AAAA,EAC9E,SAAS,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OAAO,YAC/D;AAAA,EAEF,SAAS,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OAAO,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/styled.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSStepperInternalsT } from './props';\n\nexport const StepperWrapper = styled.div`\n display: grid;\n align-items: flex-end;\n grid-template-columns repeat(${(props: DSStepperInternalsT.StepperPropsT) => props.steps}, 1fr);\n column-gap: ${(props) => (props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs)};\n`;\n\ninterface StepProps {\n active: boolean;\n visited: boolean;\n}\n\nexport const Step = styled.div<StepProps>`\n display: grid;\n border-radius: 1px;\n height: ${(props) => (props.active ? '5px' : '3px')};\n background: ${(props) => (props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE')};\n`;\n\nexport const Label = styled(SimpleTruncatedTooltipText)`\n position: relative;\n top: 1px;\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n white-space: nowrap;\n overflow: hidden;\n max-width: 100%;\n padding-left: ${(props) => props.theme.space.xxs};\n padding-right: ${(props) => props.theme.space.xxs};\n color: ${(props) => props.theme.colors.brand[600]};\n & > span:not(.em-ds-icon) {\n position: relative;\n top: ${(props: DSStepperInternalsT.StepperButtonPropsT) => (props.fontSize === 'large' ? '2px' : '1px')};\n font-size: ${(props: DSStepperInternalsT.StepperButtonPropsT) => (props.fontSize === 'large' ? '22px' : '18px')};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAA2B;AAC3B,uCAA2C;AAGpC,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,mCAGF,CAAC,UAA6C,MAAM;AAAA,kBACrE,CAAC,UAAW,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAQrF,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA,YAGf,CAAC,UAAW,MAAM,SAAS,QAAQ;AAAA,gBAC/B,CAAC,UAAW,MAAM,UAAU,MAAM,UAAU,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGrF,MAAM,QAAQ,sCAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,eAAe,sCAAO;AAAA;AAAA;AAAA;AAAA,kBAIjB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,WAGpC,CAAC,UAAoD,MAAM,aAAa,UAAU,QAAQ;AAAA,iBACpF,CAAC,UAAoD,MAAM,aAAa,UAAU,SAAS;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/Stepper.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Stepper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport { describe } from 'react-desc';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n getAriaProps,\n getDataProps,\n} from '@elliemae/ds-props-helpers';\nimport { dsStepperProps, defaultProps, DSStepperInternalsT } from './props';\nimport { Step, StepperWrapper } from './styled';\n\nconst DSStepper = (props: DSStepperInternalsT.StepperPropsT) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSStepperInternalsT.StepperPropsT;\n useValidateTypescriptPropTypes(propsWithDefaults, dsStepperProps);\n\n const { steps, current, visited } = propsWithDefaults;\n const stepsArray = React.useMemo(() => new Array(steps).fill(1) as number[], [steps]);\n return (\n <StepperWrapper steps={steps} current={current} visited={visited} {...getAriaProps(props)} {...getDataProps(props)}>\n {stepsArray.map((item, index) => (\n <Step\n // eslint-disable-next-line react/no-array-index-key\n key={`${uid(4)}step-key-${index}`}\n active={current === index}\n visited={visited.includes(index)}\n data-testid={props['data-testid'] ? `${props['data-testid'] as string}-step` : undefined}\n data-active={current === index}\n data-visited={visited.includes(index)}\n />\n ))}\n </StepperWrapper>\n );\n};\n\nDSStepper.propTypes = dsStepperProps;\n\nconst StepperWithSchema = describe(DSStepper);\nStepperWithSchema.propTypes = dsStepperProps;\n\nexport { DSStepper, StepperWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAEA,MAAM,YAAY,CAAC,UAA6C;AAC9D,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAM,EAAE,OAAO,SAAS,YAAY;AACpC,QAAM,aAAa,OAAM,QAAQ,MAAM,IAAI,MAAM,OAAO,KAAK,IAAgB,CAAC;AAC9E,SACE,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAc;AAAA,IAAkB;AAAA,OAAsB,aAAa;AAAA,OAAY,aAAa;AAAA,KACzG,WAAW,IAAI,CAAC,MAAM,UACrB,qCAAC,MAAD;AAAA,IAEE,KAAK,GAAG,IAAI,cAAc;AAAA,IAC1B,QAAQ,YAAY;AAAA,IACpB,SAAS,QAAQ,SAAS;AAAA,IAC1B,eAAa,MAAM,iBAAiB,GAAG,MAAM,wBAAkC;AAAA,IAC/E,eAAa,YAAY;AAAA,IACzB,gBAAc,QAAQ,SAAS;AAAA;AAAA;AAOzC,UAAU,YAAY;AAEtB,MAAM,oBAAoB,SAAS;AACnC,kBAAkB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/StepperButton.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/StepperButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n getAriaProps,\n getDataProps,\n} from '@elliemae/ds-props-helpers';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';\nimport { dsStepperButtonProps, defaultButtonProps, DSStepperInternalsT } from './props';\nimport { StyledButton, Label } from './styled';\n\nconst DSStepperButton = (props: DSStepperInternalsT.StepperButtonPropsT) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n defaultButtonProps,\n ) as DSStepperInternalsT.StepperButtonPropsT;\n useValidateTypescriptPropTypes(propsWithDefaults, dsStepperButtonProps);\n\n const { chevron, fontSize, label, disabled, onClick, innerRef } = propsWithDefaults;\n\n return (\n <StyledButton\n disabled={disabled}\n onClick={onClick}\n innerRef={innerRef}\n buttonType={BUTTON_TYPES.TEXT}\n fontSize={fontSize}\n {...getAriaProps(props)}\n {...getDataProps(props)}\n >\n {chevron === 'left' ? <ChevronLeft /> : null}\n <Label value={label} />\n {chevron === 'right' ? <ChevronRight /> : null}\n </StyledButton>\n );\n};\n\nDSStepperButton.propTypes = dsStepperButtonProps;\n\nconst DSStepperButtonWithSchema = describe(DSStepperButton);\nDSStepperButtonWithSchema.propTypes = dsStepperButtonProps;\n\nexport { DSStepperButton, DSStepperButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,CAAC,UAAmD;AAC1E,QAAM,oBAAoB,6BACxB,OACA;AAEF,iCAA+B,mBAAmB;AAElD,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,SAAS,aAAa;AAElE,SACE,qCAAC,cAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,aAAa;AAAA,IACzB;AAAA,OACI,aAAa;AAAA,OACb,aAAa;AAAA,KAEhB,YAAY,SAAS,qCAAC,aAAD,QAAkB,MACxC,qCAAC,OAAD;AAAA,IAAO,OAAO;AAAA,MACb,YAAY,UAAU,qCAAC,cAAD,QAAmB;AAAA;AAKhD,gBAAgB,YAAY;AAE5B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Stepper';\nexport * from './StepperButton';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { noop } from 'lodash';\nimport { PropTypes } from 'react-desc';\n\nconst BUTTON_SIZES = {\n normal: 'normal',\n large: 'large',\n} as const;\n\ntype ButtonSizesT = typeof BUTTON_SIZES[keyof typeof BUTTON_SIZES];\n\nconst CHEVRON_TYPE = {\n left: 'left',\n right: 'right',\n} as const;\n\ntype ChevronT = typeof CHEVRON_TYPE[keyof typeof CHEVRON_TYPE];\n\nexport declare namespace DSStepperInternalsT {\n export interface StepperPropsT {\n [property: string]: unknown;\n steps: number;\n current: number | null;\n visited: number[];\n }\n\n export interface StepperButtonPropsT {\n [property: string]: unknown;\n chevron?: ChevronT;\n fontSize?: ButtonSizesT;\n label: string;\n disabled?: boolean;\n onClick: VoidFunction;\n innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n 'aria-label'?: string;\n 'aria-pressed'?: boolean;\n 'data-testid'?: string;\n }\n}\nexport const defaultProps = {\n steps: 5,\n current: undefined,\n visited: [],\n};\n\nexport const dsStepperProps = {\n steps: PropTypes.number.description('Number of steps').isRequired,\n current: PropTypes.number.description('Index of active step'),\n visited: PropTypes.arrayOf(PropTypes.number).description('Array of visited steps').isRequired,\n};\n\nexport const defaultButtonProps = {\n chevron: undefined,\n fontSize: BUTTON_SIZES.normal,\n disabled: false,\n onClick: noop,\n};\n\nexport const dsStepperButtonProps = {\n chevron: PropTypes.oneOf(['left', 'right', null])\n .description('Chevron icon position, if null/undefined no chevron will be shown')\n .defaultValue(null),\n fontSize: PropTypes.oneOf(['normal', 'large'])\n .description('Label size, used for marking last step')\n .defaultValue('normal'),\n label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,\n disabled: PropTypes.bool.description('Adds disabled state.'),\n onClick: PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'aria-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description(\n 'accept all the aria-* props, MUST receive aria-label',\n ),\n 'data-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the data-* props'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEA,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA;AAKT,MAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,OAAO;AAAA;AA0BF,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA;AAGJ,MAAM,iBAAiB;AAAA,EAC5B,OAAO,UAAU,OAAO,YAAY,mBAAmB;AAAA,EACvD,SAAS,UAAU,OAAO,YAAY;AAAA,EACtC,SAAS,UAAU,QAAQ,UAAU,QAAQ,YAAY,0BAA0B;AAAA;AAG9E,MAAM,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,UAAU,aAAa;AAAA,EACvB,UAAU;AAAA,EACV,SAAS;AAAA;AAGJ,MAAM,uBAAuB;AAAA,EAClC,SAAS,UAAU,MAAM,CAAC,QAAQ,SAAS,OACxC,YAAY,qEACZ,aAAa;AAAA,EAChB,UAAU,UAAU,MAAM,CAAC,UAAU,UAClC,YAAY,0CACZ,aAAa;AAAA,EAChB,OAAO,UAAU,OAAO,YAAY,qDAAqD;AAAA,EACzF,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,SAAS,UAAU,KAAK,YAAY,6BAA6B,aAAa;AAAA,EAC9E,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,YAAY;AAAA,EAC9E,SAAS,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,YAC/D;AAAA,EAEF,SAAS,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/styled.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSStepperInternalsT } from './props';\n\nexport const StepperWrapper = styled.div`\n display: grid;\n align-items: flex-end;\n grid-template-columns repeat(${(props: DSStepperInternalsT.StepperPropsT) => props.steps}, 1fr);\n column-gap: ${(props) => (props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs)};\n`;\n\ninterface StepProps {\n active: boolean;\n visited: boolean;\n}\n\nexport const Step = styled.div<StepProps>`\n display: grid;\n border-radius: 1px;\n height: ${(props) => (props.active ? '5px' : '3px')};\n background: ${(props) => (props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE')};\n`;\n\nexport const Label = styled(SimpleTruncatedTooltipText)`\n position: relative;\n top: 1px;\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n white-space: nowrap;\n overflow: hidden;\n max-width: 100%;\n padding-left: ${(props) => props.theme.space.xxs};\n padding-right: ${(props) => props.theme.space.xxs};\n color: ${(props) => props.theme.colors.brand[600]};\n & > span:not(.em-ds-icon) {\n position: relative;\n top: ${(props: DSStepperInternalsT.StepperButtonPropsT) => (props.fontSize === 'large' ? '2px' : '1px')};\n font-size: ${(props: DSStepperInternalsT.StepperButtonPropsT) => (props.fontSize === 'large' ? '22px' : '18px')};\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,mCAGF,CAAC,UAA6C,MAAM;AAAA,kBACrE,CAAC,UAAW,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAQrF,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGf,CAAC,UAAW,MAAM,SAAS,QAAQ;AAAA,gBAC/B,CAAC,UAAW,MAAM,UAAU,MAAM,UAAU,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGrF,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIjB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,WAGpC,CAAC,UAAoD,MAAM,aAAa,UAAU,QAAQ;AAAA,iBACpF,CAAC,UAAoD,MAAM,aAAa,UAAU,SAAS;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|