@sproutsocial/racine 14.1.1 → 14.3.0

package/lib/TableRowAccordion/TableRowAccordion.js

@@ -72,12 +72,16 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
         }));
       }), /*#__PURE__*/React.createElement(TableCell, {
         id: "tableRowAccordion_trigger",
-        content: /*#__PURE__*/React.createElement(Trigger, {
+        content:
+        /*#__PURE__*/
+        // TODO: This trigger needs an accessible label passed in via props
+        React.createElement(Trigger, {
           "data-tablerowaccordion-trigger": true,
           onClick: this.handleToggle,
           role: "button"
         }, /*#__PURE__*/React.createElement(Icon, {
-          name: isExpanded ? 'chevron-up' : 'chevron-down'
+          name: isExpanded ? 'chevron-up' : 'chevron-down',
+          "aria-hidden": true
         }))
       })), /*#__PURE__*/React.createElement(Detail, {
         isExpanded: isExpanded,

package/lib/Textarea/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-12lw4hd-0"
-})(["box-sizing:border-box;position:relative;textarea{box-sizing:border-box;display:block;width:100%;padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";outline:none;resize:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";", " font-weight:", ";appearance:none;&:focus{", "}&:placeholder{color:", ";}", " ", " ", "}", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;textarea{box-sizing:border-box;display:block;width:100%;padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";outline:none;resize:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";", " font-weight:", ";appearance:none;&:focus{", "}&::placeholder{color:", ";font-style:italic;}", " ", " ", "}", " ", " ", ""], function (props) {
   return props.theme.space[300];
 }, function (props) {
   return props.theme.colors.form.border.base;

package/lib/Toast/Toast.js

@@ -68,40 +68,46 @@ var Toast = function Toast(_ref) {
     theme = _ref.theme,
     color = _ref.color,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement(Container, {
-    type: theme || 'info',
-    customColor: color,
-    borderLeft: "2px solid",
-    "data-qa-toast": ""
-  }, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    minHeight: "48px",
-    maxHeight: "800px",
-    p: 350,
-    alignItems: "flex-start",
-    m: "auto",
-    width: 1
-  }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
-    type: theme || 'info'
-    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    ,
-    color: color,
-    customColor: color,
-    name: theme ? themeIcon[theme] : icon || themeIcon['info'],
-    fixedWidth: true
-  })), /*#__PURE__*/React.createElement(_StyledBox2, {
-    flex: 1
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    color: "text.body",
-    "data-qa-toast-content": ""
-  }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
-    name: "x",
-    ml: 400,
-    color: "icon.base"
-  }))));
+  return (
+    /*#__PURE__*/
+    // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overriden
+    React.createElement(Container, {
+      type: theme || 'info',
+      customColor: color,
+      borderLeft: "2px solid",
+      "data-qa-toast": ""
+    }, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      minHeight: "48px",
+      maxHeight: "800px",
+      p: 350,
+      alignItems: "flex-start",
+      m: "auto",
+      width: 1
+    }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(CustomIcon, {
+      type: theme || 'info'
+      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
+      color: color,
+      customColor: color,
+      name: theme ? themeIcon[theme] : icon || themeIcon['info'],
+      fixedWidth: true,
+      "aria-hidden": true
+    })), /*#__PURE__*/React.createElement(_StyledBox2, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: "text.body",
+      "data-qa-toast-content": ""
+    }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
+      name: "x",
+      ml: 400,
+      color: "icon.base",
+      "aria-hidden": true
+    }))))
+  );
 };
 export default ToastContainer;
 var _StyledBox = _styled(Box).withConfig({

package/lib/ToggleHint/ToggleHint.js

@@ -35,11 +35,13 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getIcon", function () {
       if (_this.props.icon === 'chevron') {
         return /*#__PURE__*/React.createElement(Icon, {
-          name: "chevron-down"
+          name: "chevron-down",
+          "aria-hidden": true
         });
       }
       return /*#__PURE__*/React.createElement(Icon, {
-        name: _this.props.isOpen ? 'minus' : 'plus'
+        name: _this.props.isOpen ? 'minus' : 'plus',
+        "aria-hidden": true
       });
     });
     return _this;

package/lib/Token/Token.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useTextContent } from "../utils/hooks";
 import Box from "../Box";
 import Icon from "../Icon";
+import { VisuallyHidden } from "../VisuallyHidden";
 import Container from "./styles";
 var Token = function Token(_ref) {
   var children = _ref.children,
@@ -37,11 +38,24 @@ var Token = function Token(_ref) {
     "data-qa-token-iscloseable": closeable === true,
     "data-qa-token-isvalid": valid === true,
     "data-qa-token-isdisabled": disabled === true
-  }, qa, rest), closeable ? /*#__PURE__*/React.createElement(Box, {
+  }, qa, rest), !valid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+    as: "div",
+    role: "status"
+  }, "This is an invalid token"), /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    pr: 300,
+    name: "error",
+    size: "mini"
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, "Invalid")), closeable ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement("span", null, children), " ", /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    display: "flex",
+    alignItems: "center"
+  }, children), /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
     pl: 300,
     name: "x",
     size: "mini"

package/lib/Token/styles.js

@@ -5,7 +5,7 @@ import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1mt4sof-0"
-})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+})(["position:relative;display:inline-flex;align-items:center;margin:0;line-height:1;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
   var theme = _ref.theme;
   return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
 }, focusRing, function (_ref2) {

package/lib/TokenInput/TokenInput.js

@@ -192,7 +192,9 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Box, {
         display: "flex",
         alignItems: "center"
-      }, iconName && /*#__PURE__*/React.createElement(Icon, {
+      },
+      // TODO: add the ability to take labels or aria props for accessibility
+      iconName && /*#__PURE__*/React.createElement(Icon, {
         name: iconName,
         size: "mini",
         pr: 300

package/lib/TokenInput/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-18dw7or-0"
-})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}", "}&:placeholder{color:", ";}", " ", " ", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";font-style:italic;}", "}", " ", " ", " ", " ", " ", " ", ""], function (props) {
   return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
@@ -48,10 +48,10 @@ var Container = styled.div.withConfig({
   return props.theme.colors.text.body;
 }, function (props) {
   return props.theme.colors.form.background.base;
-}, function (props) {
-  return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
   return props.theme.colors.form.placeholder.base;
+}, function (props) {
+  return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
   return props.hasBeforeElement && css(["padding-left:40px;"]);
 }, function (props) {

package/lib/themes/dark/theme.js

@@ -176,7 +176,7 @@ var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
     subtext: COLORS.COLOR_NEUTRAL_300,
     body: COLORS.COLOR_NEUTRAL_100,
     inverse: COLORS.COLOR_NEUTRAL_900,
-    error: COLORS.COLOR_RED_400,
+    error: red.foreground,
     background: {
       highlight: COLORS.COLOR_YELLOW_900,
       selection: COLORS.COLOR_BLUE_800

package/lib/themes/light/theme.js

@@ -177,7 +177,7 @@ var colors = _objectSpread(_objectSpread({
     subtext: COLORS.COLOR_NEUTRAL_700,
     body: COLORS.COLOR_NEUTRAL_800,
     inverse: COLORS.COLOR_NEUTRAL_0,
-    error: COLORS.COLOR_RED_800,
+    error: red.foreground,
     background: {
       highlight: COLORS.COLOR_YELLOW_200,
       selection: COLORS.COLOR_BLUE_300
@@ -204,13 +204,13 @@ var colors = _objectSpread(_objectSpread({
       selected: COLORS.COLOR_NEUTRAL_800
     },
     border: {
-      base: COLORS.COLOR_NEUTRAL_400,
+      base: COLORS.COLOR_NEUTRAL_600,
       error: red.highlight,
       warning: yellow.highlight,
       selected: COLORS.COLOR_NEUTRAL_800
     },
     placeholder: {
-      base: COLORS.COLOR_NEUTRAL_600
+      base: COLORS.COLOR_NEUTRAL_700
     }
   },
   listItem: {

package/lib/utils/index.js

@@ -29,4 +29,12 @@ export var mergeRefs = function mergeRefs(refs) {
       _iterator.f();
     }
   };
-};
+};
+
+/**
+ * Type safe includes with narrowing
+ * https://fettblog.eu/typescript-array-includes/
+ */
+export function includes(coll, el) {
+  return coll.includes(el);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "14.1.1",
+  "version": "14.3.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -35,6 +35,7 @@
     "start-package-only": "npm-run-all install-deps clean -p build-icons watch-package",
     "start": "npm-run-all install-deps clean -p build-icons watch-package watch-app",
     "build": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package build-app",
+    "build:sync-icons": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package",
     "lint-js": "eslint --max-warnings=0 --fix .",
     "lint-css": "stylelint 'src/**/*.js'",
     "lint-icons": "yarn icon-lint check 'icons/*.svg'",
@@ -49,7 +50,7 @@
     "backstop-approve": "yarn backstop approve --config='backstop.config.js' --docker",
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
-    "release": "yarn test && yarn changeset publish",
+    "release": "yarn build && yarn test && yarn changeset publish",
     "storybook": "rm -rf node_modules/.cache/storybook && start-storybook -c .storybook -p 9999",
     "build-storybook": "build-storybook --quiet -c .storybook -o .storybook-dist",
     "build-chromatic": "yarn build-icons && build-storybook --quiet -c .storybook -o .storybook-dist",

package/dist/types/PartnerLogo/TypePartnerNames.d.ts

@@ -1,2 +0,0 @@
-export declare type TypePartnerNames = 'zendesk' | 'dropbox' | 'bigcommerce' | 'bitly' | 'canva' | 'twitter' | 'twitter-audience-network' | 'whatsapp' | 'yelp' | 'youtube' | 'shopify' | 'pinterest' | 'microsoft-dynamics' | 'marketo' | 'slack' | 'woocommerce' | 'tripadvisor' | 'tumblr' | 'google-business-messages' | 'reddit' | 'hubspot' | 'feedly' | 'facebook' | 'facebook-shops' | 'facebook-groups' | 'facebook-audience-network' | 'glassdoor' | 'salesforce' | 'instagram' | 'linkedin' | 'linkedin-audience-network' | 'google-analytics' | 'messenger' | 'google-my-business' | 'google-drive' | 'tiktok' | 'sproutsocial' | 'google-play-store' | 'apple-app-store';
-//# sourceMappingURL=TypePartnerNames.d.ts.map

package/dist/types/PartnerLogo/TypePartnerNames.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypePartnerNames.d.ts","sourceRoot":"","sources":["../../../src/PartnerLogo/TypePartnerNames.ts"],"names":[],"mappings":"AAEA,oBAAY,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,0BAA0B,GAC1B,UAAU,GACV,MAAM,GACN,SAAS,GACT,SAAS,GACT,WAAW,GACX,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,aAAa,GACb,QAAQ,GACR,0BAA0B,GAC1B,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,2BAA2B,GAC3B,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,2BAA2B,GAC3B,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,QAAQ,GACR,cAAc,GACd,mBAAmB,GACnB,iBAAiB,CAAC"}