@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Box/index.stories.js

@@ -1,54 +1,52 @@
 // @flow
-import React, { useRef } from "react";
-import { css } from "styled-components";
-import { text } from "@storybook/addon-knobs";
-import Box from "./index";
-import useMeasure from "use-measure";
-import theme from "../themes/light/theme";
+import React, {useRef} from 'react';
+import {css} from 'styled-components';
+import Box, {type TypeBoxProps} from './index';
+import useMeasure from 'use-measure';
+import theme from '../themes/light/theme';
 
 export default {
-  title: "Box",
+  title: 'Components/Box',
+  component: Box,
 };
 
-export const example = () => (
-  <Box
-    height={text("height", "200px")}
-    bg={text("bg", "neutral.100")}
-    display={text("display", "flex")}
-    alignItems={text("alignItems", "center")}
-    justifyContent={text("justifyContent", "center")}
-    flexGrow="1"
-  >
+export const example = (args: TypeBoxProps) => (
+  <Box {...args} flexGrow="1">
     This is a box.
   </Box>
 );
 
+example.args = {
+  height: '200px',
+  bg: 'neutral.100',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
 example.story = {
-  name: "Example",
+  name: 'Example',
 };
 
-export const Responsive = () => {
+export const Responsive = (args: TypeBoxProps) => {
   const ref = useRef();
-  const { width } = useMeasure(ref);
+  const {width} = useMeasure(ref);
 
   return (
     <React.Fragment>
       <Box
+        {...args}
         ref={ref}
         mb={400}
-        height={text("height", "200px")}
-        display={text("display", "flex")}
-        alignItems={text("alignItems", "center")}
-        justifyContent={text("justifyContent", "center")}
         bg={[
-          "neutral.100",
-          "blue.200",
-          "green.200",
-          "yellow.200",
-          "orange.200",
+          'neutral.100',
+          'blue.200',
+          'green.200',
+          'yellow.200',
+          'orange.200',
         ]}
       >
-        {width + "px"}
+        {width + 'px'}
       </Box>
 
       {theme.breakpoints.map((width) => (
@@ -62,7 +60,7 @@ export const Responsive = () => {
           position="relative"
           css={css`
             &:before {
-              content: "";
+              content: '';
               position: absolute;
               left: 0;
               top: 0;
@@ -72,7 +70,7 @@ export const Responsive = () => {
             }
 
             &:after {
-              content: "";
+              content: '';
               position: absolute;
               right: 0;
               top: 0;
@@ -90,29 +88,19 @@ export const Responsive = () => {
   );
 };
 
+Responsive.args = {
+  height: '200px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
 Responsive.story = {
-  name: "Responsive example",
+  name: 'Responsive example',
 };
 
-export const Grid = () => (
-  <Box
-    display="grid"
-    gridArea={text("gridArea", undefined)}
-    gridAutoColumns={text("gridAutoColumns", undefined)}
-    gridAutoFlow={text("gridAutoFlow", undefined)}
-    gridAutoRows={text("gridAutoRows", undefined)}
-    gridColumn={text("gridColumn", undefined)}
-    gridColumnGap={text("gridColumnGap", undefined)}
-    gridGap={text("gridGap", 400)}
-    gridRow={text("gridRow", undefined)}
-    gridRowGap={text("gridRowGap", undefined)}
-    gridTemplateAreas={text("gridTemplateAreas", undefined)}
-    gridTemplateColumns={text(
-      "gridTemplateColumns",
-      "repeat(auto-fit, minmax(250px, 1fr))"
-    )}
-    gridTemplateRows={text("gridTemplateRows", undefined)}
-  >
+export const Grid = (args: TypeBoxProps) => (
+  <Box display="grid" {...args}>
     {new Array(25).fill(null).map((_, i) => (
       <Box
         display="flex"
@@ -126,3 +114,22 @@ export const Grid = () => (
     ))}
   </Box>
 );
+
+Grid.args = {
+  gridArea: undefined,
+  gridAutoColumns: undefined,
+  gridAutoFlow: undefined,
+  gridAutoRows: undefined,
+  gridColumn: undefined,
+  gridColumnGap: undefined,
+  gridGap: 400,
+  gridRow: undefined,
+  gridRowGap: undefined,
+  gridTemplateAreas: undefined,
+  gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+  gridTemplateRows: undefined,
+};
+
+Grid.story = {
+  name: 'Grid example',
+};

package/__flow__/Box/index.test.js

@@ -1,12 +1,12 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Box from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Box from './';
 
-describe("Box", () => {
-  it("should render properly", () => {
-    const { getByText } = render(<Box>Test...</Box>);
+describe('Box', () => {
+  it('should render properly', () => {
+    const {getByText} = render(<Box>Test...</Box>);
 
-    expect(getByText("Test...")).toBeTruthy();
+    expect(getByText('Test...')).toBeTruthy();
   });
 });

package/__flow__/Box/styles.js

@@ -1,5 +1,5 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
+import styled, {type StyledComponent} from 'styled-components';
 import {
   COMMON,
   BORDER,
@@ -7,10 +7,10 @@ import {
   POSITION,
   FLEXBOX,
   GRID,
-} from "../utils/system-props";
+} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
-import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+import type {TypeTheme} from '../types/theme.flow';
+import type {TypeStyledComponentsCommonProps} from '../types/styled-components.flow';
 import type {
   TypeSystemCommonProps,
   TypeSystemBorderProps,
@@ -18,7 +18,7 @@ import type {
   TypeSystemPositionProps,
   TypeSystemFlexboxProps,
   TypeSystemGridProps,
-} from "../types/system-props.flow";
+} from '../types/system-props.flow';
 
 export type TypeContainerProps = $ReadOnly<{|
   ...TypeStyledComponentsCommonProps,
@@ -33,7 +33,7 @@ export type TypeContainerProps = $ReadOnly<{|
 type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
 const Container: TypeBoxContainer = styled.div`
   box-sizing: border-box;
-  font-family: ${({ theme }) => theme.fontFamily};
+  font-family: ${({theme}) => theme.fontFamily};
 
   ${COMMON}
   ${BORDER}

package/__flow__/Breadcrumb/index.js

@@ -1,10 +1,10 @@
 // @flow
-import * as React from "react";
-import Link from "../Link";
-import Icon from "../Icon";
-import { MenuButton } from "../Menu";
-import { Children } from "react";
-import Nav from "./styles";
+import * as React from 'react';
+import Link from '../Link';
+import Icon from '../Icon';
+import {MenuButton} from '../Menu';
+import {Children} from 'react';
+import Nav from './styles';
 
 export type TypeBreadcrumbProps = {
   children: React.Node,
@@ -19,11 +19,7 @@ export type TypeBreadcrumbProps = {
 
 export type TypeBreadcrumbItemProps = React.ElementConfig<typeof Link>;
 
-const BreadcrumbItem = ({
-  children,
-  href,
-  ...rest
-}: TypeBreadcrumbItemProps) => {
+const BreadcrumbItem = ({children, href, ...rest}: TypeBreadcrumbItemProps) => {
   return (
     <li>
       <Link
@@ -71,7 +67,7 @@ const Breadcrumb = ({
         {listItems.map((item, i) =>
           React.cloneElement(item, {
             ...item.props,
-            "aria-current": listItems[i] === lastItem ? "page" : undefined,
+            'aria-current': listItems[i] === lastItem ? 'page' : undefined,
           })
         )}
       </ol>
@@ -81,6 +77,6 @@ const Breadcrumb = ({
 
 Breadcrumb.Item = BreadcrumbItem;
 
-Breadcrumb.Item.displayName = "Breadcrumb.Item";
+Breadcrumb.Item.displayName = 'Breadcrumb.Item';
 
 export default Breadcrumb;

package/__flow__/Breadcrumb/index.stories.js

@@ -1,20 +1,20 @@
 // @flow
-import React from "react";
-import Breadcrumb from "./index";
-import Menu from "../Menu";
+import React from 'react';
+import Breadcrumb from './index';
+import Menu from '../Menu';
 
 export default {
-  title: "Breadcrumb",
+  title: 'Components/Breadcrumb',
 };
 
 const path = [
-  "Asset Library",
-  "Coffee Shops",
-  "Midwest",
-  "Chicago",
-  "Humboldt Park",
-  "A really really really really really long coffee shop name",
-  "Dark Roast",
+  'Asset Library',
+  'Coffee Shops',
+  'Midwest',
+  'Chicago',
+  'Humboldt Park',
+  'A really really really really really long coffee shop name',
+  'Dark Roast',
 ];
 
 const pathMiddle = Math.round((path.length - 1) / 2);
@@ -64,13 +64,13 @@ export const overflowMenu = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 buttonStory.story = {
-  name: "With Button",
+  name: 'With Button',
 };
 
 overflowMenu.story = {
-  name: "With Overflow",
+  name: 'With Overflow',
 };

package/__flow__/Breadcrumb/index.test.js

@@ -1,62 +1,62 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Breadcrumb from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Breadcrumb from './';
 
-describe("Breadcrumb", () => {
-  it("should render breadcrumb items", async () => {
-    const { queryAllByText } = render(
+describe('Breadcrumb', () => {
+  it('should render breadcrumb items', async () => {
+    const {queryAllByText} = render(
       <Breadcrumb ariaLabel="breadcrumb">
         <Breadcrumb.Item href="/">Level One</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(queryAllByText("Level", { exact: false }).length).toEqual(3);
+    expect(queryAllByText('Level', {exact: false}).length).toEqual(3);
   });
 
-  it("should render breadcrumb items with a name", async () => {
-    const { getByText } = render(
+  it('should render breadcrumb items with a name', async () => {
+    const {getByText} = render(
       <Breadcrumb ariaLabel="breadcrumb">
         <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(getByText("Home")).toBeTruthy();
+    expect(getByText('Home')).toBeTruthy();
   });
 
-  it("should have an aria-label prop", async () => {
-    const { getByDataQaLabel } = render(
+  it('should have an aria-label prop', async () => {
+    const {getByDataQaLabel} = render(
       <Breadcrumb ariaLabel="breadcrumb">
         <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(getByDataQaLabel({ breadcrumb: "breadcrumb" })).toBeTruthy();
+    expect(getByDataQaLabel({breadcrumb: 'breadcrumb'})).toBeTruthy();
   });
 
-  it("should render breadcrumb items with an href", async () => {
-    const { getByText } = render(
+  it('should render breadcrumb items with an href', async () => {
+    const {getByText} = render(
       <Breadcrumb ariaLabel="breadcrumb">
         <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(getByText("Level Two")).toHaveAttribute("href", "/level-two");
+    expect(getByText('Level Two')).toHaveAttribute('href', '/level-two');
   });
 
-  it("should render the last breadcrumb item with an aria-current prop", async () => {
-    const { getByText } = render(
+  it('should render the last breadcrumb item with an aria-current prop', async () => {
+    const {getByText} = render(
       <Breadcrumb ariaLabel="breadcrumb">
         <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(getByText("Level Three")).toHaveAttribute("aria-current", "page");
+    expect(getByText('Level Three')).toHaveAttribute('aria-current', 'page');
   });
 });

package/__flow__/Breadcrumb/styles.js

@@ -1,9 +1,9 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
+import styled, {type StyledComponent} from 'styled-components';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
+const Nav: StyledComponent<{...}, TypeTheme, *> = styled.nav`
   ol {
     ${(props) => props.theme.typography[200]};
     margin: 0;
@@ -32,7 +32,7 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
   }
 
   ol > div + li::before {
-    content: "/";
+    content: '/';
     margin-right: ${(props) => props.theme.space[200]};
   }
 
@@ -43,7 +43,7 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
   }
 
   li:not(:last-child)::after {
-    content: "/";
+    content: '/';
     color: ${(props) => props.theme.colors.text.body};
     margin-left: ${(props) => props.theme.space[200]};
   }

package/__flow__/Button/index.js

@@ -1,25 +1,25 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
+import * as React from 'react';
+import Container from './styles';
 
 /**
  * @deprecated
  * Use "unstyled" appearance instead of "default"
  */
-type EnumDeprecatedAppearance = "default";
+type EnumDeprecatedAppearance = 'default';
 
 export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
-  size?: "large" | "default",
+  size?: 'large' | 'default',
   /** What the button looks like. "default" is deprecated in favor of "unstyled" */
   appearance?:
-    | "primary"
-    | "secondary"
-    | "pill"
-    | "destructive"
-    | "unstyled"
-    | "placeholder"
+    | 'primary'
+    | 'secondary'
+    | 'pill'
+    | 'destructive'
+    | 'unstyled'
+    | 'placeholder'
     | EnumDeprecatedAppearance,
   /** Set the button to display in its active state */
   active?: boolean,
@@ -29,7 +29,7 @@ export type TypeProps = {
   /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
   href?: string,
   /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<"button">,
+  innerRef?: React.Ref<'button'>,
   /** Action to perform when the button is clicked */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
   title?: string,
@@ -41,12 +41,12 @@ export type TypeProps = {
 
 const Button = ({
   href,
-  appearance = "unstyled",
+  appearance = 'unstyled',
   active = false,
   disabled,
   external,
   children,
-  size = "default",
+  size = 'default',
   innerRef,
   onClick,
   title,
@@ -57,15 +57,15 @@ const Button = ({
 }: TypeProps) => {
   if (!href && external) {
     console.warn(
-      "Warning: external prop cannot be set without a href declaration"
+      'Warning: external prop cannot be set without a href declaration'
     );
   }
 
   /** "default" is @deprecated in favor of "unstyled"  */
-  const appearanceCheck = appearance === "default" ? "unstyled" : appearance;
-  if (appearance === "default") {
+  const appearanceCheck = appearance === 'default' ? 'unstyled' : appearance;
+  if (appearance === 'default') {
     console.warn(
-      "Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead."
+      'Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead.'
     );
   }
 
@@ -74,17 +74,17 @@ const Button = ({
       title={title}
       active={active}
       href={href}
-      target={external ? "_blank" : undefined}
-      rel={external ? "noopener noreferrer" : undefined}
-      as={as || (href ? "a" : "button")}
-      type={href ? undefined : "button"}
+      target={external ? '_blank' : undefined}
+      rel={external ? 'noopener noreferrer' : undefined}
+      as={as || (href ? 'a' : 'button')}
+      type={href ? undefined : 'button'}
       aria-disabled={disabled ? disabled : undefined}
       disabled={disabled}
       buttonSize={size}
       appearance={appearanceCheck}
       ref={innerRef}
       onClick={onClick}
-      data-qa-button={title || ""}
+      data-qa-button={title || ''}
       data-qa-button-isdisabled={disabled === true}
       aria-label={ariaLabel}
       {...qa}
@@ -95,6 +95,6 @@ const Button = ({
   );
 };
 
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 export default Button;