@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Text/index.stories.js

@@ -1,134 +1,132 @@
 // @flow
-import React from "react";
-import { boolean, number, text } from "@storybook/addon-knobs";
+import React from 'react';
 
-import Text from "./";
+import Text, {type TypeProps} from './';
 
 export default {
-  title: "Text",
+  title: 'Components/Text',
+  component: Text,
+  argTypes: {
+    fontWeight: {
+      options: ['normal', 'bold'],
+      control: {type: 'select'},
+    },
+    truncated: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    children: 'Some default content here.',
+    isItalicized: false,
+    fontWeight: undefined,
+    truncated: undefined,
+  },
 };
 
-export const defaultStory = () => (
-  <Text>{text("children", "Some default content here.")}</Text>
-);
+export const defaultStory = (args: TypeProps) => <Text {...args} />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const bold = () => (
-  <Text fontWeight={text("fontWeight", "bold")}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
+export const headline = (args: TypeProps) => <Text.Headline {...args} />;
 
-bold.story = {
-  name: "Bold",
+headline.args = {
+  as: 'h1',
 };
 
-export const italicized = () => (
-  <Text isItalicized={boolean("isItalicized", true)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-italicized.story = {
-  name: "Italicized",
+headline.story = {
+  name: 'Headline',
 };
 
-export const headline = () => (
-  <Text.Headline as={text("as", "h1")}>
-    {text("children", "Some default content here.")}
-  </Text.Headline>
-);
+export const subheadline = (args: TypeProps) => <Text.SubHeadline {...args} />;
 
-headline.story = {
-  name: "Headline",
+subheadline.args = {
+  as: 'h2',
 };
 
-export const subheadline = () => (
-  <Text.SubHeadline as={text("as", "h2")}>
-    {text("children", "Some default content here.")}
-  </Text.SubHeadline>
-);
-
 subheadline.story = {
-  name: "Subheadline",
+  name: 'Subheadline',
 };
 
-export const smallSubheadline = () => (
-  <Text.SmallSubHeadline as={text("as", "h3")}>
-    {text("children", "Some default content here.")}
-  </Text.SmallSubHeadline>
+export const smallSubheadline = (args: TypeProps) => (
+  <Text.SmallSubHeadline {...args} />
 );
 
+smallSubheadline.args = {
+  as: 'h3',
+};
+
 smallSubheadline.story = {
-  name: "Small subheadline",
+  name: 'Small subheadline',
 };
 
-export const bodyCopy = () => (
-  <Text.BodyCopy as={text("as", "p")}>
-    {text("children", "Some default content here.")}
-  </Text.BodyCopy>
-);
+export const bodyCopy = (args: TypeProps) => <Text.BodyCopy {...args} />;
+
+bodyCopy.args = {
+  as: 'p',
+};
 
 bodyCopy.story = {
-  name: "Body copy",
+  name: 'Body copy',
 };
 
-export const smallBodyCopy = () => (
-  <Text.SmallBodyCopy as={text("as", "p")}>
-    {text("children", "Some default content here.")}
-  </Text.SmallBodyCopy>
+export const smallBodyCopy = (args: TypeProps) => (
+  <Text.SmallBodyCopy {...args} />
 );
 
+smallBodyCopy.args = {
+  as: 'p',
+};
+
 smallBodyCopy.story = {
-  name: "Small body copy",
+  name: 'Small body copy',
 };
 
-export const customSize = () => (
-  <Text as={text("as", "span")} fontSize={number("fontSize", 1000)}>
-    {text("children", "")}
-    Custom sized text!
-  </Text>
-);
+export const customSize = (args: TypeProps) => <Text {...args} />;
+
+customSize.args = {
+  children: 'Custom sized text!',
+  as: 'span',
+  fontSize: 1000,
+};
 
 customSize.story = {
-  name: "Custom size",
+  name: 'Custom size',
 };
 
-export const noWordBreak = () => (
-  <Text>
-    {text("children", "")}
-    "Wordsdonotbreak...SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
-  </Text>
-);
+const longText =
+  'SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious';
+
+export const noWordBreak = (args: TypeProps) => <Text {...args} />;
+
+noWordBreak.args = {
+  children: longText,
+};
 
 noWordBreak.story = {
-  name: "No word break",
+  name: 'No word break',
 };
 
-export const wordBreak = () => (
-  <Text breakWord={text("overflow", "breakWord")}>
-    "Wordsdonotbreak...SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
-  </Text>
-);
+export const wordBreak = (args: TypeProps) => <Text {...args} />;
+
+wordBreak.args = {
+  children: longText,
+  breakWord: 'breakWord',
+};
 
 wordBreak.story = {
-  name: "Word break",
-};
-
-export const truncated = () => (
-  <Text
-    fontSize={number("fontSize", 700)}
-    truncated={boolean("isTruncated", true)}
-  >
-    Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious
-    Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious
-    Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious
-  </Text>
-);
+  name: 'Word break',
+};
+
+export const truncated = (args: TypeProps) => <Text {...args} />;
+
+truncated.args = {
+  children: longText,
+  fontSize: 700,
+  truncated: true,
+};
 
 truncated.story = {
-  name: "Truncated",
+  name: 'Truncated',
 };

package/__flow__/Text/index.test.js

@@ -1,53 +1,49 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Text from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Text from './';
 
-describe("Text", () => {
-  it("does not set word break or truncated styles by default", () => {
-    const { getByDataQaLabel } = render(<Text children="Default" />);
-    const component = getByDataQaLabel({ text: "Default" });
-    expect(component).not.toHaveStyleRule("word-break", "break-word");
-    expect(component).not.toHaveStyleRule("text-overflow", "ellipsis");
+describe('Text', () => {
+  it('does not set word break or truncated styles by default', () => {
+    const {getByDataQaLabel} = render(<Text children="Default" />);
+    const component = getByDataQaLabel({text: 'Default'});
+    expect(component).not.toHaveStyleRule('word-break', 'break-word');
+    expect(component).not.toHaveStyleRule('text-overflow', 'ellipsis');
   });
 
-  it("sets word break styles when breakWord is true", () => {
-    const { getByDataQaLabel } = render(
-      <Text breakWord children="Word Break" />
-    );
-    const component = getByDataQaLabel({ text: "Word Break" });
-    expect(component).toHaveStyleRule("word-break", "break-word");
+  it('sets word break styles when breakWord is true', () => {
+    const {getByDataQaLabel} = render(<Text breakWord children="Word Break" />);
+    const component = getByDataQaLabel({text: 'Word Break'});
+    expect(component).toHaveStyleRule('word-break', 'break-word');
   });
 
-  it("sets truncated styles when truncated is true", () => {
-    const { getByDataQaLabel } = render(
-      <Text truncated children="Truncated" />
-    );
-    const component = getByDataQaLabel({ text: "Truncated" });
-    expect(component).toHaveStyleRule("text-overflow", "ellipsis");
+  it('sets truncated styles when truncated is true', () => {
+    const {getByDataQaLabel} = render(<Text truncated children="Truncated" />);
+    const component = getByDataQaLabel({text: 'Truncated'});
+    expect(component).toHaveStyleRule('text-overflow', 'ellipsis');
   });
 
-  it("is italic when isItalicized is true", () => {
-    const { getByDataQaLabel } = render(
+  it('is italic when isItalicized is true', () => {
+    const {getByDataQaLabel} = render(
       <Text isItalicized children="Italicized" />
     );
-    const component = getByDataQaLabel({ text: "Italicized" });
-    expect(component).toHaveStyleRule("font-style", "italic");
+    const component = getByDataQaLabel({text: 'Italicized'});
+    expect(component).toHaveStyleRule('font-style', 'italic');
   });
 
-  it("outputs the correct string/content", () => {
-    const { getByText } = render(
+  it('outputs the correct string/content', () => {
+    const {getByText} = render(
       <Text children="Supercalifragilisticexpialidocious" />
     );
-    expect(getByText("Supercalifragilisticexpialidocious")).toBeTruthy();
+    expect(getByText('Supercalifragilisticexpialidocious')).toBeTruthy();
   });
 
-  it("displays a custom size if using fontSize", () => {
-    const { getByText } = render(
+  it('displays a custom size if using fontSize', () => {
+    const {getByText} = render(
       <Text children="Custom sized text!" fontSize={1000} />
     );
-    const component = getByText("Custom sized text!");
-    expect(component).toHaveStyleRule("font-size", "76px");
+    const component = getByText('Custom sized text!');
+    expect(component).toHaveStyleRule('font-size', '76px');
   });
 });

package/__flow__/Text/styles.js

@@ -1,15 +1,15 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON, LAYOUT, TYPOGRAPHY } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON, LAYOUT, TYPOGRAPHY} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
   font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => props.isItalicized && "italic"};
+  font-style: ${(props) => props.isItalicized && 'italic'};
 
   ${(props) =>
     props.truncated &&

package/__flow__/Textarea/index.js

@@ -1,8 +1,8 @@
 // @flow
-import * as React from "react";
-import Container, { Accessory } from "./styles";
+import * as React from 'react';
+import Container, {Accessory} from './styles';
 
-type TypeProps = {
+export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,
@@ -40,7 +40,7 @@ type TypeProps = {
   /** Props to spread onto the underlying textarea element */
   inputProps?: any,
   /** Used to get a reference to the underlying element */
-  innerRef?: React.Ref<"textarea">,
+  innerRef?: React.Ref<'textarea'>,
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
@@ -151,7 +151,7 @@ export default class Textarea extends React.Component<TypeProps> {
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}
           ref={innerRef}
-          data-qa-textarea-input={""}
+          data-qa-textarea-input={''}
           data-qa-input={name}
           {...inputProps}
         />

package/__flow__/Textarea/index.stories.js

@@ -1,129 +1,90 @@
 // @flow
-import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
+import React from 'react';
 
-import Textarea from "./";
-import Icon from "../Icon";
+import Textarea, {type TypeProps} from './';
+import Icon from '../Icon';
 
 export default {
-  title: "Textarea",
+  title: 'Components/Form Elements/Textarea',
+  component: Textarea,
+  argTypes: {
+    isInvalid: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    readOnly: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    id: 'textarea',
+    value: '',
+    name: 'basic-textarea',
+    placeholder: 'Enter your resume...',
+    ariaLabel: 'Descriptive label',
+    isInvalid: undefined,
+    disabled: undefined,
+    readOnly: undefined,
+  },
 };
 
-export const defaultStory = () => (
-  <Textarea
-    id="textarea"
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-  />
-);
+export const defaultStory = (args: TypeProps) => <Textarea {...args} />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const invalid = () => (
-  <Textarea
-    id="textarea"
-    isInvalid={boolean("isInvalid", true)}
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-  />
-);
+export const readOnly = (args: TypeProps) => <Textarea {...args} />;
 
-invalid.story = {
-  name: "Invalid",
+readOnly.args = {
+  value: 'This is a read only textarea',
+  readOnly: true,
 };
 
-export const disabled = () => (
-  <Textarea
-    id="textarea"
-    disabled={boolean("disabled", true)}
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-  />
-);
-
-disabled.story = {
-  name: "Disabled",
-};
-
-export const readOnly = () => (
-  <Textarea
-    id="textarea"
-    readOnly={boolean("readOnly", true)}
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-  />
-);
-
 readOnly.story = {
-  name: "Read Only",
+  name: 'Read Only',
 };
 
-export const leftIcon = () => (
-  <Textarea
-    id="textarea"
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-    elemBefore={<Icon name="search" />}
-  />
+export const leftIcon = (args: TypeProps) => (
+  <Textarea elemBefore={<Icon name="search" />} {...args} />
 );
 
 leftIcon.story = {
-  name: "Left icon",
+  name: 'Left icon',
 };
 
-export const rightIcon = () => (
-  <Textarea
-    id="textarea"
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-    elemAfter={<Icon name="search" />}
-  />
+export const rightIcon = (args: TypeProps) => (
+  <Textarea elemAfter={<Icon name="search" />} {...args} />
 );
 
 rightIcon.story = {
-  name: "Right icon",
+  name: 'Right icon',
 };
 
-export const autofocus = () => (
-  <Textarea
-    id="textarea"
-    autoFocus
-    value={text("value", "")}
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Enter your resume...")}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
-  />
-);
+export const autofocus = (args: TypeProps) => <Textarea autoFocus {...args} />;
 
 autofocus.story = {
-  name: "Autofocus",
+  name: 'Autofocus',
 };
 
-export const maxLength = () => (
+export const maxLength = (args: TypeProps) => (
   <Textarea
-    id="textarea"
-    autoFocus
-    name={text("name", "basic-textarea")}
-    placeholder={text("placeholder", "Max Length is 10")}
-    maxLength={10}
-    ariaLabel={text("ariaLabel", "Descriptive label")}
+    // we have to omit value here for uncontrolled to demo without state
+    id={args.id}
+    name={args.name}
+    placeholder={args.placeholder}
+    maxLength={args.maxLength}
+    ariaLabel={args.ariaLabel}
   />
 );
 
+maxLength.args = {
+  placeholder: 'Max length is 10 characters',
+  maxLength: 10,
+};
+
 maxLength.story = {
-  name: "Max Length",
+  name: 'Max Length',
 };

package/__flow__/Textarea/index.test.js

@@ -1,18 +1,18 @@
 // @flow
-import React from "react";
-import "jest-styled-components";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Textarea from "./";
-import Text from "../Text";
+import React from 'react';
+import 'jest-styled-components';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Textarea from './';
+import Text from '../Text';
 
-describe("Textarea", () => {
-  it("should render statuses properly", () => {
-    const { getByDataQaLabel } = render(<Textarea id="text" name="text" />);
-    expect(getByDataQaLabel({ textarea: "text" })).toBeTruthy();
+describe('Textarea', () => {
+  it('should render statuses properly', () => {
+    const {getByDataQaLabel} = render(<Textarea id="text" name="text" />);
+    expect(getByDataQaLabel({textarea: 'text'})).toBeTruthy();
   });
 
-  it("should render before and after element", () => {
-    const { getByText } = render(
+  it('should render before and after element', () => {
+    const {getByText} = render(
       <Textarea
         elemAfter={<Text>After</Text>}
         elemBefore={<Text>Before</Text>}
@@ -20,14 +20,14 @@ describe("Textarea", () => {
         name="text"
       />
     );
-    expect(getByText("Before")).toBeTruthy();
-    expect(getByText("After")).toBeTruthy();
+    expect(getByText('Before')).toBeTruthy();
+    expect(getByText('After')).toBeTruthy();
   });
 
-  it("should notify on changes", () => {
+  it('should notify on changes', () => {
     const mockOnChange = jest.fn();
     const mockEventHandler = jest.fn();
-    const { getByDataQaLabel } = render(
+    const {getByDataQaLabel} = render(
       <Textarea
         id="name"
         name="name"
@@ -39,14 +39,14 @@ describe("Textarea", () => {
         value="User"
       />
     );
-    const textarea = getByDataQaLabel({ input: "name" });
+    const textarea = getByDataQaLabel({input: 'name'});
     expect(textarea).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "updated" } });
+    fireEvent.change(textarea, {target: {value: 'updated'}});
     expect(mockOnChange).toHaveBeenCalled();
 
     // Ensure that the event handlers aren't getting attached to the root level
     // element (only the actual textarea itself)
-    const textareaContainer = getByDataQaLabel({ textarea: "name" });
+    const textareaContainer = getByDataQaLabel({textarea: 'name'});
     expect(textareaContainer).toBeTruthy();
     fireEvent.change(textareaContainer);
     expect(mockOnChange.mock.calls.length).toEqual(1);
@@ -57,28 +57,28 @@ describe("Textarea", () => {
     expect(mockEventHandler.mock.calls.length).toEqual(0);
   });
 
-  describe("readOnly prop", () => {
-    it.each([true, "foobar", 1])(
-      "should correctly add the readonly prop for truthy values: %p",
+  describe('readOnly prop', () => {
+    it.each([true, 'foobar', 1])(
+      'should correctly add the readonly prop for truthy values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <Textarea id="name" name="name" readOnly={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-          "readonly",
-          ""
+        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+          'readonly',
+          ''
         );
       }
     );
 
-    it.each([false, null, undefined, 0, ""])(
-      "should correctly leave off readonly prop for falsey values: %p",
+    it.each([false, null, undefined, 0, ''])(
+      'should correctly leave off readonly prop for falsey values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <Textarea id="name" name="name" readOnly={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).not.toHaveAttribute(
-          "readonly"
+        expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
+          'readonly'
         );
       }
     );