orcs-design-system 3.0.0 → 3.0.2

package/es/components/Popover/Popover.stories.js

@@ -117,6 +117,7 @@ export var tooltipWithLinkExample = function tooltipWithLinkExample() {
       small: true,
       target: "_blank"
     }, "link to TeamForm")),
+    arialLabel: "Link to TeamForm",
     direction: "right",
     variant: "tooltip",
     enableSelectAll: false

package/es/components/Popover/index.js

@@ -1,8 +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", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll"];
-import React, { useState } from "react";
+var _excluded = ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll", "tabIndex"];
+import React, { useId, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
@@ -10,16 +10,17 @@ import { keys } from "lodash";
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView, directions } from "../../hooks/keepInView";
+import useIsVisible from "../../hooks/isVisible";
 var Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
 })(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, function (props) {
   return props.inlineBlock ? "inline-block !important" : "block !important";
 });
-var TooltipControl = styled.div.withConfig({
+var TooltipControl = styled.button.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"
-})(["cursor:help;transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
+})(["border:none;background:none;padding:0;cursor:help;font-size:1em;transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
   return themeGet("transition.transitionDefault")(props);
 }, function (props) {
   return themeGet("colors.primary")(props);
@@ -79,11 +80,18 @@ export default function Popover(_ref2) {
     variant = _ref2.variant,
     _ref2$enableSelectAll = _ref2.enableSelectAll,
     enableSelectAll = _ref2$enableSelectAll === void 0 ? true : _ref2$enableSelectAll,
+    _ref2$tabIndex = _ref2.tabIndex,
+    tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(direction),
     _useState2 = _slicedToArray(_useState, 2),
     inViewDirection = _useState2[0],
     setInViewDirection = _useState2[1];
+  var _useIsVisible = useIsVisible(),
+    _useIsVisible2 = _slicedToArray(_useIsVisible, 2),
+    isActive = _useIsVisible2[0],
+    tooltip = _useIsVisible2[1];
+  var toolTipId = useId();
   var _useKeepInView = useKeepInView({
       direction: direction,
       callback: setInViewDirection
@@ -91,6 +99,13 @@ export default function Popover(_ref2) {
     _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
     ref = _useKeepInView2[0],
     setIsShown = _useKeepInView2[1];
+  var ariaLabel = useMemo(function () {
+    if (props.ariaLabel) {
+      return props.ariaLabel;
+    } else if (typeof text === "string") {
+      return text;
+    }
+  }, [props.ariaLabel, text]);
   var component = /*#__PURE__*/React.createElement(Container, _extends({
     inlineBlock: inlineBlock
   }, props, {
@@ -100,19 +115,27 @@ export default function Popover(_ref2) {
     onMouseLeave: function onMouseLeave() {
       return setIsShown(false);
     }
-  }), !!text && /*#__PURE__*/React.createElement(Text, {
+  }), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    "aria-expanded": "".concat(isActive),
+    "aria-describedby": toolTipId
+  }, /*#__PURE__*/React.createElement(Icon, {
+    transform: "grow-4",
+    icon: ["fas", "question-circle"]
+  })), !!text && /*#__PURE__*/React.createElement(Text, {
     ref: ref,
+    role: "list",
     className: "popoverText",
     textAlign: textAlign,
     direction: inViewDirection,
     width: width,
     enableSelectAll: enableSelectAll
-  }, text), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
-    tabIndex: "0"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    transform: "grow-4",
-    icon: ["fas", "question-circle"]
-  })), children);
+  }, /*#__PURE__*/React.createElement("span", {
+    id: toolTipId,
+    role: "listitem",
+    ref: tooltip
+  }, text)), children);
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -135,7 +158,11 @@ Popover.propTypes = {
   /** Specifies the system design theme. */
   theme: PropTypes.object,
   /** Specifies whether enable select all behaviour */
-  enableSelectAll: PropTypes.bool
+  enableSelectAll: PropTypes.bool,
+  /** Provide an aria-label if text is not a string */
+  ariaLabel: PropTypes.string,
+  /** Provide a tab index for accessibilty, defaults to 0 */
+  tabIndex: PropTypes.number
 };
 Popover.__docgenInfo = {
   "description": "This popover component is intended to be used to supplement buttons (or other elements) that require some helper text. It supports customisation of direction and width. This is so that you can ensure that the popover doesn't run off the screen, and that the width suits the amount of text in the popover.\n\nIf you don't specify a width, 200px is the default, but as a general guide try and keep widths somewhere between 150-250 if you are modifying. Make sure if setting width you include the unit you want it to use, e.g. pixels, %.",
@@ -153,6 +180,17 @@ Popover.__docgenInfo = {
       "required": false,
       "description": "Specifies whether enable select all behaviour"
     },
+    "tabIndex": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "Provide a tab index for accessibilty, defaults to 0"
+    },
     "children": {
       "type": {
         "name": "element"
@@ -224,6 +262,13 @@ Popover.__docgenInfo = {
       },
       "required": false,
       "description": "Specifies the system design theme."
+    },
+    "ariaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Provide an aria-label if text is not a string"
     }
   }
 };

package/es/components/SideNav/index.js

@@ -166,7 +166,7 @@ var SideNavItem = styled("button").attrs(function (props) {
     position: "relative",
     display: "flex",
     alignItems: "center",
-    justifyContent: "flex-start",
+    justifyContent: "center",
     width: "100%",
     borderRadius: themeGet("radii.2")(props),
     transition: themeGet("transition.transitionDefault")(props),
@@ -249,7 +249,7 @@ var SideNavItemLink = styled("div").attrs(function (props) {
       position: "relative",
       display: "flex",
       alignItems: "center",
-      justifyContent: "flex-start",
+      justifyContent: "center",
       width: "100%",
       transition: themeGet("transition.transitionDefault")(props),
       bg: "transparent",

package/es/components/TextInput/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["numberProps"];
 import React, { useMemo } from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { space, layout, compose } from "styled-system";
@@ -82,7 +82,7 @@ var Input = styled("input").attrs(function (props) {
   displayName: "TextInput__Input",
   componentId: "shde0o-1"
 })(["", ""], InputStyle);
-var NumberInput = styled(NumberFormat).attrs(function (props) {
+var NumberInput = styled(NumericFormat).attrs(function (props) {
   return {
     "data-testid": props["data-testid"] ? props["data-testid"] : null
   };

package/es/hooks/isVisible.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useRef, useState } from "react";
+export default function useIsVisible() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var ref = useRef();
+  useEffect(function () {
+    if (!ref.current) return;
+    var interval = window.setInterval(function () {
+      var currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
+      if (isVisible !== currentIsVisible) {
+        setIsVisible(currentIsVisible);
+      }
+    }, 250);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [ref, isVisible]);
+  return [isVisible, ref];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",
@@ -50,16 +50,16 @@
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
     "react-cool-onclickoutside": "^1.5.9",
-    "react-dates": "^21.8.0",
     "react-docgen": "^5.3.0",
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
-    "react-number-format": "^4.4.1",
+    "react-number-format": "^5.3.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^5.7.4",
     "react-test-renderer": "^18.2.0",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "react-dates": "^21.8.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
@@ -77,31 +77,33 @@
     "@mdx-js/react": "^2.3.0",
     "@percy/cli": "^1.26.3",
     "@percy/storybook": "^4.3.6",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-actions": "^7.2.1",
-    "@storybook/addon-docs": "^7.2.1",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-docs": "^7.3.2",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-mdx-gfm": "^7.2.1",
-    "@storybook/addon-storyshots": "^7.2.1",
-    "@storybook/addon-toolbars": "^7.2.1",
-    "@storybook/addon-viewport": "^7.2.1",
-    "@storybook/addons": "^7.2.1",
-    "@storybook/api": "^7.2.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/components": "^7.2.1",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addon-storyshots": "^7.3.2",
+    "@storybook/addon-toolbars": "^7.3.2",
+    "@storybook/addon-viewport": "^7.3.2",
+    "@storybook/addons": "^7.3.2",
+    "@storybook/api": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/components": "^7.3.2",
+    "@storybook/core-events": "^7.3.2",
+    "@storybook/manager-api": "^7.3.2",
     "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/preset-create-react-app": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
-    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/preset-create-react-app": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/storybook-deployer": "2.8.16",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@types/jest": "^26.0.19",
     "@types/styled-components": "^5.1.7",
     "audit-ci": "^6.1.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.5",
+    "babel-eslint": "^10.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-react-docgen": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -120,11 +122,11 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "npm-run-all": "^4.1.5",
-    "playroom": "^0.27.7",
+    "playroom": "^0.32.1",
     "prettier": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.2.1",
+    "storybook": "^7.3.2",
     "style-loader": "^2.0.0",
     "styled-components": "^5.2.1",
     "webpack": "^5.88.2",
@@ -135,6 +137,12 @@
     "react-dom": "^18.2.0",
     "styled-components": "^5.2.1"
   },
+  "overrides": {
+    "nth-check": "2.1.0",
+    "parse-url": "8.1.0",
+    "react-scripts": "5.0.1",
+    "remark-parse": "10.0.2"
+  },
   "browserslist": {
     "development": [
       "last 2 chrome versions",