@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Badge/index.test.js

@@ -1,67 +1,67 @@
 // @flow
-import React from "react";
-import Badge from "./";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
+import React from 'react';
+import Badge from './';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
 
-describe("Badge...", () => {
-  it("...should render with default props", () => {
-    const { getByText } = render(<Badge>Test</Badge>);
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "padding",
-      "0px 4px"
+describe('Badge...', () => {
+  it('...should render with default props', () => {
+    const {getByText} = render(<Badge>Test</Badge>);
+    expect(getByText('Test')).toBeTruthy();
+    expect(getByText('Test').closest('span')).toHaveStyleRule(
+      'padding',
+      '0px 4px'
     );
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#dcf2ff"
+    expect(getByText('Test').closest('span')).toHaveStyleRule(
+      'background',
+      '#dcf2ff'
     );
   });
 
-  it("...should render with correct size styling", () => {
-    const { getByText } = render(<Badge size="large">Test</Badge>);
-    expect(getByText("Test").closest("span")).toHaveStyleRule("padding", "8px");
+  it('...should render with correct size styling', () => {
+    const {getByText} = render(<Badge size="large">Test</Badge>);
+    expect(getByText('Test').closest('span')).toHaveStyleRule('padding', '8px');
   });
 
-  it("...should render with legacy type", () => {
-    const { getByText } = render(<Badge type="secondary">Test</Badge>);
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "color",
-      "#364141"
+  it('...should render with legacy type', () => {
+    const {getByText} = render(<Badge type="secondary">Test</Badge>);
+    expect(getByText('Test')).toBeTruthy();
+    expect(getByText('Test').closest('span')).toHaveStyleRule(
+      'color',
+      '#364141'
     );
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#fdefcd"
+    expect(getByText('Test').closest('span')).toHaveStyleRule(
+      'background',
+      '#fdefcd'
     );
   });
 
-  it("...should render with a badge color", () => {
-    const { getByText } = render(<Badge badgeColor="purple">Test</Badge>);
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByText("Test").closest("span")).toHaveStyleRule(
-      "background",
-      "#eaeaf9"
+  it('...should render with a badge color', () => {
+    const {getByText} = render(<Badge badgeColor="purple">Test</Badge>);
+    expect(getByText('Test')).toBeTruthy();
+    expect(getByText('Test').closest('span')).toHaveStyleRule(
+      'background',
+      '#eaeaf9'
     );
   });
 
-  it("...should render with an icon", () => {
-    const { container } = render(<Badge iconName="sparkles">Test</Badge>);
-    expect(container.querySelector("svg")).toBeTruthy();
+  it('...should render with an icon', () => {
+    const {container} = render(<Badge iconName="sparkles">Test</Badge>);
+    expect(container.querySelector('svg')).toBeTruthy();
   });
-  it("should render with suggestion type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with suggestion type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Badge text="Test" type="suggestion" />
     );
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByDataQaLabel({ "badge-type": "suggestion" })).toBeTruthy();
+    expect(getByText('Test')).toBeTruthy();
+    expect(getByDataQaLabel({'badge-type': 'suggestion'})).toBeTruthy();
   });
 
-  it("...should render with tooltip class", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('...should render with tooltip class', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Badge tip="test tip">Test</Badge>
     );
-    expect(getByText("Test")).toBeTruthy();
-    expect(getByDataQaLabel({ "badge-tip": "test tip" })).toBeTruthy();
+    expect(getByText('Test')).toBeTruthy();
+    expect(getByDataQaLabel({'badge-tip': 'test tip'})).toBeTruthy();
   });
 });

package/__flow__/Badge/styles.js

@@ -1,15 +1,19 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-import { themeGet } from "@styled-system/theme-get";
-import { legacyBadgeColors } from "./constants";
+import styled, {type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import type {TypeTheme} from '../types/theme.flow';
+import {themeGet} from '@styled-system/theme-get';
+import {legacyBadgeColors} from './constants';
 
-// eslint-disable-next-line prettier/prettier
-const Container: StyledComponent<{type: ?string, badgeColor: string, size: string, ...}, TypeTheme, *> = styled.span`
+// eslint-disable-next-line flowtype/generic-spacing
+const Container: StyledComponent<
+  {type: ?string, badgeColor: string, size: string, ...},
+  TypeTheme,
+  *
+> = styled.span`
   font-family: ${(p) => p.theme.fontFamily};
   ${(p) =>
-    p.size === "small" ? p.theme.typography[100] : p.theme.typography[200]};
+    p.size === 'small' ? p.theme.typography[100] : p.theme.typography[200]};
   border-radius: 9999px;
   line-height: 16px;
   display: inline-block;
@@ -22,7 +26,7 @@ const Container: StyledComponent<{type: ?string, badgeColor: string, size: strin
       ? themeGet(legacyBadgeColors[p.type].background)
       : p.theme.colors.container.background.decorative[p.badgeColor]};
   padding: ${(p) =>
-    p.size === "small"
+    p.size === 'small'
       ? `${p.theme.space[0]} ${p.theme.space[200]}`
       : `${p.theme.space[300]}`};
   ${COMMON};

package/__flow__/Banner/index.js

@@ -1,25 +1,25 @@
 // @flow
-import * as React from "react";
-import Icon from "../Icon";
-import Container from "./styles";
-import Box from "../Box";
+import * as React from 'react';
+import Icon from '../Icon';
+import Container from './styles';
+import Box from '../Box';
 
 /**
  * @deprecated
  * Use banner type "error" instead of "danger"
  */
-type EnumDeprecatedBannerType = "danger";
+type EnumDeprecatedBannerType = 'danger';
 
 type EnumValidBannerType =
-  | "success"
-  | "info"
-  | "error"
-  | "warning"
-  | "opportunity";
+  | 'success'
+  | 'info'
+  | 'error'
+  | 'warning'
+  | 'opportunity';
 
 export type EnumBannerType = EnumValidBannerType | EnumDeprecatedBannerType;
 
-type TypeProps = {
+export type TypeProps = {
   text: React.Node,
   /** Type of banner. "danger" is deprecated in favor of "error". In a future version, the default will be changed to "info" */
   type?: EnumBannerType,
@@ -27,15 +27,15 @@ type TypeProps = {
 
 const getBannerIcon = (type: EnumValidBannerType) => {
   switch (type) {
-    case "success":
+    case 'success':
       return <Icon name="circle-check-no-fill" className="Icon" fixedWidth />;
-    case "info":
+    case 'info':
       return <Icon name="info-white" className="Icon" fixedWidth />;
-    case "error":
+    case 'error':
       return <Icon name="triangle" className="Icon" fixedWidth />;
-    case "warning":
+    case 'warning':
       return <Icon name="triangle" className="Icon" fixedWidth />;
-    case "opportunity":
+    case 'opportunity':
       return <Icon name="sparkles" className="Icon" fixedWidth />;
     default:
       return;
@@ -43,17 +43,17 @@ const getBannerIcon = (type: EnumValidBannerType) => {
 };
 
 /** TODO: change to 'info' type by default in future version */
-const Banner = ({ type = "error", text, ...rest }: TypeProps) => {
-  const bannerType: EnumValidBannerType = type === "danger" ? "error" : type;
-  if (type === "danger") {
+const Banner = ({type = 'error', text, ...rest}: TypeProps) => {
+  const bannerType: EnumValidBannerType = type === 'danger' ? 'error' : type;
+  if (type === 'danger') {
     console.warn(
-      "Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead."
+      'Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.'
     );
   }
   return (
     <Container
       type={type}
-      data-qa-alert={""}
+      data-qa-alert={''}
       data-qa-alert-type={type}
       data-qa-alert-text={text}
       // $FlowIssue - upgrade v0.112.0

package/__flow__/Banner/index.stories.js

@@ -1,65 +1,55 @@
 // @flow
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-import Banner from "./index";
-import Box from "../Box";
-import Text from "../Text";
-import Link from "../Link";
-import Stack from "../Stack";
+import React from 'react';
+import Banner from './index';
+import Box from '../Box';
+import Text from '../Text';
+import Link from '../Link';
+import {type TypeProps} from './index';
 
 export default {
-  title: "Banner",
+  title: 'Components/Banner',
+  component: Banner,
+  argTypes: {
+    type: {
+      options: ['success', 'info', 'error', 'warning', 'opportunity', 'danger'],
+      control: {type: 'select'},
+    },
+  },
+  args: {
+    type: 'success',
+    text: 'This is a success message!',
+  },
 };
 
-export const permutations = () => (
-  <Stack>
-    <Banner
-      text={text("Success", "Success message")}
-      type="success"
-      width="500px"
-    />
-    <Banner text={text("Info", "Info message")} type="info" width="500px" />
-    <Banner text={text("Error", "Error message")} type="error" width="500px" />
-    <Banner
-      text={text("Warning", "Warning message")}
-      type="warning"
-      width="500px"
-    />
-    <Banner
-      text={text("Opportunity", "Opportunity message")}
-      type="opportunity"
-      width="500px"
-    />
-  </Stack>
-);
-
-permutations.story = {
-  name: "Permutations",
+const findText = (bannerType) => {
+  switch (bannerType) {
+    case 'warning':
+      return 'This is a warning message!';
+    case 'opportunity':
+      return 'This is an opportunity message!';
+    case 'danger':
+      return 'This is a danger message!';
+    case 'error':
+      return 'This is an error message!';
+    case 'info':
+      return 'This is an informative message!';
+    case 'success':
+    default:
+      return 'This is a success message!';
+  }
 };
 
-export const Success = () => (
-  <Banner text={text("text", "Success message")} type="success" />
-);
-
-export const Info = () => (
-  <Banner text={text("text", "Info message")} type="info" />
-);
-
-export const Error = () => (
-  <Banner text={text("text", "Error message")} type="error" />
+export const permutations = (args: TypeProps) => (
+  <Banner text={findText(args.type)} type={args.type} />
 );
 
-export const Warning = () => (
-  <Banner text={text("text", "Warning message")} type="warning" />
-);
-
-export const Opportunity = () => (
-  <Banner text={text("text", "Opportunity message")} type="opportunity" />
-);
+permutations.story = {
+  name: 'Permutations',
+};
 
-export const links = () => (
+export const links = (args: TypeProps) => (
   <Banner
-    type="success"
+    type={args.type}
     text={
       <Box
         width={1}
@@ -67,7 +57,7 @@ export const links = () => (
         alignItems="center"
         justifyContent="space-between"
       >
-        <Text>Success message</Text>
+        <Text>{findText(args.type)}</Text>
         <Text>
           <Link href="/">Learn more</Link>
         </Text>
@@ -77,12 +67,12 @@ export const links = () => (
 );
 
 links.story = {
-  name: "With link",
+  name: 'With link',
 };
 
-export const buttons = () => (
+export const buttons = (args: TypeProps) => (
   <Banner
-    type="success"
+    type={args.type}
     text={
       <Box
         width={1}
@@ -90,9 +80,9 @@ export const buttons = () => (
         alignItems="center"
         justifyContent="space-between"
       >
-        <Text>Success message</Text>
+        <Text>{findText(args.type)}</Text>
         <Text>
-          <Link onClick={() => alert("Clicked")}>Learn more</Link>
+          <Link onClick={() => alert('Clicked')}>Learn more</Link>
         </Text>
       </Box>
     }
@@ -100,21 +90,19 @@ export const buttons = () => (
 );
 
 buttons.story = {
-  name: "With button",
+  name: 'With button',
 };
 
-export const multiline = () => (
-  <Box width="300px">
-    <Banner
-      text={text(
-        "text",
-        "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line."
-      )}
-      type="opportunity"
-    />
+export const multiline = (args: TypeProps) => (
+  <Box width="416px">
+    <Banner text={args.text} type={args.type} />
   </Box>
 );
 
+multiline.args = {
+  text: 'A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.',
+};
+
 multiline.story = {
-  name: "With multiline text",
+  name: 'With multiline text',
 };

package/__flow__/Banner/index.test.js

@@ -1,70 +1,68 @@
 // @flow
-import React from "react";
-import Banner from "./";
-import { render } from "../utils/react-testing-library";
+import React from 'react';
+import Banner from './';
+import {render} from '../utils/react-testing-library';
 
-describe("Banner", () => {
+describe('Banner', () => {
   /** TODO: change to 'info' type by default in future version */
-  it("should render as error when no type is provided", () => {
-    const { getByText, getByDataQaLabel } = render(
-      <Banner text="Banner Text" />
-    );
+  it('should render as error when no type is provided', () => {
+    const {getByText, getByDataQaLabel} = render(<Banner text="Banner Text" />);
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "triangle" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
   });
 
-  it("should render with success type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with success type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="success" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "circle-check-no-fill" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'circle-check-no-fill'})).toBeTruthy();
   });
 
-  it("should render with info type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with info type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="info" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "info-white" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'info-white'})).toBeTruthy();
   });
 
-  it("should render with error type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with error type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="error" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "triangle" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
   });
 
-  it("should render with deprecated danger type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with deprecated danger type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="danger" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "triangle" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
   });
 
-  it("should render with warning type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with warning type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="warning" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "triangle" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
   });
 
-  it("should render with opportunity type", () => {
-    const { getByText, getByDataQaLabel } = render(
+  it('should render with opportunity type', () => {
+    const {getByText, getByDataQaLabel} = render(
       <Banner text="Banner Text" type="opportunity" />
     );
 
-    expect(getByText("Banner Text")).toBeTruthy();
-    expect(getByDataQaLabel({ icon: "sparkles" })).toBeTruthy();
+    expect(getByText('Banner Text')).toBeTruthy();
+    expect(getByDataQaLabel({icon: 'sparkles'})).toBeTruthy();
   });
 });

package/__flow__/Banner/styles.js

@@ -1,9 +1,9 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON, LAYOUT} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
-import type { EnumBannerType } from "./";
+import type {TypeTheme} from '../types/theme.flow';
+import type {EnumBannerType} from './';
 
 type TypeProps = {|
   type: EnumBannerType,

package/__flow__/Box/index.js

@@ -1,8 +1,8 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
+import * as React from 'react';
+import Container from './styles';
 
-type TypeBoxProps = $ReadOnly<{
+export type TypeBoxProps = $ReadOnly<{
   ...React.ElementConfig<typeof Container>,
   ...
 }>;
@@ -11,6 +11,6 @@ const Box = React.forwardRef<TypeBoxProps, *>((props, ref) => {
   return <Container {...props} ref={ref} />;
 });
 
-Box.displayName = "Box";
+Box.displayName = 'Box';
 
 export default Box;