@elliemae/ds-stepper 2.2.0-next.6 → 2.2.1

package/cjs/Stepper.js

@@ -38,12 +38,11 @@ const DSStepper = props$1 => {
     visited
   } = propsWithDefaults;
   const stepsArray = React__default["default"].useMemo(() => new Array(steps).fill(1), [steps]);
-  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
-  return /*#__PURE__*/jsxRuntime.jsx(styled.StepperWrapper, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
     steps: steps,
     current: current,
     visited: visited
-  }, globalAttributes), {}, {
+  }, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
     children: stepsArray.map((item, index) => /*#__PURE__*/_jsx__default["default"](styled.Step // eslint-disable-next-line react/no-array-index-key
     , {
       active: current === index,

package/cjs/StepperButton.js

@@ -40,14 +40,14 @@ const DSStepperButton = props$1 => {
     onClick,
     innerRef
   } = propsWithDefaults;
-  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
-  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledButton, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledButton, _objectSpread(_objectSpread(_objectSpread({
     disabled: disabled,
     onClick: onClick,
     innerRef: innerRef,
     buttonType: dsButton.BUTTON_TYPES.TEXT,
     fontSize: fontSize
-  }, globalAttributes), {}, {
+  }, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
+    "data-testid": "ds-stepper-btn",
     children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {})) : null, /*#__PURE__*/_jsx__default["default"](styled.Label, {
       value: label
     }), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {})) : null]

package/cjs/props.js

@@ -2,23 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
-var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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; }
-
-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; }
 const BUTTON_SIZES = {
   normal: 'normal',
   large: 'large'
@@ -28,26 +14,27 @@ const defaultProps = {
   current: undefined,
   visited: []
 };
-const dsStepperProps = _objectSpread({
+const dsStepperProps = {
   steps: reactDesc.PropTypes.number.description('Number of steps').isRequired,
   current: reactDesc.PropTypes.number.description('Index of active step'),
   visited: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('Array of visited steps').isRequired
-}, dsPropsHelpers.globalAttributesPropTypes);
+};
 const defaultButtonProps = {
   chevron: undefined,
   fontSize: BUTTON_SIZES.normal,
   disabled: false,
   onClick: lodash.noop
 };
-const dsStepperButtonProps = _objectSpread(_objectSpread({
+const dsStepperButtonProps = {
   chevron: reactDesc.PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
   fontSize: reactDesc.PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
-  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Inner ref to button component.')
-}, dsPropsHelpers.globalAttributesPropTypes), {}, {
+  label: reactDesc.PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
   disabled: reactDesc.PropTypes.bool.description('Adds disabled state.'),
   onClick: reactDesc.PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
-  label: reactDesc.PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired
-});
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Inner ref to button component.'),
+  'aria-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
+  'data-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the data-* props')
+};
 
 exports.defaultButtonProps = defaultButtonProps;
 exports.defaultProps = defaultProps;

package/cjs/styled.js

@@ -12,7 +12,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StepperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fgtqnq-0"
-})(["display:grid;align-items:center;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs);
+})(["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);
 const Step = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fgtqnq-1"
 })(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE');

package/esm/Stepper.js

@@ -10,7 +10,7 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
 import { dsStepperProps, defaultProps } from './props.js';
 import { StepperWrapper, Step } from './styled.js';
 import { jsx } from 'react/jsx-runtime';
@@ -28,12 +28,11 @@ const DSStepper = props => {
     visited
   } = propsWithDefaults;
   const stepsArray = React.useMemo(() => new Array(steps).fill(1), [steps]);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
-  return /*#__PURE__*/jsx(StepperWrapper, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
     steps: steps,
     current: current,
     visited: visited
-  }, globalAttributes), {}, {
+  }, getAriaProps(props)), getDataProps(props)), {}, {
     children: stepsArray.map((item, index) => /*#__PURE__*/_jsx(Step // eslint-disable-next-line react/no-array-index-key
     , {
       active: current === index,

package/esm/StepperButton.js

@@ -7,7 +7,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
 import { BUTTON_TYPES } from '@elliemae/ds-button';
 import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
 import { dsStepperButtonProps, defaultButtonProps } from './props.js';
@@ -31,14 +31,14 @@ const DSStepperButton = props => {
     onClick,
     innerRef
   } = propsWithDefaults;
-  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
-  return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread(_objectSpread({
     disabled: disabled,
     onClick: onClick,
     innerRef: innerRef,
     buttonType: BUTTON_TYPES.TEXT,
     fontSize: fontSize
-  }, globalAttributes), {}, {
+  }, getAriaProps(props)), getDataProps(props)), {}, {
+    "data-testid": "ds-stepper-btn",
     children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {})) : null, /*#__PURE__*/_jsx(Label, {
       value: label
     }), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {})) : null]

package/esm/props.js

@@ -1,16 +1,6 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { noop } from 'lodash';
 import { PropTypes } from 'react-desc';
-import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
 
-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; }
-
-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; }
 const BUTTON_SIZES = {
   normal: 'normal',
   large: 'large'
@@ -20,25 +10,26 @@ const defaultProps = {
   current: undefined,
   visited: []
 };
-const dsStepperProps = _objectSpread({
+const dsStepperProps = {
   steps: PropTypes.number.description('Number of steps').isRequired,
   current: PropTypes.number.description('Index of active step'),
   visited: PropTypes.arrayOf(PropTypes.number).description('Array of visited steps').isRequired
-}, globalAttributesPropTypes);
+};
 const defaultButtonProps = {
   chevron: undefined,
   fontSize: BUTTON_SIZES.normal,
   disabled: false,
   onClick: noop
 };
-const dsStepperButtonProps = _objectSpread(_objectSpread({
+const dsStepperButtonProps = {
   chevron: PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
   fontSize: PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.')
-}, globalAttributesPropTypes), {}, {
+  label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
   disabled: PropTypes.bool.description('Adds disabled state.'),
   onClick: PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
-  label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired
-});
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),
+  'aria-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
+  'data-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the data-* props')
+};
 
 export { defaultButtonProps, defaultProps, dsStepperButtonProps, dsStepperProps };

package/esm/styled.js

@@ -4,7 +4,7 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
 
 const StepperWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fgtqnq-0"
-})(["display:grid;align-items:center;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.steps >= 8 ? props.theme.space.xxxs : props.theme.space.xxs);
+})(["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);
 const Step = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fgtqnq-1"
 })(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : '#A9B1BE');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-stepper",
-  "version": "2.2.0-next.6",
+  "version": "2.2.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Stepper",
   "module": "./esm/index.js",
@@ -48,10 +48,10 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-next.6",
-    "@elliemae/ds-icons": "2.2.0-next.6",
-    "@elliemae/ds-props-helpers": "2.2.0-next.6",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.6",
+    "@elliemae/ds-button": "2.2.1",
+    "@elliemae/ds-icons": "2.2.1",
+    "@elliemae/ds-props-helpers": "2.2.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.1",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },