@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/Button/index.stories.js

@@ -1,72 +1,72 @@
 // @flow
-import React from "react";
-import Button, { type TypeProps } from "./index";
-import Icon from "../Icon";
-import Box from "../Box";
+import React from 'react';
+import Button, {type TypeProps} from './index';
+import Icon from '../Icon';
+import Box from '../Box';
 
 export default {
-  title: "Button",
+  title: 'Components/Button',
 };
 
 export const defaultStory = (args: TypeProps) => (
-  <Button {...args} onClick={() => alert("Testing...")}>
+  <Button {...args} onClick={() => alert('Testing...')}>
     Unstyled
   </Button>
 );
 
-defaultStory.args = { appearance: "unstyled" };
+defaultStory.args = {appearance: 'unstyled'};
 
 defaultStory.story = {
-  name: "Unstyled",
+  name: 'Unstyled',
 };
 
 export const primary = (args: TypeProps) => (
-  <Button {...args} onClick={() => alert("Testing...")}>
+  <Button {...args} onClick={() => alert('Testing...')}>
     Primary Button
   </Button>
 );
 
-primary.args = { appearance: "primary" };
+primary.args = {appearance: 'primary'};
 
 primary.story = {
-  name: "Primary",
+  name: 'Primary',
 };
 
 export const secondary = (args: TypeProps) => (
   <Button {...args}>Secondary Button</Button>
 );
 
-secondary.args = { appearance: "secondary" };
+secondary.args = {appearance: 'secondary'};
 
 secondary.story = {
-  name: "Secondary",
+  name: 'Secondary',
 };
 
 export const destructive = (args: TypeProps) => (
   <Button {...args}>Destructive Button</Button>
 );
 
-destructive.args = { appearance: "destructive" };
+destructive.args = {appearance: 'destructive'};
 destructive.story = {
-  name: "Destructive",
+  name: 'Destructive',
 };
 
 export const placeholder = (args: TypeProps) => (
   <Button {...args}>Placeholder Button</Button>
 );
 
-placeholder.args = { appearance: "placeholder" };
+placeholder.args = {appearance: 'placeholder'};
 placeholder.story = {
-  name: "Placeholder",
+  name: 'Placeholder',
 };
 
 export const largeButton = (args: TypeProps) => (
   <Button {...args}>Large Button</Button>
 );
-largeButton.args = { size: "large", appearance: "primary" };
+largeButton.args = {size: 'large', appearance: 'primary'};
 
 largeButton.story = {
-  name: "Large button",
+  name: 'Large button',
 };
 
 export const pillButton = (args: TypeProps) => (
@@ -77,9 +77,9 @@ export const pillButton = (args: TypeProps) => (
     </Button>
   </Box>
 );
-pillButton.args = { appearance: "pill" };
+pillButton.args = {appearance: 'pill'};
 pillButton.story = {
-  name: "Pill button",
+  name: 'Pill button',
 };
 
 export const pillIconOnlyButton = (args: TypeProps) => (
@@ -90,52 +90,52 @@ export const pillIconOnlyButton = (args: TypeProps) => (
   </Box>
 );
 
-pillIconOnlyButton.args = { appearance: "pill" };
+pillIconOnlyButton.args = {appearance: 'pill'};
 pillIconOnlyButton.story = {
-  name: "Pill icon only button",
+  name: 'Pill icon only button',
 };
 
 export const activeButton = (args: TypeProps) => (
   <Button {...args}>Active Button</Button>
 );
 
-activeButton.args = { appearance: "secondary", active: true };
+activeButton.args = {appearance: 'secondary', active: true};
 activeButton.story = {
-  name: "Active button",
+  name: 'Active button',
 };
 
 export const buttonAsALink = (args: TypeProps) => (
   <Button {...args}>Button using anchor element</Button>
 );
 buttonAsALink.args = {
-  appearance: "primary",
+  appearance: 'primary',
   external: true,
-  href: "http://sproutsocial.style",
+  href: 'http://sproutsocial.style',
 };
 buttonAsALink.story = {
-  name: "Button as a link",
+  name: 'Button as a link',
 };
 
 export const disabledButton = (args: TypeProps) => (
   <Button {...args}>This Button is disabled</Button>
 );
 disabledButton.args = {
-  appearance: "primary",
+  appearance: 'primary',
   disabled: true,
 };
 disabledButton.story = {
-  name: "Disabled button",
+  name: 'Disabled button',
 };
 
 export const fullWidthButton = (args: TypeProps) => (
   <Button {...args}>Full-Width Button</Button>
 );
 fullWidthButton.args = {
-  appearance: "primary",
+  appearance: 'primary',
   width: 1,
 };
 fullWidthButton.story = {
-  name: "Full width button",
+  name: 'Full width button',
 };
 
 export const withIcon = (args: TypeProps) => (
@@ -146,8 +146,8 @@ export const withIcon = (args: TypeProps) => (
 );
 
 withIcon.args = {
-  appearance: "secondary",
+  appearance: 'secondary',
 };
 withIcon.story = {
-  name: "With icon",
+  name: 'With icon',
 };

package/__flow__/Button/styles.js

@@ -1,11 +1,11 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
+import styled, {css, type StyledComponent} from 'styled-components';
 
-import { COMMON, LAYOUT } from "../utils/system-props";
-import { focusRing, disabled, pill } from "../utils/mixins";
-import Icon from "../Icon/styles";
+import {COMMON, LAYOUT} from '../utils/system-props';
+import {focusRing, disabled, pill} from '../utils/mixins';
+import Icon from '../Icon/styles';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   display: inline-block;
@@ -16,7 +16,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${(props) => props.theme.colors.button[props.appearance].border.base};
   border-radius: ${(props) => props.theme.radii[500]};
   border-style: ${(props) =>
-    props.appearance === "placeholder" ? "dashed" : "solid"};
+    props.appearance === 'placeholder' ? 'dashed' : 'solid'};
   background: ${(props) =>
     props.theme.colors.button[props.appearance].background.base};
   color: ${(props) => props.theme.colors.button[props.appearance].text.base};
@@ -33,12 +33,12 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 
   margin: 0;
   padding: ${(props) =>
-    props.buttonSize === "default"
+    props.buttonSize === 'default'
       ? `${props.theme.space[300]}`
       : `${props.theme.space[350]}`};
 
   font-size: ${(props) =>
-    props.buttonSize === "default"
+    props.buttonSize === 'default'
       ? props.theme.typography[200].fontSize
       : props.theme.typography[300].fontSize};
 
@@ -52,7 +52,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
     box-shadow: ${(props) =>
-      props.appearance === "placeholder" ? props.theme.shadows.low : "none"};
+      props.appearance === 'placeholder' ? props.theme.shadows.low : 'none'};
   }
 
   &:active {
@@ -82,7 +82,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${(props) => props.disabled && disabled}
 
   ${(props) =>
-    props.appearance === "pill" &&
+    props.appearance === 'pill' &&
     css`
       display: inline-flex;
       align-items: center;
@@ -105,7 +105,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${LAYOUT}
   ${COMMON}
 `;
-Container.displayName = "Button-Container";
+Container.displayName = 'Button-Container';
 export default Container;
 
 //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Card/index.js

@@ -1,8 +1,8 @@
-"no babel-plugin-flow-react-proptypes";
+'no babel-plugin-flow-react-proptypes';
 // @flow
-import * as React from "react";
-import { Container, ClickableArea } from "./styles";
-import { type TypeProps as TypeButtonProps } from "../Button";
+import * as React from 'react';
+import {Container, ClickableArea} from './styles';
+import {type TypeProps as TypeButtonProps} from '../Button';
 
 type TypeChildrenlessButtonProps = {
   ...TypeButtonProps,
@@ -26,9 +26,9 @@ const Card = ({
   ariaLabel,
   buttonProps = {},
   border = 500,
-  borderColor = "container.border.base",
-  color = "text.body",
-  bg = "container.background.base",
+  borderColor = 'container.border.base',
+  color = 'text.body',
+  bg = 'container.background.base',
   ...rest
 }: TypeProps) => {
   return (

package/__flow__/Card/index.stories.js

@@ -1,17 +1,17 @@
 // @flow
-import React from "react";
-import Card from "./index";
-import Button from "../Button";
-import Link from "../Link";
-import Text from "../Text";
+import React from 'react';
+import Card from './index';
+import Button from '../Button';
+import Link from '../Link';
+import Text from '../Text';
 
 export default {
-  title: "Card",
+  title: 'Components/Card',
 };
 
 export const AsButton = () => (
   <Card
-    onClick={() => alert("clicked the card!")}
+    onClick={() => alert('clicked the card!')}
     px={400}
     py={350}
     ariaLabel="Click to do something"
@@ -21,13 +21,13 @@ export const AsButton = () => (
 );
 
 AsButton.story = {
-  title: "As button",
+  title: 'As button',
 };
 
 export const AsLink = () => (
   <Card
     href="http://sproutsocial.style"
-    buttonProps={{ external: true }}
+    buttonProps={{external: true}}
     px={400}
     py={350}
     ariaLabel="Click to do something"
@@ -37,12 +37,12 @@ export const AsLink = () => (
 );
 
 AsLink.story = {
-  name: "As link",
+  name: 'As link',
 };
 
 export const WithChildren = () => (
   <Card
-    onClick={() => alert("Clicked the card")}
+    onClick={() => alert('Clicked the card')}
     maxWidth={300}
     p={400}
     ariaLabel="Click to do something"
@@ -51,17 +51,17 @@ export const WithChildren = () => (
       Really Nice Card
     </Text>
     <Text as="p" mb={600} fontSize={300}>
-      This is a card and here's a link you should definitely click:{" "}
+      This is a card and here's a link you should definitely click:{' '}
       <Link href="/" external>
         cool link
       </Link>
     </Text>
-    <Button appearance="primary" onClick={(e) => alert("Clicked the button")}>
+    <Button appearance="primary" onClick={(e) => alert('Clicked the button')}>
       Click this button
     </Button>
   </Card>
 );
 
 WithChildren.story = {
-  title: "With clickable children",
+  title: 'With clickable children',
 };

package/__flow__/Card/styles.js

@@ -1,7 +1,7 @@
 // @flow
-import styled from "styled-components";
-import Button from "../Button";
-import Box from "../Box";
+import styled from 'styled-components';
+import Button from '../Button';
+import Box from '../Box';
 
 const Container = styled<typeof Box, *>(Box)`
   width: 100%;
@@ -10,7 +10,7 @@ const Container = styled<typeof Box, *>(Box)`
   z-index: 0;
 
   ::after {
-    content: "";
+    content: '';
     top: 0;
     left: 0;
     position: absolute;
@@ -30,8 +30,8 @@ const Container = styled<typeof Box, *>(Box)`
     }
   }
 
-  [role="button"],
-  [type="button"],
+  [role='button'],
+  [type='button'],
   a {
     position: relative;
   }
@@ -46,4 +46,4 @@ const ClickableArea = styled<typeof Button, *>(Button)`
   width: 100%;
 `;
 
-export { Container, ClickableArea };
+export {Container, ClickableArea};

package/__flow__/CharacterCounter/index.js

@@ -1,27 +1,27 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
+import * as React from 'react';
+import Container from './styles';
 
-type TypeProps = {
+export type TypeProps = {
   /** Current value of relative input/textarea */
   currentValue: number,
   /** Max amount of characters for input/textarea */
   maxValue: number,
-  size: "default" | "mini",
+  size: 'default' | 'mini',
 };
 
 export default class CharacterCounter extends React.Component<TypeProps> {
   static defaultProps = {
-    size: "default",
+    size: 'default',
   };
 
   render() {
-    const { size, ...rest } = this.props;
+    const {size, ...rest} = this.props;
     const remaining = this.props.maxValue - this.props.currentValue;
 
     return (
       // $FlowIssue - upgrade v0.112.0
-      <Container mini={size === "mini"} overlimit={remaining <= 0} {...rest}>
+      <Container mini={size === 'mini'} overlimit={remaining <= 0} {...rest}>
         {remaining}
       </Container>
     );

package/__flow__/CharacterCounter/index.stories.js

@@ -1,43 +1,42 @@
 // @flow
-import React from "react";
-import { number, text } from "@storybook/addon-knobs";
+import React from 'react';
 
-import CharacterCounter from "./index";
+import CharacterCounter, {type TypeProps} from './index';
 
 export default {
-  title: "CharacterCounter",
+  title: 'Components/CharacterCounter',
 };
 
-export const example = () => (
-  <CharacterCounter
-    currentValue={number("currentValue", 295)}
-    maxValue={number("max", 300)}
-  />
-);
+export const example = (args: TypeProps) => <CharacterCounter {...args} />;
+
+example.args = {
+  currentValue: 295,
+  maxValue: 300,
+};
 
 example.story = {
-  name: "Example",
+  name: 'Example',
 };
 
-export const mini = () => (
-  <CharacterCounter
-    currentValue={number("currentValue", 200)}
-    maxValue={number("max", 300)}
-    size={text("size", "mini")}
-  />
-);
+export const mini = (args: TypeProps) => <CharacterCounter {...args} />;
+
+mini.args = {
+  currentValue: 200,
+  maxValue: 300,
+  size: 'mini',
+};
 
 mini.story = {
-  name: "Mini",
+  name: 'Mini',
 };
 
-export const overLimit = () => (
-  <CharacterCounter
-    currentValue={number("currentValue", 350)}
-    maxValue={number("max", 300)}
-  />
-);
+export const overLimit = (args: TypeProps) => <CharacterCounter {...args} />;
+
+overLimit.args = {
+  currentValue: 350,
+  maxValue: 300,
+};
 
 overLimit.story = {
-  name: "Over Limit",
+  name: 'Over Limit',
 };

package/__flow__/CharacterCounter/index.test.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import CharacterCounter from "./";
-import { COLOR_RED_800 } from "@sproutsocial/seeds-color";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import CharacterCounter from './';
+import {COLOR_RED_800} from '@sproutsocial/seeds-color';
 
-describe.only("CharacterCounter", () => {
-  it("should render properly", () => {
-    const { getByText } = render(
+describe.only('CharacterCounter', () => {
+  it('should render properly', () => {
+    const {getByText} = render(
       <CharacterCounter currentValue={22} maxValue={100} />
     );
     const remainingNumber = 100 - 22;
@@ -15,10 +15,10 @@ describe.only("CharacterCounter", () => {
     expect(getByText(remainingNumber.toString())).toBeTruthy();
   });
 
-  it("should render properly with overlimit values", () => {
-    const { getByText } = render(
+  it('should render properly with overlimit values', () => {
+    const {getByText} = render(
       <CharacterCounter currentValue={2} maxValue={1} />
     );
-    expect(getByText("-1")).toHaveStyleRule("color", COLOR_RED_800);
+    expect(getByText('-1')).toHaveStyleRule('color', COLOR_RED_800);
   });
 });

package/__flow__/CharacterCounter/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.div`
   font-family: ${(props) => props.theme.fontFamily};

package/__flow__/ChartLegend/index.js

@@ -1,15 +1,15 @@
 // @flow
-import * as React from "react";
-import Container, { Label, Swatch } from "./styles";
-import Text from "../Text";
-import { THEME_MAP } from "../utils/chartColors";
+import * as React from 'react';
+import Container, {Label, Swatch} from './styles';
+import Text from '../Text';
+import {THEME_MAP} from '../utils/chartColors';
 
 type TypeProps = {
   /** Inline or stacked y plots */
   stacked?: boolean,
-  theme?: "compare" | "contrast" | "extended",
+  theme?: 'compare' | 'contrast' | 'extended',
   /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
-  legendLabels: { name: string, color?: string }[],
+  legendLabels: {name: string, color?: string}[],
   qa?: Object,
 };
 
@@ -32,7 +32,7 @@ function getLabels(legendLabels, theme) {
 }
 
 const ChartLegend = (props: TypeProps) => {
-  const { legendLabels, stacked, theme = "compare", ...rest } = props;
+  const {legendLabels, stacked, theme = 'compare', ...rest} = props;
 
   return (
     <Container

package/__flow__/ChartLegend/index.stories.js

@@ -1,40 +1,40 @@
 // @flow
-import React from "react";
-import ChartLegend from "./index";
+import React from 'react';
+import ChartLegend from './index';
 
 export default {
-  title: "ChartLegend",
+  title: 'Components/ChartLegend',
 };
 
 export const defaultInlineLegend = () => (
   <ChartLegend
     legendLabels={[
-      { name: "Likes" },
-      { name: "Replies" },
-      { name: "Comments" },
-      { name: "Link Clicks" },
+      {name: 'Likes'},
+      {name: 'Replies'},
+      {name: 'Comments'},
+      {name: 'Link Clicks'},
     ]}
   />
 );
 
 defaultInlineLegend.story = {
-  name: "Default inline legend",
+  name: 'Default inline legend',
 };
 
 export const inlineLegendWithContrastColors = () => (
   <ChartLegend
     theme="contrast"
     legendLabels={[
-      { name: "Likes" },
-      { name: "Replies" },
-      { name: "Comments" },
-      { name: "Link Clicks" },
+      {name: 'Likes'},
+      {name: 'Replies'},
+      {name: 'Comments'},
+      {name: 'Link Clicks'},
     ]}
   />
 );
 
 inlineLegendWithContrastColors.story = {
-  name: "Inline legend with contrast colors",
+  name: 'Inline legend with contrast colors',
 };
 
 export const stackedLegendWithCustomColors = () => (
@@ -42,25 +42,25 @@ export const stackedLegendWithCustomColors = () => (
     stacked={true}
     legendLabels={[
       {
-        name: "Likes",
-        color: "purple",
+        name: 'Likes',
+        color: 'purple',
       },
       {
-        name: "Replies",
-        color: "mediumpurple ",
+        name: 'Replies',
+        color: 'mediumpurple ',
       },
       {
-        name: "Comments",
-        color: "mediumorchid",
+        name: 'Comments',
+        color: 'mediumorchid',
       },
       {
-        name: "Link Clicks",
-        color: "mediumslateblue",
+        name: 'Link Clicks',
+        color: 'mediumslateblue',
       },
     ]}
   />
 );
 
 stackedLegendWithCustomColors.story = {
-  name: "Stacked legend with custom colors",
+  name: 'Stacked legend with custom colors',
 };