@sproutsocial/racine 11.4.2-input-beta.0 → 11.6.1-theme-type.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 11.6.0
+
+### Minor Changes
+
+- 43adc28: Added a sprout theme to racine
+
+## 11.5.0
+
+### Minor Changes
+
+- fa8a45d: Dependency upgrades: upgraded severe vulnerabilities as well as storybook and jest suite fixes. Upgraded styled components from beta to stable v5.2.3.
+
 ## 11.4.1
 
 ### Patch Changes

package/__flow__/Button/index.js

@@ -84,4 +84,6 @@ const Button = ({
   );
 };
 
+Button.displayName = "Button";
+
 export default Button;

package/__flow__/Button/index.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -8,155 +7,140 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = () => (
-  <Button
-    appearance={text("appearance", "default")}
-    onClick={() => alert("Testing...")}
-  >
+export const defaultStory = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Default
   </Button>
 );
 
+defaultStory.args = { appearance: "default" };
+
 defaultStory.story = {
   name: "Default",
 };
 
-export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
+export const primary = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
 );
 
+primary.args = { appearance: "primary" };
+
 primary.story = {
   name: "Primary",
 };
 
-export const secondary = () => (
-  <Button appearance={text("appearance", "secondary")}>Secondary Button</Button>
-);
+export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+
+secondary.args = { appearance: "secondary" };
 
 secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = () => (
-  <Button appearance={text("appearance", "destructive")}>
-    Destructive Button
-  </Button>
+export const destructive = (args) => (
+  <Button {...args}>Destructive Button</Button>
 );
 
+destructive.args = { appearance: "destructive" };
 destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = () => (
-  <Button appearance={text("appearance", "placeholder")}>
-    Placeholder Button
-  </Button>
+export const placeholder = (args) => (
+  <Button {...args}>Placeholder Button</Button>
 );
 
+placeholder.args = { appearance: "placeholder" };
 placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    size={text("size", "large")}
-  >
-    Large Button
-  </Button>
-);
+export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = () => (
+export const pillButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")}>
+    <Button {...args}>
       <Icon name="reply" mr={350} />
       Pill Button
     </Button>
   </Box>
 );
-
+pillButton.args = { appearance: "pill" };
 pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = () => (
+export const pillIconOnlyButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
+    <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>
   </Box>
 );
 
+pillIconOnlyButton.args = { appearance: "pill" };
 pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = () => (
-  <Button
-    appearance={text("appearance", "secondary")}
-    active={boolean("active", true)}
-  >
-    Active Button
-  </Button>
-);
+export const activeButton = (args) => <Button {...args}>Active Button</Button>;
 
+activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = () => (
-  <Button
-    href={text("href", "http://sproutsocial.style")}
-    external={boolean("external", true)}
-    appearance={text("appearance", "primary")}
-  >
-    Button using anchor element
-  </Button>
+export const buttonAsALink = (args) => (
+  <Button {...args}>Button using anchor element</Button>
 );
-
+buttonAsALink.args = {
+  appearance: "primary",
+  external: true,
+  href: "http://sproutsocial.style",
+};
 buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    disabled={text("disabled", "true")}
-  >
-    This Button is disabled
-  </Button>
+export const disabledButton = (args) => (
+  <Button {...args}>This Button is disabled</Button>
 );
-
+disabledButton.args = {
+  appearance: "primary",
+  disabled: true,
+};
 disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = () => (
-  <Button appearance={text("appearance", "primary")} width={number("width", 1)}>
-    Full-Width Button
-  </Button>
+export const fullWidthButton = (args) => (
+  <Button {...args}>Full-Width Button</Button>
 );
-
+fullWidthButton.args = {
+  appearance: "primary",
+  width: 1,
+};
 fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = () => (
-  <Button appearance={text("appearance", "secondary")}>
+export const withIcon = (args) => (
+  <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button
   </Button>
 );
 
+withIcon.args = {
+  appearance: "secondary",
+};
 withIcon.story = {
   name: "With icon",
 };

package/__flow__/Button/styles.js

@@ -99,7 +99,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${LAYOUT}
   ${COMMON}
 `;
-
+Container.displayName = "Button-Container";
 export default Container;
 
 //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/EmptyState/index.test.js

@@ -105,7 +105,7 @@ describe("EmptyState", () => {
       <EmptyState
         media={
           <Image
-            alt="No assets matching your
 search or filters"
+            alt="No assets matching your
  search or filters"
             src="https://cl.ly/db498c7682df/download/analytics.svg"
             m={0}
           />

package/__flow__/Input/index.js

@@ -74,10 +74,6 @@ type TypeProps = {
   appearance?: "primary" | "secondary",
 };
 
-type TypeState = {
-  hasValue: boolean,
-};
-
 // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
 // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
 type TypeInputContext = $Shape<{
@@ -158,16 +154,7 @@ const isClearButton = (elem: any) => {
   return false;
 };
 
-class Input extends React.Component<TypeProps, TypeState> {
-  constructor(props: TypeProps) {
-    super(props);
-    this.state = {
-      // tracking hasValue in state allows us to hide ClearButton when there is no value to clear
-      // for both controlled and uncontrolled inputs.
-      hasValue: !!props.value,
-    };
-  }
-
+class Input extends React.Component<TypeProps> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
@@ -190,10 +177,8 @@ class Input extends React.Component<TypeProps, TypeState> {
     this.props.onClear?.(e);
   };
 
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
+  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onChange?.(e, e.currentTarget.value);
-    this.updateState(e.currentTarget.value);
-  };
 
   handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
     this.props.onFocus?.(e);
@@ -207,15 +192,6 @@ class Input extends React.Component<TypeProps, TypeState> {
   handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onPaste?.(e, e.currentTarget.value);
 
-  updateState = (value: string) => {
-    const hasValue = value !== "";
-    const hadValue = this.state.hasValue;
-    // Only update state if the value has changed to avoid unnecessary renders.
-    if (hasValue !== hadValue) {
-      this.setState({ hasValue });
-    }
-  };
-
   render() {
     const {
       autoComplete,
@@ -283,7 +259,7 @@ class Input extends React.Component<TypeProps, TypeState> {
         <InputContext.Provider
           value={{
             handleClear: this.handleClear,
-            hasValue: this.state.hasValue,
+            hasValue: !!value,
             clearButtonLabel,
             onClear,
             size,

package/__flow__/Input/index.stories.js

@@ -188,20 +188,6 @@ largeSearchInput.story = {
   name: "Large Search Input",
 };
 
-export const uncontrolledSearchInput = () => (
-  <Input
-    type="search"
-    placeholder={text("placeholder", "Please enter a value...")}
-    onClear={() => window.alert("Cleared!")}
-    clearButtonLabel={text("clearButtonLabel", "Clear search")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
-);
-
-uncontrolledSearchInput.story = {
-  name: "Uncontrolled Search Input",
-};
-
 export const nonSearchClearButtonInput = () => {
   return (
     <Input

package/__flow__/Input/index.test.js

@@ -85,24 +85,6 @@ describe("Input", () => {
         expect(getByRole("button")).toBeTruthy();
       });
 
-      it("should render a clear button for an uncontrolled search Input only once it is typed in", () => {
-        const { getByRole, queryByRole } = render(
-          <Input
-            id="name"
-            name="name"
-            type="search"
-            onClear={jest.fn()}
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(queryByRole("button")).toBeFalsy();
-        const input = getByRole("searchbox");
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.keyboard("some text");
-        expect(getByRole("button")).toBeTruthy();
-      });
-
       it("should not render a clear button for search Inputs if there is no text", () => {
         const { queryByRole } = render(
           <Input

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -14,12 +14,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c3,
+_:-ms-fullscreen .c2,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c3 {
+.pdf-page .c2 {
   width: 16px;
 }
 

package/__flow__/ThemeProvider/index.js

@@ -3,10 +3,13 @@ import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme from "../themes/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import type { TypeTheme, TypeSproutTheme } from "../types/theme.flow";
+
+// We can append additional themes types here
+type TypeAllThemes = TypeTheme | TypeSproutTheme;
 
 type TypeProps = $ReadOnly<{|
-  theme?: TypeTheme,
+  theme?: TypeAllThemes,
   children: React.Node,
 |}>;
 

package/__flow__/index.js

@@ -1,11 +1,15 @@
 // @flow
 export type { EnumIconNames } from "./EnumIconNames";
-export type { TypeTheme } from "./types/theme.flow";
+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 { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/setupTests.js

@@ -1,5 +1,5 @@
 import "mutationobserver-shim";
-import "jest-dom/extend-expect";
+import "@testing-library/jest-dom/extend-expect";
 import "jest-axe/extend-expect";
 import "babel-polyfill";
 import "jest-styled-components";

package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap

@@ -1,19 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`layout system props display 1`] = `
-.c0 {
-  display: -webkit-string;
-  display: string;
-}
-
-<div>
-  <div
-    class="c0"
-    display="string"
-  />
-</div>
-`;
-
 exports[`layout system props height 1`] = `
 .c0 {
   height: string;

package/__flow__/systemProps/tests/layout.test.js

@@ -10,15 +10,6 @@ describe("layout system props", () => {
     ${layoutSystemProps}
   `;
 
-  test("display", () => {
-    const { container } = render(
-      <>
-        <Component display="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
   test("height", () => {
     const { container } = render(
       <>

package/__flow__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,17 @@
+// @flow strict-local
+import type {
+  TypeNonColorThemeValues,
+  TypeTheme,
+} from "../../../../types/theme.flow.js";
+
+export function getNonColorThemeValues(
+  theme: TypeTheme
+): TypeNonColorThemeValues {
+  const { colors, ...otherThemeValues } = theme;
+  return {
+    ...otherThemeValues,
+    /**
+     * You can add your own theme values or overrides here.
+     */
+  };
+}

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

@@ -0,0 +1,36 @@
+// @flow strict-local
+import type { TypeColors } from "../../../../types/theme.colors.flow.js";
+
+export function getDarkThemeColors(themeColors: TypeColors) {
+  return {
+    ...themeColors,
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100],
+        },
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900],
+        },
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700],
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,23 @@
+// @flow strict-local
+import clone from "just-clone";
+import baseDarkTheme from "../../../dark/theme";
+import { getDarkThemeColors } from "./getDarkThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+// clone base theme. (we don't want to mutate the base theme)
+const themeClone = clone(baseDarkTheme);
+
+// get non color theme values
+const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+// get sprout specific dark theme colors
+const darkThemeColors = getDarkThemeColors(themeClone.colors);
+
+const darkTheme: TypeSproutTheme = {
+  ...themeClone,
+  ...nonColorThemeValues,
+  ...darkThemeColors,
+};
+
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

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

@@ -0,0 +1,36 @@
+// @flow strict-local
+import type { TypeColors } from "../../../../types/theme.colors.flow.js";
+
+export function getLightThemeColors(themeColors: TypeColors) {
+  return {
+    ...themeColors,
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000],
+        },
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800],
+        },
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700],
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,23 @@
+// @flow strict-local
+import clone from "just-clone";
+import baseLightTheme from "../../../light/theme";
+import { getLightThemeColors } from "./getLightThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+// clone base theme. (we don't want to mutate the base theme)
+const themeClone = clone(baseLightTheme);
+
+// get non color theme values
+const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+// get sprout specific light theme colors
+const lightThemeColors = getLightThemeColors(themeClone.colors);
+
+const lightTheme: TypeSproutTheme = {
+  ...themeClone,
+  ...nonColorThemeValues,
+  ...lightThemeColors,
+};
+
+export default lightTheme;

package/__flow__/types/theme.flow.js

@@ -14,6 +14,7 @@ import {
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
 
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +29,7 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -41,3 +43,54 @@ export type TypeTheme = {
   easing: TypeEasing,
   duration: TypeDuration,
 };
+
+export type TypeNonColorThemeValues = {
+  mode: TypeThemeMode,
+  breakpoints: TypeBreakpoint,
+  typography: TypeTypography,
+  fontWeights: TypeFontWeight,
+  fontFamily: TypeFontFamily,
+  space: TypeSpace,
+  radii: TypeRadii,
+  borders: TypeBorder,
+  borderWidths: TypeBorderWidth,
+  shadows: TypeShadow,
+  easing: TypeEasing,
+  duration: TypeDuration,
+};
+
+// Extended themes
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    ...$Exact<TypeColor>,
+    navigation: {|
+      main: {|
+        background: {|
+          base: string,
+          gradient: string,
+        |},
+      |},
+      secondary: {|
+        background: {|
+          base: string,
+        |},
+      |},
+      text: {|
+        base: string,
+        hover: string,
+      |},
+      icon: {|
+        base: string,
+        hover: string,
+      |},
+      listItem: {|
+        background: {|
+          base: string,
+          hover: string,
+          active: string,
+        |},
+      |},
+    |},
+  |},
+};