@sproutsocial/racine 11.9.0-typescript.0 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 12.0.0
+
+### Major Changes
+
+- 54639f5: Moved `theme.util.interact()` to a hook called `useInteractiveColor()`
+
+  - `theme.util.interact()` will no longer be available on the theme object and is moved to a hook called `useInteractiveColor()`
+  - To import the hook, use `import { useInteractiveColor } from '@sproutsocial/racine'`
+  - `useInteractiveColor()` accepts a theme color option and returns a lighten or darken version of that color depending on the theme mode currently in use('light' or 'dark')
+  - `useInteractiveColor()` can only be utilized within a theme context.
+
+  example:
+
+  ```jsx
+  import { useInteractiveColor } from '@sproutsocial/racine'
+
+  ....
+   &:hover,
+    &:active {
+      color: ${({theme}) => useInteract(theme.colors.icon.base)};
+    }
+  ```
+
+## 11.9.0
+
+### Minor Changes
+
+- 6c3e703: Extend the sprout theme to add colors for trend arrows
+
+### Patch Changes
+
+- 1c10a77: Fix args
+
 ## 11.8.0
 
 ### Minor Changes

package/__flow__/Button/{index.tsx → index.js}

@@ -1,36 +1,37 @@
-import React from "react";
+// @flow
+import * as React from "react";
 import Container from "./styles";
 
-export interface ButtonType {
+export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
-  external?: boolean;
-  size?: "large" | "default";
+  external?: boolean,
+  size?: "large" | "default",
   /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance:
+  appearance?:
     | "primary"
     | "secondary"
     | "pill"
     | "destructive"
     | "default"
     | "unstyled"
-    | "placeholder";
+    | "placeholder",
   /** Set the button to display in its active state */
-  active?: boolean;
+  active?: boolean,
   /** Disables user action and applies a disabled style on the button */
-  disabled?: boolean;
-  children: React.ReactNode;
+  disabled?: boolean,
+  children: React.Node,
   /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
-  href?: string;
+  href?: string,
   /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<"button">;
+  innerRef?: React.Ref<"button">,
   /** Action to perform when the button is clicked */
-  onClick?: () => void;
-  title?: string;
-  qa?: Object;
-  as?: any;
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
+  title?: string,
+  qa?: Object,
+  as?: any,
   /** Label used to describe the button if the button does not have text within it */
-  ariaLabel?: string;
-}
+  ariaLabel?: string,
+};
 
 const Button = ({
   href,
@@ -46,9 +47,8 @@ const Button = ({
   qa = {},
   as,
   ariaLabel,
-
   ...rest
-}: ButtonType) => {
+}: TypeProps) => {
   if (!href && external) {
     console.warn(
       "Warning: external prop cannot be set without a href declaration"
@@ -60,7 +60,6 @@ const Button = ({
 
   return (
     <Container
-      className="container"
       title={title}
       active={active}
       href={href}
@@ -85,4 +84,6 @@ const Button = ({
   );
 };
 
+Button.displayName = "Button";
+
 export default Button;

package/__flow__/Button/{styles.ts → styles.js}

@@ -6,7 +6,7 @@ import Icon from "../Icon/styles";
 
 import type { TypeTheme } from "../types/theme.flow";
 
-const Container = styled.button`
+const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   display: inline-block;
   box-sizing: border-box;
   text-align: center;

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__/Input/index.js

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import type { StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -90,8 +91,7 @@ const InputContext = React.createContext<TypeInputContext>({});
 const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
   &:hover,
   &:active {
-    color: ${(props) =>
-      props.theme.utils.interact(props.theme.colors.icon.base)};
+    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};
   }
 `;
 

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__/Token/styles.js

@@ -2,6 +2,7 @@
 import styled, { css, type StyledComponent } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 import type { TypeTheme } from "../types/theme.flow";
 
@@ -29,30 +30,30 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${focusRing}
   }
 
-  ${({ theme, palette }) =>
-    palette === "blue" &&
+  ${({ closeable, theme }) =>
+    closeable &&
     css`
-      color: ${theme.colors.text.body};
-      background: ${theme.colors.container.background.decorative.blue};
-      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      cursor: pointer;
       &:hover,
       &:active {
-        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+          ${useInteractiveColor(theme.colors.container.border.base)};
       }
     `}
 
-  ${({ closeable, theme }) =>
-    closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
       &:hover,
       &:active {
+        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.base)};
+          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};
       }
     `}
 
@@ -77,7 +78,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       &:hover {
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.error)};
+          ${useInteractiveColor(theme.colors.container.border.error)};
       }
     `}
 

package/__flow__/index.js

@@ -4,6 +4,7 @@ export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export {

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/dark/theme.js

@@ -15,8 +15,6 @@ import {
 } from "./decorative-palettes";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 const MODE = "dark";
 
 export const shadows = {
@@ -235,9 +233,6 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
-  utils: {
-    interact: interact(MODE),
-  },
   colors,
   shadows,
   mode: MODE,

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

@@ -42,12 +42,21 @@ export const datePicker = {
   },
 };
 
+export const analytics = {
+  trend: {
+    positive: baseDarkTheme.colors.teal[500],
+    neutral: baseDarkTheme.colors.neutral[100],
+    negative: baseDarkTheme.colors.neutral[100],
+  },
+};
+
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
     ...baseDarkTheme.colors,
     navigation,
     datePicker,
+    analytics,
   },
 };
 

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

@@ -42,12 +42,21 @@ export const datePicker = {
   },
 };
 
+export const analytics = {
+  trend: {
+    positive: baseLightTheme.colors.teal[800],
+    neutral: baseLightTheme.colors.neutral[800],
+    negative: baseLightTheme.colors.neutral[800],
+  },
+};
+
 const lightTheme: TypeSproutTheme = {
   ...baseLightTheme,
   colors: {
     ...baseLightTheme.colors,
     navigation,
     datePicker,
+    analytics,
   },
 };
 

package/__flow__/themes/light/theme.js

@@ -20,8 +20,6 @@ import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
 const MODE = "light";
@@ -350,9 +348,6 @@ export const duration = {
 };
 
 const theme = {
-  utils: {
-    interact: interact(MODE),
-  },
   breakpoints,
   colors,
   typography: {

package/__flow__/types/theme.flow.js

@@ -16,9 +16,9 @@ import type { TypeFontFamilyString } from "../themes/light/theme";
 import {
   datePicker,
   navigation,
+  analytics,
 } from "../themes/extendedThemes/sproutTheme/light/theme";
 
-export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -35,7 +35,6 @@ export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
   mode: TypeThemeMode,
-  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -57,5 +56,6 @@ export type TypeSproutTheme = {
     ...$Exact<TypeColor>,
     navigation: typeof navigation,
     datePicker: typeof datePicker,
+    analytics: typeof analytics,
   |},
 };

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/__flow__/utils/useInteractiveColor.js

@@ -0,0 +1,32 @@
+//@flow strict-local
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+import type { TypeColors } from "../types/theme.colors.flow.js";
+
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+const useInteractiveColor = (themeColor: TypeColors): string => {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!useTheme()) {
+    throw new Error(
+      "useInteractiveColor() must be used within a Styled Components ThemeProvider"
+    );
+  }
+
+  // Get the current theme mode ie. 'light' or 'dark'
+  const themeMode = useTheme().mode;
+
+  // If the theme mode is dark, return a lightened version of the themeValue
+  if (themeMode === "dark") {
+    return lighten(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return darken(0.2, themeColor);
+  }
+};
+
+export { useInteractiveColor };