es-components 21.6.91 → 21.6.92

package/cjs/index.js

@@ -980,7 +980,7 @@ LightNotification.propTypes = process.env.NODE_ENV !== "production" ? {
 
   /** Display a dismiss button that will close the notification */
   isDismissable: PropTypes__default["default"].bool,
-  role: PropTypes__default["default"].oneOf(['dialog', 'alert', 'text']),
+  role: PropTypes__default["default"].oneOf(['dialog', 'alert', 'text', 'region']),
 
   /** Function to execute when the dialog is closed */
   onDismiss: PropTypes__default["default"].func,
@@ -3175,10 +3175,8 @@ Menu.defaultProps = {
 };
 
 var _excluded$q = ["name", "selected", "action", "children", "simpleName", "announcerText"];
-var TabButton = styled__default["default"].button(["background-color:", ";border:1px solid ", ";box-shadow:", ";color:", ";display:inline-block;font-size:inherit;line-height:", ";padding:10px;text-align:left;z-index:1;&:focus{outline:none;}@media (min-width:", "){background-color:", ";border:", ";border-bottom-color:", ";box-shadow:none;color:", ";padding:10px 15px;margin:0 2px 0px 0;&:hover,&:focus{background-color:", ";}}"], function (props) {
+var TabButton = styled__default["default"].button(["background-color:", ";box-shadow:", ";color:", ";display:inline-block;font-size:inherit;line-height:", ";padding:10px;text-align:left;z-index:1;&:focus{outline:none;}@media (max-width:", "){border:1px solid ", ";}@media (min-width:", "){background-color:", ";border:", ";border-bottom-color:", ";box-shadow:none;padding:10px 15px;margin:0 2px 0px 0;&:hover,&:focus{background-color:", ";}}"], function (props) {
   return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
-}, function (props) {
-  return props.theme.colors.gray4;
 }, function (props) {
   return props.selected ? '0 6px 12px rgba(0, 0, 0, 0.175)' : 'none';
 }, function (props) {
@@ -3187,14 +3185,16 @@ var TabButton = styled__default["default"].button(["background-color:", ";border
   return props.theme.font.baseLineHeight;
 }, function (props) {
   return props.theme.screenSize.desktop;
+}, function (props) {
+  return props.theme.colors.gray4;
+}, function (props) {
+  return props.theme.screenSize.desktop;
 }, function (props) {
   return props.theme.colors.white;
 }, function (props) {
   return props.selected ? "1px solid ".concat(props.theme.colors.gray4) : '1px solid transparent';
 }, function (props) {
   return props.selected ? ' transparent' : "".concat(props.theme.colors.gray4);
-}, function (props) {
-  return props.selected ? props.theme.colors.black : props.theme.colors.primary;
 }, function (props) {
   return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
 });
@@ -3210,6 +3210,7 @@ function Tab(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$q);
 
   return /*#__PURE__*/React__default["default"].createElement(TabButton, _extends__default["default"]({
+    className: "tab-button-".concat(selected ? 'selected' : 'unselected'),
     onClick: function onClick() {
       return action(name, children, simpleName, announcerText);
     },
@@ -3277,7 +3278,8 @@ function TabPanel(props) {
   var children = props.children,
       selectedKey = props.selectedKey,
       tabChanged = props.tabChanged,
-      canTabChange = props.canTabChange;
+      canTabChange = props.canTabChange,
+      className = props.className;
 
   var _useState = React.useState(selectedKey),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -3330,14 +3332,18 @@ function TabPanel(props) {
       }()
     });
   });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TabList, {
-    role: "tablist"
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(TabList, {
+    role: "tablist",
+    className: "tab-list"
   }, elements), /*#__PURE__*/React__default["default"].createElement(TabContent, {
-    role: "tabpanel"
+    role: "tabpanel",
+    className: "tab-content"
   }, elements[selectedIndex].props.children));
 }
 
-function childrenRule(props, propName, component) {
+function childrenRule(props, propName) {
   var children = props[propName];
 
   if (!Array.isArray(children)) {
@@ -3368,7 +3374,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Callback when the selected tab has changed. The callback is given the name of the tab that is active
    */
-  tabChanged: PropTypes__default["default"].func
+  tabChanged: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 } : {};
 TabPanel.defaultProps = {
   children: undefined,
@@ -6769,6 +6776,7 @@ function ProgressItem(_ref) {
   }
 
   var ProgressItemType = getProgressItemType(itemType, showNav);
+  var itemId = useUniqueId();
   var listItemProps = {
     numberOfSteps: numberOfSteps,
     disabled: !isPastStep && !canClickFutureStep,
@@ -6776,7 +6784,12 @@ function ProgressItem(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(ProgressLi, {
     numberOfSteps: numberOfSteps
-  }, /*#__PURE__*/React__default["default"].createElement(ProgressItemType, listItemProps, /*#__PURE__*/React__default["default"].createElement("span", null, label)));
+  }, /*#__PURE__*/React__default["default"].createElement(ProgressItemType, _extends__default["default"]({}, listItemProps, {
+    id: itemId,
+    "aria-labelledby": "".concat(itemId, "-span")
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    id: "".concat(itemId, "-span")
+  }, label)));
 }
 ProgressItem.propTypes = process.env.NODE_ENV !== "production" ? {
   active: PropTypes__default["default"].bool.isRequired,

package/lib/index.js

@@ -938,7 +938,7 @@ LightNotification.propTypes = process.env.NODE_ENV !== "production" ? {
 
   /** Display a dismiss button that will close the notification */
   isDismissable: PropTypes.bool,
-  role: PropTypes.oneOf(['dialog', 'alert', 'text']),
+  role: PropTypes.oneOf(['dialog', 'alert', 'text', 'region']),
 
   /** Function to execute when the dialog is closed */
   onDismiss: PropTypes.func,
@@ -3133,10 +3133,8 @@ Menu.defaultProps = {
 };
 
 var _excluded$q = ["name", "selected", "action", "children", "simpleName", "announcerText"];
-var TabButton = styled.button(["background-color:", ";border:1px solid ", ";box-shadow:", ";color:", ";display:inline-block;font-size:inherit;line-height:", ";padding:10px;text-align:left;z-index:1;&:focus{outline:none;}@media (min-width:", "){background-color:", ";border:", ";border-bottom-color:", ";box-shadow:none;color:", ";padding:10px 15px;margin:0 2px 0px 0;&:hover,&:focus{background-color:", ";}}"], function (props) {
+var TabButton = styled.button(["background-color:", ";box-shadow:", ";color:", ";display:inline-block;font-size:inherit;line-height:", ";padding:10px;text-align:left;z-index:1;&:focus{outline:none;}@media (max-width:", "){border:1px solid ", ";}@media (min-width:", "){background-color:", ";border:", ";border-bottom-color:", ";box-shadow:none;padding:10px 15px;margin:0 2px 0px 0;&:hover,&:focus{background-color:", ";}}"], function (props) {
   return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
-}, function (props) {
-  return props.theme.colors.gray4;
 }, function (props) {
   return props.selected ? '0 6px 12px rgba(0, 0, 0, 0.175)' : 'none';
 }, function (props) {
@@ -3145,14 +3143,16 @@ var TabButton = styled.button(["background-color:", ";border:1px solid ", ";box-
   return props.theme.font.baseLineHeight;
 }, function (props) {
   return props.theme.screenSize.desktop;
+}, function (props) {
+  return props.theme.colors.gray4;
+}, function (props) {
+  return props.theme.screenSize.desktop;
 }, function (props) {
   return props.theme.colors.white;
 }, function (props) {
   return props.selected ? "1px solid ".concat(props.theme.colors.gray4) : '1px solid transparent';
 }, function (props) {
   return props.selected ? ' transparent' : "".concat(props.theme.colors.gray4);
-}, function (props) {
-  return props.selected ? props.theme.colors.black : props.theme.colors.primary;
 }, function (props) {
   return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
 });
@@ -3168,6 +3168,7 @@ function Tab(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/React.createElement(TabButton, _extends({
+    className: "tab-button-".concat(selected ? 'selected' : 'unselected'),
     onClick: function onClick() {
       return action(name, children, simpleName, announcerText);
     },
@@ -3235,7 +3236,8 @@ function TabPanel(props) {
   var children = props.children,
       selectedKey = props.selectedKey,
       tabChanged = props.tabChanged,
-      canTabChange = props.canTabChange;
+      canTabChange = props.canTabChange,
+      className = props.className;
 
   var _useState = useState(selectedKey),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3288,14 +3290,18 @@ function TabPanel(props) {
       }()
     });
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabList, {
-    role: "tablist"
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(TabList, {
+    role: "tablist",
+    className: "tab-list"
   }, elements), /*#__PURE__*/React.createElement(TabContent, {
-    role: "tabpanel"
+    role: "tabpanel",
+    className: "tab-content"
   }, elements[selectedIndex].props.children));
 }
 
-function childrenRule(props, propName, component) {
+function childrenRule(props, propName) {
   var children = props[propName];
 
   if (!Array.isArray(children)) {
@@ -3326,7 +3332,8 @@ TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Callback when the selected tab has changed. The callback is given the name of the tab that is active
    */
-  tabChanged: PropTypes.func
+  tabChanged: PropTypes.func,
+  className: PropTypes.string
 } : {};
 TabPanel.defaultProps = {
   children: undefined,
@@ -6727,6 +6734,7 @@ function ProgressItem(_ref) {
   }
 
   var ProgressItemType = getProgressItemType(itemType, showNav);
+  var itemId = useUniqueId();
   var listItemProps = {
     numberOfSteps: numberOfSteps,
     disabled: !isPastStep && !canClickFutureStep,
@@ -6734,7 +6742,12 @@ function ProgressItem(_ref) {
   };
   return /*#__PURE__*/React.createElement(ProgressLi, {
     numberOfSteps: numberOfSteps
-  }, /*#__PURE__*/React.createElement(ProgressItemType, listItemProps, /*#__PURE__*/React.createElement("span", null, label)));
+  }, /*#__PURE__*/React.createElement(ProgressItemType, _extends({}, listItemProps, {
+    id: itemId,
+    "aria-labelledby": "".concat(itemId, "-span")
+  }), /*#__PURE__*/React.createElement("span", {
+    id: "".concat(itemId, "-span")
+  }, label)));
 }
 ProgressItem.propTypes = process.env.NODE_ENV !== "production" ? {
   active: PropTypes.bool.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-components",
-  "version": "21.6.91",
+  "version": "21.6.92",
   "description": "React components built for Exchange Solutions products",
   "author": "Willis Towers Watson - Individual Marketplace",
   "license": "MIT",
@@ -73,7 +73,7 @@
     "braces": "^3.0.2",
     "concurrently": "^6.0.2",
     "cypress": "^9.6.0",
-    "es-components-via-theme": "^21.6.91",
+    "es-components-via-theme": "^21.6.92",
     "eslint": "^8.23.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.2.0",
@@ -128,5 +128,5 @@
     "text-mask-addons": "3.8.0",
     "tinycolor2": "^1.4.2"
   },
-  "gitHead": "93141487d64ae51be9dda5e54357a09900c30d3c"
+  "gitHead": "3862220c97a2d5068a452f672c3e4b3b2230205f"
 }