@sproutsocial/racine 20.7.0 → 20.9.0

package/dist/themes/light/theme.scss

@@ -20,12 +20,12 @@ $theme: (
           "success": #d7f4d7,
           "warning": #fdefcd,
           "error": #ffd5d2,
-          "info": #dcf2ff,
+          "info": #deebfe,
           "opportunity": #eaeaf9,
           "danger": #ffd5d2,
           "decorative": (
             "green": #d7f4d7,
-            "blue": #dcf2ff,
+            "blue": #deebfe,
             "purple": #eaeaf9,
             "yellow": #fdefcd,
             "orange": #fcdccc,
@@ -37,7 +37,7 @@ $theme: (
             "teal": #cdf7ef
           ),
           "selected": #364141,
-          "positive_sentiment": #3896e3,
+          "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc
         ),
@@ -47,11 +47,11 @@ $theme: (
           "warning": #ffbc00,
           "error": #ed4c42,
           "danger": #ed4c42,
-          "info": #2b87d3,
+          "info": #2b68d3,
           "opportunity": #9180f4,
           "decorative": (
             "green": #59cb59,
-            "blue": #2b87d3,
+            "blue": #2b68d3,
             "purple": #9180f4,
             "yellow": #ffbc00,
             "orange": #f57d33,
@@ -68,9 +68,9 @@ $theme: (
       "button": (
         "primary": (
           "background": (
-            "base": #2079c3,
-            "hover": #116daa,
-            "active": #0c5689
+            "base": #205bc3,
+            "hover": #1150aa,
+            "active": #0c3f89
           ),
           "border": (
             "base": transparent
@@ -132,8 +132,8 @@ $theme: (
             "base": #929a9b
           ),
           "text": (
-            "base": #2079c3,
-            "hover": #116daa
+            "base": #205bc3,
+            "hover": #1150aa
           )
         ),
         "unstyled": (
@@ -150,8 +150,8 @@ $theme: (
         )
       ),
       "link": (
-        "base": #116daa,
-        "hover": #0c5689
+        "base": #1150aa,
+        "hover": #0c3f89
       ),
       "text": (
         "headline": #273333,
@@ -161,11 +161,11 @@ $theme: (
         "error": #992222,
         "background": (
           "highlight": #ffe99a,
-          "selection": #a1d2f8
+          "selection": #a1c2f8
         ),
         "decorative": (
           "green": #006b40,
-          "blue": #0c5689,
+          "blue": #0c3f89,
           "purple": #5e4eba,
           "yellow": #944c0c,
           "orange": #962c0b,
@@ -184,10 +184,10 @@ $theme: (
         "warning": #944c0c,
         "error": #992222,
         "danger": #992222,
-        "info": #0c5689,
+        "info": #0c3f89,
         "opportunity": #5e4eba,
-        "applied": #2079c3,
-        "positive_sentiment": #2b87d3,
+        "applied": #205bc3,
+        "positive_sentiment": #2b68d3,
         "negative_sentiment": #ed4c42,
         "neutral_sentiment": #929a9b
       ),
@@ -228,7 +228,7 @@ $theme: (
         "base": #2733333D
       ),
       "illustration": (
-        "fill": #56adf5,
+        "fill": #679eff,
         "stroke": #273333
       ),
       "network": (
@@ -266,7 +266,7 @@ $theme: (
           "2": #6f5ed3,
           "3": #ce3665,
           "4": #ffcd1c,
-          "5": #3896e3,
+          "5": #3876e3,
           "6": #db61db,
           "7": #59cb59,
           "8": #fc8943,
@@ -275,7 +275,7 @@ $theme: (
           "11": #a193f2,
           "12": #931847,
           "13": #944c0c,
-          "14": #0c5689,
+          "14": #0c3f89,
           "15": #6c2277,
           "16": #006b40,
           "17": #962c0b,
@@ -283,7 +283,7 @@ $theme: (
           "19": #0ca750,
           "20": #ba7506
         ),
-        "list": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
+        "list": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3876e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c3f89, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
       ),
       "neutral": (
         "0": #FFFFFF,
@@ -328,18 +328,18 @@ $theme: (
         "1100": #2b1111
       ),
       "blue": (
-        "0": #e9f8ff,
-        "100": #dcf2ff,
-        "200": #c7e4f9,
-        "300": #a1d2f8,
-        "400": #56adf5,
-        "500": #3896e3,
-        "600": #2b87d3,
-        "700": #2079c3,
-        "800": #116daa,
-        "900": #0c5689,
-        "1000": #0a3960,
-        "1100": #002138
+        "0": #e9f4ff,
+        "100": #deebfe,
+        "200": #c7dbf9,
+        "300": #a1c2f8,
+        "400": #679eff,
+        "500": #3876e3,
+        "600": #2b68d3,
+        "700": #205bc3,
+        "800": #1150aa,
+        "900": #0c3f89,
+        "1000": #0a2960,
+        "1100": #001738
       ),
       "teal": (
         "0": #e5f9f5,
@@ -439,13 +439,13 @@ $theme: (
         "1000": #601700,
         "1100": #2d130e
       ),
-      "DATAVIZ_COLORS_LIST": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
+      "DATAVIZ_COLORS_LIST": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3876e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c3f89, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
       "DATAVIZ_COLORS_MAP": (
         "1": #08c4b2,
         "2": #6f5ed3,
         "3": #ce3665,
         "4": #ffcd1c,
-        "5": #3896e3,
+        "5": #3876e3,
         "6": #db61db,
         "7": #59cb59,
         "8": #fc8943,
@@ -454,7 +454,7 @@ $theme: (
         "11": #a193f2,
         "12": #931847,
         "13": #944c0c,
-        "14": #0c5689,
+        "14": #0c3f89,
         "15": #6c2277,
         "16": #006b40,
         "17": #962c0b,

package/dist/types/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { TypeDrawerCloseButtonProps, TypeDrawerHeaderProps, TypeDrawerProps, TypeDrawerContentProps } from './DrawerTypes';
 declare const DrawerContainer: {
-    ({ children, closeButtonLabel, direction, disableCloseOnClickOutside, id, isOpen, offset, onClose, zIndex, closeTargets, ...rest }: TypeDrawerProps): JSX.Element;
+    ({ children, closeButtonLabel, direction, disableCloseOnClickOutside, id, isOpen, offset, onClose, zIndex, closeTargets, width, ...rest }: TypeDrawerProps): JSX.Element;
     Header: {
         ({ title, id, children, render, ...rest }: TypeDrawerHeaderProps): React.ReactElement<any, any> | null;
         displayName: string;

package/dist/types/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AA+KvB,QAAA,MAAM,eAAe;wIAYlB,eAAe;;mDA7If,qBAAqB;;;;gCAmCoB,sBAAsB;;;;gBAjEhC,0BAA0B;;;CAiN3D,CAAC;AAUF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,0BAA0B,EAC1B,qBAAqB,EACrB,eAAe,EAEf,sBAAsB,EACvB,MAAM,eAAe,CAAC;AAsLvB,QAAA,MAAM,eAAe;+IAalB,eAAe;;mDAvJf,qBAAqB;;;;gCAmCoB,sBAAsB;;;;gBAjEhC,0BAA0B;;;CA4N3D,CAAC;AAUF,eAAe,eAAe,CAAC"}

package/dist/types/Drawer/DrawerTypes.d.ts

@@ -37,6 +37,8 @@ export interface TypeDrawerProps extends TypeStyledComponentsCommonProps, TypeSy
     onClose: () => void;
     zIndex?: number;
     closeTargets?: Array<Element>;
+    width?: number;
+    focusLockExemptCheck?: (element: HTMLElement) => boolean;
 }
 export interface TypeDrawerContentProps extends TypeBoxProps {
     children?: React.ReactNode;

package/dist/types/Drawer/DrawerTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTypes.d.ts","sourceRoot":"","sources":["../../../src/Drawer/DrawerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAEhC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IAEpB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,0IAA0I;IAC1I,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iJAAiJ;IACjJ,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,QAAQ,CAAC;IAE5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,eACf,SAAQ,+BAA+B,EACrC,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iEAAiE;IACjE,gBAAgB,EAAE,MAAM,CAAC;IAEzB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE7B,2IAA2I;IAC3I,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"DrawerTypes.d.ts","sourceRoot":"","sources":["../../../src/Drawer/DrawerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AACtC,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAEhC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IAEpB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,0IAA0I;IAC1I,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iJAAiJ;IACjJ,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,QAAQ,CAAC;IAE5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,eACf,SAAQ,+BAA+B,EACrC,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iEAAiE;IACjE,gBAAgB,EAAE,MAAM,CAAC;IAEzB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE7B,2IAA2I;IAC3I,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;CAC1D;AAED,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/lib/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["title", "id", "children", "render"],
   _excluded2 = ["children"],
-  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets"],
-  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets"];
+  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets", "width", "focusLockExemptCheck"],
+  _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,8 +23,6 @@ import Text from "../Text";
 import Portal from "../Portal";
 import { SlideTransition } from "./SlideTransition";
 import Container, { Content } from "./styles";
-// If ever we needed to make drawer width configurable, move this to a default prop
-var DRAWER_WIDTH = 600;
 var AnimatedDrawer = animated(Container);
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
@@ -96,6 +94,8 @@ var Drawer = function Drawer(_ref3) {
     onClose = _ref3.onClose,
     zIndex = _ref3.zIndex,
     closeTargets = _ref3.closeTargets,
+    width = _ref3.width,
+    focusLockExemptCheck = _ref3.focusLockExemptCheck,
     rest = _objectWithoutProperties(_ref3, _excluded3);
   var drawerRef = useRef(null);
   useEffect(function () {
@@ -134,11 +134,14 @@ var Drawer = function Drawer(_ref3) {
   return /*#__PURE__*/React.createElement(FocusLock, {
     key: id,
     autoFocus: true,
-    returnFocus: true
+    returnFocus: true,
+    whiteList: focusLockExemptCheck ? function (e) {
+      return !focusLockExemptCheck(e);
+    } : undefined
   }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
     ref: drawerRef,
     style: style,
-    width: DRAWER_WIDTH,
+    width: width,
     offset: offset,
     direction: direction,
     "data-qa-drawer": id,
@@ -161,6 +164,8 @@ var DrawerContainer = function DrawerContainer(_ref4) {
     zIndex = _ref4$zIndex === void 0 ? 7 : _ref4$zIndex,
     _ref4$closeTargets = _ref4.closeTargets,
     closeTargets = _ref4$closeTargets === void 0 ? [] : _ref4$closeTargets,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? 600 : _ref4$width,
     rest = _objectWithoutProperties(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(Portal, {
     id: id
@@ -170,7 +175,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       closeButtonLabel: closeButtonLabel
     }
   }, /*#__PURE__*/React.createElement(SlideTransition, {
-    width: DRAWER_WIDTH + offset,
+    width: width + offset,
     direction: direction,
     isVisible: isOpen
   }, function (_ref5) {
@@ -189,6 +194,7 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       onClose: onClose,
       zIndex: zIndex,
       closeTargets: closeTargets,
+      width: width,
       "data-qa-drawer": id || '',
       "data-qa-drawer-isopen": isOpen === true
     }, rest), children);

package/lib/LogoViewBoxes.js

@@ -73,12 +73,12 @@ module.exports = {
   "shopify": "0 0 140 159",
   "slack-dark": "0 0 140 140",
   "slack": "0 0 140 140",
-  "sproutsocial-dark": "0 0 140 174",
-  "sproutsocial-lockup-dark": "0 0 291 58",
-  "sproutsocial-lockup": "0 0 291 58",
+  "sproutsocial-dark": "0 0 16 18",
+  "sproutsocial-lockup-dark": "0 0 291 59",
+  "sproutsocial-lockup": "0 0 291 59",
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
-  "sproutsocial": "0 0 140 174",
+  "sproutsocial": "0 0 16 18",
   "tableau-dark": "0 0 18 18",
   "tableau-lockup-dark": "0 0 291 56",
   "tableau-lockup": "0 0 291 56",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "20.7.0",
+  "version": "20.9.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -94,7 +94,7 @@
     "@changesets/cli": "^2.12.0",
     "@khanacademy/flow-to-ts": "^0.5.2",
     "@sproutsocial/seeds-border": "^1.1.0",
-    "@sproutsocial/seeds-color": "^1.5.3",
+    "@sproutsocial/seeds-color": "^2.0.0",
     "@sproutsocial/seeds-depth": "^3.0.0",
     "@sproutsocial/seeds-icons": "*",
     "@sproutsocial/seeds-motion": "^1.2.0",
@@ -105,6 +105,7 @@
     "@storybook/addon-a11y": "^7.0.0",
     "@storybook/addon-actions": "^7.0.0",
     "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-mdx-gfm": "^7.0.0",
     "@storybook/addon-storysource": "^7.0.0",
     "@storybook/addon-viewport": "^7.0.0",
     "@storybook/addons": "^7.0.0",