@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Stack/index.js

@@ -1,15 +1,29 @@
 // @flow
-import * as React from "react";
-import { Children } from "react";
-import Box from "../Box";
-import { normalizeResponsiveProp } from "../utils/responsiveProps";
-import type { TypeResponsive } from "../types/system-props.flow";
-import type { TypeSpaceLiterals } from "./TypeSpaceLiterals";
-
-type TypeDirection = "vertical" | "horizontal";
-type TypeAlignment = "left" | "center" | "right" | "stretch";
-
-type TypeProps = {
+import * as React from 'react';
+import {Children} from 'react';
+import Box from '../Box';
+import {normalizeResponsiveProp} from '../utils/responsiveProps';
+import type {TypeResponsive} from '../types/system-props.flow';
+import type {TypeSpaceLiterals} from './TypeSpaceLiterals';
+import {
+  type TypeSystemCommonProps,
+  type TypeSystemFlexboxProps,
+  type TypeSystemPositionProps,
+  type TypeSystemLayoutProps,
+  type TypeSystemBorderProps,
+} from '../types/system-props.flow.js';
+
+type TypeDirection = 'vertical' | 'horizontal';
+type TypeAlignment = 'left' | 'center' | 'right' | 'stretch';
+
+type TypeSystemProps = {|
+  ...TypeSystemCommonProps,
+  ...TypeSystemFlexboxProps,
+  ...TypeSystemPositionProps,
+  ...TypeSystemLayoutProps,
+  ...TypeSystemBorderProps,
+|};
+export type TypeProps = {
   /** Amount of space between items in the stack */
   space?: TypeResponsive<TypeSpaceLiterals>,
   /** Alignment of the items in the stack (horizontal or vertical) */
@@ -17,28 +31,29 @@ type TypeProps = {
   /** Axis upon which the stack is laid out (left, center, right, or stretch) */
   direction?: TypeResponsive<TypeDirection>,
   children: React.Node,
+  ...TypeSystemProps,
 };
 
 const stackStyles: any = {
   horizontal: {
-    left: { alignItems: "center" },
-    center: { alignItems: "center", justifyContent: "center" },
-    right: { alignItems: "center", justifyContent: "flex-end" },
-    stretch: { alignItems: "center" },
+    left: {alignItems: 'center'},
+    center: {alignItems: 'center', justifyContent: 'center'},
+    right: {alignItems: 'center', justifyContent: 'flex-end'},
+    stretch: {alignItems: 'center'},
   },
   vertical: {
-    left: { flexDirection: "column", alignItems: "flex-start" },
-    center: { flexDirection: "column", alignItems: "center" },
-    right: { flexDirection: "column", alignItems: "flex-end" },
-    stretch: { flexDirection: "column", alignItems: "stretch" },
+    left: {flexDirection: 'column', alignItems: 'flex-start'},
+    center: {flexDirection: 'column', alignItems: 'center'},
+    right: {flexDirection: 'column', alignItems: 'flex-end'},
+    stretch: {flexDirection: 'column', alignItems: 'stretch'},
   },
 };
 
 const Stack = ({
   children,
   space = 300,
-  align = "left",
-  direction = "vertical",
+  align = 'left',
+  direction = 'vertical',
   ...rest
 }: TypeProps) => {
   const stackItems = Children.toArray(children);
@@ -47,7 +62,7 @@ const Stack = ({
   const responsiveDirection = normalizeResponsiveProp(direction);
   const responsiveSpace = normalizeResponsiveProp(space);
 
-  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
+  const initialValue = ['initial', 'initial', 'initial', 'initial', 'initial'];
 
   const styleProps = {
     alignItems: [...initialValue],
@@ -70,32 +85,27 @@ const Stack = ({
     if (currentDirection && currentAlignment) {
       const styles = stackStyles[currentDirection][currentAlignment];
       Object.keys(styleProps).forEach((key) => {
-        styleProps[key][i] = styles[key] || "initial";
+        styleProps[key][i] = styles[key] || 'initial';
       });
     }
 
     const flexBasis =
-      currentAlignment === "stretch" && currentDirection === "horizontal"
-        ? "100%"
+      currentAlignment === 'stretch' && currentDirection === 'horizontal'
+        ? '100%'
         : undefined;
     childFlexBasis[i] = flexBasis;
 
     const margin =
-      currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+      currentDirection === 'horizontal' ? 'marginLeft' : 'marginTop';
     const opposite =
-      currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+      currentDirection === 'horizontal' ? 'marginTop' : 'marginLeft';
 
     childMarginProps[margin][i] = currentSpace;
     childMarginProps[opposite][i] = 0;
   });
 
   return (
-    <Box
-      display="flex"
-      {...styleProps}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    <Box display="flex" {...styleProps} {...rest}>
       {stackItems.map((item, i) => (
         <Box
           flexBasis={childFlexBasis}

package/__flow__/Stack/index.stories.js

@@ -1,26 +1,33 @@
 // @flow
-import React from "react";
-import Stack from "./index";
-import Text from "../Text";
-import { select } from "@storybook/addon-knobs";
+import React from 'react';
+import Stack, {type TypeProps} from './index';
+import Text from '../Text';
+
+export default {
+  title: 'Components/Stack',
+  component: Stack,
+  argTypes: {
+    align: {
+      options: ['left', 'center', 'right', 'stretch'],
+      control: {type: 'select'},
+    },
+    direction: {
+      options: ['horizontal', 'vertical'],
+      control: {type: 'select'},
+    },
+  },
+  args: {
+    align: undefined,
+    direction: undefined,
+  },
+};
 
 const Item = (props) => (
   <Text as="div" color="text.body" bg="container.background.base" {...props} />
 );
 
-const alignmentOptions = ["left", "center", "right", "stretch"];
-const directionOptions = ["horizontal", "vertical"];
-
-export default {
-  title: "Stack",
-};
-
-export const DefaultStory = () => (
-  <Stack
-    align={select("Alignment", alignmentOptions, "left")}
-    bg="neutral.100"
-    p={400}
-  >
+export const DefaultStory = (args: TypeProps) => (
+  <Stack bg="neutral.100" p={400} {...args}>
     <Item>This</Item>
     <Item>is</Item>
     <Item>the</Item>
@@ -30,31 +37,11 @@ export const DefaultStory = () => (
 );
 
 DefaultStory.story = {
-  name: "Default (Vertical)",
+  name: 'Default (Vertical)',
 };
 
-export const Horizontal = () => (
-  <Stack
-    direction="horizontal"
-    align={select("Alignment", alignmentOptions, "left")}
-    bg="neutral.100"
-    p={400}
-  >
-    <Item>This</Item>
-    <Item>is</Item>
-    <Item>the</Item>
-    <Item>stack</Item>
-    <Item>component</Item>
-  </Stack>
-);
-
-export const Stretch = () => (
-  <Stack
-    direction={select("Direction", directionOptions, "vertical")}
-    align="stretch"
-    bg="neutral.100"
-    p={400}
-  >
+export const ResponsiveDirection = (args: TypeProps) => (
+  <Stack bg="neutral.100" p={400} {...args}>
     <Item>This</Item>
     <Item>is</Item>
     <Item>the</Item>
@@ -63,32 +50,16 @@ export const Stretch = () => (
   </Stack>
 );
 
-export const ResponsiveDirection = () => (
-  <Stack
-    direction={["vertical", "horizontal", "vertical"]}
-    align={select("Alignment", alignmentOptions, "left")}
-    bg="neutral.100"
-    p={400}
-  >
-    <Item>This</Item>
-    <Item>is</Item>
-    <Item>the</Item>
-    <Item>stack</Item>
-    <Item>component</Item>
-  </Stack>
-);
+ResponsiveDirection.args = {
+  direction: ['vertical', 'horizontal', 'vertical'],
+};
 
 ResponsiveDirection.story = {
-  name: "Responsive direction",
+  name: 'Responsive direction',
 };
 
-export const ResponsiveAlignment = () => (
-  <Stack
-    direction={select("Direction", directionOptions, "horizontal")}
-    align={["left", "center", "stretch"]}
-    bg="neutral.100"
-    p={400}
-  >
+export const ResponsiveAlignment = (args: TypeProps) => (
+  <Stack bg="neutral.100" p={400} {...args}>
     <Item>This</Item>
     <Item>is</Item>
     <Item>the</Item>
@@ -97,37 +68,16 @@ export const ResponsiveAlignment = () => (
   </Stack>
 );
 
-ResponsiveAlignment.story = {
-  name: "Responsive alignment",
+ResponsiveAlignment.args = {
+  align: ['left', 'center', 'stretch'],
 };
 
-export const ResponsiveSpace = () => (
-  <Stack
-    direction={select("Direction", directionOptions, "vertical")}
-    align={select("Alignment", alignmentOptions, "left")}
-    space={[300, 450, 600]}
-    bg="neutral.100"
-    p={400}
-  >
-    <Item>This</Item>
-    <Item>is</Item>
-    <Item>the</Item>
-    <Item>stack</Item>
-    <Item>component</Item>
-  </Stack>
-);
-
-ResponsiveSpace.story = {
-  name: "Responsive space",
+ResponsiveAlignment.story = {
+  name: 'Responsive alignment',
 };
 
-export const NumberSpaceType = () => (
-  <Stack
-    direction={select("Direction", directionOptions, "vertical")}
-    align={select("Alignment", alignmentOptions, "left")}
-    bg="neutral.100"
-    p={400}
-  >
+export const ResponsiveSpace = (args: TypeProps) => (
+  <Stack space={[300, 450, 600]} bg="neutral.100" p={400} {...args}>
     <Item>This</Item>
     <Item>is</Item>
     <Item>the</Item>
@@ -136,6 +86,6 @@ export const NumberSpaceType = () => (
   </Stack>
 );
 
-NumberSpaceType.story = {
-  name: "Testing types",
+ResponsiveSpace.story = {
+  name: 'Responsive space',
 };

package/__flow__/Stack/index.test.js

@@ -1,12 +1,21 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import { DefaultStory } from "./index.stories";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Stack from './';
+import Text from '../Text';
 
-describe("Stack", () => {
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(<DefaultStory />);
+const Item = (props) => (
+  <Text as="div" color="text.body" bg="container.background.base" {...props} />
+);
+
+describe('Stack', () => {
+  it('should render properly', async () => {
+    const {container, runA11yCheck} = render(
+      <Stack>
+        <Item>Hello world!</Item>
+      </Stack>
+    );
     expect(container).toBeTruthy();
     await runA11yCheck();
   });

package/__flow__/Switch/index.js

@@ -1,14 +1,14 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
-import Icon from "../Icon";
-import { VisuallyHidden } from "../VisuallyHidden";
+import * as React from 'react';
+import Container from './styles';
+import Icon from '../Icon';
+import {VisuallyHidden} from '../VisuallyHidden';
 
 export type TypeProps = {
   onClick: (e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void,
   checked: boolean,
   /** Customizable object to pass in localized "On" and "Off" label text for screen readers {"on": ONTEXT, "off": OFFTEXT} */
-  a11yLabels: { on: string, off: string },
+  a11yLabels: {on: string, off: string},
   /** Disables interaction on component and applies disabled styles  */
   disabled: boolean,
   name?: string,
@@ -21,11 +21,11 @@ export type TypeProps = {
 export default class Switch extends React.Component<TypeProps> {
   static defaultProps = {
     disabled: false,
-    a11yLabels: { on: "on", off: "off" },
+    a11yLabels: {on: 'on', off: 'off'},
   };
 
   handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const { checked, onClick, disabled } = this.props;
+    const {checked, onClick, disabled} = this.props;
     if (!disabled) {
       onClick(e, !checked);
     }
@@ -49,7 +49,7 @@ export default class Switch extends React.Component<TypeProps> {
         aria-pressed={checked}
         disabled={disabled}
         onClick={this.handleClick}
-        data-qa-switch={name || ""}
+        data-qa-switch={name || ''}
         data-qa-switch-ischecked={checked === true}
         data-qa-switch-isdisabled={disabled === true}
         checked={checked}

package/__flow__/Switch/index.stories.js

@@ -1,9 +1,9 @@
 // @flow
-import React from "react";
-import Switch, { type TypeProps } from "./";
+import React from 'react';
+import Switch, {type TypeProps} from './';
 
 export default {
-  title: "Switch",
+  title: 'Components/Form Elements/Switch',
   component: Switch,
 };
 
@@ -27,7 +27,7 @@ DisabledOn.args = {
 };
 
 DisabledOn.story = {
-  name: "Disabled/On",
+  name: 'Disabled/On',
 };
 
 export const DisabledOff = (args: TypeProps) => <Switch {...args} />;
@@ -38,5 +38,5 @@ DisabledOff.args = {
 };
 
 DisabledOff.story = {
-  name: "Disabled/Off",
+  name: 'Disabled/Off',
 };

package/__flow__/Switch/index.test.js

@@ -1,48 +1,44 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Switch from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Switch from './';
 
-describe("Switch", () => {
-  it("should be unchecked", () => {
-    const { getByText } = render(
-      <Switch onClick={jest.fn()} checked={false} />
-    );
-    expect(getByText("off")).toBeTruthy();
+describe('Switch', () => {
+  it('should be unchecked', () => {
+    const {getByText} = render(<Switch onClick={jest.fn()} checked={false} />);
+    expect(getByText('off')).toBeTruthy();
   });
-  it("should be checked", () => {
-    const { getByText } = render(<Switch onClick={jest.fn()} checked={true} />);
-    expect(getByText("on")).toBeTruthy();
+  it('should be checked', () => {
+    const {getByText} = render(<Switch onClick={jest.fn()} checked={true} />);
+    expect(getByText('on')).toBeTruthy();
   });
-  it("should be disabled", () => {
-    const { getByText } = render(
+  it('should be disabled', () => {
+    const {getByText} = render(
       <Switch disabled={true} onClick={jest.fn()} checked={false} />
     );
-    expect(getByText("off").parentElement.disabled).toEqual(true);
+    expect(getByText('off').parentElement.disabled).toEqual(true);
   });
-  it("should be disabled and checked", () => {
-    const { getByText } = render(
+  it('should be disabled and checked', () => {
+    const {getByText} = render(
       <Switch checked={true} disabled={true} onClick={jest.fn()} />
     );
-    expect(getByText("on")).toBeTruthy();
-    expect(getByText("on").parentElement.disabled).toEqual(true);
+    expect(getByText('on')).toBeTruthy();
+    expect(getByText('on').parentElement.disabled).toEqual(true);
   });
-  it("passing in custom `a11yLabels` object change button text to customOffTxt", () => {
-    const { getByText, queryByText } = render(
+  it('passing in custom `a11yLabels` object change button text to customOffTxt', () => {
+    const {getByText, queryByText} = render(
       <Switch
         checked={false}
-        a11yLabels={{ on: "on", off: "customOffTxt" }}
+        a11yLabels={{on: 'on', off: 'customOffTxt'}}
         onClick={jest.fn()}
       />
     );
-    expect(getByText("customOffTxt")).toBeTruthy();
-    expect(queryByText("off")).toBeNull();
+    expect(getByText('customOffTxt')).toBeTruthy();
+    expect(queryByText('off')).toBeNull();
   });
   it("not passing in custom `a11yLabels` object should button text set to 'off'", () => {
-    const { getByText } = render(
-      <Switch checked={false} onClick={jest.fn()} />
-    );
-    expect(getByText("off")).toBeTruthy();
+    const {getByText} = render(<Switch checked={false} onClick={jest.fn()} />);
+    expect(getByText('off')).toBeTruthy();
   });
 });

package/__flow__/Switch/styles.js

@@ -1,13 +1,17 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
-import Icon from "../Icon/styles";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing} from '../utils/mixins';
+import Icon from '../Icon/styles';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-// eslint-disable-next-line prettier/prettier
-const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeTheme, *> = styled.button`
+// eslint-disable-next-line flowtype/generic-spacing
+const Container: StyledComponent<
+  {checked: boolean, disabled: boolean},
+  TypeTheme,
+  *
+> = styled.button`
   position: relative;
   display: inline-block;
   width: 36px;
@@ -36,7 +40,7 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
     background-color: ${(props) => props.theme.colors.icon.base};
     opacity: 0.64;
     border-radius: 50%;
-    content: "";
+    content: '';
     transition: transform ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_inout};
     transform: translate(4px, -50%);
@@ -90,7 +94,7 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
       opacity: 0.4;
       cursor: not-allowed;
 
-      &[aria-pressed="true"] {
+      &[aria-pressed='true'] {
         &:hover,
         &:focus {
           background-color: ${(props) =>

package/__flow__/Table/index.js

@@ -1,12 +1,12 @@
 // @flow
-import * as React from "react";
-import TableCell, { type TypeTableCell } from "../TableCell";
-import TableHeaderCell from "../TableHeaderCell";
+import * as React from 'react';
+import TableCell, {type TypeTableCell} from '../TableCell';
+import TableHeaderCell from '../TableHeaderCell';
 import type {
   TypeTableHeaderCell,
   TypeEnumSortDirections,
-} from "../TableHeaderCell";
-import Container from "./styles";
+} from '../TableHeaderCell';
+import Container from './styles';
 
 export type TypeTableRow = {|
   /** Table Row Id */
@@ -37,7 +37,7 @@ type TypeProps = {
 
 const renderTableRow = (row: TypeTableRow) => {
   return (
-    <tbody key={row.id} data-qa-table-row={""}>
+    <tbody key={row.id} data-qa-table-row={''}>
       <tr>
         {row.cells.map((td) => {
           return <TableCell {...td} key={td.id} />;
@@ -62,16 +62,16 @@ export const Table = ({
 }: TypeProps) => {
   if (children) {
     return (
-      <Container {...rest} data-qa-table={""}>
+      <Container {...rest} data-qa-table={''}>
         {children}
       </Container>
     );
   }
 
   return (
-    <Container {...rest} data-qa-table={""}>
+    <Container {...rest} data-qa-table={''}>
       {head.length > 0 && (
-        <thead data-qa-table-header={""}>
+        <thead data-qa-table-header={''}>
           <tr>
             {head.map((th) => {
               return (
@@ -98,15 +98,15 @@ type TypePassthroughProps = {
   children: React.Node,
 };
 
-export const TableHead = ({ children, ...props }: TypePassthroughProps) => (
+export const TableHead = ({children, ...props}: TypePassthroughProps) => (
   <thead {...props}>{children}</thead>
 );
 
-export const TableBody = ({ children, ...props }: TypePassthroughProps) => (
+export const TableBody = ({children, ...props}: TypePassthroughProps) => (
   <tbody {...props}>{children}</tbody>
 );
 
-export const TableRow = ({ children, ...props }: TypePassthroughProps) => (
+export const TableRow = ({children, ...props}: TypePassthroughProps) => (
   <tr {...props}>{children}</tr>
 );
 
@@ -116,10 +116,10 @@ Table.TableRow = TableRow;
 Table.HeaderCell = TableHeaderCell;
 Table.Cell = TableCell;
 
-Table.TableHead.displayName = "Table.TableHead";
-Table.TableBody.displayName = "Table.TableBody";
-Table.TableRow.displayName = "Table.TableRow";
-Table.HeaderCell.displayName = "Table.HeaderCell";
-Table.Cell.displayName = "Table.Cell";
+Table.TableHead.displayName = 'Table.TableHead';
+Table.TableBody.displayName = 'Table.TableBody';
+Table.TableRow.displayName = 'Table.TableRow';
+Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Cell.displayName = 'Table.Cell';
 
 export default Table;