@sproutsocial/racine 11.7.1 → 11.9.0-useInteractiveColor.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__/SegmentedControl/index.js

@@ -17,8 +17,9 @@ 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__/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__/TableCell/index.js

@@ -22,8 +22,15 @@ 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,8 +32,15 @@ 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