@sproutsocial/racine 11.2.5-sproutTheme-beta.1 → 11.2.5-sproutTheme-beta.4

package/__flow__/Input/index.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import "jest-styled-components";
-import { render, fireEvent } from "../utils/react-testing-library";
+import { render, fireEvent, userEvent } from "../utils/react-testing-library";
 import Input from "./";
 import Text from "../Text";
 
@@ -69,6 +69,235 @@ describe("Input", () => {
     expect(getByText("After")).toBeTruthy();
   });
 
+  describe("Input.ClearButton", () => {
+    describe("Input type=search", () => {
+      it("should render a clear button for search Inputs", () => {
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={jest.fn()}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(getByRole("button")).toBeTruthy();
+      });
+
+      it("should not render a clear button for search Inputs if there is no text", () => {
+        const { queryByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value=""
+            type="search"
+            onClear={jest.fn()}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(queryByRole("button")).toBeFalsy();
+      });
+
+      it("should not override an elemAfter prop if passed", () => {
+        const { getByText, queryByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={jest.fn()}
+            elemAfter={<Text>After</Text>}
+          />
+        );
+        expect(getByText("After")).toBeTruthy();
+        expect(queryByTitle("Clear")).not.toBeInTheDocument();
+      });
+
+      it("should use the fallback title if clearButtonLabel is not provided", () => {
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={jest.fn()}
+          />
+        );
+        expect(getByTitle("Clear")).toBeTruthy();
+      });
+
+      it("should call onClear when clicked", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        fireEvent.click(getByRole("button"));
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Space key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("searchbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{space}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="search"
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("searchbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{enter}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+    });
+
+    describe("Manual Input.ClearButton usage", () => {
+      it("should render a clear button when passed with elemAfter", () => {
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={jest.fn()}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(getByRole("button")).toBeTruthy();
+      });
+
+      it("should not render a clear button if there is no text", () => {
+        const { queryByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value=""
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={jest.fn()}
+            clearButtonLabel="Clear search"
+          />
+        );
+        expect(queryByRole("button")).toBeFalsy();
+      });
+
+      it("should use the fallback title if clearButtonLabel is not provided", () => {
+        const { getByTitle } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={jest.fn()}
+          />
+        );
+        expect(getByTitle("Clear")).toBeTruthy();
+      });
+
+      it("should call onClear when Input.ClearButton is clicked", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        fireEvent.click(getByRole("button"));
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Space key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("textbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{space}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+
+      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+        const mockOnClear = jest.fn();
+        const { getByRole } = render(
+          <Input
+            id="name"
+            name="name"
+            value="mic"
+            type="text"
+            elemAfter={<Input.ClearButton />}
+            onClear={mockOnClear}
+            clearButtonLabel="Clear search"
+          />
+        );
+        const input = getByRole("textbox");
+        const button = getByRole("button");
+        userEvent.tab();
+        expect(input).toHaveFocus();
+        userEvent.tab();
+        expect(button).toHaveFocus();
+        userEvent.keyboard("{enter}");
+        expect(mockOnClear).toHaveBeenCalled();
+      });
+    });
+  });
+
   describe("autoComplete prop", () => {
     it("should not have autoComplete attribute when passed prop is not passed", () => {
       const { getByDataQaLabel } = render(<Input id="name" name="name" />);

package/__flow__/Input/styles.js

@@ -140,7 +140,7 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.after &&
     css`
-      right: ${props.theme.space[350]};
+      right: ${props.isClearButton ? 0 : props.theme.space[350]};
     `};
 `;
 

package/__flow__/ThemeProvider/index.js

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

package/__flow__/TokenInput/index.js

@@ -341,7 +341,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
           aria-invalid={!!isInvalid}
           aria-label={ariaLabel}
           autoFocus={autoFocus}
-          autocomplete={autocomplete}
+          autoComplete={autocomplete}
           disabled={disabled}
           id={id}
           name={name}

package/__flow__/index.js

@@ -10,6 +10,7 @@ export {
   sproutLightTheme,
   sproutDarkTheme,
 } from "./themes/extendedThemes/sproutTheme";
+export type { TypeSproutTheme } 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__/themes/dark/theme.js

@@ -174,6 +174,9 @@ const colors = {
     body: COLORS.COLOR_NEUTRAL_100,
     inverse: COLORS.COLOR_NEUTRAL_900,
     error: COLORS.COLOR_RED_400,
+    background: {
+      highlight: COLORS.COLOR_YELLOW_900,
+    },
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_100,

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,57 @@
+// @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],
+        },
+      },
+    },
+    container: {
+      ...themeColors.container,
+      background: {
+        ...themeColors.container.background,
+        // FIX: These need to be changed to have dark mode colors
+        // For now we've copied the light mode values here as well.
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+    icon: {
+      ...themeColors.icon,
+      // FIX: These need to be changed to have dark mode colors
+      // For now we've copied the light mode values here as well.
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+  };
+}

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

@@ -1,43 +1,25 @@
 // @flow strict-local
 import clone from "just-clone";
-import type { TypeTheme } from "../../../../types/theme.flow.js";
+import baseDarkTheme from "../../../dark/theme";
+import { getDarkThemeColors } from "./getDarkThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeSproutTheme } from "../sproutThemeType.flow";
 
-const darkTheme = (theme: TypeTheme) => {
-  const sproutDarkTheme = clone(theme);
+const darkTheme = (): TypeSproutTheme => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseDarkTheme);
 
-  sproutDarkTheme.colors = {
-    ...sproutDarkTheme.colors,
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[1000],
-          gradient: theme.colors.neutral[1100],
-        },
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[900],
-        },
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      item: {
-        background: {
-          base: theme.colors.neutral[1000],
-          hover: theme.colors.neutral[1100],
-          active: theme.colors.neutral[700],
-        },
-      },
-    },
-  };
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific dark theme colors
+  const darkThemeColors = getDarkThemeColors(themeClone.colors);
 
-  return sproutDarkTheme;
+  return {
+    ...themeClone,
+    ...nonColorThemeValues,
+    ...darkThemeColors,
+  };
 };
 
 export default darkTheme;

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

@@ -1,2 +1,4 @@
+// @flow
 export { default as sproutLightTheme } from "./light/theme";
 export { default as sproutDarkTheme } from "./dark/theme";
+export type { TypeSproutTheme } from "./sproutThemeType.flow";

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

@@ -0,0 +1,53 @@
+// @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],
+        },
+      },
+    },
+    container: {
+      ...themeColors.container,
+      background: {
+        ...themeColors.container.background,
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+    icon: {
+      ...themeColors.icon,
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+  };
+}

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

@@ -1,53 +1,25 @@
 // @flow strict-local
 import clone from "just-clone";
-import type { TypeTheme } from "../../../../types/theme.flow.js";
+import baseLightTheme from "../../../light/theme";
+import { getLightThemeColors } from "./getLightThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeSproutTheme } from "../sproutThemeType.flow";
 
-const lightTheme = (theme: TypeTheme) => {
-  const sproutLightTheme = clone(theme);
-  // copy theme that's passed in
-  // get all non color theme values
-  // get light theme changes
+const lightTheme = (): TypeSproutTheme => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseLightTheme);
 
-  sproutLightTheme.colors = {
-    ...sproutLightTheme.colors,
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[900],
-          overflowGradient: theme.colors.neutral[1000],
-        },
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[800],
-        },
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      listItem: {
-        background: {
-          base: theme.colors.neutral[800],
-          hover: theme.colors.neutral[1000],
-          selected: theme.colors.neutral[700],
-        },
-      },
-    },
-    icon: {
-      sentiment: {
-        positive_sentiment: theme.colors.blue[500],
-        negative_sentiment: theme.colors.red[500],
-        neutral_sentiment: theme.colors.neutral[300],
-      },
-    },
-  };
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific light theme colors
+  const lightThemeColors = getLightThemeColors(themeClone.colors);
 
-  return sproutLightTheme;
+  return {
+    ...themeClone,
+    ...nonColorThemeValues,
+    ...lightThemeColors,
+  };
 };
 
 export default lightTheme;

package/__flow__/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js

@@ -0,0 +1,36 @@
+// @flow strict-local
+import type { TypeTheme } from "../../../types/theme.flow";
+
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    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,
+        |},
+      |},
+    |},
+  |},
+};

package/__flow__/themes/light/theme.js

@@ -171,6 +171,9 @@ const colors = {
     body: COLORS.COLOR_NEUTRAL_800,
     inverse: COLORS.COLOR_NEUTRAL_0,
     error: COLORS.COLOR_RED_800,
+    background: {
+      highlight: COLORS.COLOR_YELLOW_200,
+    },
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_800,

package/__flow__/types/theme.colors.flow.js

@@ -158,6 +158,9 @@ type TypeTextColors = {|
     body: string,
     inverse: string,
     error: string,
+    background: {
+      highlight: string,
+    },
   },
 |};
 

package/__flow__/types/theme.flow.js

@@ -43,3 +43,18 @@ 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,
+};