@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/Input/index.js

@@ -1,15 +1,15 @@
 // @flow
-import * as React from "react";
-import Container, { Accessory } from "./styles";
-import Button from "../Button";
-import Icon from "../Icon";
-import styled from "styled-components";
-import type { StyledComponent } from "styled-components";
-import type { TypeTheme } from "../types/theme.flow";
-import { mergeRefs } from "../utils";
-import { useInteractiveColor } from "../utils/useInteractiveColor";
-
-type TypeProps = {
+import * as React from 'react';
+import Container, {Accessory} from './styles';
+import Button from '../Button';
+import Icon from '../Icon';
+import styled from 'styled-components';
+import type {StyledComponent} from 'styled-components';
+import type {TypeTheme} from '../types/theme.flow';
+import {mergeRefs} from '../utils';
+import {useInteractiveColor} from '../utils/useInteractiveColor';
+
+export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,
@@ -24,7 +24,7 @@ type TypeProps = {
   /** Current value of the input */
   value?: string,
   /** HTML type attribute */
-  type?: "date" | "email" | "number" | "password" | "text" | "url" | "search",
+  type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url' | 'search',
   /** Set option to display earlier typed values */
   autoComplete?: boolean,
   /** Will autofocus the element when mounted to the DOM */
@@ -49,7 +49,7 @@ type TypeProps = {
   inputProps?: any,
   /** Used to get a reference to the underlying element */
   innerRef?:
-    | {| current: null | HTMLInputElement |}
+    | {|current: null | HTMLInputElement|}
     | ((React.ElementRef<any> | HTMLElement) => void),
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
@@ -64,13 +64,13 @@ type TypeProps = {
     value: string
   ) => void,
   onPaste?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  size?: "large" | "small" | "default",
+  size?: 'large' | 'small' | 'default',
   qa?: Object,
   /**
       Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.
       Note that this prop should only be used to alter styles and not functionality.
   */
-  appearance?: "primary" | "secondary",
+  appearance?: 'primary' | 'secondary',
 };
 
 type TypeState = {
@@ -83,7 +83,7 @@ type TypeInputContext = $Shape<{
   handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
   clearButtonLabel: string,
   hasValue: boolean,
-  size: "large" | "small" | "default",
+  size: 'large' | 'small' | 'default',
 }>;
 
 const InputContext = React.createContext<TypeInputContext>({});
@@ -111,15 +111,15 @@ const ClearButton = () => {
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
     console.warn(
-      "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input."
+      'Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.'
     );
   }
 
   // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
   // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
-  const py = inputSize === "small" ? 100 : undefined;
-  const px = inputSize === "small" ? 200 : undefined;
-  const buttonSize = inputSize === "small" ? "default" : inputSize;
+  const py = inputSize === 'small' ? 100 : undefined;
+  const px = inputSize === 'small' ? 200 : undefined;
+  const buttonSize = inputSize === 'small' ? 'default' : inputSize;
 
   return (
     <StyledButton
@@ -127,8 +127,8 @@ const ClearButton = () => {
       size={buttonSize}
       py={py}
       px={px}
-      title={clearButtonLabel || "Clear"}
-      ariaLabel={clearButtonLabel || "Clear"}
+      title={clearButtonLabel || 'Clear'}
+      ariaLabel={clearButtonLabel || 'Clear'}
       color="icon.base"
     >
       <Icon name="circlex" />
@@ -140,7 +140,7 @@ const ClearButton = () => {
 // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
 const isClearButton = (elem: any) => {
   if (elem?.type) {
-    return elem.type.displayName === "Input.ClearButton";
+    return elem.type.displayName === 'Input.ClearButton';
   }
   return false;
 };
@@ -158,9 +158,9 @@ class Input extends React.Component<TypeProps, TypeState> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
-    type: "text",
-    size: "default",
-    appearance: "primary",
+    type: 'text',
+    size: 'default',
+    appearance: 'primary',
   };
 
   static ClearButton = ClearButton;
@@ -178,15 +178,15 @@ class Input extends React.Component<TypeProps, TypeState> {
       // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
         window.HTMLInputElement.prototype,
-        "value"
+        'value'
       )?.set;
-      nativeInputValueSetter?.call(input, "");
-      const inputEvent = new Event("input", { bubbles: true });
+      nativeInputValueSetter?.call(input, '');
+      const inputEvent = new Event('input', {bubbles: true});
       input.dispatchEvent(inputEvent);
 
       // Focus the input, update hasValue, and call any onClear callback
       input.focus();
-      this.updateState("");
+      this.updateState('');
       this.props.onClear?.(e);
     }
   };
@@ -209,11 +209,11 @@ class Input extends React.Component<TypeProps, TypeState> {
     this.props.onPaste?.(e, e.currentTarget.value);
 
   updateState = (inputValue: string) => {
-    const hasValue = inputValue !== "";
+    const hasValue = inputValue !== '';
     const previousHasValue = this.state.hasValue;
     // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
     if (hasValue !== previousHasValue) {
-      this.setState({ hasValue });
+      this.setState({hasValue});
     }
   };
 
@@ -255,19 +255,19 @@ class Input extends React.Component<TypeProps, TypeState> {
     // Convert autoComplete from a boolean prop to a string value.
     let autoCompleteValue = undefined;
     if (autoComplete !== undefined) {
-      autoCompleteValue = autoComplete ? "on" : "off";
+      autoCompleteValue = autoComplete ? 'on' : 'off';
     }
 
     // Add default elemBefore and elemAfter elements if type is search.
     const elementBefore =
-      type === "search" && !elemBefore ? (
+      type === 'search' && !elemBefore ? (
         <Icon name="search" ariaHidden color="icon.base" />
       ) : (
         elemBefore
       );
     // Do not add a ClearButton if an elemAfter prop was passed.
     const elementAfter =
-      type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
+      type === 'search' && !elemAfter ? <ClearButton /> : elemAfter;
 
     return (
       <Container
@@ -313,7 +313,7 @@ class Input extends React.Component<TypeProps, TypeState> {
             onKeyUp={this.handleKeyUp}
             onPaste={this.handlePaste}
             ref={mergeRefs([innerRef, this.inputRef])}
-            data-qa-input={name || ""}
+            data-qa-input={name || ''}
             data-qa-input-isdisabled={disabled === true}
             data-qa-input-isrequired={required === true}
             {...qa}
@@ -331,6 +331,6 @@ class Input extends React.Component<TypeProps, TypeState> {
   }
 }
 
-Input.ClearButton.displayName = "Input.ClearButton";
+Input.ClearButton.displayName = 'Input.ClearButton';
 
 export default Input;

package/__flow__/Input/index.stories.js

@@ -1,309 +1,216 @@
 // @flow
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-
-import Input from "./";
-import Icon from "../Icon";
+import React from 'react';
+import Input, {type TypeProps} from './';
+import Icon from '../Icon';
 
 export default {
-  title: "Input",
-};
-
-export const defaultStory = () => (
-  <Input
-    id="test"
-    name="test"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+  title: 'Components/Form Elements/Input',
+  component: Input,
+  argTypes: {
+    size: {
+      options: ['small', 'large', undefined],
+      control: {type: 'select'},
+    },
+  },
+  args: {
+    value: '',
+    ariaLabel: 'Descriptive label goes here',
+    placeholder: 'Please enter a value...',
+    clearButtonLabel: 'Clear search',
+    size: undefined,
+  },
+};
+
+export const defaultStory = (args: TypeProps) => (
+  <Input id="test" name="test" {...args} />
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const small = () => (
-  <Input
-    id="small"
-    name="small"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    size="small"
-  />
+export const disabled = (args: TypeProps) => (
+  <Input id="disabled" name="disabled" disabled={true} {...args} />
 );
 
-small.story = {
-  name: "Small",
-};
-
-export const large = () => (
-  <Input
-    id="large"
-    name="large"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    size="large"
-  />
-);
-
-large.story = {
-  name: "Large",
+disabled.story = {
+  name: 'Disabled',
 };
 
-export const disabled = () => (
-  <Input
-    id="disabled"
-    name="disabled"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    disabled={true}
-  />
+export const readOnly = (args: TypeProps) => (
+  <Input id="readOnly" name="readOnly" readOnly={true} {...args} />
 );
 
-disabled.story = {
-  name: "Disabled",
+readOnly.args = {
+  value: 'This input is a read only input',
 };
 
-export const readOnly = () => (
-  <Input
-    id="readOnly"
-    name="readOnly"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    readOnly={true}
-  />
-);
-
 readOnly.story = {
-  name: "Read Only",
+  name: 'Read Only',
 };
 
-export const required = () => (
-  <Input
-    id="required"
-    name="required"
-    value={text("value", "")}
-    placeholder={text("placeholder", "Please enter a value...")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-    required
-  />
+export const required = (args: TypeProps) => (
+  <Input id="required" name="required" required {...args} />
 );
 
 required.story = {
-  name: "Required",
+  name: 'Required',
 };
 
-export const error = () => (
-  <Input
-    id="error"
-    name="error"
-    value={text("value", "")}
-    isInvalid
-    placeholder={text("placeholder", "blah@something")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const error = (args: TypeProps) => (
+  <Input id="error" name="error" isInvalid {...args} />
 );
 
+error.args = {
+  placeholder: 'blah@something',
+};
+
 error.story = {
-  name: "Error",
+  name: 'Error',
 };
 
-export const leftIcon = () => (
+export const leftIcon = (args: TypeProps) => (
   <Input
     id="left-icon"
     name="left-icon"
-    value={text("value", "")}
     elemBefore={<Icon fixedWidth name="lock" />}
-    placeholder={text("placeholder", "Password")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    {...args}
   />
 );
 
 leftIcon.story = {
-  name: "Left Icon",
+  placeholder: 'Password',
+};
+
+leftIcon.story = {
+  name: 'Left Icon',
 };
 
-export const rightIcon = () => (
+export const rightIcon = (args: TypeProps) => (
   <Input
     id="right-icon"
     name="right-icon"
-    value={text("value", "")}
     elemAfter={<Icon fixedWidth name="lock" />}
-    placeholder="Password"
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    {...args}
   />
 );
 
 rightIcon.story = {
-  name: "Right Icon",
+  placeholder: 'Password',
+};
+
+rightIcon.story = {
+  name: 'Right Icon',
 };
 
-export const leftAndRightIcons = () => (
+export const leftAndRightIcons = (args: TypeProps) => (
   <Input
     id="left-right-icons"
     name="left-right-icons"
     elemBefore={<Icon fixedWidth name="search" />}
     elemAfter={<Icon fixedWidth name="lock" />}
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text(
-      "value",
-      "this is a really long value to show what happens when you have both icons and long valuessssssss"
-    )}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    {...args}
   />
 );
 
+leftAndRightIcons.args = {
+  value:
+    'this is a really long value to show what happens when you have both icons and long valuessssssss',
+};
+
 leftAndRightIcons.story = {
-  name: "Left and right icons",
+  name: 'Left and right icons',
 };
 
-export const SearchInput = () => {
-  const [value, setValue] = React.useState("");
+export const SearchInput = (args: TypeProps) => {
+  const [value, setValue] = React.useState('');
   return (
     <Input
       id="search"
       name="search"
       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")}
+      ariaLabel={args.ariaLabel}
+      placeholder={args.placeholder}
+      clearButtonLabel={args.clearButtonLabel}
+      size={args.size}
     />
   );
 };
 
 SearchInput.story = {
-  name: "Search Input",
+  name: 'Search Input',
 };
 
-export const SmallSearchInput = () => {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <Input
-      id="small-search"
-      name="small-search"
-      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 = () => {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <Input
-      id="large-search"
-      name="large-search"
-      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 = () => (
+export const uncontrolledSearchInput = (args: TypeProps) => (
   <Input
     id="uncontrolled-search"
     name="uncontrolled-search"
     type="search"
-    placeholder={text("placeholder", "Please enter a value...")}
-    clearButtonLabel={text("clearButtonLabel", "Clear search")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    ariaLabel={args.ariaLabel}
+    placeholder={args.placeholder}
+    clearButtonLabel={args.clearButtonLabel}
   />
 );
 
 uncontrolledSearchInput.story = {
-  name: "Uncontrolled Search Input",
+  name: 'Uncontrolled Search Input',
 };
 
-export const NonSearchClearButtonInput = () => {
-  const [value, setValue] = React.useState("");
+export const NonSearchClearButtonInput = (args: TypeProps) => {
+  const [value, setValue] = React.useState('');
 
   return (
     <Input
       id="clear-button"
       name="clear-button"
       type="text"
-      placeholder={text("placeholder", "Please enter a value...")}
       value={value}
       onChange={(e, value) => setValue(value)}
-      ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-      clearButtonLabel={text("clearButtonLabel", "Clear text")}
       elemAfter={<Input.ClearButton />}
+      ariaLabel={args.ariaLabel}
+      placeholder={args.placeholder}
+      clearButtonLabel={args.clearButtonLabel}
     />
   );
 };
 
 NonSearchClearButtonInput.story = {
-  name: "Manual Input.ClearButton usage",
+  name: 'Manual Input.ClearButton usage',
 };
 
-export const autofocus = () => (
-  <Input
-    id="autofocus"
-    name="autofocus"
-    autoFocus
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const autofocus = (args: TypeProps) => (
+  <Input id="autofocus" name="autofocus" autoFocus {...args} />
 );
 
 autofocus.story = {
-  name: "Autofocus",
+  name: 'Autofocus',
 };
 
-export const maxLength = () => (
+export const maxLength = (args: TypeProps) => (
   <Input
     id="maxlength"
     name="maxlength"
     autoFocus
-    placeholder={text("placeholder", "Max Length is 10")}
     maxLength={10}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
+    ariaLabel={args.ariaLabel}
+    placeholder={args.placeholder}
   />
 );
 
+maxLength.args = {
+  placeholder: 'Max length is 10 characters...',
+};
+
 maxLength.story = {
-  name: "Max Length",
+  name: 'Max Length',
 };
 
-export const secondary = () => (
-  <Input
-    id="secondary"
-    name="secondary"
-    appearance="secondary"
-    placeholder={text("placeholder", "Please enter a value...")}
-    value={text("value", "")}
-    ariaLabel={text("ariaLabel", "Descriptive label goes here")}
-  />
+export const secondary = (args: TypeProps) => (
+  <Input id="secondary" name="secondary" appearance="secondary" {...args} />
 );
 
 secondary.story = {
-  name: "Secondary",
+  name: 'Secondary',
 };