@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Table/index.stories.js

@@ -1,52 +1,52 @@
 // @flow
-import React from "react";
-import Table from "./";
-import TableRowAccordion from "../TableRowAccordion";
-import { SORT_DIRECTIONS } from "../TableHeaderCell";
+import React from 'react';
+import Table from './';
+import TableRowAccordion from '../TableRowAccordion';
+import {SORT_DIRECTIONS} from '../TableHeaderCell';
 
 export default {
-  title: "Table",
+  title: 'Components/Table/Table',
 };
 
 export const defaultStory = () => (
   <Table
     head={[
-      { content: "Food Item", id: "1" },
-      { content: "Calories", id: "2", isSortable: true },
-      { content: "Total Fat: (69% DV*)", id: "3" },
-      { content: "Total Carbs: (21% DV*)", id: "4" },
-      { content: "Protein", id: "5" },
+      {content: 'Food Item', id: '1'},
+      {content: 'Calories', id: '2', isSortable: true},
+      {content: 'Total Fat: (69% DV*)', id: '3'},
+      {content: 'Total Carbs: (21% DV*)', id: '4'},
+      {content: 'Protein', id: '5'},
     ]}
     rows={[
       {
         cells: [
-          { content: "🍔 Bacon Smokehouse Burger", id: "1" },
-          { content: "840", id: "2" },
-          { content: "45g", id: "3" },
-          { content: "62g", id: "4" },
-          { content: "46g", id: "5" },
+          {content: '🍔 Bacon Smokehouse Burger', id: '1'},
+          {content: '840', id: '2'},
+          {content: '45g', id: '3'},
+          {content: '62g', id: '4'},
+          {content: '46g', id: '5'},
         ],
-        id: "1",
+        id: '1',
       },
       {
         cells: [
-          { content: "🍔 Big Mac", id: "1" },
-          { content: "540", id: "2" },
-          { content: "28g", id: "3" },
-          { content: "46g", id: "4" },
-          { content: "25g", id: "5" },
+          {content: '🍔 Big Mac', id: '1'},
+          {content: '540', id: '2'},
+          {content: '28g', id: '3'},
+          {content: '46g', id: '4'},
+          {content: '25g', id: '5'},
         ],
-        id: "2",
+        id: '2',
       },
     ]}
-    onSort={(e) => alert("Sort!")}
+    onSort={(e) => alert('Sort!')}
     sortDirection={SORT_DIRECTIONS.ASC}
     sortId="2"
   />
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const columnSpan = () => (
@@ -54,59 +54,59 @@ export const columnSpan = () => (
     head={[
       {
         colSpan: 2,
-        content: "Header",
-        id: "1",
+        content: 'Header',
+        id: '1',
       },
     ]}
     rows={[
       {
         cells: [
-          { content: "Column 1", id: "1" },
-          { content: "Column 2", id: "2" },
+          {content: 'Column 1', id: '1'},
+          {content: 'Column 2', id: '2'},
         ],
-        id: "1",
+        id: '1',
       },
       {
         cells: [
           {
             colSpan: 2,
-            content: "This is a footer for the table.",
-            id: "1",
+            content: 'This is a footer for the table.',
+            id: '1',
           },
         ],
-        id: "2",
+        id: '2',
       },
     ]}
   />
 );
 
 columnSpan.story = {
-  name: "Column span",
+  name: 'Column span',
 };
 
 export const columnWidth = () => (
   <Table
     head={[
       {
-        content: "Food Item",
-        id: "1",
+        content: 'Food Item',
+        id: '1',
         width: 200,
       },
       {
-        align: "center",
-        content: "Calories",
-        id: "2",
+        align: 'center',
+        content: 'Calories',
+        id: '2',
         isSortable: true,
         width: 100,
       },
       {
-        content: "Description",
-        id: "3",
+        content: 'Description',
+        id: '3',
       },
       {
-        align: "right",
-        content: "Protein",
-        id: "4",
+        align: 'right',
+        content: 'Protein',
+        id: '4',
         width: 100,
       },
     ]}
@@ -114,107 +114,107 @@ export const columnWidth = () => (
       {
         cells: [
           {
-            content: "🍔 Bacon Smokehouse Burger",
-            id: "1",
+            content: '🍔 Bacon Smokehouse Burger',
+            id: '1',
             width: 200,
           },
           {
-            align: "center",
-            content: "840",
-            id: "2",
+            align: 'center',
+            content: '840',
+            id: '2',
             width: 100,
           },
           {
             content:
-              "A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.",
-            id: "3",
+              'A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.',
+            id: '3',
           },
           {
-            align: "right",
-            content: "46g",
-            id: "4",
+            align: 'right',
+            content: '46g',
+            id: '4',
           },
         ],
-        id: "1",
+        id: '1',
       },
       {
         cells: [
           {
-            content: "🍔 Big Mac",
-            id: "1",
+            content: '🍔 Big Mac',
+            id: '1',
             width: 200,
           },
           {
-            align: "center",
-            content: "540",
-            id: "2",
+            align: 'center',
+            content: '540',
+            id: '2',
             width: 100,
           },
           {
             content:
-              "Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.",
-            id: "3",
+              'Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.',
+            id: '3',
           },
           {
-            align: "right",
-            content: "25g",
-            id: "4",
+            align: 'right',
+            content: '25g',
+            id: '4',
           },
         ],
-        id: "2",
+        id: '2',
       },
     ]}
   />
 );
 
 columnWidth.story = {
-  name: "Column width",
+  name: 'Column width',
 };
 
 export const customRowRendering = () => (
   <Table
     head={[
       {
-        id: "1",
-        content: "Food Item",
+        id: '1',
+        content: 'Food Item',
       },
       {
-        id: "2",
-        content: "Calories",
+        id: '2',
+        content: 'Calories',
         isSortable: true,
       },
       {
-        id: "3",
-        content: "Total Fat: (69% DV*)",
+        id: '3',
+        content: 'Total Fat: (69% DV*)',
       },
       {
-        id: "4",
-        content: "Total Carbs: (21% DV*)",
+        id: '4',
+        content: 'Total Carbs: (21% DV*)',
       },
       {
-        id: "5",
-        content: "Protein",
+        id: '5',
+        content: 'Protein',
       },
     ]}
     rows={[
       {
-        id: "baconsmokehouse",
+        id: 'baconsmokehouse',
         cells: [
-          { id: "1", content: "🍔 Bacon Smokehouse Burger" },
-          { id: "2", content: "840" },
-          { id: "3", content: "45g" },
-          { id: "4", content: "62g" },
-          { id: "5", content: "46g" },
+          {id: '1', content: '🍔 Bacon Smokehouse Burger'},
+          {id: '2', content: '840'},
+          {id: '3', content: '45g'},
+          {id: '4', content: '62g'},
+          {id: '5', content: '46g'},
         ],
       },
       {
-        id: "Big-Mac",
+        id: 'Big-Mac',
         cells: [
-          { id: "1", content: "🍔 Big Mac" },
-          { id: "2", content: "540" },
-          { id: "3", content: "28g" },
-          { id: "4", content: "46g" },
-          { id: "5", content: "25g" },
+          {id: '1', content: '🍔 Big Mac'},
+          {id: '2', content: '540'},
+          {id: '3', content: '28g'},
+          {id: '4', content: '46g'},
+          {id: '5', content: '25g'},
         ],
       },
     ]}
@@ -224,10 +224,10 @@ export const customRowRendering = () => (
           key={row.id}
           id={row.id}
           cells={row.cells}
-          isExpanded={row.id === "baconsmokehouse"}
+          isExpanded={row.id === 'baconsmokehouse'}
           onToggle={(id) => alert(`Toggled ID #${id}`)}
           detail={
-            row.id === "baconsmokehouse" ? (
+            row.id === 'baconsmokehouse' ? (
               <img
                 width="100%"
                 src="https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-baconsmokehouse.jpg"
@@ -248,21 +248,21 @@ export const customRowRendering = () => (
 );
 
 customRowRendering.story = {
-  name: "Custom row rendering",
+  name: 'Custom row rendering',
 };
 
 export const staticTable = () => {
-  const columns = ["Name", "Squad", "Favorite Color"];
+  const columns = ['Name', 'Squad', 'Favorite Color'];
   const rows = [
     {
-      name: "Mike R",
-      squad: "People and Community",
-      favoriteColor: "Green",
+      name: 'Mike R',
+      squad: 'People and Community',
+      favoriteColor: 'Green',
     },
     {
-      name: "Travis W",
-      squad: "Listening",
-      favoriteColor: "Blue",
+      name: 'Travis W',
+      squad: 'Listening',
+      favoriteColor: 'Blue',
     },
   ];
 
@@ -289,5 +289,5 @@ export const staticTable = () => {
 };
 
 staticTable.story = {
-  name: "Static Table",
+  name: 'Static Table',
 };

package/__flow__/Table/index.test.js

@@ -1,69 +1,69 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Table from "./";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Table from './';
 
-describe("The Table Component", () => {
-  it("renders table headers", () => {
-    const { getAllByDataQaLabel } = render(
+describe('The Table Component', () => {
+  it('renders table headers', () => {
+    const {getAllByDataQaLabel} = render(
       <Table
         head={[
           {
-            id: "food_item",
-            content: "Food Item",
+            id: 'food_item',
+            content: 'Food Item',
           },
           {
-            id: "calories",
-            content: "Calories",
+            id: 'calories',
+            content: 'Calories',
           },
         ]}
       />
     );
-    expect(getAllByDataQaLabel({ "table-header-cell": "" })).toBeTruthy();
-    expect(getAllByDataQaLabel({ "table-header-cell": "" }).length).toEqual(2);
+    expect(getAllByDataQaLabel({'table-header-cell': ''})).toBeTruthy();
+    expect(getAllByDataQaLabel({'table-header-cell': ''}).length).toEqual(2);
   });
 
-  it("renders table rows and cells", () => {
-    const { getAllByDataQaLabel } = render(
+  it('renders table rows and cells', () => {
+    const {getAllByDataQaLabel} = render(
       <Table
         rows={[
           {
-            id: "1",
+            id: '1',
             cells: [
               {
-                id: "1",
-                content: "Bacon Smokehouse Burger",
+                id: '1',
+                content: 'Bacon Smokehouse Burger',
               },
               {
-                id: "2",
-                content: "62g",
+                id: '2',
+                content: '62g',
               },
             ],
           },
         ]}
       />
     );
-    const allRows = getAllByDataQaLabel({ "table-row": "" });
-    const allCells = getAllByDataQaLabel({ "table-cell": "" });
+    const allRows = getAllByDataQaLabel({'table-row': ''});
+    const allCells = getAllByDataQaLabel({'table-cell': ''});
     expect(allRows).toBeTruthy();
     expect(allRows.length).toEqual(1);
     expect(allCells).toBeTruthy();
     expect(allCells.length).toEqual(2);
   });
 
-  it("allows for table headers to be sortable", () => {
+  it('allows for table headers to be sortable', () => {
     const callback = jest.fn();
-    const { getAllByDataQaLabel } = render(
+    const {getAllByDataQaLabel} = render(
       <Table
         head={[
           {
-            id: "food_item",
-            content: "Food Item",
+            id: 'food_item',
+            content: 'Food Item',
             isSortable: true,
           },
           {
-            id: "calories",
-            content: "Calories",
+            id: 'calories',
+            content: 'Calories',
           },
         ]}
         onSort={callback}
@@ -71,12 +71,12 @@ describe("The Table Component", () => {
         sortDirection="ASC"
       />
     );
-    fireEvent.click(getAllByDataQaLabel({ "table-header-cell": "" })[0]);
-    expect(callback).toBeCalledWith("food_item");
+    fireEvent.click(getAllByDataQaLabel({'table-header-cell': ''})[0]);
+    expect(callback).toBeCalledWith('food_item');
   });
 
-  it("renders the children if present", () => {
-    const { getByText } = render(
+  it('renders the children if present', () => {
+    const {getByText} = render(
       <Table>
         <tbody>
           <tr>
@@ -86,6 +86,6 @@ describe("The Table Component", () => {
       </Table>
     );
 
-    expect(getByText("Child")).toBeInTheDocument();
+    expect(getByText('Child')).toBeInTheDocument();
   });
 });

package/__flow__/Table/styles.js

@@ -1,10 +1,10 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import styled, {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.table`
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.table`
   width: 100%;
   border-collapse: collapse;
 

package/__flow__/TableCell/index.js

@@ -1,6 +1,7 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
+import * as React from 'react';
+import Container from './styles';
+import {type TypeSystemCommonProps} from '../types/system-props.flow.js';
 
 export type TypeTableCell = {
   /** Table Cell Id */
@@ -12,9 +13,10 @@ export type TypeTableCell = {
   /** Controls the width attribute (optional) */
   width?: number,
   /** Controls the CSS text-align property (optional) */
-  align?: "left" | "right" | "center" | "justify",
+  align?: 'left' | 'right' | 'center' | 'justify',
   /** Children to be rendered */
   children?: React.Node,
+  ...TypeSystemCommonProps,
 };
 
 /**
@@ -22,17 +24,16 @@ 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
         {...rest}
-        alignment={align || "left"}
+        alignment={align || 'left'}
         key={id}
         colSpan={colSpan}
         width={width}
-        data-qa-table-cell={""}
+        data-qa-table-cell={''}
       >
         {children || content}
       </Container>

package/__flow__/TableCell/index.stories.js

@@ -1,36 +1,33 @@
 // @flow
-import React from "react";
-import { number, text } from "@storybook/addon-knobs";
-
-import TableCell from "./";
-
+import React from 'react';
+import TableCell, {type TypeTableCell} from './';
 export default {
-  title: "TableCell",
+  title: 'Components/Table/TableCell',
+  component: TableCell,
+  args: {
+    content: '🍔 Bacon Smokehouse Burger',
+    id: 'bacon_smokehouse',
+  },
 };
 
-export const defaultStory = () => (
-  <TableCell
-    content={text("content", "🍔 Bacon Smokehouse Burger")}
-    id={text("id", "bacon_smokehouse")}
-    color="text.body"
-  />
+export const defaultStory = (args: TypeTableCell) => (
+  <TableCell color="text.body" {...args} />
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const additionalProps = () => (
-  <TableCell
-    content={text("content", "🍔 Bacon Smokehouse Burger")}
-    id={text("id", "bacon_smokehouse")}
-    width={number("width", 300)}
-    colSpan={number("colSpan", 2)}
-    align={text("align", "center")}
-    color="text.body"
-  />
+export const additionalProps = (args: TypeTableCell) => (
+  <TableCell color="text.body" {...args} />
 );
 
+additionalProps.args = {
+  width: 300,
+  colSpan: 2,
+  align: 'center',
+};
+
 additionalProps.story = {
-  name: "Additional props",
+  name: 'Additional props',
 };

package/__flow__/TableCell/index.test.js

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

package/__flow__/TableCell/styles.js

@@ -1,11 +1,10 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import styled, {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';
 
-// eslint-disable-next-line prettier/prettier
-const Container: StyledComponent<{ alignment: string }, TypeTheme, *> = styled.td`
+const Container: StyledComponent<{alignment: string}, TypeTheme, *> = styled.td`
   ${(props) => props.theme.typography[200]}
   font-weight: ${(props) => props.theme.fontWeights.normal};
   padding: ${(props) => props.theme.space[300]};