@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Portal/index.stories.js

@@ -1,11 +1,11 @@
 // @flow strict-local
-import React from "react";
+import React from 'react';
 
-import Box from "../Box";
-import Portal from "./";
+import Box from '../Box';
+import Portal from './';
 
 export default {
-  title: "Portal",
+  title: 'Components/Portal',
 };
 
 export const portal = () => (
@@ -14,22 +14,22 @@ export const portal = () => (
     <Portal>
       <Box
         position="absolute"
-        top={"100px"}
+        top={'100px'}
         left={0}
-        width={"100px"}
-        border={"2px solid red"}
+        width={'100px'}
+        border={'2px solid red'}
       >
         this is portaled content
       </Box>
     </Portal>
 
-    <Portal as={"span"}>
+    <Portal as={'span'}>
       <Box
         position="absolute"
-        top={"100px"}
+        top={'100px'}
         right={0}
-        width={"100px"}
-        border={"2px solid blue"}
+        width={'100px'}
+        border={'2px solid blue'}
       >
         this is portaled content too!!
       </Box>
@@ -38,5 +38,5 @@ export const portal = () => (
 );
 
 portal.story = {
-  name: "Portal",
+  name: 'Portal',
 };

package/__flow__/Radio/index.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from "react";
-import Container, { Input, InputWrapper, LabelText } from "./styles";
+import * as React from 'react';
+import Container, {Input, InputWrapper, LabelText} from './styles';
 
 export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -65,7 +65,7 @@ export default class Radio extends React.Component<TypeProps> {
 
     return (
       // $FlowIssue - upgrade v0.112.0
-      <Container as={label && "label"} {...rest}>
+      <Container as={label && 'label'} {...rest}>
         <InputWrapper checked={checked} disabled={disabled}>
           <Input
             type="radio"
@@ -78,7 +78,7 @@ export default class Radio extends React.Component<TypeProps> {
             onChange={this.handleChange}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
-            data-qa-radio={name || ""}
+            data-qa-radio={name || ''}
             data-qa-radio-ischecked={checked === true}
             data-qa-radio-isdisabled={disabled === true}
             {...qa}

package/__flow__/Radio/index.stories.js

@@ -1,9 +1,9 @@
 // @flow
-import React from "react";
-import Radio, { type TypeProps } from "./";
+import React from 'react';
+import Radio, {type TypeProps} from './';
 
 export default {
-  title: "Radio",
+  title: 'Components/Form Elements/Radio',
   component: Radio,
 };
 
@@ -26,7 +26,7 @@ DisabledUnchecked.args = {
 };
 
 DisabledUnchecked.story = {
-  name: "Disabled/Unchecked",
+  name: 'Disabled/Unchecked',
 };
 
 export const DisabledChecked = (args: TypeProps) => <Radio {...args} />;
@@ -37,29 +37,29 @@ DisabledChecked.args = {
 };
 
 DisabledChecked.story = {
-  name: "Disabled/Checked",
+  name: 'Disabled/Checked',
 };
 
 export const LabelledChecked = (args: TypeProps) => <Radio {...args} />;
 
 LabelledChecked.args = {
   checked: true,
-  label: "Toggle Me",
+  label: 'Toggle Me',
 };
 
 LabelledChecked.story = {
-  name: "Labelled/Checked",
+  name: 'Labelled/Checked',
 };
 
 export const LabelledUnchecked = (args: TypeProps) => <Radio {...args} />;
 
 LabelledUnchecked.args = {
   checked: false,
-  label: "Toggle Me",
+  label: 'Toggle Me',
 };
 
 LabelledUnchecked.story = {
-  name: "Labelled/Unchecked",
+  name: 'Labelled/Unchecked',
 };
 
 export const LabelledDisabled = (args: TypeProps) => <Radio {...args} />;
@@ -67,9 +67,9 @@ export const LabelledDisabled = (args: TypeProps) => <Radio {...args} />;
 LabelledDisabled.args = {
   checked: false,
   disabled: true,
-  label: "Toggle Me",
+  label: 'Toggle Me',
 };
 
 LabelledDisabled.story = {
-  name: "Labelled/Disabled",
+  name: 'Labelled/Disabled',
 };

package/__flow__/Radio/index.test.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Radio from "./";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Radio from './';
 
 const mockHandleClick = jest.fn();
 
-describe("Radio", () => {
-  it("should render by default", async () => {
-    const { container, runA11yCheck } = render(
+describe('Radio', () => {
+  it('should render by default', async () => {
+    const {container, runA11yCheck} = render(
       <Radio
         checked
         onChange={mockHandleClick}
@@ -20,21 +20,21 @@ describe("Radio", () => {
     await runA11yCheck();
   });
 
-  it("should fire callback with event", () => {
+  it('should fire callback with event', () => {
     const mockBlur = jest.fn();
-    const { getByDataQaLabel } = render(
+    const {getByDataQaLabel} = render(
       <Radio id="radio" name="radio" value="myRadioButton" onBlur={mockBlur} />
     );
 
-    const element = getByDataQaLabel({ radio: "radio" });
+    const element = getByDataQaLabel({radio: 'radio'});
 
     fireEvent.blur(element);
     expect(mockBlur).toHaveBeenCalled();
     expect(mockBlur.mock.calls.length).toBe(1);
   });
 
-  it("should render disabled", () => {
-    const { getByDataQaLabel } = render(
+  it('should render disabled', () => {
+    const {getByDataQaLabel} = render(
       <Radio
         id="radio"
         name="radio"
@@ -42,6 +42,6 @@ describe("Radio", () => {
         onChange={mockHandleClick}
       />
     );
-    expect(getByDataQaLabel({ "radio-isdisabled": "true" })).toBeTruthy();
+    expect(getByDataQaLabel({'radio-isdisabled': 'true'})).toBeTruthy();
   });
 });

package/__flow__/Radio/styles.js

@@ -1,12 +1,12 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing, disabled } from "../utils/mixins";
-import Text from "../Text/";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing, disabled} from '../utils/mixins';
+import Text from '../Text/';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -14,7 +14,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
   ${COMMON}
 `;
 
-Container.displayName = "Radio";
+Container.displayName = 'Radio';
 
 export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   box-sizing: border-box;
@@ -25,7 +25,7 @@ export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   height: 100%;
   margin: 0;
   appearance: none;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: 50%;
   background-color: ${(props) => props.theme.colors.form.background.base};
@@ -39,18 +39,17 @@ export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   }
 `;
 
-Input.displayName = "Input";
+Input.displayName = 'Input';
 
-// eslint-disable-next-line prettier/prettier
 export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
   position: relative;
   width: ${(props) => props.theme.space[400]};
   height: ${(props) => props.theme.space[400]};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   ${(props) => props.disabled && disabled}
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;
@@ -63,7 +62,7 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
       ${(props) => props.theme.easing.ease_in};
     z-index: 1;
     pointer-events: none;
-    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   }
 
   ${(props) =>
@@ -98,13 +97,13 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
     `}
 `;
 
-InputWrapper.displayName = "InputWrapper";
+InputWrapper.displayName = 'InputWrapper';
 
 export const LabelText = styled<typeof Text, TypeTheme, *>(Text)`
   margin-left: ${(props) => props.theme.space[300]};
   font-size: ${(props) => props.theme.typography[200].fontSize};
   line-height: 1;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   color: ${(props) => props.theme.colors.text.headline};
 
   ${(props) =>
@@ -114,6 +113,6 @@ export const LabelText = styled<typeof Text, TypeTheme, *>(Text)`
     `}
 `;
 
-LabelText.displayName = "LabelText";
+LabelText.displayName = 'LabelText';
 
 export default Container;

package/__flow__/SegmentedControl/index.js

@@ -1,12 +1,12 @@
 // @flow
-import * as React from "react";
-import { useState, useContext } from "react";
+import * as React from 'react';
+import {useState, useContext} from 'react';
 import {
   SegmentedControlContainer,
   SegmentedControlItemContainer,
   SegmentedControlLabel,
-} from "./styles";
-import Box from "../Box";
+} from './styles';
+import Box from '../Box';
 
 let nameCounter = 0;
 let idCounter = 0;
@@ -37,7 +37,7 @@ const SegmentedControlItem = ({
     return null;
   }
 
-  const { name, selectedValue, onChange } = context;
+  const {name, selectedValue, onChange} = context;
   /* eslint-disable-next-line */
   const [id] = useState(`${name}-${idCounter++}`);
   const isChecked = value === selectedValue;
@@ -92,7 +92,7 @@ const SegmentedControl = ({
   const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
 
   return (
-    <SegmentedControlContext.Provider value={{ name, selectedValue, onChange }}>
+    <SegmentedControlContext.Provider value={{name, selectedValue, onChange}}>
       <SegmentedControlContainer
         forwardedAs="fieldset"
         data-qa-segmentedcontrol={label}
@@ -110,6 +110,6 @@ const SegmentedControl = ({
 
 SegmentedControl.Item = SegmentedControlItem;
 
-SegmentedControl.Item.displayName = "SegmentedControl.Item";
+SegmentedControl.Item.displayName = 'SegmentedControl.Item';
 
 export default SegmentedControl;

package/__flow__/SegmentedControl/index.stories.js

@@ -1,11 +1,11 @@
 // @flow
-import React, { useState } from "react";
-import SegmentedControl from "./index";
-import Box from "../Box";
-import Button from "../Button";
+import React, {useState} from 'react';
+import SegmentedControl from './index';
+import Box from '../Box';
+import Button from '../Button';
 
 const StatefulSegmentedControl = (props) => {
-  const [value, setValue] = useState("1");
+  const [value, setValue] = useState('1');
 
   return (
     <SegmentedControl
@@ -22,7 +22,7 @@ const StatefulSegmentedControl = (props) => {
 };
 
 export default {
-  title: "SegmentedControl",
+  title: 'Components/SegmentedControl',
 };
 
 export const defaultStory = () => (
@@ -33,7 +33,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const Disabled = () => (

package/__flow__/SegmentedControl/index.test.js

@@ -1,11 +1,11 @@
 // @flow
-import React, { useState } from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import "jest-styled-components";
-import SegmentedControl from "./";
+import React, {useState} from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import SegmentedControl from './';
 
 const StatefulSegmentedControl = (props) => {
-  const [value, setValue] = useState("1");
+  const [value, setValue] = useState('1');
 
   return (
     <SegmentedControl
@@ -21,54 +21,54 @@ const StatefulSegmentedControl = (props) => {
   );
 };
 
-describe("SegmentedControl", () => {
-  it("should select the correct item when clicked", async () => {
-    const { queryByText } = render(<StatefulSegmentedControl />);
-    const item1 = queryByText("Test 1");
-    const item2 = queryByText("Test 2");
-    const item3 = queryByText("Test 3");
+describe('SegmentedControl', () => {
+  it('should select the correct item when clicked', async () => {
+    const {queryByText} = render(<StatefulSegmentedControl />);
+    const item1 = queryByText('Test 1');
+    const item2 = queryByText('Test 2');
+    const item3 = queryByText('Test 3');
 
     expect(item1.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
+      'data-segmentedcontrol-isactive',
+      'true'
     );
     expect(item2.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
     expect(item3.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
 
     fireEvent.click(item3);
 
     expect(item1.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
     expect(item2.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
     expect(item3.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
+      'data-segmentedcontrol-isactive',
+      'true'
     );
 
     fireEvent.click(item2);
 
     expect(item1.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
     expect(item2.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
+      'data-segmentedcontrol-isactive',
+      'true'
     );
     expect(item3.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
+      'data-segmentedcontrol-isactive',
+      'false'
     );
   });
 });

package/__flow__/SegmentedControl/styles.js

@@ -1,13 +1,16 @@
 //@flow
-import styled, { css } from "styled-components";
-import Box from "../Box";
-import Text from "../Text";
-import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
+import styled, {css} from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import {visuallyHidden, focusRing, disabled} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-// eslint-disable-next-line prettier/prettier
-export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {disabled?: boolean, ...}>(Box)`
+export const SegmentedControlContainer = styled<
+  typeof Box,
+  TypeTheme,
+  {disabled?: boolean, ...}
+>(Box)`
   border: 1px solid
     ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
@@ -20,7 +23,6 @@ export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {disabled
   ${(props) => props.disabled && disabled}
 `;
 
-// eslint-disable-next-line prettier/prettier
 export const SegmentedControlItemContainer = styled<typeof Box, TypeTheme>(Box)`
   flex: 1 1 auto;
   display: flex;
@@ -39,7 +41,6 @@ export const SegmentedControlItemContainer = styled<typeof Box, TypeTheme>(Box)`
   }
 `;
 
-// eslint-disable-next-line prettier/prettier
 export const SegmentedControlLabel = styled<typeof Text, TypeTheme, any>(Text)`
   flex: 1 1 auto;
   display: flex;

package/__flow__/Select/index.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react";
-import Container, { Arrow } from "./styles";
-import Icon from "../Icon";
+import * as React from 'react';
+import Container, {Arrow} from './styles';
+import Icon from '../Icon';
 
-type TypeSelectProps = {
+export type TypeSelectProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,
@@ -23,16 +23,16 @@ type TypeSelectProps = {
   inputProps?: any,
   qa?: any,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  size?: "large" | "small" | "default",
+  size?: 'large' | 'small' | 'default',
 };
 
 export default class Select extends React.Component<TypeSelectProps> {
   static defaultProps = {
-    size: "default",
+    size: 'default',
   };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const { onChange } = this.props;
+    const {onChange} = this.props;
 
     if (onChange) {
       onChange(e);
@@ -73,8 +73,8 @@ export default class Select extends React.Component<TypeSelectProps> {
           autoFocus={autoFocus}
           disabled={disabled}
           onChange={this.handleChange}
-          data-qa-select={name || ""}
-          data-qa-select-value={value || "unselected"}
+          data-qa-select={name || ''}
+          data-qa-select-value={value || 'unselected'}
           data-qa-select-isrequired={required === true}
           data-qa-select-isdisabled={disabled === true}
           {...qa}
@@ -87,7 +87,7 @@ export default class Select extends React.Component<TypeSelectProps> {
           <Icon
             name="chevron-down"
             fixedWidth
-            size={this.props.size === "small" ? "mini" : "default"}
+            size={this.props.size === 'small' ? 'mini' : 'default'}
           />
         </Arrow>
       </Container>

package/__flow__/Select/index.stories.js

@@ -1,78 +1,42 @@
 // @flow
-import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
-
-import Select from "./";
-
-const options = [
-  <option value="" disabled selected>
-    Select One
-  </option>,
-  <option value={text("value", "apple")}>{text("children", "Apple")}</option>,
-  <option value={text("value", "orange")}>{text("children", "Orange")}</option>,
-  <option value={text("value", "banana")}>{text("children", "Banana")}</option>,
-];
+import React from 'react';
+import Select, {type TypeSelectProps} from './';
 
 export default {
-  title: "Select",
+  title: 'Components/Form Elements/Select',
+  component: Select,
+  argTypes: {
+    size: {
+      options: ['small', 'large', undefined],
+      control: {type: 'select'},
+    },
+    children: {
+      control: 'object',
+    },
+    disabled: {control: 'boolean'},
+    required: {control: 'boolean'},
+    inValid: {control: 'boolean'},
+  },
+  args: {
+    size: undefined,
+    disabled: false,
+    required: false,
+    invalid: false,
+    children: [
+      <option value="" disabled selected>
+        Select One
+      </option>,
+      <option value="apple">Apple</option>,
+      <option value="orange">Orange</option>,
+      <option value="banana">Banana</option>,
+    ],
+  },
 };
 
-export const defaultStory = () => (
-  <Select id="default" name="default">
-    {options}
-  </Select>
+export const defaultStory = (args: TypeSelectProps) => (
+  <Select id="default" name="default" {...args} />
 );
 
 defaultStory.story = {
-  name: "Default",
-};
-
-export const small = () => (
-  <Select id="small" name="small" size="small">
-    {options}
-  </Select>
-);
-
-small.story = {
-  name: "Small",
-};
-
-export const large = () => (
-  <Select id="large" name="large" size="large">
-    {options}
-  </Select>
-);
-
-large.story = {
-  name: "Large",
-};
-
-export const disabled = () => (
-  <Select id="disabled" name="disabled" disabled={boolean("disabled", true)}>
-    {options}
-  </Select>
-);
-
-disabled.story = {
-  name: "Disabled",
-};
-
-export const required = () => (
-  <Select id="required" name="required" required={boolean("required", true)}>
-    {options}
-  </Select>
-);
-
-required.story = {
-  name: "Required",
-};
-
-export const invalid = () => (
-  <Select id="invalid" name="invalid" isInvalid={boolean("isInvalid", true)}>
-    {options}
-  </Select>
-);
-
-invalid.story = {
-  name: "Invalid",
+  name: 'Default',
 };