@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/TableHeaderCell/index.js

@@ -1,14 +1,14 @@
 // @flow
-import * as React from "react";
-import Container, { SortIcon } from "./styles";
+import * as React from 'react';
+import Container, {SortIcon} from './styles';
 
-import Icon from "../Icon/";
+import Icon from '../Icon/';
 
-import type { TypeTableCell } from "../TableCell/";
+import type {TypeTableCell} from '../TableCell/';
 
 export const SORT_DIRECTIONS = {
-  ASC: "ASC",
-  DESC: "DESC",
+  ASC: 'ASC',
+  DESC: 'DESC',
 };
 
 export type TypeEnumSortDirections = $Keys<typeof SORT_DIRECTIONS>;
@@ -21,7 +21,7 @@ export type TypeTableHeaderCell = {
   shouldTruncate?: boolean,
 };
 
-type TypeProps = {
+export type TypeProps = {
   ...TypeTableHeaderCell,
   /** Legacy: Callback for Sorting Table Columns (optional) */
   onSort?: (id: string) => void,
@@ -38,14 +38,14 @@ type TypeProps = {
  */
 export default class TableHeaderCell extends React.Component<TypeProps> {
   getSortIcon = (isSorted: boolean) => {
-    const { sortDirection } = this.props;
+    const {sortDirection} = this.props;
 
-    let iconName = "chevron-up-down-filled";
+    let iconName = 'chevron-up-down-filled';
 
     if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
-      iconName = "chevron-up-filled";
+      iconName = 'chevron-up-filled';
     } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
-      iconName = "chevron-down-filled";
+      iconName = 'chevron-down-filled';
     }
 
     return (
@@ -56,7 +56,7 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
   };
 
   handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const { onClick, onSort, isSortable, id } = this.props;
+    const {onClick, onSort, isSortable, id} = this.props;
     if (onClick) {
       onClick(e);
       return;
@@ -87,13 +87,13 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
       <Container
         {...rest}
         key={id}
-        alignment={align || "left"}
+        alignment={align || 'left'}
         sortable={isSortable}
         colSpan={colSpan}
         width={width}
         onClick={this.handleClick}
         data-tableheadercell-sortable={isSortable}
-        data-qa-table-header-cell={""}
+        data-qa-table-header-cell={''}
         data-qa-table-header-cell-sortdirection={sortDirection}
       >
         {children || content}

package/__flow__/TableHeaderCell/index.stories.js

@@ -1,49 +1,54 @@
 // @flow
-import React from "react";
-import { boolean, number, text } from "@storybook/addon-knobs";
-
-import TableHeaderCell from "./";
+import React from 'react';
+import TableHeaderCell, {type TypeProps} from './';
 
 export default {
-  title: "TableHeaderCell",
+  title: 'Components/Table/TableHeaderCell',
+  component: TableHeaderCell,
+  argTypes: {
+    isSortable: {control: 'boolean'},
+  },
+  args: {
+    content: 'Food Item',
+    id: '1',
+    isSortable: undefined,
+    align: undefined,
+    width: undefined,
+  },
 };
 
-export const defaultStory = () => (
-  <TableHeaderCell
-    content={text("content", "Food Item")}
-    id={text("id", "1")}
-    color="text.headline"
-  />
+export const defaultStory = (args: TypeProps) => (
+  <TableHeaderCell color="text.headline" {...args} />
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const sortable = () => (
-  <TableHeaderCell
-    isSortable={boolean("isSortable", true)}
-    content={text("content", "Food Item")}
-    id={text("id", "1")}
-    color="text.headline"
-  />
+export const sortable = (args: TypeProps) => (
+  <TableHeaderCell color="text.headline" {...args} />
 );
 
+sortable.args = {
+  isSortable: true,
+};
+
 sortable.story = {
-  name: "Sortable",
+  name: 'Sortable',
 };
 
-export const additionalProps = () => (
-  <TableHeaderCell
-    isSortable={boolean("isSortable", true)}
-    content={text("content", "Calories")}
-    id={text("id", "2")}
-    align={text("align", "center")}
-    width={number("width", 100)}
-    color="text.headline"
-  />
+export const additionalProps = (args: TypeProps) => (
+  <TableHeaderCell color="text.headline" {...args} />
 );
 
+additionalProps.args = {
+  isSortable: true,
+  content: 'Calories',
+  id: '2',
+  align: 'center',
+  width: 100,
+};
+
 additionalProps.story = {
-  name: "Additional props",
+  name: 'Additional props',
 };

package/__flow__/TableHeaderCell/index.test.js

@@ -1,21 +1,21 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import TableHeaderCell from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import TableHeaderCell from './';
 
-describe("TableHeaderCell", () => {
-  it("should render properly", () => {
-    const { getByDataQaLabel, getByText } = render(
+describe('TableHeaderCell', () => {
+  it('should render properly', () => {
+    const {getByDataQaLabel, getByText} = render(
       <table>
         <TableHeaderCell id="test" content="more stuff here" />
       </table>
     );
-    expect(getByDataQaLabel({ "table-header-cell": "" })).toBeTruthy();
-    expect(getByText("more stuff here")).toBeInTheDocument();
+    expect(getByDataQaLabel({'table-header-cell': ''})).toBeTruthy();
+    expect(getByText('more stuff here')).toBeInTheDocument();
   });
 
-  it("renders the children if present", () => {
-    const { getByText } = render(
+  it('renders the children if present', () => {
+    const {getByText} = render(
       <table>
         <TableHeaderCell id="test" content="content">
           Child
@@ -23,6 +23,6 @@ describe("TableHeaderCell", () => {
       </table>
     );
 
-    expect(getByText("Child")).toBeInTheDocument();
+    expect(getByText('Child')).toBeInTheDocument();
   });
 });

package/__flow__/TableHeaderCell/styles.js

@@ -1,8 +1,8 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.th`
   ${(props) => props.theme.typography[100]}
@@ -20,7 +20,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.th`
   ${COMMON}
 `;
 
-export const SortIcon: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
+export const SortIcon: StyledComponent<{...}, TypeTheme, *> = styled.span`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

package/__flow__/TableRowAccordion/index.js

@@ -1,10 +1,10 @@
 // @flow
-import * as React from "react";
-import Container, { Detail, Trigger } from "./styles";
+import * as React from 'react';
+import Container, {Detail, Trigger} from './styles';
 
-import type { TypeTableRow } from "../Table";
-import Icon from "../Icon";
-import TableCell from "../TableCell";
+import type {TypeTableRow} from '../Table';
+import Icon from '../Icon';
+import TableCell from '../TableCell';
 
 type TypeProps = {
   ...TypeTableRow,
@@ -21,7 +21,7 @@ type TypeProps = {
  */
 export default class TableRowAccordion extends React.Component<TypeProps> {
   handleToggle = (e: Event) => {
-    const { onToggle, id } = this.props;
+    const {onToggle, id} = this.props;
     e.stopPropagation();
     if (onToggle) {
       onToggle(id);
@@ -29,7 +29,7 @@ export default class TableRowAccordion extends React.Component<TypeProps> {
   };
 
   render() {
-    const { id, cells, detail, onToggle, isExpanded, ...rest } = this.props;
+    const {id, cells, detail, onToggle, isExpanded, ...rest} = this.props;
 
     return (
       <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
@@ -45,7 +45,7 @@ export default class TableRowAccordion extends React.Component<TypeProps> {
                 onClick={this.handleToggle}
                 role="button"
               >
-                <Icon name={isExpanded ? "chevron-up" : "chevron-down"} />
+                <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />
               </Trigger>
             }
           />

package/__flow__/TableRowAccordion/index.stories.js

@@ -1,9 +1,9 @@
 // @flow
-import React from "react";
-import TableRowAccordion from "./";
+import React from 'react';
+import TableRowAccordion from './';
 
 export default {
-  title: "TableRowAccordion",
+  title: 'Components/Table/TableRowAccordion',
 };
 
 export const collapsed = () => (
@@ -11,24 +11,24 @@ export const collapsed = () => (
     id="1"
     cells={[
       {
-        id: "1",
-        content: "🍔 Bacon Smokehouse Burger",
+        id: '1',
+        content: '🍔 Bacon Smokehouse Burger',
       },
       {
-        id: "2",
-        content: "840",
+        id: '2',
+        content: '840',
       },
       {
-        id: "3",
-        content: "45g",
+        id: '3',
+        content: '45g',
       },
       {
-        id: "4",
-        content: "62g",
+        id: '4',
+        content: '62g',
       },
       {
-        id: "5",
-        content: "46g",
+        id: '5',
+        content: '46g',
       },
     ]}
     isExpanded={false}
@@ -43,7 +43,7 @@ export const collapsed = () => (
 );
 
 collapsed.story = {
-  name: "Collapsed",
+  name: 'Collapsed',
 };
 
 export const expanded = () => (
@@ -51,24 +51,24 @@ export const expanded = () => (
     id="1"
     cells={[
       {
-        id: "1",
-        content: "🍔 Bacon Smokehouse Burger",
+        id: '1',
+        content: '🍔 Bacon Smokehouse Burger',
       },
       {
-        id: "2",
-        content: "840",
+        id: '2',
+        content: '840',
       },
       {
-        id: "3",
-        content: "45g",
+        id: '3',
+        content: '45g',
       },
       {
-        id: "4",
-        content: "62g",
+        id: '4',
+        content: '62g',
       },
       {
-        id: "5",
-        content: "46g",
+        id: '5',
+        content: '46g',
       },
     ]}
     isExpanded={true}
@@ -83,7 +83,7 @@ export const expanded = () => (
 );
 
 expanded.story = {
-  name: "Expanded",
+  name: 'Expanded',
 };
 
 export const withToggleFunction = () => (
@@ -91,24 +91,24 @@ export const withToggleFunction = () => (
     id="1"
     cells={[
       {
-        id: "1",
-        content: "🍔 Bacon Smokehouse Burger",
+        id: '1',
+        content: '🍔 Bacon Smokehouse Burger',
       },
       {
-        id: "2",
-        content: "840",
+        id: '2',
+        content: '840',
       },
       {
-        id: "3",
-        content: "45g",
+        id: '3',
+        content: '45g',
       },
       {
-        id: "4",
-        content: "62g",
+        id: '4',
+        content: '62g',
       },
       {
-        id: "5",
-        content: "46g",
+        id: '5',
+        content: '46g',
       },
     ]}
     isExpanded={false}
@@ -125,5 +125,5 @@ export const withToggleFunction = () => (
 );
 
 withToggleFunction.story = {
-  name: "With toggle function",
+  name: 'With toggle function',
 };

package/__flow__/TableRowAccordion/index.test.js

@@ -1,31 +1,31 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import TableRowAccordion from "./";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import TableRowAccordion from './';
 
-describe("TableRowAccordion", () => {
+describe('TableRowAccordion', () => {
   const props = {
-    id: "bacon_smokehouse_burger_row",
+    id: 'bacon_smokehouse_burger_row',
     cells: [
       {
-        id: "cell_1",
-        content: "🍔 Bacon Smokehouse Burger",
+        id: 'cell_1',
+        content: '🍔 Bacon Smokehouse Burger',
       },
       {
-        id: "cell_2",
-        content: "840",
+        id: 'cell_2',
+        content: '840',
       },
       {
-        id: "cell_3",
-        content: "45g",
+        id: 'cell_3',
+        content: '45g',
       },
       {
-        id: "cell_4",
-        content: "62g",
+        id: 'cell_4',
+        content: '62g',
       },
       {
-        id: "cell_5",
-        content: "46g",
+        id: 'cell_5',
+        content: '46g',
       },
     ],
     detail: (
@@ -38,47 +38,45 @@ describe("TableRowAccordion", () => {
     onToggle: () => {},
   };
 
-  it("should render the table cells RTL", () => {
-    const { getAllByDataQaLabel } = render(
+  it('should render the table cells RTL', () => {
+    const {getAllByDataQaLabel} = render(
       <table>
         <TableRowAccordion {...props} />
       </table>
     );
     // we should get back a length that is one greater than length of cells we pass due to the addition of the trigger cell and detail cell
-    expect(getAllByDataQaLabel({ "table-cell": "" })).toBeTruthy();
-    expect(getAllByDataQaLabel({ "table-cell": "" }).length).toEqual(
+    expect(getAllByDataQaLabel({'table-cell': ''})).toBeTruthy();
+    expect(getAllByDataQaLabel({'table-cell': ''}).length).toEqual(
       props.cells.length + 2
     );
   });
 
-  it("should render the detail section closed by default", () => {
-    const { getAllByDataQaLabel } = render(
+  it('should render the detail section closed by default', () => {
+    const {getAllByDataQaLabel} = render(
       <table>
         <TableRowAccordion {...props} />
       </table>
     );
-    expect(
-      getAllByDataQaLabel({ "table-row-accordion": "false" })
-    ).toBeTruthy();
+    expect(getAllByDataQaLabel({'table-row-accordion': 'false'})).toBeTruthy();
   });
 
-  it("should render the detail section open when the isExpanded prop is set to true", () => {
-    const { getAllByDataQaLabel } = render(
+  it('should render the detail section open when the isExpanded prop is set to true', () => {
+    const {getAllByDataQaLabel} = render(
       <table>
         <TableRowAccordion {...props} isExpanded={true} />
       </table>
     );
-    expect(getAllByDataQaLabel({ "table-row-accordion": "true" })).toBeTruthy();
+    expect(getAllByDataQaLabel({'table-row-accordion': 'true'})).toBeTruthy();
   });
 
-  it("the onToggle method should return the rows id when clicked", () => {
+  it('the onToggle method should return the rows id when clicked', () => {
     const callback = jest.fn();
-    const { getByRole } = render(
+    const {getByRole} = render(
       <table>
         <TableRowAccordion {...props} onToggle={callback} />
       </table>
     );
-    fireEvent.click(getByRole("button"));
+    fireEvent.click(getByRole('button'));
     expect(callback).toBeCalledWith(props.id);
   });
 });

package/__flow__/TableRowAccordion/styles.js

@@ -1,18 +1,22 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.tbody`
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.tbody`
   border-bottom: 1px solid
     ${(props) => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;
 
-// eslint-disable-next-line prettier/prettier
-export const Detail: StyledComponent<{ isExpanded: boolean }, TypeTheme, *> = styled.tr`
+// eslint-disable-next-line flowtype/generic-spacing
+export const Detail: StyledComponent<
+  {isExpanded: boolean},
+  TypeTheme,
+  *
+> = styled.tr`
   display: none;
 
   ${(props) =>
@@ -22,7 +26,7 @@ export const Detail: StyledComponent<{ isExpanded: boolean }, TypeTheme, *> = st
     `}
 `;
 
-export const Trigger: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+export const Trigger: StyledComponent<{...}, TypeTheme, *> = styled.div`
   cursor: pointer;
 `;
 

package/__flow__/Tabs/index.js

@@ -1,8 +1,8 @@
 // @flow strict-local
-import * as React from "react";
-import Container, { TabItem, TabButton } from "./styles";
+import * as React from 'react';
+import Container, {TabItem, TabButton} from './styles';
 
-type TypeTabButtonRef = { current: null | React.ElementRef<"button"> };
+type TypeTabButtonRef = {current: null | React.ElementRef<'button'>};
 
 type TypeTabButtonContext = $Shape<{
   onActivate: (string) => void,
@@ -25,7 +25,7 @@ class TabItemButton extends React.Component<TypeTabButtonsProps, {}> {
   static contextType = TabButtonContext;
   context: TypeTabButtonContext;
 
-  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<"button">>();
+  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<'button'>>();
 
   componentDidMount() {
     this.context.onTabMount(this.props.id, this.buttonRef);
@@ -42,8 +42,8 @@ class TabItemButton extends React.Component<TypeTabButtonsProps, {}> {
   }
 
   render() {
-    const { children, id, ...rest } = this.props;
-    const { selectedId, onActivate, fullWidth } = this.context;
+    const {children, id, ...rest} = this.props;
+    const {selectedId, onActivate, fullWidth} = this.context;
     const isSelected = selectedId === id;
 
     return (
@@ -72,7 +72,7 @@ export type TypeTabsProps = {
   onSelect: (string) => void,
   /** Whether or not the tabs should stretch to fill the width of their container */
   fullWidth?: boolean,
-  qa?: { [string]: string },
+  qa?: {[string]: string},
   /** ID of the selected tab */
   selectedId: string,
 };
@@ -83,7 +83,7 @@ export type TypeTabsProps = {
 export default class Tabs extends React.Component<TypeTabsProps, {}> {
   static Button = TabItemButton;
 
-  buttonRefs: { [string]: ?TypeTabButtonRef } = {};
+  buttonRefs: {[string]: ?TypeTabButtonRef} = {};
   tabList: string[] = [];
 
   getSelectedId = () => this.props.selectedId;
@@ -122,7 +122,7 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
       buttonRef.current.focus();
   };
 
-  keyHandler = ({ keyCode }: SyntheticKeyboardEvent<HTMLUListElement>) => {
+  keyHandler = ({keyCode}: SyntheticKeyboardEvent<HTMLUListElement>) => {
     switch (keyCode) {
       // left arrow
       case 37:
@@ -154,11 +154,11 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
   };
 
   render() {
-    const { children, qa, ...rest } = this.props;
+    const {children, qa, ...rest} = this.props;
 
     return (
       // $FlowIssue - upgrade v0.112.0
-      <Container data-qa-tabs={""} onKeyUp={this.keyHandler} {...qa} {...rest}>
+      <Container data-qa-tabs={''} onKeyUp={this.keyHandler} {...qa} {...rest}>
         <TabButtonContext.Provider
           value={{
             selectedId: this.getSelectedId(),