orcs-design-system 2.1.24 → 2.1.26

package/es/GlobalStyles.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n/* apply a natural box layout model to all elements, but allowing components to change */\nhtml {\n    box-sizing: border-box;\n    line-height: 1.15;\n    line-height: calc(2px + 2ex + 2px);\n}\nhtml * {\n  line-height: calc(2px + 2ex + 2px);\n}\n*, *:before, *:after {\n    box-sizing: inherit;\n}\nhtml,\nbody {\n    height: 100%;\n    width: 100%;\n    margin: ", ";\n}\nbody {\n    font-family: ", ";\n    color: ", ";\n}\n/* set rem text size and styling */\nhtml { font-size: 62.5%; }\nbody {\n  font-size: ", "; // equivalent to 16px (or 14px with collapsed theme) because of % change to html font size above\n}\nmain {\n  display: flex;\n\talign-items: stretch;\n\talign-content: stretch;\n\twidth: 100%;\n}\nsection {\n  height: calc(100vh - 56px);\n  width: 100%;\n  overflow-y: scroll;\n}\nimg {\n    border-style: none;\n}\nsmall {\n    font-size: 80%;\n}\np {\n    margin: ", ";\n}\nh1, h2, h3, h4, h5, h6 {\n  font-weight: ", ";\n  font-family: ", ";\n  margin: ", ";\n}\nh1 {\n  font-size: ", "px\n}\nh2 {\n  font-size: ", "px\n}\nh3 {\n  font-size: ", "px\n}\nh4 {\n  font-size: ", "px\n}\nh5 {\n  font-size: ", "px\n}\nh6 {\n  font-size: ", "px\n}\na,\np,\nsmall,\nli,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  word-break: break-word;\n}\n"]);
+  var data = _taggedTemplateLiteral(["\n/* apply a natural box layout model to all elements, but allowing components to change */\nhtml {\n    box-sizing: border-box;\n    line-height: 1.15;\n    line-height: calc(2px + 2ex + 2px);\n}\nhtml * {\n  line-height: calc(2px + 2ex + 2px);\n}\n*, *:before, *:after {\n    box-sizing: inherit;\n}\nhtml,\nbody {\n    height: 100%;\n    width: 100%;\n    margin: ", ";\n}\nbody {\n    font-family: ", ";\n    color: ", ";\n}\n/* set rem text size and styling */\nhtml { font-size: 62.5%; }\nbody {\n  font-size: ", "; // equivalent to 16px (or 14px with collapsed theme) because of % change to html font size above\n}\nmain {\n  display: flex;\n\talign-items: stretch;\n\talign-content: stretch;\n\twidth: 100%;\n}\nsection {\n  height: ", ";\n  width: 100%;\n  overflow-y: scroll;\n}\nimg {\n    border-style: none;\n}\nsmall {\n    font-size: 80%;\n}\np {\n    margin: ", ";\n}\nh1, h2, h3, h4, h5, h6 {\n  font-weight: ", ";\n  font-family: ", ";\n  margin: ", ";\n}\nh1 {\n  font-size: ", "\n}\nh2 {\n  font-size: ", "\n}\nh3 {\n  font-size: ", "\n}\nh4 {\n  font-size: ", "\n}\nh5 {\n  font-size: ", "\n}\nh6 {\n  font-size: ", "\n}\na,\np,\nsmall,\nli,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  word-break: break-word;\n}\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -14,5 +14,35 @@ import { createGlobalStyle } from "styled-components";
 import { themeGet } from "@styled-system/theme-get"; // GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-var GlobalStyles = createGlobalStyle(_templateObject(), themeGet("space.0"), themeGet("fonts.main"), themeGet("colors.greyDarkest"), themeGet("fontSizes.2"), themeGet("space.0"), themeGet("fontWeights.1"), themeGet("fonts.main"), themeGet("space.0"), themeGet("fontSizes.6"), themeGet("fontSizes.5"), themeGet("fontSizes.4"), themeGet("fontSizes.3"), themeGet("fontSizes.2"), themeGet("fontSizes.1"));
+var GlobalStyles = createGlobalStyle(_templateObject(), function (props) {
+  return themeGet("space.0")(props);
+}, function (props) {
+  return themeGet("fonts.main")(props);
+}, function (props) {
+  return themeGet("colors.greyDarkest")(props);
+}, function (props) {
+  return themeGet("fontSizes.2")(props);
+}, function (props) {
+  return themeGet("appScale.navBarSize")(props);
+}, function (props) {
+  return themeGet("space.0")(props);
+}, function (props) {
+  return themeGet("fontWeights.1")(props);
+}, function (props) {
+  return themeGet("fonts.main")(props);
+}, function (props) {
+  return themeGet("space.0")(props);
+}, function (props) {
+  return themeGet("fontSizes.6")(props);
+}, function (props) {
+  return themeGet("fontSizes.5")(props);
+}, function (props) {
+  return themeGet("fontSizes.4")(props);
+}, function (props) {
+  return themeGet("fontSizes.3")(props);
+}, function (props) {
+  return themeGet("fontSizes.2")(props);
+}, function (props) {
+  return themeGet("fontSizes.1")(props);
+});
 export default GlobalStyles;

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -41,6 +41,7 @@ export var leftOffsetActionsMenu = function leftOffsetActionsMenu() {
   return /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React.createElement(ActionsMenu, {
+    ariaLabel: "Options Menu",
     direction: "left"
   }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
     href: "https://orchestrated.io/"

package/es/components/ActionsMenu/index.js

@@ -46,7 +46,9 @@ var Icon = styled.div.withConfig({
 var Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "yvbni2-3"
-})(["display:block;position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
+})(["display:", ";position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
+  return props.isOpen ? "block" : "none";
+}, function (props) {
   return props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px";
 }, function (props) {
   return props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto";
@@ -91,6 +93,8 @@ export var ActionsMenuItem = styled(function (props) {
   }
 
   return /*#__PURE__*/React.createElement(Component, newProps);
+}).attrs({
+  role: "listitem"
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
   componentId: "yvbni2-5"
@@ -134,7 +138,8 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
       menuWidth = _ref.menuWidth,
       customTriggerComponent = _ref.customTriggerComponent,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children"]);
+      ariaLabel = _ref.ariaLabel,
+      props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel"]);
 
   var _useState = useState({
     menuLeftPosition: menuLeftPosition,
@@ -180,10 +185,14 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
 
   if (customTriggerComponent) {
     triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
-      onClick: onToggleInView
+      onClick: onToggleInView,
+      "aria-label": ariaLabel,
+      "aria-expanded": "".concat(toggleState)
     });
   } else {
     triggerBtn = /*#__PURE__*/React.createElement(Control, {
+      "aria-label": ariaLabel,
+      "aria-expanded": "".concat(toggleState),
       onClick: onToggleInView
     }, /*#__PURE__*/React.createElement(Icon, {
       isOpen: toggleState
@@ -197,7 +206,8 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     menuLeftPosition: menuPosition.menuLeftPosition,
     menuRightPosition: menuPosition.menuRightPosition,
     menuWidth: menuWidth,
-    ref: ref
+    ref: ref,
+    role: "list"
   }, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -213,7 +223,8 @@ ActionsMenuBody.propTypes = {
   menuWidth: PropTypes.string,
   customTriggerComponent: PropTypes.node,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  ariaLabel: PropTypes.string
 };
 var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -224,7 +235,9 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       theme = _ref2.theme,
       _ref2$closeOnClick = _ref2.closeOnClick,
       closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
-      props = _objectWithoutProperties(_ref2, ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick"]);
+      _ref2$ariaLabel = _ref2.ariaLabel,
+      ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
+      props = _objectWithoutProperties(_ref2, ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"]);
 
   var _useState5 = useState(isOpen),
       _useState6 = _slicedToArray(_useState5, 2),
@@ -270,7 +283,8 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     toggleState: toggleState,
     customTriggerComponent: customTriggerComponent,
     direction: direction,
-    theme: theme
+    theme: theme,
+    ariaLabel: ariaLabel
   }, props), children);
 });
 ActionsMenu.propTypes = {
@@ -281,7 +295,10 @@ ActionsMenu.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
 
   /** Specifies the colour theme */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+
+  /** Specifies the aria-label for the button */
+  ariaLabel: PropTypes.object
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -310,6 +327,17 @@ ActionsMenu.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "ariaLabel": {
+      "defaultValue": {
+        "value": "\"Options Menu\"",
+        "computed": false
+      },
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": "Specifies the aria-label for the button"
+    },
     "direction": {
       "type": {
         "name": "string"
@@ -431,6 +459,13 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "ariaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/es/components/Avatar/Avatar.stories.js

@@ -43,7 +43,8 @@ export var imageOnly = function imageOnly() {
   return /*#__PURE__*/React.createElement(Spacer, {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre"
   }));
 };
 imageOnly.storyName = "Image only";
@@ -63,7 +64,8 @@ export var nameLink = function nameLink() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre"
   });
 };
 nameLink.storyName = "Name as link";
@@ -97,7 +99,8 @@ export var large = function large() {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
     sizing: "large",
-    title: "Ayden Lundgre",
+    title: "Ayden Lundgre TESTER",
+    titleLevel: "H1",
     subtitle: "Senior Business Analyst",
     initials: "AL"
   }), /*#__PURE__*/React.createElement(Avatar, {
@@ -117,6 +120,18 @@ export var large = function large() {
   }));
 };
 large.storyName = "Large";
+export var titleLevel = function titleLevel() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: 4
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: "Ayden Lundgre",
+    titleLevel: "H1",
+    subtitle: "Senior Business Analyst",
+    initials: "AL"
+  }));
+};
+titleLevel.storyName = "Title Level";
 export var subtitleContent = function subtitleContent() {
   return /*#__PURE__*/React.createElement(Spacer, {
     my: 4
@@ -137,6 +152,7 @@ export var subtitleContent = function subtitleContent() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Flex, {
       flexWrap: "wrap"
     }, /*#__PURE__*/React.createElement(Spacer, {
@@ -158,6 +174,7 @@ export var localTime = function localTime() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
     }, "Senior Business Analyst"),
@@ -184,7 +201,8 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     sizing: "small",
@@ -201,7 +219,8 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    imageAlt: "Ayden Lundgre"
   })));
 };
 inverted.storyName = "Inverted";
@@ -215,6 +234,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Team Photo",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
@@ -222,7 +242,8 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Team Photo"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
     sizing: "small",
@@ -245,6 +266,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Team Photo",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
@@ -252,7 +274,8 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Team Photo"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     sizing: "small",
@@ -275,6 +298,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Javascript"),
     subtitle: "Tagged 123 times",
     image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
+    imageAlt: "Screen Photo",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
@@ -282,7 +306,8 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Javascript"),
     subtitle: "Tagged 123 times",
-    image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80"
+    image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
+    imageAlt: "Screen Photo"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     sizing: "small",
@@ -336,6 +361,11 @@ large.__docgenInfo = {
   "methods": [],
   "displayName": "large"
 };
+titleLevel.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "titleLevel"
+};
 subtitleContent.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, variant } from "styled-system";
 import PropTypes from "prop-types";
-import { H3, Text } from "../Typography";
+import Header, { Text } from "../Typography";
 import Icon from "../Icon";
 import Popover from "../Popover";
 import StatusDot from "../StatusDot";
@@ -183,7 +183,13 @@ var Shape = styled("div").withConfig({
     }
   });
 });
-var Title = styled(H3).withConfig({
+var Title = styled(function (_ref) {
+  var titleLevel = _ref.titleLevel,
+      props = _objectWithoutProperties(_ref, ["titleLevel"]);
+
+  var Heading = Header[titleLevel];
+  return /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.createElement(Heading, null), props);
+}).withConfig({
   displayName: "Avatar__Title",
   componentId: "sc-1wtet2j-4"
 })(function (props) {
@@ -277,32 +283,43 @@ var LocalTime = styled(Popover).withConfig({
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
 
-var Avatar = function Avatar(_ref) {
-  var sizing = _ref.sizing,
-      image = _ref.image,
-      initials = _ref.initials,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      subtitleContent = _ref.subtitleContent,
-      type = _ref.type,
-      theme = _ref.theme,
-      shape = _ref.shape,
-      localTime = _ref.localTime,
-      _ref$uppercase = _ref.uppercase,
-      uppercase = _ref$uppercase === void 0 ? true : _ref$uppercase,
-      whiteInitials = _ref.whiteInitials,
-      props = _objectWithoutProperties(_ref, ["sizing", "image", "initials", "title", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"]);
+var Avatar = function Avatar(_ref2) {
+  var sizing = _ref2.sizing,
+      image = _ref2.image,
+      imageAlt = _ref2.imageAlt,
+      initials = _ref2.initials,
+      title = _ref2.title,
+      _ref2$titleLevel = _ref2.titleLevel,
+      titleLevel = _ref2$titleLevel === void 0 ? "H3" : _ref2$titleLevel,
+      subtitle = _ref2.subtitle,
+      subtitleContent = _ref2.subtitleContent,
+      type = _ref2.type,
+      theme = _ref2.theme,
+      shape = _ref2.shape,
+      localTime = _ref2.localTime,
+      _ref2$uppercase = _ref2.uppercase,
+      uppercase = _ref2$uppercase === void 0 ? true : _ref2$uppercase,
+      whiteInitials = _ref2.whiteInitials,
+      props = _objectWithoutProperties(_ref2, ["sizing", "image", "imageAlt", "initials", "title", "titleLevel", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"]);
 
   var hasTitle = !!title;
   var hasSubtitle = !!subtitle;
   var hasSubtitleContent = !!subtitleContent;
+  var alt = useMemo(function () {
+    if (imageAlt) {
+      return imageAlt;
+    } else if (typeof title === "string") {
+      return title;
+    }
+  }, [imageAlt, title]);
   var component = /*#__PURE__*/React.createElement(AvatarWrapper, _extends({}, props, {
     type: type,
     sizing: sizing
   }), image ? /*#__PURE__*/React.createElement(Image, {
     src: image,
     sizing: sizing,
-    shape: shape
+    shape: shape,
+    alt: alt
   }) : /*#__PURE__*/React.createElement(Shape, {
     shape: shape,
     sizing: sizing,
@@ -323,6 +340,7 @@ var Avatar = function Avatar(_ref) {
     sizing: sizing,
     theme: theme
   }, hasTitle && /*#__PURE__*/React.createElement(Title, {
+    titleLevel: titleLevel,
     type: type,
     sizing: sizing,
     theme: theme
@@ -360,6 +378,9 @@ Avatar.propTypes = {
   /** Specifies a source path for an image */
   image: PropTypes.string,
 
+  /** Specifies the alt text for an image */
+  imageAlt: PropTypes.string,
+
   /** Specifies initials of person if available */
   initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
@@ -375,6 +396,9 @@ Avatar.propTypes = {
   /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
+  /** Specifies the component to wrap the heading, defaults to H3 */
+  titleLevel: PropTypes.oneOf(["H1", "H2", "H3", "H4", "H5", "H6"]),
+
   /** Specifies subtitle / role */
   subtitle: PropTypes.string,
 
@@ -389,6 +413,36 @@ Avatar.__docgenInfo = {
   "methods": [],
   "displayName": "Avatar",
   "props": {
+    "titleLevel": {
+      "defaultValue": {
+        "value": "\"H3\"",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"H1\"",
+          "computed": false
+        }, {
+          "value": "\"H2\"",
+          "computed": false
+        }, {
+          "value": "\"H3\"",
+          "computed": false
+        }, {
+          "value": "\"H4\"",
+          "computed": false
+        }, {
+          "value": "\"H5\"",
+          "computed": false
+        }, {
+          "value": "\"H6\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Specifies the component to wrap the heading, defaults to H3"
+    },
     "uppercase": {
       "defaultValue": {
         "value": "true",
@@ -458,6 +512,13 @@ Avatar.__docgenInfo = {
       "required": false,
       "description": "Specifies a source path for an image"
     },
+    "imageAlt": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Specifies the alt text for an image"
+    },
     "initials": {
       "type": {
         "name": "union",

package/es/components/Card/Card.stories.js

@@ -30,6 +30,7 @@ export var basicCard = function basicCard() {
   }, /*#__PURE__*/React.createElement(P, {
     marginBottom: 4
   }, "Card content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), /*#__PURE__*/React.createElement(StyledLink, {
+    "aria-label": "Card title - Learn More",
     href: "#",
     bold: true
   }, "Learn more"));

package/es/components/Expandable/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import Flex from "../Flex";
@@ -47,9 +47,13 @@ var Text = styled.div.withConfig({
   displayName: "Expandable__Text",
   componentId: "na4gdb-2"
 })(["padding-right:18px;"]);
+var SubTitle = styled(Typography.Small).withConfig({
+  displayName: "Expandable__SubTitle",
+  componentId: "na4gdb-3"
+})(["display:block;"]);
 var Content = styled.div.withConfig({
   displayName: "Expandable__Content",
-  componentId: "na4gdb-3"
+  componentId: "na4gdb-4"
 })(["padding:", ";transition:", ";display:", ";"], function (props) {
   return themeGet("space.r")(props);
 }, function (props) {
@@ -86,12 +90,16 @@ export default function Expandable(_ref) {
       toggleState = _useState4[0],
       setToggle = _useState4[1];
 
+  var Heading = useMemo(function () {
+    return small ? Typography.H5 : Typography.H4;
+  }, [small]);
+
   var onToggle = function onToggle() {
     if (!toggleState) setToggle(true);else setToggle(false);
     if (!baseState) setBase(true);else setBase(false);
   };
 
-  var component = /*#__PURE__*/React.createElement(Item, props, /*#__PURE__*/React.createElement(Button, {
+  var component = /*#__PURE__*/React.createElement(Item, props, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Button, {
     open: baseState,
     small: small,
     "aria-expanded": baseState,
@@ -99,11 +107,11 @@ export default function Expandable(_ref) {
   }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(Text, null, small ? title && /*#__PURE__*/React.createElement(Typography.H5, null, title) : title && /*#__PURE__*/React.createElement(Typography.H4, null, title), subtitle && /*#__PURE__*/React.createElement(Typography.Small, {
+  }, /*#__PURE__*/React.createElement(Text, null, title, subtitle && /*#__PURE__*/React.createElement(SubTitle, {
     grey: true
   }, subtitle)), badge && /*#__PURE__*/React.createElement(Badge, {
     variant: badgeColour
-  }, badge))), /*#__PURE__*/React.createElement(Content, {
+  }, badge)))), /*#__PURE__*/React.createElement(Content, {
     open: baseState,
     expanded: toggleState
   }, children));

package/es/components/Header/Header.stories.js

@@ -72,6 +72,41 @@ export var headerWithSearch = function headerWithSearch() {
   });
 };
 headerWithSearch.storyName = "Alternative Header with search";
+export var headerWithSearchAndLinks = function headerWithSearchAndLinks() {
+  return /*#__PURE__*/React.createElement(Header, {
+    variant: "searchAndLinks",
+    appName: "App Name",
+    userName: "Michael",
+    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    logoutFunction: action("clicked-logout"),
+    searchComponent: /*#__PURE__*/React.createElement(TextInput, {
+      fullWidth: true,
+      id: "search",
+      key: "search",
+      type: "text",
+      placeholder: "Search for...",
+      iconRight: ["fas", "search"]
+    }),
+    navToggleId: "headerWithSearchAndLinks"
+  }, /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    white: true,
+    bold: true
+  }, "Summary"), /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    white: true,
+    bold: true
+  }, "Teams"), /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    white: true,
+    bold: true
+  }, "People"), /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    white: true,
+    bold: true
+  }, "Reports"));
+};
+headerWithSearch.storyName = "Alternative Header with search";
 export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching() {
   var options = [{
     label: "Workspace A"
@@ -138,6 +173,11 @@ headerWithSearch.__docgenInfo = {
   "methods": [],
   "displayName": "headerWithSearch"
 };
+headerWithSearchAndLinks.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "headerWithSearchAndLinks"
+};
 headerWithWorkspaceSwitching.__docgenInfo = {
   "description": "",
   "methods": [],