@sproutsocial/racine 12.2.0-partner-logos.2 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 12.3.0
+
+### Minor Changes
+
+- 80c370a: add color tokens in the extended theme for reporting chart overlays
+
+### Patch Changes
+
+- ecf1eb8: adds bugfix for sideEffect in package.json that was causing errors in SproutSocial
+
+## 12.2.0
+
+### Minor Changes
+
+- 0ceebbc: Adds new component that dynamically handles partner logos across modes
+- 032436a: fix: remove racine as a dependancy
+
 ## 12.1.0
 
 ### Minor Changes

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-  (props) => css`
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-    @supports (-webkit-appearance: none) {
-      &:before {
-        /* stylelint-disable */
-        content: url("data:image/svg+xml;utf8,${getIcon(
-          props.indeterminate ? "indeterminate" : "check",
-
-          props.checked
-            ? props.theme.colors.form.background.base
-            : props.theme.colors.form.border.base
-        )}");
-        opacity: ${props.checked ? 1 : 0};
-        position: absolute;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        text-align: center;
-        transform: translateY(1px);
-        line-height: 1;
-        margin: auto;
-        pointer-events: none;
-        transition: ${props.theme.duration.fast}
-          ${props.theme.easing.ease_inout};
-      }
-
-      &:hover:before {
-        opacity: ${props.disabled && !props.checked ? 0 : 1};
-      }
-
-      ${props.disabled &&
-      css`
-        opacity: 0.4;
-      `}
-
-      input[type='checkbox'] {
-        box-sizing: border-box;
-        appearance: none;
-        margin: 0;
-        padding: 0;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        border: 1px solid ${props.theme.colors.form.border.base};
-        border-radius: 4px;
-        background-color: ${props.theme.colors.form.background.base};
-        transition: all ${props.theme.duration.fast}
-          ${props.theme.easing.ease_in};
-        cursor: ${props.disabled ? "not-allowed" : "pointer"};
-        flex-shrink: 0;
-
-        &:not(:checked) {
-          ${!props.indeterminate &&
-          css`
-            border-color: ${props.theme.colors
-              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-            background-color: ${props.theme.colors.form.background.base};
-          `}
+    (props) => css`
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+      @supports (-webkit-appearance: none) {
+        &:before {
+          /* stylelint-disable */
+          content: url("data:image/svg+xml;utf8,${getIcon(
+            props.indeterminate ? "indeterminate" : "check",
+
+            props.checked
+              ? props.theme.colors.form.background.base
+              : props.theme.colors.form.border.base
+          )}");
+          opacity: ${props.checked ? 1 : 0};
+          position: absolute;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          text-align: center;
+          transform: translateY(1px);
+          line-height: 1;
+          margin: auto;
+          pointer-events: none;
+          transition: ${props.theme.duration.fast}
+            ${props.theme.easing.ease_inout};
         }
 
-        &:checked {
-          border-color: ${props.theme.colors.form.border.selected};
-          background-color: ${props.theme.colors.form.background.selected};
+        &:hover:before {
+          opacity: ${props.disabled && !props.checked ? 0 : 1};
         }
 
-        ${props.indeterminate &&
-        props.checked &&
+        ${props.disabled &&
         css`
-          border-color: ${props.theme.colors.form.border.selected} !important;
-          background-color: ${props.theme.colors.form.background
-            .selected} !important;
+          opacity: 0.4;
         `}
 
-        &:focus {
-          ${focusRing}
+        input[type='checkbox'] {
+          box-sizing: border-box;
+          appearance: none;
+          margin: 0;
+          padding: 0;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          border: 1px solid ${props.theme.colors.form.border.base};
+          border-radius: 4px;
+          background-color: ${props.theme.colors.form.background.base};
+          transition: all ${props.theme.duration.fast}
+            ${props.theme.easing.ease_in};
+          cursor: ${props.disabled ? "not-allowed" : "pointer"};
+          flex-shrink: 0;
+
+          &:not(:checked) {
+            ${!props.indeterminate &&
+            css`
+              border-color: ${props.theme.colors
+                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+              background-color: ${props.theme.colors.form.background.base};
+            `}
+          }
+
+          &:checked {
+            border-color: ${props.theme.colors.form.border.selected};
+            background-color: ${props.theme.colors.form.background.selected};
+          }
+
+          ${props.indeterminate &&
+          props.checked &&
+          css`
+            border-color: ${props.theme.colors.form.border.selected} !important;
+            background-color: ${props.theme.colors.form.background
+              .selected} !important;
+          `}
+
+          &:focus {
+            ${focusRing}
+          }
         }
       }
-    }
 
-    ${COMMON}
-  `
-);
+      ${COMMON}
+    `
+  );
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,9 +73,8 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
-    CollapsibleContext
-  );
+  const { isOpen, id, offset, collapsedHeight, openHeight } =
+    useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/Image/index.js

@@ -80,16 +80,8 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const {
-      alt,
-      title,
-      onClick,
-      onError,
-      onLoad,
-      src,
-      qa,
-      ...rest
-    } = this.props;
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
+      this.props;
 
     return (
       <ImageContainer

package/__flow__/SegmentedControl/index.js

@@ -17,9 +17,8 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
-  null
-);
+const SegmentedControlContext =
+  React.createContext<?TypeSegmentedControlContext>(null);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/TableCell/index.js

@@ -22,15 +22,8 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const {
-      id,
-      content,
-      colSpan,
-      width,
-      align,
-      children,
-      ...rest
-    } = this.props;
+    const { id, content, colSpan, width, align, children, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,15 +32,8 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const {
-      icon,
-      isOpen,
-      openString,
-      closeString,
-      qa,
-      className,
-      ...rest
-    } = this.props;
+    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/index.js

@@ -72,3 +72,4 @@ export { default as Listbox, ListboxButton } from "./Listbox";
 export { default as OverflowList } from "./OverflowList";
 export { SingleDatePicker, DateRangePicker } from "./DatePicker";
 export { VisuallyHidden } from "./VisuallyHidden";
+export { default as PartnerLogo } from "./PartnerLogo";

package/__flow__/systemProps/color.js

@@ -14,7 +14,8 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp =
+  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,4 +1,5 @@
 // @flow strict-local
+import { transparentize } from "polished";
 import baseDarkTheme from "../../../dark/theme";
 import type { TypeSproutTheme } from "../../../../types/theme.flow";
 
@@ -48,6 +49,11 @@ export const analytics = {
     neutral: baseDarkTheme.colors.neutral[100],
     negative: baseDarkTheme.colors.neutral[100],
   },
+  overlay: {
+    background: {
+      base: transparentize(0.2, baseDarkTheme.colors.neutral[900]),
+    },
+  },
 };
 
 export const growth = {

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,4 +1,5 @@
 // @flow strict-local
+import { transparentize } from "polished";
 import baseLightTheme from "../../../light/theme";
 import type { TypeSproutTheme } from "../../../../types/theme.flow";
 
@@ -48,6 +49,11 @@ export const analytics = {
     neutral: baseLightTheme.colors.neutral[800],
     negative: baseLightTheme.colors.neutral[800],
   },
+  overlay: {
+    background: {
+      base: transparentize(0.2, baseLightTheme.colors.neutral[0]),
+    },
+  },
 };
 
 export const growth = {

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,21 +19,13 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      3,
+      0, 1, 2, 3, 3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      4,
+      0, 1, 2, 3, 4,
     ]);
   });
 });

package/commonjs/index.js

@@ -62,6 +62,7 @@ var _exportNames = {
   Menu: true,
   Listbox: true,
   OverflowList: true,
+  PartnerLogo: true,
   sproutLightTheme: true,
   sproutDarkTheme: true,
   toast: true,
@@ -73,7 +74,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
+exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.PartnerLogo = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -334,6 +335,10 @@ var _VisuallyHidden = require("./VisuallyHidden");
 
 exports.VisuallyHidden = _VisuallyHidden.VisuallyHidden;
 
+var _PartnerLogo = _interopRequireDefault(require("./PartnerLogo"));
+
+exports.PartnerLogo = _PartnerLogo.default;
+
 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; }

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.navigation = exports.growth = exports.default = exports.datePicker = exports.analytics = void 0;
 
+var _polished = require("polished");
+
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,6 +56,11 @@ var analytics = {
     positive: _theme.default.colors.teal[500],
     neutral: _theme.default.colors.neutral[100],
     negative: _theme.default.colors.neutral[100]
+  },
+  overlay: {
+    background: {
+      base: (0, _polished.transparentize)(0.2, _theme.default.colors.neutral[900])
+    }
   }
 };
 exports.analytics = analytics;

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.navigation = exports.growth = exports.default = exports.datePicker = exports.analytics = void 0;
 
+var _polished = require("polished");
+
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,6 +56,11 @@ var analytics = {
     positive: _theme.default.colors.teal[800],
     neutral: _theme.default.colors.neutral[800],
     negative: _theme.default.colors.neutral[800]
+  },
+  overlay: {
+    background: {
+      base: (0, _polished.transparentize)(0.2, _theme.default.colors.neutral[0])
+    }
   }
 };
 exports.analytics = analytics;

package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss

@@ -5,6 +5,11 @@ $theme: (
       positive: #08c4b2,
       neutral: #f3f4f4,
       negative: #f3f4f4
+    ),
+    overlay: (
+      background: (
+        base: rgba(39,51,51,0.8)
+      )
     )
   ),
   datePicker: (
@@ -488,6 +493,11 @@ $theme: (
           positive: #08c4b2,
           neutral: #f3f4f4,
           negative: #f3f4f4
+        ),
+        overlay: (
+          background: (
+            base: rgba(39,51,51,0.8)
+          )
         )
       ),
       growth: (

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -5,6 +5,11 @@ $theme: (
       positive: #067c7c,
       neutral: #364141,
       negative: #364141
+    ),
+    overlay: (
+      background: (
+        base: rgba(255,255,255,0.8)
+      )
     )
   ),
   datePicker: (
@@ -488,6 +493,11 @@ $theme: (
           positive: #067c7c,
           neutral: #364141,
           negative: #364141
+        ),
+        overlay: (
+          background: (
+            base: rgba(255,255,255,0.8)
+          )
         )
       ),
       growth: (

package/lib/index.js

@@ -60,4 +60,5 @@ export { MenuItemContainer } from "./Menu/styles";
 export { default as Listbox, ListboxButton } from "./Listbox";
 export { default as OverflowList } from "./OverflowList";
 export { SingleDatePicker, DateRangePicker } from "./DatePicker";
-export { VisuallyHidden } from "./VisuallyHidden";
+export { VisuallyHidden } from "./VisuallyHidden";
+export { default as PartnerLogo } from "./PartnerLogo";

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,5 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import { transparentize } from "polished";
 import baseDarkTheme from "../../../dark/theme";
 export var navigation = {
   main: {
@@ -44,6 +45,11 @@ export var analytics = {
     positive: baseDarkTheme.colors.teal[500],
     neutral: baseDarkTheme.colors.neutral[100],
     negative: baseDarkTheme.colors.neutral[100]
+  },
+  overlay: {
+    background: {
+      base: transparentize(0.2, baseDarkTheme.colors.neutral[900])
+    }
   }
 };
 export var growth = {

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,5 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import { transparentize } from "polished";
 import baseLightTheme from "../../../light/theme";
 export var navigation = {
   main: {
@@ -44,6 +45,11 @@ export var analytics = {
     positive: baseLightTheme.colors.teal[800],
     neutral: baseLightTheme.colors.neutral[800],
     negative: baseLightTheme.colors.neutral[800]
+  },
+  overlay: {
+    background: {
+      base: transparentize(0.2, baseLightTheme.colors.neutral[0])
+    }
   }
 };
 export var growth = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.2.0-partner-logos.2",
+  "version": "12.3.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -17,6 +17,7 @@
   },
   "main": "commonjs/index.js",
   "module": "lib/index.js",
+  "sideEffects": false,
   "scripts": {
     "install-deps": "yarn install",
     "prepublishOnly": "yarn run build",