@sproutsocial/racine 14.2.0 → 15.0.0

package/commonjs/Loader/styles.js

@@ -5,33 +5,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Text = void 0;
-var _polished = require("polished");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mixins = require("../utils/mixins");
 var _systemProps = require("../utils/system-props");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var getSize = function getSize(size) {
-  var spinnerSize = Math.ceil(size * 0.9);
-  var borderWidth = Math.ceil(size * 0.1);
-  return (0, _styledComponents.css)(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, spinnerSize);
-};
-var getColor = function getColor(color) {
-  return (0, _styledComponents.css)(["&:after{border-color:", " ", " ", " ", ";}"], (0, _polished.rgba)(color, 0.3), (0, _polished.rgba)(color, 0.3), (0, _polished.rgba)(color, 0.7), (0, _polished.rgba)(color, 0.7));
+  var spinnerSize = Math.round(size * 1);
+  var borderWidth = Math.round(size * 0.1);
+  return (0, _styledComponents.css)(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+    var theme = _ref.theme;
+    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
+  }, spinnerSize);
 };
 var spin = (0, _styledComponents.keyframes)(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
-var delay = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
+var delayAnimation = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = _styledComponents.default.div.attrs({
   className: 'Loader'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;overflow:hidden;&:after{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;content:'';transition:opacity 250ms;animation:", ";}", " ", " ", ""], function (props) {
-  return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delay) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.small ? getSize(20) : getSize(40);
+  return props.delay ? (0, _styledComponents.css)(["", " 2s 1;"], delayAnimation) : 'none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
-  return props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0]);
+  return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);
+}, function (props) {
+  return props.small ? getSize(20) : getSize(40);
 }, _systemProps.COMMON);
 var Text = _styledComponents.default.div.withConfig({
   displayName: "styles__Text",

package/commonjs/LogoViewBoxes.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/PartnerLogo/PartnerLogo.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = require("styled-components");
 var logoViewBoxes = _interopRequireWildcard(require("../LogoViewBoxes"));
 var _styles = _interopRequireDefault(require("./styles"));
-var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "color"];
+var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "aria-label", "svgProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,16 +19,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var PartnerLogo = function PartnerLogo(_ref) {
   var partnerName = _ref.partnerName,
     backgroundType = _ref.backgroundType,
-    logoType = _ref.logoType,
+    _ref$logoType = _ref.logoType,
+    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
     height = _ref.height,
     width = _ref.width,
     size = _ref.size,
-    color = _ref.color,
+    ariaLabel = _ref['aria-label'],
+    svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _styledComponents.useTheme)(),
     mode = _useTheme.mode;
   var whichLogo = function whichLogo(type) {
-    var logo = logoType ? partnerName + '-' + logoType : partnerName;
+    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
     if (type && type === 'dark') {
       return "".concat(logo, "-dark");
     } else if (type && type === 'light') {
@@ -48,17 +50,16 @@ var PartnerLogo = function PartnerLogo(_ref) {
     height: height ? height : defaultHeight + 'px',
     width: width ? width : defaultWidth + 'px',
     logoSize: size,
-    className: "logo"
-    // 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
-  }, rest), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "logo",
+    role: "img",
+    "aria-label": ariaLabel,
+    "data-qa-logo": partnerName
+  }, rest), /*#__PURE__*/_react.default.createElement("svg", _extends({
     className: "logo-svg",
     viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/_react.default.createElement("use", {
+    focusable: false,
+    "data-qa-logo-svg": "".concat(partnerName, "-svg")
+  }, svgProps), /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
   })));

package/commonjs/PartnerLogo/PartnerLogoTypes.js

@@ -2,4 +2,15 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.PartnerNames = exports.PartnerLogoSizes = void 0;
+var PartnerNames = ['apple-app-store', 'bigcommerce', 'bitly', 'bynder', 'canva', 'dropbox', 'facebook', 'facebook-audience-network', 'facebook-groups', 'facebook-shops', 'feedly', 'glassdoor', 'google-analytics', 'google-business-messages', 'google-drive', 'google-my-business', 'google-play-store', 'hubspot', 'instagram', 'linkedin', 'linkedin-audience-network', 'marketo', 'messenger', 'microsoft-dynamics', 'pinterest', 'reddit', 'salesforce', 'shopify', 'slack', 'sproutsocial', 'tiktok', 'tripadvisor', 'tumblr', 'twitter', 'twitter-audience-network', 'whatsapp', 'woocommerce', 'yelp', 'youtube', 'zendesk'];
+exports.PartnerNames = PartnerNames;
+var PartnerLogoSizes = {
+  mini: '12px',
+  small: '16px',
+  medium: '24px',
+  large: '32px',
+  jumbo: '64px'
+};
+exports.PartnerLogoSizes = PartnerLogoSizes;

package/commonjs/PartnerLogo/index.js

@@ -26,18 +26,6 @@ Object.keys(_PartnerLogoTypes).forEach(function (key) {
     }
   });
 });
-var _TypePartnerNames = require("./TypePartnerNames");
-Object.keys(_TypePartnerNames).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TypePartnerNames[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _TypePartnerNames[key];
-    }
-  });
-});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = _PartnerLogo.default;
 exports.default = _default;

package/commonjs/PartnerLogo/styles.js

@@ -20,7 +20,7 @@ var sizes = {
 
 // TODO: remove width from stylesForSize
 var stylesForSize = function stylesForSize(height, width, logoSize) {
-  return (0, _styledComponents.css)(["line-height:", ";&,.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
+  return (0, _styledComponents.css)(["height:", ";line-height:", ";.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : '');
 };
 var Container = (0, _styledComponents.default)('span').withConfig({
   displayName: "styles__Container",

package/commonjs/Select/Select.js

@@ -92,7 +92,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(_Icon.default, {
         name: "chevron-down",
         fixedWidth: true,
-        size: this.props.size === 'small' ? 'mini' : 'default'
+        size: this.props.size === 'small' ? 'mini' : 'default',
+        "aria-hidden": true
       })));
     }
   }]);

package/commonjs/Switch/Switch.js

@@ -74,6 +74,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-qa-switch-isdisabled": disabled === true,
         checked: checked
       }, qa, rest), /*#__PURE__*/React.createElement(_VisuallyHidden.VisuallyHidden, null, checked ? a11yLabels.on : a11yLabels.off), checked ? /*#__PURE__*/React.createElement(_Icon.default, {
+        "aria-hidden": true,
         size: "mini",
         name: "check"
       }) : null);

package/commonjs/TableHeaderCell/TableHeaderCell.js

@@ -49,7 +49,8 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/React.createElement(_styles.SortIcon, null, /*#__PURE__*/React.createElement(_Icon.default, {
         size: "mini",
-        name: iconName
+        name: iconName,
+        "aria-hidden": true
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {

package/commonjs/TableRowAccordion/TableRowAccordion.js

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

package/commonjs/Toast/Toast.js

@@ -78,40 +78,46 @@ var Toast = function Toast(_ref) {
     theme = _ref.theme,
     color = _ref.color,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement(_styles.default, {
-    type: theme || 'info',
-    customColor: color,
-    borderLeft: "2px solid",
-    "data-qa-toast": ""
-  }, /*#__PURE__*/React.createElement(_Box.default, {
-    display: "flex",
-    minHeight: "48px",
-    maxHeight: "800px",
-    p: 350,
-    alignItems: "flex-start",
-    m: "auto",
-    width: 1
-  }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_styles.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.default, {
-    as: "div",
-    color: "text.body",
-    "data-qa-toast-content": ""
-  }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_Icon.default, {
-    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(_styles.default, {
+      type: theme || 'info',
+      customColor: color,
+      borderLeft: "2px solid",
+      "data-qa-toast": ""
+    }, /*#__PURE__*/React.createElement(_Box.default, {
+      display: "flex",
+      minHeight: "48px",
+      maxHeight: "800px",
+      p: 350,
+      alignItems: "flex-start",
+      m: "auto",
+      width: 1
+    }, /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_styles.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.default, {
+      as: "div",
+      color: "text.body",
+      "data-qa-toast-content": ""
+    }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_Icon.default, {
+      name: "x",
+      ml: 400,
+      color: "icon.base",
+      "aria-hidden": true
+    }))))
+  );
 };
 var _default = ToastContainer;
 exports.default = _default;

package/commonjs/ToggleHint/ToggleHint.js

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

package/commonjs/Token/Token.js

@@ -9,6 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../utils/hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _VisuallyHidden = require("../VisuallyHidden");
 var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,11 +48,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.default, {
+  }, qa, rest), !valid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_VisuallyHidden.VisuallyHidden, {
+    as: "div",
+    role: "status"
+  }, "This is an invalid token"), /*#__PURE__*/React.createElement(_Icon.default, {
+    "aria-hidden": true,
+    pr: 300,
+    name: "error",
+    size: "mini"
+  }), /*#__PURE__*/React.createElement(_VisuallyHidden.VisuallyHidden, null, "Invalid")), closeable ? /*#__PURE__*/React.createElement(_Box.default, {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement("span", null, children), " ", /*#__PURE__*/React.createElement(_Icon.default, {
+  }, /*#__PURE__*/React.createElement(_Box.default, {
+    as: "span",
+    display: "flex",
+    alignItems: "center"
+  }, children), /*#__PURE__*/React.createElement(_Icon.default, {
+    "aria-hidden": true,
     pl: 300,
     name: "x",
     size: "mini"

package/commonjs/Token/styles.js

@@ -14,7 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.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 (0, _styledComponents.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);
 }, _mixins.focusRing, function (_ref2) {

package/commonjs/TokenInput/TokenInput.js

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