@sproutsocial/racine 11.7.0 → 11.9.0-typescript.0

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

package/__flow__/systemProps/color.js

@@ -14,8 +14,7 @@ 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__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ 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/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",

package/commonjs/Input/index.js

@@ -41,7 +41,6 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
       hasValue = _React$useContext.hasValue,
@@ -50,13 +49,6 @@ var ClearButton = function ClearButton() {
 
   if (!hasValue) {
     return null;
-  } // Log a warning and hide the button when no onClear callback is provided.
-  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
-
-
-  if (!onClear) {
-    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -95,14 +87,10 @@ var isClearButton = function isClearButton(elem) {
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
-  function Input() {
+  function Input(props) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$Component.call(this, props) || this;
     _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
@@ -110,14 +98,31 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef, _this$inputRef$curren;
+      var input = _this.inputRef.current;
+
+      if (input) {
+        var _Object$getOwnPropert;
+
+        // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
+        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _Object$getOwnPropert.set;
+        nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
+
+        _this.updateState("");
 
-      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
-      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
-      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+      _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
+
+      _this.updateState(e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
@@ -136,6 +141,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+
+      if (hasValue !== previousHasValue) {
+        _this.setState({
+          hasValue: hasValue
+        });
+      }
+    };
+
+    _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
+    };
     return _this;
   }
 
@@ -189,9 +210,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       name: "search",
       ariaHidden: true,
       color: "icon.base"
-    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+    }) : elemBefore; // Do not add a ClearButton if an elemAfter prop was passed.
 
-    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+    var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
       hasBeforeElement: !!elementBefore,
       hasAfterElement: !!elementAfter,
@@ -204,9 +225,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
       value: {
         handleClear: this.handleClear,
-        hasValue: !!value,
+        hasValue: this.state.hasValue,
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {

package/commonjs/Input/styles.js

@@ -84,9 +84,9 @@ var Accessory = _styledComponents.default.div.withConfig({
 })(["position:absolute;top:50%;transform:translateY(-50%);color:", ";display:flex;align-items:center;", ";", ";"], function (props) {
   return props.theme.colors.icon.base;
 }, function (props) {
-  return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
+  return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[300]);
 }, function (props) {
-  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
+  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
 
 exports.Accessory = Accessory;