@elliemae/ds-stepper 3.0.0-next.2 → 3.0.0-next.3

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.
@@ -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.2",
3
+ "version": "3.0.0-next.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Stepper",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
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
- "npm": ">=7",
41
- "node": ">=14"
43
+ "pnpm": ">=6",
44
+ "node": ">=16"
42
45
  },
43
46
  "author": "ICE MT",
44
- "scripts": {
45
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
46
- "prebuild": "exit 0",
47
- "predev": "exit 0",
48
- "build": "node ../../scripts/build/build.js"
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.2",
52
- "@elliemae/ds-icons": "3.0.0-next.2",
53
- "@elliemae/ds-props-helpers": "3.0.0-next.2",
54
- "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.2",
54
+ "@elliemae/ds-button": "3.0.0-next.3",
55
+ "@elliemae/ds-icons": "3.0.0-next.3",
56
+ "@elliemae/ds-props-helpers": "3.0.0-next.3",
57
+ "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.3",
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
- "directory": "dist",
71
- "generateSubmodules": true
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;
@@ -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 };
@@ -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
@@ -1,2 +0,0 @@
1
- export { DSStepper, StepperWithSchema } from './Stepper.js';
2
- export { DSStepperButton, DSStepperButtonWithSchema } from './StepperButton.js';
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 };
@@ -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 };
@@ -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
@@ -1,2 +0,0 @@
1
- export * from './Stepper';
2
- export * from './StepperButton';