orcs-design-system 3.1.11 → 3.1.13

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

@@ -83,6 +83,7 @@ export var small = function small() {
       href: "#"
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
@@ -93,7 +94,7 @@ export var large = function large() {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
     sizing: "large",
-    title: "Ayden Lundgre TESTER",
+    title: "Ayden Lundgre",
     titleLevel: "H1",
     subtitle: "Senior Business Analyst",
     initials: "AL"
@@ -109,6 +110,7 @@ export var large = function large() {
       href: "#"
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
@@ -134,6 +136,7 @@ export var subtitleContent = function subtitleContent() {
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Ayden Lundgre"),
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
@@ -146,7 +149,7 @@ export var subtitleContent = function subtitleContent() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre",
+    imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Flex, {
       flexWrap: "wrap"
     }, /*#__PURE__*/React.createElement(Spacer, {
@@ -168,7 +171,7 @@ export var localTime = function localTime() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre",
+    imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
     }, "Senior Business Analyst"),
@@ -196,7 +199,7 @@ export var inverted = function inverted() {
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre"
+    imageAlt: "Avatar for Ayden Lundgre"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     sizing: "small",
@@ -214,7 +217,7 @@ export var inverted = function inverted() {
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre"
+    imageAlt: "Avatar for Ayden Lundgre"
   })));
 };
 inverted.storyName = "Inverted";
@@ -228,7 +231,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",
+    imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
@@ -237,7 +240,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"
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
     sizing: "small",
@@ -245,14 +248,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    initials: "IL"
+    initials: "IL",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Innovation Lab"),
-    subtitle: "15 team members"
+    subtitle: "15 team members",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -260,7 +265,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",
+    imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
@@ -269,7 +274,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"
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     sizing: "small",
@@ -277,14 +282,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    initials: "IL"
+    initials: "IL",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Innovation Lab"),
-    subtitle: "15 team members"
+    subtitle: "15 team members",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -292,7 +299,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",
+    imageAlt: "Avatar for Javascript",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
@@ -301,7 +308,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"
+    imageAlt: "Avatar for Javascript"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     sizing: "small",
@@ -309,14 +316,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Javascript"),
     subtitle: "Tagged 123 times",
-    initials: "JS"
+    initials: "JS",
+    imageAlt: "Avatar for Javascript"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Javascript"),
-    subtitle: "Tagged 123 times"
+    subtitle: "Tagged 123 times",
+    imageAlt: "Avatar for Javascript"
   }));
 };
 alternateShapes.storyName = "Alternate Shapes";

package/es/components/Avatar/index.js

@@ -251,7 +251,7 @@ var Subtitle = styled(Text).withConfig({
   componentId: "sc-1wtet2j-5"
 })(function (props) {
   return css({
-    color: themeGet("colors.grey")(props),
+    color: themeGet("colors.greyDark")(props),
     fontSize: themeGet("fontSizes.1")(props)
   });
 }, function (props) {
@@ -308,7 +308,7 @@ var Avatar = function Avatar(_ref2) {
     if (imageAlt) {
       return imageAlt;
     } else if (typeof title === "string") {
-      return title;
+      return "Avatar for ".concat(title);
     }
   }, [imageAlt, title]);
   var component = /*#__PURE__*/React.createElement(AvatarWrapper, _extends({}, props, {

package/es/components/Badge/index.js

@@ -47,7 +47,7 @@ var Item = styled("span").withConfig({
       },
       warning: {
         color: themeGet("colors.warningDarkest")(props),
-        bg: themeGet("colors.warningLightest")(props)
+        bg: themeGet("colors.warningLighter")(props)
       },
       danger: {
         color: themeGet("colors.dangerDarkest")(props),

package/es/components/Button/index.js

@@ -126,7 +126,7 @@ var StyledButton = styled("button").withConfig({
       },
       ghost: {
         bg: themeGet("colors.primaryLightest")(props),
-        color: themeGet("colors.primary")(props),
+        color: themeGet("colors.primaryDark")(props),
         borderColor: themeGet("colors.primaryLightest")(props),
         "&:hover": {
           bg: themeGet("colors.primaryLighter")(props),

package/es/components/Card/index.js

@@ -6,7 +6,7 @@ import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import Icon from "../Icon/";
 import Box from "../Box/";
-import { H3, H6 } from "../Typography";
+import { H3, H4 } from "../Typography";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 var Item = styled.div.withConfig({
@@ -29,13 +29,13 @@ var Item = styled.div.withConfig({
 }, function (props) {
   return props.center ? css([",> *,> div > *{display:flex;flex-direction:column;align-items:center;}"]) : css([""]);
 }, function (props) {
-  return props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h6{margin-left:auto;float:right;}"]) : css([""]);
+  return props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h4{margin-left:auto;float:right;}"]) : css([""]);
 });
 var ChangeIcon = styled.div.withConfig({
   displayName: "Card__ChangeIcon",
   componentId: "sc-yfq75p-1"
 })(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], function (props) {
-  return themeGet("colors.grey")(props);
+  return themeGet("colors.greyDark")(props);
 }, function (props) {
   return themeGet("space.3")(props);
 }, function (props) {
@@ -45,11 +45,11 @@ var ChangeValue = styled.small.withConfig({
   displayName: "Card__ChangeValue",
   componentId: "sc-yfq75p-2"
 })(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], function (props) {
-  return themeGet("fontSizes.3")(props);
+  return themeGet("fontSizes.2")(props);
 }, function (props) {
   return themeGet("fontWeights.0")(props);
 }, function (props) {
-  return themeGet("colors.grey")(props);
+  return themeGet("colors.greyDark")(props);
 }, function (props) {
   return themeGet("space.3")(props);
 });
@@ -88,7 +88,10 @@ export default function Card(_ref) {
     mr: "s"
   }) : null, title ? /*#__PURE__*/React.createElement(H3, null, title) : null, changeIcon ? /*#__PURE__*/React.createElement(ChangeIcon, {
     changeIcon: changeIcon
-  }) : null, changeValue ? /*#__PURE__*/React.createElement(ChangeValue, null, changeValue) : null, subtitle ? /*#__PURE__*/React.createElement(H6, null, subtitle) : null), /*#__PURE__*/React.createElement(Box, null, children));
+  }) : null, changeValue ? /*#__PURE__*/React.createElement(ChangeValue, null, changeValue) : null, subtitle ? /*#__PURE__*/React.createElement(H4, {
+    fontSize: "1",
+    color: "greyDark"
+  }, subtitle) : null), /*#__PURE__*/React.createElement(Box, null, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;

package/es/components/Loading/index.js

@@ -45,7 +45,7 @@ export default function Loading(_ref) {
   var component = /*#__PURE__*/React.createElement(LoadingWrapper, _extends({}, props, {
     centered: centered
   }), /*#__PURE__*/React.createElement(LoadingIcon, {
-    role: "image",
+    role: "img",
     "aria-label": ariaLabel,
     large: large,
     inverted: inverted,

package/es/components/Modal/Modal.stories.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Button from "../Button";
 import Modal from ".";
 import { H3, P } from "../Typography";
@@ -17,6 +17,7 @@ var Basic = function Basic() {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -29,11 +30,14 @@ var Basic = function Basic() {
     };
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick
   }, "Open basic modal"), /*#__PURE__*/React.createElement(Modal, {
+    ariaLabel: "Modal Name",
     visible: visible,
     handleOnConfirm: handleOnConfirm,
-    onClose: onToggleModal(false)
+    onClose: onToggleModal(false),
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(H3, null, "Modal Title"), /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content."))));
@@ -41,11 +45,19 @@ var Basic = function Basic() {
 export var basicModal = function basicModal() {
   return /*#__PURE__*/React.createElement(Basic, null);
 };
+basicModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var Advanced = function Advanced() {
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     visible = _useState4[0],
     setVisible = _useState4[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -62,6 +74,7 @@ var Advanced = function Advanced() {
     onClick: handleOnConfirm
   }, "Go to full article");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick
   }, "Open advanced modal"), /*#__PURE__*/React.createElement(Modal, {
     maxWidth: "500px",
@@ -72,7 +85,8 @@ var Advanced = function Advanced() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content. This content will be scrollable if it exeeds the height of the modal."), /*#__PURE__*/React.createElement(P, null, "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/React.createElement(P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"))));
@@ -80,11 +94,19 @@ var Advanced = function Advanced() {
 export var advancedModal = function advancedModal() {
   return /*#__PURE__*/React.createElement(Advanced, null);
 };
+advancedModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var BasicDialogue = function BasicDialogue() {
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     visible = _useState6[0],
     setVisible = _useState6[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -106,6 +128,7 @@ var BasicDialogue = function BasicDialogue() {
     onClick: onToggleModal(false)
   }, "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick,
     variant: "danger",
     iconLeft: true
@@ -115,7 +138,8 @@ var BasicDialogue = function BasicDialogue() {
     visible: visible,
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(P, {
@@ -126,11 +150,19 @@ var BasicDialogue = function BasicDialogue() {
 export var basicDialogueModal = function basicDialogueModal() {
   return /*#__PURE__*/React.createElement(BasicDialogue, null);
 };
+basicDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        ref={button}\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var EditDialogue = function EditDialogue() {
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     visible = _useState8[0],
     setVisible = _useState8[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -159,6 +191,7 @@ var EditDialogue = function EditDialogue() {
     icon: ["fas", "times"]
   }), "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick,
     iconLeft: true
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -168,7 +201,8 @@ var EditDialogue = function EditDialogue() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -187,6 +221,13 @@ var EditDialogue = function EditDialogue() {
 export var editDialogueModal = function editDialogueModal() {
   return /*#__PURE__*/React.createElement(EditDialogue, null);
 };
+editDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 basicModal.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Modal/index.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
-import React from "react";
+var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "triggerRef", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import useOnclickOutside from "react-cool-onclickoutside";
 import PropTypes from "prop-types";
@@ -80,6 +81,7 @@ var Modal = function Modal(_ref) {
     minHeight = _ref.minHeight,
     overflow = _ref.overflow,
     onClose = _ref.onClose,
+    triggerRef = _ref.triggerRef,
     theme = _ref.theme,
     visible = _ref.visible,
     overlayID = _ref.overlayID,
@@ -93,14 +95,56 @@ var Modal = function Modal(_ref) {
   var modalRef = useOnclickOutside(function () {
     onClose();
   }, options);
+  var ariaLabel = useMemo(function () {
+    if (restProps.ariaLabel) {
+      return restProps.ariaLabel;
+    } else if (typeof headerContent === "string") {
+      return headerContent;
+    }
+  }, [restProps.ariaLabel, headerContent]);
   useKeyPress(commonKeys.ESCAPE, onClose, options);
   useKeyPress(commonKeys.ESC, onClose, options);
+
+  // Initial focus point for keyboard navigation
+  var top = useRef();
+
+  // If bottom becomes focused then re-focus the close button
+  var bottom = useRef();
+
+  // Ref to close button
+  var button = useRef();
+
+  // Keep trak on whether its been visible
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOpened = _useState2[0],
+    setHasOpened = _useState2[1];
+
+  // On becoming visible focus the top
+  useEffect(function () {
+    if (visible) {
+      top.current.focus();
+      setHasOpened(true);
+    } else if (hasOpened) {
+      triggerRef && triggerRef.current.focus();
+    }
+  }, [visible, hasOpened, top, triggerRef]);
   var component = /*#__PURE__*/React.createElement(Overlay, _extends({
     alignItems: "center",
     justifyContent: "center",
     id: overlayID
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    ref: modalRef
+  }, restProps), /*#__PURE__*/React.createElement("span", {
+    tabIndex: "0",
+    ref: top,
+    onFocus: function onFocus() {
+      return bottom.current.focus();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: modalRef,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": ariaLabel,
+    tabIndex: "-1"
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
@@ -117,19 +161,23 @@ var Modal = function Modal(_ref) {
     mr: "xl",
     width: "100%"
   }, headerContent), /*#__PURE__*/React.createElement(CloseButton, {
+    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
-    px: "6px"
+    px: "6px",
+    "aria-label": "Close dialog"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     color: "greyDark",
     size: "lg"
   }))) : /*#__PURE__*/React.createElement(CloseButton, {
+    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
-    px: "6px"
+    px: "6px",
+    "aria-label": "Close dialog"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     color: "greyDark",
@@ -137,7 +185,15 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement(ScrollableContent, {
     headerContent: headerContent,
     overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))));
+  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))), /*#__PURE__*/React.createElement("span", {
+    ref: bottom,
+    tabIndex: "-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return button.current.focus();
+    }
+  }));
   var wrapper = visible && /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component, document.body);
@@ -168,6 +224,10 @@ Modal.propTypes = {
   visible: PropTypes.bool,
   /** Specifies the function to run on clicking X icon. Ensure that this function will close Modal through the `visible` prop */
   onClose: PropTypes.func,
+  /** Required to re-focus keyboard navigation after closing a modal, generally a ref to the button */
+  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   /** Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`) */
   overflow: PropTypes.string,
   /** Specifies the id of the overlay element for targeting */
@@ -175,7 +235,9 @@ Modal.propTypes = {
   /** Specifies the id of the modal element for targeting */
   modalID: PropTypes.string,
   /** Sets the theme for the Modal */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies the aria-label for the modal. Set this if headerContent is not defined as a string. */
+  ariaLabel: PropTypes.string
 };
 Modal.defaultProps = {
   width: "350px",
@@ -322,6 +384,24 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
+    "triggerRef": {
+      "description": "Required to re-focus keyboard navigation after closing a modal, generally a ref to the button",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "func"
+        }, {
+          "name": "shape",
+          "value": {
+            "current": {
+              "name": "any",
+              "required": false
+            }
+          }
+        }]
+      },
+      "required": false
+    },
     "overflow": {
       "description": "Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`)",
       "type": {
@@ -335,6 +415,13 @@ Modal.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "ariaLabel": {
+      "description": "Specifies the aria-label for the modal. Set this if headerContent is not defined as a string.",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };