@sproutsocial/racine 11.7.0 → 11.9.0

package/__flow__/Input/index.stories.js

@@ -141,60 +141,86 @@ leftAndRightIcons.story = {
   name: "Left and right icons",
 };
 
-export const searchInput = () => (
-  <Input
-    type="search"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "val")}
-    onClear={() => window.alert("Cleared!")}
-    clearButtonLabel={text("clearButtonLabel", "Clear search")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
-);
+export const SearchInput = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <Input
+      type="search"
+      placeholder={text("placeholder", "Please enter a value...")}
+      value={value}
+      onChange={(e, value) => setValue(value)}
+      clearButtonLabel={text("clearButtonLabel", "Clear search")}
+      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    />
+  );
+};
 
-searchInput.story = {
+SearchInput.story = {
   name: "Search Input",
 };
 
-export const smallSearchInput = () => (
-  <Input
-    type="search"
-    size="small"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "val")}
-    onClear={() => window.alert("Cleared!")}
-    clearButtonLabel={text("clearButtonLabel", "Clear search")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
-);
+export const SmallSearchInput = () => {
+  const [value, setValue] = React.useState("");
 
-smallSearchInput.story = {
+  return (
+    <Input
+      type="search"
+      size="small"
+      placeholder={text("placeholder", "Please enter a value...")}
+      value={value}
+      onChange={(e, value) => setValue(value)}
+      clearButtonLabel={text("clearButtonLabel", "Clear search")}
+      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    />
+  );
+};
+
+SmallSearchInput.story = {
   name: "Small Search Input",
 };
 
-export const largeSearchInput = () => (
+export const LargeSearchInput = () => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <Input
+      type="search"
+      size="large"
+      placeholder={text("placeholder", "Please enter a value...")}
+      value={value}
+      onChange={(e, value) => setValue(value)}
+      clearButtonLabel={text("clearButtonLabel", "Clear search")}
+      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    />
+  );
+};
+
+LargeSearchInput.story = {
+  name: "Large Search Input",
+};
+
+export const uncontrolledSearchInput = () => (
   <Input
     type="search"
-    size="large"
     placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "val")}
-    onClear={() => window.alert("Cleared!")}
     clearButtonLabel={text("clearButtonLabel", "Clear search")}
     ariaLabel={text("ariaLabel", "Descriptive label goes here")}
   />
 );
 
-largeSearchInput.story = {
-  name: "Large Search Input",
+uncontrolledSearchInput.story = {
+  name: "Uncontrolled Search Input",
 };
 
-export const nonSearchClearButtonInput = () => {
+export const NonSearchClearButtonInput = () => {
+  const [value, setValue] = React.useState("");
+
   return (
     <Input
       type="text"
       placeholder={text("placeholder", "Please enter a value...")}
-      value={text("value", "val")}
-      onClear={() => window.alert("Cleared!")}
+      value={value}
+      onChange={(e, value) => setValue(value)}
       ariaLabel={text("ariaLabel", "Descriptive label goes here")}
       clearButtonLabel={text("clearButtonLabel", "Clear text")}
       elemAfter={<Input.ClearButton />}
@@ -202,7 +228,7 @@ export const nonSearchClearButtonInput = () => {
   );
 };
 
-nonSearchClearButtonInput.story = {
+NonSearchClearButtonInput.story = {
   name: "Manual Input.ClearButton usage",
 };
 

package/__flow__/Input/index.test.js

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

package/__flow__/Input/styles.js

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

package/__flow__/Loader/index.stories.js

@@ -1,34 +1,38 @@
 import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
-
 import Loader from "./";
 
 export default {
   title: "Loader",
+  component: Loader,
 };
 
-export const defaultStory = () => (
-  <Loader text={text("text", "Content loading")} />
-);
+export const defaultStory = (args) => <Loader {...args} />;
+
+defaultStory.args = {
+  text: "Content loading",
+};
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const small = () => (
-  <Loader text={text("text", "Content loading")} size={text("size", "small")} />
-);
+export const small = (args) => <Loader {...args} />;
+
+small.args = {
+  text: "Content loading",
+  size: "small",
+};
 
 small.story = {
   name: "Small",
 };
 
-export const noDelay = () => (
-  <Loader
-    text={text("text", "Content loading")}
-    delay={boolean("delay", false)}
-  />
-);
+export const noDelay = (args) => <Loader {...args} />;
+
+noDelay.args = {
+  text: "Content loading",
+  delay: false,
+};
 
 noDelay.story = {
   name: "No delay",

package/__flow__/Numeral/index.stories.js

@@ -1,9 +1,22 @@
 import React from "react";
-import { number, select } from "@storybook/addon-knobs";
 import Numeral from "./index";
 
-const localeOptions = {
-  "": null,
+const localeOptions = [
+  "United States (en-US)",
+  "English (en)",
+  "Arabic (ar-EG)",
+  "Brazil (pt-BR)",
+  "India (en-IN)",
+  "French (fr-FR)",
+  "Spain (es-ES)",
+  "Mexico (es-MX)",
+  "Germany (de-DE)",
+  "German (de)",
+  "Japan (ja-JP)",
+  "Japanese (ja)",
+];
+
+const localeMapping = {
   "United States (en-US)": "en-US",
   "English (en)": "en",
   "Arabic (ar-EG)": "ar-EG",
@@ -18,8 +31,15 @@ const localeOptions = {
   "Japanese (ja)": "ja",
 };
 
-const currencyOptions = {
-  "": null,
+const currencyOptions = [
+  "Egyptian £",
+  "European €",
+  "Indian ₹",
+  "Japanese ¥",
+  "USA $",
+];
+
+const currencyMapping = {
   "Egyptian £": "EGP",
   "European €": "EUR",
   "Indian ₹": "INR",
@@ -27,15 +47,24 @@ const currencyOptions = {
   "USA $": "USD",
 };
 
-const formatOptions = {
-  "": null,
+const formatOptions = ["decimal", "currency", "percent"];
+
+const formatMapping = {
   decimal: "decimal",
   currency: "currency",
   percent: "percent",
 };
 
-const abbreviateOptions = {
-  "": null,
+const abbreviateOptions = [
+  "true",
+  "false",
+  " 500",
+  "1_000",
+  "10_000",
+  "100_000",
+];
+
+const abbreviateMapping = {
   true: true,
   false: false,
   " 500": 500,
@@ -44,79 +73,109 @@ const abbreviateOptions = {
   "100_000": 100000,
 };
 
-const precisionOptions = {
-  "": null,
-  " 0": 0,
-  " 1": 1,
-  " 2": 2,
-  " 3": 3,
-  " 6": 6,
+const precisionOptions = ["0", "1", "2", "3", "6", "none"];
+
+const precisionMapping = {
+  "0": 0,
+  "1": 1,
+  "2": 2,
+  "3": 3,
+  "6": 6,
   none: "none",
 };
 
 export default {
   title: "Numeral",
+  component: Numeral,
+  argTypes: {
+    locale: {
+      control: "select",
+      options: localeOptions,
+      mapping: localeMapping,
+    },
+    format: {
+      control: "select",
+      options: formatOptions,
+      mapping: formatMapping,
+    },
+    currency: {
+      control: "select",
+      options: currencyOptions,
+      mapping: currencyMapping,
+    },
+    abbreviate: {
+      control: "select",
+      options: abbreviateOptions,
+      mapping: abbreviateMapping,
+    },
+    precision: {
+      control: "select",
+      options: precisionOptions,
+      mapping: precisionMapping,
+    },
+  },
+  args: {
+    color: "text.headline",
+    number: 12.89,
+  },
 };
 
-// We wrap the knobs select function to properly create undefined values
-const _select = (...args) => {
-  const answer = select(...args);
-
-  return answer === null ? undefined : answer;
-};
-
-export const defaultStory = () => (
-  <Numeral
-    number={number("Number", 12.89)}
-    locale={_select("Locale", localeOptions)}
-    format={_select("Format", formatOptions)}
-    currency={_select("Currency", currencyOptions)}
-    abbreviate={_select("Abbreviate", abbreviateOptions)}
-    precision={_select("Precision", precisionOptions)}
-    color="text.headline"
-  />
-);
+export const defaultStory = (args) => <Numeral {...args} />;
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const total = () => (
-  <Numeral
-    number={100}
-    fontWeight="semibold"
-    fontSize={500}
-    color="text.headline"
-  />
-);
+export const total = (args) => <Numeral {...args} />;
+
+total.args = {
+  number: 100,
+  fontWeight: "semibold",
+  fontSize: 500,
+};
 
 total.story = {
   name: "Total",
 };
 
-export const trend = () => <Numeral number={100} color="teal.500" />;
+export const trend = (args) => <Numeral {...args} />;
+
+trend.args = {
+  number: 100,
+  color: "teal.500",
+};
 
 trend.story = {
   name: "Trend",
 };
 
-export const noPrecision = () => (
-  <Numeral number={123.45678} precision="none" color="text.headline" />
-);
+export const noPrecision = (args) => <Numeral {...args} />;
+
+noPrecision.args = {
+  number: 123.45678,
+  precision: "none",
+};
 
 noPrecision.story = {
   name: "No Precision",
 };
 
-export const currencyPrecision = () => (
-  <Numeral number={123.4} format="currency" color="text.headline" />
-);
+export const currencyPrecision = (args) => <Numeral {...args} />;
+
+currencyPrecision.args = {
+  number: 123.4,
+  format: "currency",
+};
 
 currencyPrecision.story = {
   name: "Currency precision",
 };
 
-export const invalid = () => <Numeral number={null} />;
+export const invalid = (args) => <Numeral {...args} />;
+
+invalid.args = {
+  number: null,
+};
 
 invalid.story = {
   name: "Invalid",

package/__flow__/Radio/index.stories.js

@@ -1,58 +1,73 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-
 import Radio from "./";
 
 export default {
   title: "Radio",
+  component: Radio,
+};
+
+export const Unchecked = (args) => <Radio {...args} />;
+
+Unchecked.args = {
+  checked: false,
 };
 
-export const Unchecked = () => <Radio checked={boolean("checked", false)} />;
+export const Checked = (args) => <Radio {...args} />;
 
-export const Checked = () => <Radio checked={boolean("checked", true)} />;
+Checked.args = {
+  checked: true,
+};
+
+export const DisabledUnchecked = (args) => <Radio {...args} />;
 
-export const DisabledUnchecked = () => (
-  <Radio disabled={boolean("disabled", true)} />
-);
+DisabledUnchecked.args = {
+  disabled: true,
+};
 
 DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const DisabledChecked = () => (
-  <Radio
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledChecked = (args) => <Radio {...args} />;
+
+DisabledChecked.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const LabelledChecked = () => (
-  <Radio checked={boolean("checked", true)} label="Toggle Me" />
-);
+export const LabelledChecked = (args) => <Radio {...args} />;
+
+LabelledChecked.args = {
+  checked: true,
+  label: "Toggle Me",
+};
 
 LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = () => (
-  <Radio checked={boolean("checked", false)} label="Toggle Me" />
-);
+export const LabelledUnchecked = (args) => <Radio {...args} />;
+
+LabelledUnchecked.args = {
+  checked: false,
+  label: "Toggle Me",
+};
 
 LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = () => (
-  <Radio
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-    label="Toggle Me"
-  />
-);
+export const LabelledDisabled = (args) => <Radio {...args} />;
+
+LabelledDisabled.args = {
+  checked: false,
+  disabled: true,
+  label: "Toggle Me",
+};
 
 LabelledDisabled.story = {
   name: "Labelled/Disabled",

package/__flow__/Switch/index.stories.js

@@ -1,33 +1,41 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-
 import Switch from "./";
 
 export default {
   title: "Switch",
+  component: Switch,
 };
 
-export const Off = () => <Switch checked={boolean("checked", false)} />;
-export const On = () => <Switch checked={boolean("checked", true)} />;
+export const On = (args) => <Switch {...args} />;
 
-export const DisabledOff = () => (
-  <Switch
-    checked={boolean("checked", false)}
-    disabled={boolean("disabled", true)}
-  />
-);
+On.args = {
+  checked: true,
+};
 
-DisabledOff.story = {
-  name: "Disabled/Off",
+export const Off = (args) => <Switch {...args} />;
+
+Off.args = {
+  checked: false,
 };
 
-export const DisabledOn = () => (
-  <Switch
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledOn = (args) => <Switch {...args} />;
+
+DisabledOn.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledOn.story = {
   name: "Disabled/On",
 };
+
+export const DisabledOff = (args) => <Switch {...args} />;
+
+DisabledOff.args = {
+  checked: false,
+  disabled: true,
+};
+
+DisabledOff.story = {
+  name: "Disabled/Off",
+};

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__/types/theme.flow.js

@@ -16,6 +16,7 @@ import type { TypeFontFamilyString } from "../themes/light/theme";
 import {
   datePicker,
   navigation,
+  analytics,
 } from "../themes/extendedThemes/sproutTheme/light/theme";
 
 export type TypeThemeUtils = {| interact: (color: string) => string |};
@@ -57,5 +58,6 @@ export type TypeSproutTheme = {
     ...$Exact<TypeColor>,
     navigation: typeof navigation,
     datePicker: typeof datePicker,
+    analytics: typeof analytics,
   |},
 };

package/commonjs/IconViewBoxes.js

@@ -173,6 +173,7 @@ module.exports = {
   "heart-outline": "0 0 16 16",
   "heart": "0 0 16 16",
   "heartbeat": "0 0 18 16",
+  "help-alt": "0 0 12 16",
   "help": "0 0 16 16",
   "hiking": "0 0 16 16",
   "history": "0 0 16 16",
@@ -255,6 +256,7 @@ module.exports = {
   "pinterest": "0 0 16 16",
   "play-circle": "0 0 16 16",
   "play": "0 0 14 16",
+  "plug": "0 0 12 16",
   "plus": "0 0 16 18",
   "positive-sentiment": "0 0 16 16",
   "power-up-outline": "0 0 12 16",