@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Tabs/index.stories.js

@@ -1,23 +1,26 @@
 // @flow
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-import Component from "@reach/component-component";
-import Tabs from "./";
-import Icon from "../Icon";
-import Text from "../Text";
-import Button from "../Button";
+import React from 'react';
+import Component from '@reach/component-component';
+import Tabs, {type TypeTabsProps} from './';
+import Icon from '../Icon';
+import Text from '../Text';
+import Button from '../Button';
 
 export default {
-  title: "Tabs",
+  title: 'Components/Tabs',
+  component: Tabs,
+  args: {
+    fullWidth: false,
+  },
 };
 
-export const defaultStory = () => (
-  <Component initialState={{ selected: "notifications" }}>
-    {({ setState, state }) => (
+export const defaultStory = (args: TypeTabsProps) => (
+  <Component initialState={{selected: 'notifications'}}>
+    {({setState, state}) => (
       <Tabs
         selectedId={state.selected}
-        onSelect={(selected) => setState({ selected })}
-        fullWidth={boolean("fullWidth", false)}
+        onSelect={(selected) => setState({selected})}
+        fullWidth={args.fullWidth}
       >
         <Tabs.Button id="notifications">
           <Icon name="notifications" mr="12px" />
@@ -37,59 +40,30 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const fullWidth = () => (
-  <Component initialState={{ selected: "notifications" }}>
-    {({ setState, state }) => (
-      <Tabs
-        selectedId={state.selected}
-        onSelect={(selected) => setState({ selected })}
-        fullWidth={boolean("fullWidth", true)}
-      >
-        <Tabs.Button id="notifications">
-          <Icon name="notifications" mr="12px" />
-          <Text size="300" weight="600">
-            Notifications
-          </Text>
-        </Tabs.Button>
-        <Tabs.Button id="issues">
-          <Icon name="triangle-nofill" mr="12px" />
-          <Text size="300" weight="600">
-            Issues
-          </Text>
-        </Tabs.Button>
-      </Tabs>
-    )}
-  </Component>
-);
-
-fullWidth.story = {
-  name: "Full Width",
-};
-
-export const removeATab = () => (
+export const removeATab = (args: TypeTabsProps) => (
   <Component
     initialState={{
-      selected: "notifications",
+      selected: 'notifications',
       tabs: [
-        { id: "notifications", text: "Notifications", icon: "notifications" },
-        { id: "issues", text: "Issues", icon: "triangle-nofill" },
-        { id: "fun", text: "Fun Tab", icon: "twitter" },
-        { id: "drafts", text: "Drafts", icon: "drafts" },
+        {id: 'notifications', text: 'Notifications', icon: 'notifications'},
+        {id: 'issues', text: 'Issues', icon: 'triangle-nofill'},
+        {id: 'fun', text: 'Fun Tab', icon: 'twitter'},
+        {id: 'drafts', text: 'Drafts', icon: 'drafts'},
       ],
     }}
   >
-    {({ setState, state }) => (
+    {({setState, state}) => (
       <React.Fragment>
-        <Button onClick={() => setState({ tabs: state.tabs.slice(1) })}>
+        <Button onClick={() => setState({tabs: state.tabs.slice(1)})}>
           Remove a tab <Icon name="x" />
         </Button>
         <Tabs
           selectedId={state.selected}
-          onSelect={(selected) => setState({ selected })}
-          fullWidth={boolean("fullWidth", false)}
+          onSelect={(selected) => setState({selected})}
+          fullWidth={args.fullWidth}
         >
           {state.tabs.map((tab) => (
             <Tabs.Button key={tab.id} id={tab.id}>
@@ -106,5 +80,5 @@ export const removeATab = () => (
 );
 
 removeATab.story = {
-  name: "Remove a tab",
+  name: 'Remove a tab',
 };

package/__flow__/Tabs/index.test.js

@@ -1,27 +1,27 @@
 // @flow
-import * as React from "react";
-import "jest-styled-components";
-import Tabs from "./";
-import Box from "../Box";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Component from "@reach/component-component";
-
-const leftArrowKey = { key: "ArrowLeft", code: 37, keyCode: 37 };
-const rightArrowKey = { key: "ArrowRight", code: 39, keyCode: 39 };
+import * as React from 'react';
+import 'jest-styled-components';
+import Tabs from './';
+import Box from '../Box';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Component from '@reach/component-component';
+
+const leftArrowKey = {key: 'ArrowLeft', code: 37, keyCode: 37};
+const rightArrowKey = {key: 'ArrowRight', code: 39, keyCode: 39};
 const mapTabButton = (button) => (
   <Tabs.Button key={button.id} id={button.id}>
     {button.text}
   </Tabs.Button>
 );
 
-const StatefulTabs = ({ children, selectedId = "1", onSelect = jest.fn() }) => (
-  <Component initialState={{ selectedId }}>
-    {({ state, setState }) => (
+const StatefulTabs = ({children, selectedId = '1', onSelect = jest.fn()}) => (
+  <Component initialState={{selectedId}}>
+    {({state, setState}) => (
       <Tabs
         selectedId={state.selectedId}
         onSelect={(id) => {
           onSelect(id);
-          setState({ selectedId: id });
+          setState({selectedId: id});
         }}
       >
         {children}
@@ -30,9 +30,9 @@ const StatefulTabs = ({ children, selectedId = "1", onSelect = jest.fn() }) => (
   </Component>
 );
 
-describe("Tabs", () => {
-  it("should render selected tab", () => {
-    const { getByText } = render(
+describe('Tabs', () => {
+  it('should render selected tab', () => {
+    const {getByText} = render(
       <StatefulTabs>
         <Tabs.Button id="1">First</Tabs.Button>
         <Tabs.Button id="2">Second</Tabs.Button>
@@ -41,12 +41,12 @@ describe("Tabs", () => {
     const firstTab = getByText(/first/i);
     const secondTab = getByText(/second/i);
 
-    expect(firstTab).toHaveAttribute("tabindex", "0");
-    expect(secondTab).toHaveAttribute("tabindex", "-1");
+    expect(firstTab).toHaveAttribute('tabindex', '0');
+    expect(secondTab).toHaveAttribute('tabindex', '-1');
   });
 
   it("should work when tab buttons aren't direct children", () => {
-    const { getByText, getByDataQaLabel } = render(
+    const {getByText, getByDataQaLabel} = render(
       <StatefulTabs>
         <Box border="2px red solid">
           <Tabs.Button id="1">First</Tabs.Button>
@@ -56,7 +56,7 @@ describe("Tabs", () => {
         </Box>
       </StatefulTabs>
     );
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const secondTab = getByText(/second/i);
 
     fireEvent.keyUp(tabs, rightArrowKey);
@@ -64,82 +64,82 @@ describe("Tabs", () => {
     expect(secondTab).toHaveFocus();
   });
 
-  it("should handle left arrow key", () => {
+  it('should handle left arrow key', () => {
     const onSelect = jest.fn();
-    const { getByText, getByDataQaLabel } = render(
+    const {getByText, getByDataQaLabel} = render(
       <StatefulTabs onSelect={onSelect}>
         <Tabs.Button id="1">First</Tabs.Button>
         <Tabs.Button id="2">Second</Tabs.Button>
         <Tabs.Button id="3">Third</Tabs.Button>
       </StatefulTabs>
     );
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const secondTab = getByText(/second/i);
     const thirdTab = getByText(/third/i);
 
     fireEvent.keyUp(tabs, leftArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(onSelect).toHaveBeenCalledWith('3');
     expect(thirdTab).toHaveFocus();
 
     onSelect.mockReset();
 
     fireEvent.keyUp(tabs, leftArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(onSelect).toHaveBeenCalledWith('2');
     expect(secondTab).toHaveFocus();
   });
 
-  it("should handle right arrow key", () => {
+  it('should handle right arrow key', () => {
     const onSelect = jest.fn();
-    const { getByText, getByDataQaLabel } = render(
+    const {getByText, getByDataQaLabel} = render(
       <StatefulTabs onSelect={onSelect}>
         <Tabs.Button id="1">First</Tabs.Button>
         <Tabs.Button id="2">Second</Tabs.Button>
         <Tabs.Button id="3">Third</Tabs.Button>
       </StatefulTabs>
     );
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const firstTab = getByText(/first/i);
     const secondTab = getByText(/second/i);
     const thirdTab = getByText(/third/i);
 
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(onSelect).toHaveBeenCalledWith('2');
     expect(secondTab).toHaveFocus();
 
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(onSelect).toHaveBeenCalledWith('3');
     expect(thirdTab).toHaveFocus();
 
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("1");
+    expect(onSelect).toHaveBeenCalledWith('1');
     expect(firstTab).toHaveFocus();
   });
 
-  it("should handle dynamically adding tabs", () => {
+  it('should handle dynamically adding tabs', () => {
     const onSelect = jest.fn();
     const initialButtons = [
-      { id: "1", text: "First" },
-      { id: "2", text: "Second" },
+      {id: '1', text: 'First'},
+      {id: '2', text: 'Second'},
     ];
-    const addButton = initialButtons.concat({ id: "3", text: "Third" });
-    const { getByText, getByDataQaLabel, rerender } = render(
+    const addButton = initialButtons.concat({id: '3', text: 'Third'});
+    const {getByText, getByDataQaLabel, rerender} = render(
       <StatefulTabs onSelect={onSelect}>
         {initialButtons.map(mapTabButton)}
       </StatefulTabs>
     );
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const secondTab = getByText(/second/i);
 
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(onSelect).toHaveBeenCalledWith('2');
     expect(secondTab).toHaveFocus();
 
     rerender(
@@ -152,30 +152,30 @@ describe("Tabs", () => {
     fireEvent.keyUp(tabs, rightArrowKey);
     const thirdTab = getByText(/third/i);
 
-    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(onSelect).toHaveBeenCalledWith('3');
     expect(thirdTab).toHaveFocus();
   });
 
-  it("should handle dynamically removing tabs", () => {
+  it('should handle dynamically removing tabs', () => {
     const onSelect = jest.fn();
     const initialButtons = [
-      { id: "1", text: "First" },
-      { id: "2", text: "Second" },
-      { id: "3", text: "Third" },
+      {id: '1', text: 'First'},
+      {id: '2', text: 'Second'},
+      {id: '3', text: 'Third'},
     ];
     const removeButton = initialButtons.slice(1);
-    const { getByText, getByDataQaLabel, rerender } = render(
+    const {getByText, getByDataQaLabel, rerender} = render(
       <StatefulTabs onSelect={onSelect}>
         {initialButtons.map(mapTabButton)}
       </StatefulTabs>
     );
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const secondTab = getByText(/second/i);
     const thirdTab = getByText(/third/i);
 
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(onSelect).toHaveBeenCalledWith('2');
     expect(secondTab).toHaveFocus();
 
     rerender(
@@ -187,19 +187,19 @@ describe("Tabs", () => {
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(onSelect).toHaveBeenCalledWith('3');
     expect(thirdTab).toHaveFocus();
 
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(onSelect).toHaveBeenCalledWith('2');
     expect(secondTab).toHaveFocus();
   });
 
-  it("should handle dynamically changing tab ids", () => {
+  it('should handle dynamically changing tab ids', () => {
     const onSelect = jest.fn();
-    const { getByText, getByDataQaLabel, rerender } = render(
+    const {getByText, getByDataQaLabel, rerender} = render(
       <StatefulTabs onSelect={onSelect}>
         <Tabs.Button id="1">First</Tabs.Button>
         <Tabs.Button id="2">Second</Tabs.Button>
@@ -217,26 +217,26 @@ describe("Tabs", () => {
       </StatefulTabs>
     );
 
-    const tabs = getByDataQaLabel({ tabs: "" });
+    const tabs = getByDataQaLabel({tabs: ''});
     const secondTab = getByText(/second/i);
     const thirdTab = getByText(/third/i);
     const fourthTab = getByText(/fourth/i);
 
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("6");
+    expect(onSelect).toHaveBeenCalledWith('6');
     expect(secondTab).toHaveFocus();
 
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("5");
+    expect(onSelect).toHaveBeenCalledWith('5');
     expect(thirdTab).toHaveFocus();
 
     onSelect.mockReset();
     fireEvent.keyUp(tabs, rightArrowKey);
 
-    expect(onSelect).toHaveBeenCalledWith("4");
+    expect(onSelect).toHaveBeenCalledWith('4');
     expect(fourthTab).toHaveFocus();
   });
 });

package/__flow__/Tabs/styles.js

@@ -1,12 +1,12 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import Button from "../Button";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import Button from '../Button';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.ul`
-  display: ${(props) => (props.fullWidth ? "flex" : "inline-flex")};
+  display: ${(props) => (props.fullWidth ? 'flex' : 'inline-flex')};
   justify-content: space-between;
   margin: 0;
   padding: 0;
@@ -50,8 +50,7 @@ export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
   }
 `;
 
-// eslint-disable-next-line prettier/prettier
-export const TabButton: StyledComponent<{ ... }, TypeTheme, *> = styled(Button)`
+export const TabButton: StyledComponent<{...}, TypeTheme, *> = styled(Button)`
   padding: ${(props) => `${props.theme.space[350]} 0`};
   color: ${(props) => props.theme.colors.text.headline};
   width: 100%;

package/__flow__/Text/index.js

@@ -1,11 +1,11 @@
 //@flow
-import * as React from "react";
-import Container from "./styles";
-import styled from "styled-components";
+import * as React from 'react';
+import Container from './styles';
+import styled from 'styled-components';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-type TypeProps = {
+export type TypeProps = {
   /** Maps to the typeScale system prop, sets font size and line height using Seeds values */
   fontSize?:
     | 100
@@ -68,8 +68,8 @@ const SmallBodyCopy = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   ${(props) => props.theme.typography[200]}
 `;
 
-const Text = ({ fontSize, children, qa, ...rest }: TypeProps) => {
-  const qaText = typeof children === "string" ? children : undefined;
+const Text = ({fontSize, children, qa, ...rest}: TypeProps) => {
+  const qaText = typeof children === 'string' ? children : undefined;
 
   return (
     // $FlowIssue - upgrade v0.112.0
@@ -87,12 +87,12 @@ Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
 
-Text.Headline.displayName = "Text.Headline";
-Text.SubHeadline.displayName = "Text.SubHeadline";
-Text.SmallSubHeadline.displayName = "Text.SmallSubHeadline";
-Text.Byline.displayName = "Text.Byline";
-Text.SmallByline.displayName = "Text.SmallByline";
-Text.BodyCopy.displayName = "Text.BodyCopy";
-Text.SmallBodyCopy.displayName = "Text.SmallBodyCopy";
+Text.Headline.displayName = 'Text.Headline';
+Text.SubHeadline.displayName = 'Text.SubHeadline';
+Text.SmallSubHeadline.displayName = 'Text.SmallSubHeadline';
+Text.Byline.displayName = 'Text.Byline';
+Text.SmallByline.displayName = 'Text.SmallByline';
+Text.BodyCopy.displayName = 'Text.BodyCopy';
+Text.SmallBodyCopy.displayName = 'Text.SmallBodyCopy';
 
 export default Text;