@elliemae/ds-stepper 3.0.0-next.0 → 3.0.0-next.12
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/dist/cjs/Stepper.js +77 -0
- package/dist/cjs/Stepper.js.map +7 -0
- package/dist/cjs/StepperButton.js +75 -0
- package/dist/cjs/StepperButton.js.map +7 -0
- package/dist/cjs/index.js +29 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/props.js +90 -0
- package/dist/cjs/props.js.map +7 -0
- package/dist/cjs/styled.js +69 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/Stepper.js +54 -0
- package/dist/esm/Stepper.js.map +7 -0
- package/dist/esm/StepperButton.js +52 -0
- package/dist/esm/StepperButton.js.map +7 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/props.js +63 -0
- package/dist/esm/props.js.map +7 -0
- package/dist/esm/styled.js +40 -0
- package/dist/esm/styled.js.map +7 -0
- package/package.json +36 -27
- package/cjs/Stepper.js +0 -61
- package/cjs/StepperButton.js +0 -60
- package/cjs/index.js +0 -13
- package/cjs/props.js +0 -42
- package/cjs/styled.js +0 -29
- package/esm/Stepper.js +0 -50
- package/esm/StepperButton.js +0 -50
- package/esm/index.js +0 -2
- package/esm/props.js +0 -35
- package/esm/styled.js +0 -18
- package/types/Stepper.d.ts +0 -22
- package/types/StepperButton.d.ts +0 -48
- package/types/index.d.ts +0 -2
- package/types/props.d.ts +0 -90
- package/types/styled.d.ts +0 -34
- package/types/tests/Stepper.test.d.ts +0 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
const StepperWrapper = styled.div`
|
|
6
|
+
display: grid;
|
|
7
|
+
align-items: center;
|
|
8
|
+
grid-template-columns repeat(${(props) => props.steps}, 1fr);
|
|
9
|
+
column-gap: ${(props) => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs};
|
|
10
|
+
`;
|
|
11
|
+
const Step = styled.div`
|
|
12
|
+
display: grid;
|
|
13
|
+
border-radius: 1px;
|
|
14
|
+
height: ${(props) => props.active ? "5px" : "3px"};
|
|
15
|
+
background: ${(props) => props.active || props.visited ? props.theme.colors.brand[700] : "#A9B1BE"};
|
|
16
|
+
`;
|
|
17
|
+
const Label = styled(SimpleTruncatedTooltipText)`
|
|
18
|
+
position: relative;
|
|
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
|
|
@@ -0,0 +1,7 @@
|
|
|
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: center;\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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,31 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-stepper",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Stepper",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"module": "./dist/esm/index.js",
|
|
10
|
+
"main": "./dist/cjs/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
9
12
|
"exports": {
|
|
10
13
|
".": {
|
|
11
|
-
"import": "./esm/index.js",
|
|
12
|
-
"require": "./cjs/index.js"
|
|
14
|
+
"import": "./dist/esm/index.js",
|
|
15
|
+
"require": "./dist/cjs/index.js"
|
|
13
16
|
},
|
|
14
17
|
"./styled": {
|
|
15
|
-
"import": "./esm/styled.js",
|
|
16
|
-
"require": "./cjs/styled.js"
|
|
18
|
+
"import": "./dist/esm/styled.js",
|
|
19
|
+
"require": "./dist/cjs/styled.js"
|
|
17
20
|
},
|
|
18
21
|
"./StepperButton": {
|
|
19
|
-
"import": "./esm/StepperButton.js",
|
|
20
|
-
"require": "./cjs/StepperButton.js"
|
|
22
|
+
"import": "./dist/esm/StepperButton.js",
|
|
23
|
+
"require": "./dist/cjs/StepperButton.js"
|
|
21
24
|
},
|
|
22
25
|
"./Stepper": {
|
|
23
|
-
"import": "./esm/Stepper.js",
|
|
24
|
-
"require": "./cjs/Stepper.js"
|
|
26
|
+
"import": "./dist/esm/Stepper.js",
|
|
27
|
+
"require": "./dist/cjs/Stepper.js"
|
|
25
28
|
},
|
|
26
29
|
"./props": {
|
|
27
|
-
"import": "./esm/props.js",
|
|
28
|
-
"require": "./cjs/props.js"
|
|
30
|
+
"import": "./dist/esm/props.js",
|
|
31
|
+
"require": "./dist/cjs/props.js"
|
|
29
32
|
}
|
|
30
33
|
},
|
|
31
34
|
"sideEffects": [
|
|
@@ -37,21 +40,21 @@
|
|
|
37
40
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
38
41
|
},
|
|
39
42
|
"engines": {
|
|
40
|
-
"
|
|
41
|
-
"node": ">=
|
|
43
|
+
"pnpm": ">=6",
|
|
44
|
+
"node": ">=16"
|
|
42
45
|
},
|
|
43
46
|
"author": "ICE MT",
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
47
|
+
"jestSonar": {
|
|
48
|
+
"sonar56x": true,
|
|
49
|
+
"reportPath": "reports",
|
|
50
|
+
"reportFile": "tests.xml",
|
|
51
|
+
"indent": 4
|
|
49
52
|
},
|
|
50
53
|
"dependencies": {
|
|
51
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
52
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
53
|
-
"@elliemae/ds-props-helpers": "3.0.0-next.
|
|
54
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.
|
|
54
|
+
"@elliemae/ds-button": "3.0.0-next.12",
|
|
55
|
+
"@elliemae/ds-icons": "3.0.0-next.12",
|
|
56
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.12",
|
|
57
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.12",
|
|
55
58
|
"react-desc": "~4.1.3",
|
|
56
59
|
"uid": "~2.0.0"
|
|
57
60
|
},
|
|
@@ -67,7 +70,13 @@
|
|
|
67
70
|
},
|
|
68
71
|
"publishConfig": {
|
|
69
72
|
"access": "public",
|
|
70
|
-
"
|
|
71
|
-
|
|
73
|
+
"typeSafety": false
|
|
74
|
+
},
|
|
75
|
+
"scripts": {
|
|
76
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
77
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
78
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
79
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
80
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
72
81
|
}
|
|
73
82
|
}
|
package/cjs/Stepper.js
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
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 {
|
|
36
|
-
steps,
|
|
37
|
-
current,
|
|
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
|
-
}));
|
|
55
|
-
};
|
|
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
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
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,
|
|
39
|
-
disabled,
|
|
40
|
-
onClick,
|
|
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
|
-
}));
|
|
54
|
-
};
|
|
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
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var lodash = require('lodash');
|
|
6
|
-
var reactDesc = require('react-desc');
|
|
7
|
-
|
|
8
|
-
const BUTTON_SIZES = {
|
|
9
|
-
normal: 'normal',
|
|
10
|
-
large: 'large'
|
|
11
|
-
};
|
|
12
|
-
const defaultProps = {
|
|
13
|
-
steps: 5,
|
|
14
|
-
current: undefined,
|
|
15
|
-
visited: []
|
|
16
|
-
};
|
|
17
|
-
const dsStepperProps = {
|
|
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
|
|
21
|
-
};
|
|
22
|
-
const defaultButtonProps = {
|
|
23
|
-
chevron: undefined,
|
|
24
|
-
fontSize: BUTTON_SIZES.normal,
|
|
25
|
-
disabled: false,
|
|
26
|
-
onClick: lodash.noop
|
|
27
|
-
};
|
|
28
|
-
const dsStepperButtonProps = {
|
|
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
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
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 => {
|
|
23
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
24
|
-
useValidateTypescriptPropTypes(propsWithDefaults, dsStepperProps);
|
|
25
|
-
const {
|
|
26
|
-
steps,
|
|
27
|
-
current,
|
|
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
|
-
}));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const StepperWithSchema = describe(DSStepper);
|
|
48
|
-
StepperWithSchema.propTypes = dsStepperProps;
|
|
49
|
-
|
|
50
|
-
export { DSStepper, StepperWithSchema };
|
package/esm/StepperButton.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
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 => {
|
|
24
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultButtonProps);
|
|
25
|
-
useValidateTypescriptPropTypes(propsWithDefaults, dsStepperButtonProps);
|
|
26
|
-
const {
|
|
27
|
-
chevron,
|
|
28
|
-
fontSize,
|
|
29
|
-
label,
|
|
30
|
-
disabled,
|
|
31
|
-
onClick,
|
|
32
|
-
innerRef
|
|
33
|
-
} = propsWithDefaults;
|
|
34
|
-
return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread(_objectSpread({
|
|
35
|
-
disabled: disabled,
|
|
36
|
-
onClick: onClick,
|
|
37
|
-
innerRef: innerRef,
|
|
38
|
-
buttonType: BUTTON_TYPES.TEXT,
|
|
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
|
-
}));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const DSStepperButtonWithSchema = describe(DSStepperButton);
|
|
48
|
-
DSStepperButtonWithSchema.propTypes = dsStepperButtonProps;
|
|
49
|
-
|
|
50
|
-
export { DSStepperButton, DSStepperButtonWithSchema };
|
package/esm/index.js
DELETED
package/esm/props.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { noop } from 'lodash';
|
|
2
|
-
import { PropTypes } from 'react-desc';
|
|
3
|
-
|
|
4
|
-
const BUTTON_SIZES = {
|
|
5
|
-
normal: 'normal',
|
|
6
|
-
large: 'large'
|
|
7
|
-
};
|
|
8
|
-
const defaultProps = {
|
|
9
|
-
steps: 5,
|
|
10
|
-
current: undefined,
|
|
11
|
-
visited: []
|
|
12
|
-
};
|
|
13
|
-
const dsStepperProps = {
|
|
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
|
|
17
|
-
};
|
|
18
|
-
const defaultButtonProps = {
|
|
19
|
-
chevron: undefined,
|
|
20
|
-
fontSize: BUTTON_SIZES.normal,
|
|
21
|
-
disabled: false,
|
|
22
|
-
onClick: noop
|
|
23
|
-
};
|
|
24
|
-
const dsStepperButtonProps = {
|
|
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')
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export { defaultButtonProps, defaultProps, dsStepperButtonProps, dsStepperProps };
|
package/esm/styled.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
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/types/Stepper.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
|
-
import { DSStepperInternalsT } from './props';
|
|
4
|
-
declare const DSStepper: {
|
|
5
|
-
(props: DSStepperInternalsT.StepperPropsT): JSX.Element;
|
|
6
|
-
propTypes: {
|
|
7
|
-
steps: import("react-desc").PropTypesDescValue;
|
|
8
|
-
current: {
|
|
9
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
10
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
11
|
-
};
|
|
12
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
13
|
-
};
|
|
14
|
-
visited: import("react-desc").PropTypesDescValue;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
declare const StepperWithSchema: {
|
|
18
|
-
(props?: DSStepperInternalsT.StepperPropsT | undefined): JSX.Element;
|
|
19
|
-
propTypes: unknown;
|
|
20
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
21
|
-
};
|
|
22
|
-
export { DSStepper, StepperWithSchema };
|
package/types/StepperButton.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
|
-
import { DSStepperInternalsT } from './props';
|
|
4
|
-
declare const DSStepperButton: {
|
|
5
|
-
(props: DSStepperInternalsT.StepperButtonPropsT): JSX.Element;
|
|
6
|
-
propTypes: {
|
|
7
|
-
chevron: {
|
|
8
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
9
|
-
};
|
|
10
|
-
fontSize: {
|
|
11
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
12
|
-
};
|
|
13
|
-
label: import("react-desc").PropTypesDescValue;
|
|
14
|
-
disabled: {
|
|
15
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
16
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
17
|
-
};
|
|
18
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
19
|
-
};
|
|
20
|
-
onClick: {
|
|
21
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
-
};
|
|
23
|
-
innerRef: {
|
|
24
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
25
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
26
|
-
};
|
|
27
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
28
|
-
};
|
|
29
|
-
'aria-': {
|
|
30
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
31
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
32
|
-
};
|
|
33
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
34
|
-
};
|
|
35
|
-
'data-': {
|
|
36
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
37
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
38
|
-
};
|
|
39
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
declare const DSStepperButtonWithSchema: {
|
|
44
|
-
(props?: DSStepperInternalsT.StepperButtonPropsT | undefined): JSX.Element;
|
|
45
|
-
propTypes: unknown;
|
|
46
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
47
|
-
};
|
|
48
|
-
export { DSStepperButton, DSStepperButtonWithSchema };
|
package/types/index.d.ts
DELETED