@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Label/index.stories.js

@@ -1,17 +1,15 @@
 // @flow
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-
-import Label from "./";
+import React from 'react';
+import Label from './';
 
 export default {
-  title: "Label",
+  title: 'Components/Form Elements/Label',
 };
 
 export const defaultStory = () => (
-  <Label htmlFor="default">{text("children", "Example label")}</Label>
+  <Label htmlFor="default">Example label</Label>
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };

package/__flow__/Label/index.test.js

@@ -1,16 +1,16 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Label from "./";
-import Text from "../Text";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Label from './';
+import Text from '../Text';
 
-describe("Label", () => {
-  it("should render the proper text", () => {
-    const { getByText } = render(
+describe('Label', () => {
+  it('should render the proper text', () => {
+    const {getByText} = render(
       <Label htmlFor="firstname">
         <Text>First Name:</Text>
       </Label>
     );
-    expect(getByText("First Name:")).toBeTruthy();
+    expect(getByText('First Name:')).toBeTruthy();
   });
 });

package/__flow__/Link/constants.js

@@ -1,11 +1,11 @@
 // @flow
-import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
+import {COLOR_BLUE_900} from '@sproutsocial/seeds-color';
 
 const defaultLink = {
-  color: "link",
-  hoverColor: "link.hover",
+  color: 'link',
+  hoverColor: 'link.hover',
   activeColor: COLOR_BLUE_900,
-  fontWeight: "semibold",
+  fontWeight: 'semibold',
 };
 
 const linkTheme = {

package/__flow__/Link/index.js

@@ -1,10 +1,10 @@
 // @flow
-import * as React from "react";
-import Container from "./styles";
+import * as React from 'react';
+import Container from './styles';
 
-import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+import type {TypeStyledComponentsCommonProps} from '../types/styled-components.flow';
 
-type TypeProps = {
+export type TypeProps = {
   /** Optional prop to make the URL open in a new tab */
   external?: boolean,
   children: React.Node,
@@ -14,7 +14,7 @@ type TypeProps = {
   disabled?: boolean,
   /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
-  as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
+  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
   underline?: boolean,
   qa?: Object,
 };
@@ -32,24 +32,24 @@ const Link = ({
 }: 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'
     );
   }
 
-  const type = as || (href ? "a" : "button");
+  const type = as || (href ? 'a' : 'button');
 
   return (
     <Container
       href={href}
-      target={external ? "_blank" : undefined}
-      type={type === "button" ? "button" : undefined}
-      rel={external ? "noopener noreferrer" : undefined}
+      target={external ? '_blank' : undefined}
+      type={type === 'button' ? 'button' : undefined}
+      rel={external ? 'noopener noreferrer' : undefined}
       forwardedAs={type}
       aria-disabled={disabled ? disabled : undefined}
       disabled={disabled}
       onClick={onClick}
       underline={underline}
-      data-qa-link={""}
+      data-qa-link={''}
       data-qa-link-isdisabled={disabled === true}
       {...qa}
       {...rest}

package/__flow__/Link/index.stories.js

@@ -1,156 +1,115 @@
 // @flow
-import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
-import { Box } from "../index";
-
-import Link from "./";
+import React from 'react';
+import {Box} from '../index';
+import Link, {type TypeProps} from './';
 
 export default {
-  title: "Link",
+  title: 'Components/Link',
+  component: Link,
+  args: {
+    href: '//sproutsocial.com/seeds/components/link',
+    children: 'Normal link',
+    external: false,
+  },
 };
 
-export const normalLink = () => (
-  <Link href={text("href", "//sproutsocial.com/seeds/components/link")}>
-    {text("children", "Normal Link")}
-  </Link>
-);
+export const normalLink = (args: TypeProps) => <Link {...args} />;
 
 normalLink.story = {
-  name: "Normal link",
+  name: 'Normal link',
 };
 
-export const externalLink = () => (
-  <Link
-    href={text("href", "#YouClickedAnExternalLink")}
-    external={boolean("external", true)}
-  >
-    {text("children", "Opens in a new tab")}
-  </Link>
-);
+export const externalLink = (args: TypeProps) => <Link {...args} />;
+
+externalLink.args = {
+  href: '#YouClickedAnExternalLink',
+  external: true,
+  children: 'Opens in a new tab',
+};
 
 externalLink.story = {
-  name: "External link",
+  name: 'External link',
 };
 
-export const linkAsAButton = () => (
+export const linkAsAButton = (args: TypeProps) => (
   <Link
     onClick={() => {
-      alert("You clicked a Button that looks like a Link!");
+      alert('You clicked a Button that looks like a Link!');
     }}
   >
-    {text("children", "Primary Link")}
+    {args.children}
   </Link>
 );
 
+linkAsAButton.args = {
+  children: 'Primary Link',
+};
+
 linkAsAButton.story = {
-  name: "Link as a button",
+  name: 'Link as a button',
 };
 
-export const differentFontSizes = () => (
+export const differentFontSizes = (args: TypeProps) => (
   <Box display="flex" flexDirection="column">
     100
-    <Link
-      fontSize={100}
-      fontWeight="normal"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={100} fontWeight="normal" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={100}
-      fontWeight="semibold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={100} fontWeight="semibold" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={100}
-      fontWeight="bold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={100} fontWeight="bold" href={args.href}>
+      {args.children}
     </Link>
     <br />
     200
-    <Link
-      fontSize={200}
-      fontWeight="normal"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={200} fontWeight="normal" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={200}
-      fontWeight="semibold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={200} fontWeight="semibold" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={200}
-      fontWeight="bold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={200} fontWeight="bold" href={args.href}>
+      {args.children}
     </Link>
     <br />
     400
-    <Link
-      fontSize={400}
-      fontWeight="normal"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={400} fontWeight="normal" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={400}
-      fontWeight="semibold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={400} fontWeight="semibold" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={400}
-      fontWeight="bold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={400} fontWeight="bold" href={args.href}>
+      {args.children}
     </Link>
     <br />
     800
-    <Link
-      fontSize={800}
-      fontWeight="normal"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={800} fontWeight="normal" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={800}
-      fontWeight="semibold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={800} fontWeight="semibold" href={args.href}>
+      {args.children}
     </Link>
-    <Link
-      fontSize={800}
-      fontWeight="bold"
-      href={text("href", "//sproutsocial.com/seeds/components/link")}
-    >
-      {text("children", "Normal Link")}
+    <Link fontSize={800} fontWeight="bold" href={args.href}>
+      {args.children}
     </Link>
     <br />
   </Box>
 );
 
 differentFontSizes.story = {
-  name: "Different font sizes",
+  name: 'Different font sizes',
 };
 
-export const underlinedLink = () => (
-  <Link underline>{text("children", "Underlined Link")}</Link>
+export const underlinedLink = (args: TypeProps) => (
+  <Link underline>{args.children}</Link>
 );
 
+underlinedLink.args = {
+  children: 'Underlined Link',
+};
+
 underlinedLink.story = {
-  name: "Underlined Link",
+  name: 'Underlined Link',
 };

package/__flow__/Link/index.test.js

@@ -1,79 +1,79 @@
 // @flow
-import React from "react";
-import "jest-styled-components";
-import { render } from "../utils/react-testing-library";
-import Link from "./";
-import { TYPOGRAPHY_SIZE_600 } from "@sproutsocial/seeds-typography";
+import React from 'react';
+import 'jest-styled-components';
+import {render} from '../utils/react-testing-library';
+import Link from './';
+import {TYPOGRAPHY_SIZE_600} from '@sproutsocial/seeds-typography';
 
-describe("Racine Link", () => {
-  it("should render in an anchor tag", () => {
-    const { getByText } = render(
+describe('Racine Link', () => {
+  it('should render in an anchor tag', () => {
+    const {getByText} = render(
       <Link href="http://sproutsocial.style" external>
         Link
       </Link>
     );
-    expect(getByText("Link", { tag: "a" })).toBeInTheDocument();
+    expect(getByText('Link', {tag: 'a'})).toBeInTheDocument();
   });
 
-  it("should render disabled", () => {
-    const { getByText } = render(
+  it('should render disabled', () => {
+    const {getByText} = render(
       <>
         <Link>Regular Link</Link>
         <Link disabled>Disabled Link</Link>
       </>
     );
 
-    expect(getByText("Regular Link")).not.toBeDisabled();
-    expect(getByText("Disabled Link")).toBeDisabled();
+    expect(getByText('Regular Link')).not.toBeDisabled();
+    expect(getByText('Disabled Link')).toBeDisabled();
   });
 
-  it("setting external to prop true should add target blank attribute to anchor", () => {
-    const { getByText } = render(
+  it('setting external to prop true should add target blank attribute to anchor', () => {
+    const {getByText} = render(
       <Link href="http://sproutsocial.com" external>
         Link
       </Link>
     );
-    expect(getByText("Link").target).toEqual("_blank");
+    expect(getByText('Link').target).toEqual('_blank');
   });
 
   it("setting external to prop true should add rel='noopener' attribute", () => {
-    const { getByText } = render(
+    const {getByText} = render(
       <Link href="http://sproutsocial.com" external>
         Link
       </Link>
     );
-    expect(getByText("Link").rel).toEqual("noopener noreferrer");
+    expect(getByText('Link').rel).toEqual('noopener noreferrer');
   });
 
-  it("setting a onClick instead of href renders component as a Button", () => {
-    const { getByText } = render(
+  it('setting a onClick instead of href renders component as a Button', () => {
+    const {getByText} = render(
       <Link
         onClick={() => {
-          console.log("Button");
+          console.log('Button');
         }}
       >
         Am I a button?
       </Link>
     );
-    expect(getByText("Am I a button?").tagName).toEqual("BUTTON");
+    expect(getByText('Am I a button?').tagName).toEqual('BUTTON');
   });
 
-  it("setting both href and onClick renders component as an Anchor", () => {
-    const { getByText } = render(
+  it('setting both href and onClick renders component as an Anchor', () => {
+    const {getByText} = render(
       <Link
         href="http://sproutsocial.com"
         onClick={() => {
-          console.log("Button");
+          console.log('Button');
         }}
       >
         Am I a button?
       </Link>
     );
-    expect(getByText("Am I a button?").tagName).toEqual("A");
+    expect(getByText('Am I a button?').tagName).toEqual('A');
   });
 
   it("Using the 'as' prop works as expected and retains styles from Text and Link", () => {
-    const { getByText } = render(
+    const {getByText} = render(
       <Link
         as="span"
         fontSize={600}
@@ -83,26 +83,26 @@ describe("Racine Link", () => {
       </Link>
     );
 
-    expect(getByText("Link as span").tagName).toEqual("SPAN");
-    expect(getByText("Link as span")).toHaveStyleRule(
-      "font-size",
+    expect(getByText('Link as span').tagName).toEqual('SPAN');
+    expect(getByText('Link as span')).toHaveStyleRule(
+      'font-size',
       TYPOGRAPHY_SIZE_600.fontSize
     );
   });
 
-  it("Has type attribute as button when rendered as a button element", () => {
-    const { getByText } = render(<Link>Link</Link>);
-    expect(getByText("Link").type).toEqual("button");
+  it('Has type attribute as button when rendered as a button element', () => {
+    const {getByText} = render(<Link>Link</Link>);
+    expect(getByText('Link').type).toEqual('button');
   });
 
-  it("Does not have type attribute when rendered as an anchor element", () => {
-    const { getByText } = render(<Link href="google.com">Link</Link>);
-    expect(getByText("Link").type).toBeFalsy();
-    expect(getByText("Link").type).not.toEqual("button");
+  it('Does not have type attribute when rendered as an anchor element', () => {
+    const {getByText} = render(<Link href="google.com">Link</Link>);
+    expect(getByText('Link').type).toBeFalsy();
+    expect(getByText('Link').type).not.toEqual('button');
   });
 
-  it("Can render with an underline", () => {
-    const { getByText } = render(<Link underline>Link</Link>);
-    expect(getByText("Link")).toHaveStyleRule("text-decoration", "underline");
+  it('Can render with an underline', () => {
+    const {getByText} = render(<Link underline>Link</Link>);
+    expect(getByText('Link')).toHaveStyleRule('text-decoration', 'underline');
   });
 });

package/__flow__/Link/styles.js

@@ -1,15 +1,15 @@
 //@flow
-import styled, { css } from "styled-components";
-import { focusRing, disabled } from "../utils/mixins";
-import Text from "../Text";
-import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
+import styled, {css} from 'styled-components';
+import {focusRing, disabled} from '../utils/mixins';
+import Text from '../Text';
+import {TYPOGRAPHY, COMMON, FLEXBOX} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container = styled<typeof Text, TypeTheme, any>(Text)`
   border: 0;
   font-family: ${(props) => props.theme.fontFamily};
-  text-decoration: ${(props) => (props.underline ? "underline" : "none")};
+  text-decoration: ${(props) => (props.underline ? 'underline' : 'none')};
   appearance: none;
   cursor: pointer;
   ${(props) =>

package/__flow__/Listbox/index.js

@@ -1,16 +1,16 @@
 // @flow
-import * as React from "react";
-import styled, { css } from "styled-components";
-import Menu, { MenuButton } from "../Menu";
-import { Arrow } from "../Select/styles";
-import Icon from "../Icon";
-import { MENU_ROLES } from "../Menu/constants";
+import * as React from 'react';
+import styled, {css} from 'styled-components';
+import Menu, {MenuButton} from '../Menu';
+import {Arrow} from '../Select/styles';
+import Icon from '../Icon';
+import {MENU_ROLES} from '../Menu/constants';
 
 import type {
   TypeListboxProps,
   TypeListboxButtonProps,
-} from "../Menu/index.flow";
-import type { TypeTheme } from "../types/theme.flow";
+} from '../Menu/index.flow';
+import type {TypeTheme} from '../types/theme.flow';
 
 export const Listbox = ({
   role = MENU_ROLES.LISTBOX,
@@ -37,7 +37,7 @@ export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(
   border-radius: ${(props) => props.theme.radii[500]};
   background-color: ${(props) => props.theme.colors.form.background.base};
   color: ${(props) => props.theme.colors.text.body};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   outline: none;
   appearance: none;
   transition: border-color ${(props) => props.theme.duration.fast}
@@ -54,21 +54,21 @@ export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(
 
   padding: ${(props) => {
     switch (props.size) {
-      case "large":
+      case 'large':
         return `${props.theme.space[400]} ${props.theme.space[600]} ${props.theme.space[400]} ${props.theme.space[400]}`;
-      case "small":
+      case 'small':
         return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
-      case "default":
+      case 'default':
       default:
         return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
     }
   }};
   font-size: ${(props) => {
     switch (props.size) {
-      case "large":
+      case 'large':
         return props.theme.typography[300].fontSize;
-      case "small":
-      case "default":
+      case 'small':
+      case 'default':
       default:
         return props.theme.typography[200].fontSize;
     }
@@ -91,7 +91,7 @@ export const ListboxButton = ({
   <ListboxButtonContainer
     {...restProps}
     popoutProps={{
-      placement: "bottom-start",
+      placement: 'bottom-start',
       ...(restProps.popoutProps || {}),
     }}
   >