@sproutsocial/racine 11.8.0 → 11.9.0-typescript.0

package/__flow__/Button/{index.js → index.tsx}

@@ -1,37 +1,36 @@
-// @flow
-import * as React from "react";
+import React from "react";
 import Container from "./styles";
 
-export type TypeProps = {
+export interface ButtonType {
   /** 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",
+  external?: boolean;
+  size?: "large" | "default";
   /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance?:
+  appearance:
     | "primary"
     | "secondary"
     | "pill"
     | "destructive"
     | "default"
     | "unstyled"
-    | "placeholder",
+    | "placeholder";
   /** Set the button to display in its active state */
-  active?: boolean,
+  active?: boolean;
   /** Disables user action and applies a disabled style on the button */
-  disabled?: boolean,
-  children: React.Node,
+  disabled?: boolean;
+  children: React.ReactNode;
   /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
-  href?: string,
+  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,
-  qa?: Object,
-  as?: any,
+  onClick?: () => void;
+  title?: string;
+  qa?: Object;
+  as?: any;
   /** Label used to describe the button if the button does not have text within it */
-  ariaLabel?: string,
-};
+  ariaLabel?: string;
+}
 
 const Button = ({
   href,
@@ -47,8 +46,9 @@ const Button = ({
   qa = {},
   as,
   ariaLabel,
+
   ...rest
-}: TypeProps) => {
+}: ButtonType) => {
   if (!href && external) {
     console.warn(
       "Warning: external prop cannot be set without a href declaration"
@@ -60,6 +60,7 @@ const Button = ({
 
   return (
     <Container
+      className="container"
       title={title}
       active={active}
       href={href}
@@ -84,6 +85,4 @@ const Button = ({
   );
 };
 
-Button.displayName = "Button";
-
 export default Button;

package/__flow__/Button/{styles.js → styles.ts}

@@ -6,7 +6,7 @@ import Icon from "../Icon/styles";
 
 import type { TypeTheme } from "../types/theme.flow";
 
-const Container: StyledComponent<any, TypeTheme, *> = styled.button`
+const Container = styled.button`
   display: inline-block;
   box-sizing: border-box;
   text-align: center;

package/__flow__/Checkbox/index.stories.js

@@ -1,114 +1,131 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 
 import Checkbox from "./";
 
 export default {
   title: "Checkbox",
+  component: Checkbox,
 };
 
-export const Checked = () => <Checkbox checked={boolean("checked", true)} />;
-export const Unchecked = () => <Checkbox checked={boolean("checked", false)} />;
+export const Checked = (args) => <Checkbox {...args} />;
 
-export const PillChecked = () => (
-  <Checkbox appearance="pill" checked={boolean("checked", true)} />
-);
+Checked.args = { checked: true };
+
+export const Unchecked = (args) => <Checkbox {...args} />;
+
+Unchecked.args = { checked: false };
+
+export const PillChecked = (args) => <Checkbox {...args} />;
+
+PillChecked.args = {
+  checked: true,
+  appearance: "pill",
+};
 
 PillChecked.story = {
   name: "Pill/Checked",
 };
 
-export const PillUnchecked = () => (
-  <Checkbox appearance="pill" checked={boolean("checked", false)} />
-);
+export const PillUnchecked = (args) => <Checkbox {...args} />;
+
+PillUnchecked.args = {
+  checked: false,
+  appearance: "pill",
+};
 
 PillUnchecked.story = {
   name: "Pill/Unchecked",
 };
 
-export const DisabledChecked = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledChecked = (args) => <Checkbox {...args} />;
+
+DisabledChecked.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const DisabledUnchecked = () => (
-  <Checkbox
-    checked={boolean("checked", false)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledUnchecked = (args) => <Checkbox {...args} />;
+
+DisabledUnchecked.args = {
+  checked: false,
+  disabled: true,
+};
 
 DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const IndeterminateChecked = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    indeterminate={boolean("indeterminate", true)}
-  />
-);
+export const IndeterminateChecked = (args) => <Checkbox {...args} />;
+
+IndeterminateChecked.args = {
+  checked: true,
+  indeterminate: true,
+};
 
 IndeterminateChecked.story = {
   name: "Indeterminate/Checked",
 };
 
-export const IndeterminateUnchecked = () => (
-  <Checkbox
-    checked={boolean("checked", false)}
-    indeterminate={boolean("indeterminate", true)}
-  />
-);
+export const IndeterminateUnchecked = (args) => <Checkbox {...args} />;
+
+IndeterminateUnchecked.args = {
+  checked: false,
+  indeterminate: true,
+};
 
 IndeterminateUnchecked.story = {
   name: "Indeterminate/Unchecked",
 };
 
-export const LabelledChecked = () => (
-  <Checkbox checked={boolean("checked", true)} label="Check Me" />
-);
+export const LabelledChecked = (args) => <Checkbox {...args} />;
+
+LabelledChecked.args = {
+  checked: true,
+  label: "Labelled checkbox",
+};
 
 LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = () => (
-  <Checkbox checked={boolean("checked", false)} label="Check Me" />
-);
+export const LabelledUnchecked = (args) => <Checkbox {...args} />;
+
+LabelledUnchecked.args = {
+  checked: false,
+  label: "Labelled checkbox",
+};
 
 LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-    label="Check Me"
-  />
-);
+export const LabelledDisabled = (args) => <Checkbox {...args} />;
+
+LabelledDisabled.args = {
+  checked: true,
+  disabled: true,
+  label: "Labelled checkbox",
+};
 
 LabelledDisabled.story = {
   name: "Labelled/Disabled",
 };
 
-export const InputPropsOnMouseOver = () => (
-  <Checkbox
-    checked={boolean("checked", true)}
-    label="Check Me"
-    inputProps={{
-      onMouseOver: action("checkbox-mouseOver"),
-      onClick: action("checkbox-click"),
-    }}
-  />
-);
+export const InputPropsOnMouseOver = (args) => <Checkbox {...args} />;
+
+InputPropsOnMouseOver.args = {
+  checked: true,
+  label: "Labelled checkbox",
+  inputProps: {
+    onMouseOver: action("checkbox-mouseOver"),
+    onClick: action("checkbox-click"),
+  },
+};
 
 InputPropsOnMouseOver.story = {
   name: "InputProps/OnMouseOver",

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-    (props) => css`
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      position: relative;
-      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-      @supports (-webkit-appearance: none) {
-        &:before {
-          /* stylelint-disable */
-          content: url("data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? "indeterminate" : "check",
-
-            props.checked
-              ? props.theme.colors.form.background.base
-              : props.theme.colors.form.border.base
-          )}");
-          opacity: ${props.checked ? 1 : 0};
-          position: absolute;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          text-align: center;
-          transform: translateY(1px);
-          line-height: 1;
-          margin: auto;
-          pointer-events: none;
-          transition: ${props.theme.duration.fast}
-            ${props.theme.easing.ease_inout};
+  (props) => css`
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+    @supports (-webkit-appearance: none) {
+      &:before {
+        /* stylelint-disable */
+        content: url("data:image/svg+xml;utf8,${getIcon(
+          props.indeterminate ? "indeterminate" : "check",
+
+          props.checked
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
+        )}");
+        opacity: ${props.checked ? 1 : 0};
+        position: absolute;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        text-align: center;
+        transform: translateY(1px);
+        line-height: 1;
+        margin: auto;
+        pointer-events: none;
+        transition: ${props.theme.duration.fast}
+          ${props.theme.easing.ease_inout};
+      }
+
+      &:hover:before {
+        opacity: ${props.disabled && !props.checked ? 0 : 1};
+      }
+
+      ${props.disabled &&
+      css`
+        opacity: 0.4;
+      `}
+
+      input[type='checkbox'] {
+        box-sizing: border-box;
+        appearance: none;
+        margin: 0;
+        padding: 0;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        border: 1px solid ${props.theme.colors.form.border.base};
+        border-radius: 4px;
+        background-color: ${props.theme.colors.form.background.base};
+        transition: all ${props.theme.duration.fast}
+          ${props.theme.easing.ease_in};
+        cursor: ${props.disabled ? "not-allowed" : "pointer"};
+        flex-shrink: 0;
+
+        &:not(:checked) {
+          ${!props.indeterminate &&
+          css`
+            border-color: ${props.theme.colors
+              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+            background-color: ${props.theme.colors.form.background.base};
+          `}
         }
 
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
+        &:checked {
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
-        ${props.disabled &&
+        ${props.indeterminate &&
+        props.checked &&
         css`
-          opacity: 0.4;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
-        input[type='checkbox'] {
-          box-sizing: border-box;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          border: 1px solid ${props.theme.colors.form.border.base};
-          border-radius: 4px;
-          background-color: ${props.theme.colors.form.background.base};
-          transition: all ${props.theme.duration.fast}
-            ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? "not-allowed" : "pointer"};
-          flex-shrink: 0;
-
-          &:not(:checked) {
-            ${!props.indeterminate &&
-            css`
-              border-color: ${props.theme.colors
-                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-              background-color: ${props.theme.colors.form.background.base};
-            `}
-          }
-
-          &:checked {
-            border-color: ${props.theme.colors.form.border.selected};
-            background-color: ${props.theme.colors.form.background.selected};
-          }
-
-          ${props.indeterminate &&
-          props.checked &&
-          css`
-            border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background
-              .selected} !important;
-          `}
-
-          &:focus {
-            ${focusRing}
-          }
+        &:focus {
+          ${focusRing}
         }
       }
+    }
 
-      ${COMMON}
-    `
-  );
+    ${COMMON}
+  `
+);
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,8 +73,9 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } =
-    useContext(CollapsibleContext);
+  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
+    CollapsibleContext
+  );
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/Icon/index.stories.js

@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import { text } from "@storybook/addon-knobs";
-
 import Icon from "./";
 import Button from "../Button";
 import Box from "../Box";
@@ -10,65 +8,72 @@ export default {
   title: "Icon",
 };
 
-export const mini12X12 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "mini")}
-  />
-);
+export const mini12X12 = (args) => <Icon {...args} />;
+
+mini12X12.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "mini",
+};
 
 mini12X12.story = {
   name: "Mini (12 x 12)",
 };
 
-export const default16X16 = () => (
-  <Icon color="icon.base" name={text("name", "dashboard")} />
-);
+export const default16X16 = (args) => <Icon {...args} />;
+
+default16X16.args = {
+  color: "icon.base",
+  name: "dashboard",
+};
 
 default16X16.story = {
   name: "Default (16 x 16)",
 };
 
-export const medium24X24 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "medium")}
-  />
-);
+export const medium24X24 = (args) => <Icon {...args} />;
+
+medium24X24.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "medium",
+};
 
 medium24X24.story = {
   name: "Medium (24 x 24)",
 };
 
-export const large32X32 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "large")}
-  />
-);
+export const large32X32 = (args) => <Icon {...args} />;
+
+large32X32.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "large",
+};
 
 large32X32.story = {
   name: "Large (32 x 32)",
 };
 
-export const jumbo64X64 = () => (
-  <Icon
-    color="icon.base"
-    name={text("name", "dashboard")}
-    size={text("size", "jumbo")}
-  />
-);
+export const jumbo64X64 = (args) => <Icon {...args} />;
+
+jumbo64X64.args = {
+  color: "icon.base",
+  name: "dashboard",
+  size: "jumbo",
+};
 
 jumbo64X64.story = {
   name: "Jumbo (64 x 64)",
 };
 
-export const defaultFixedWidth = () => (
-  <Icon color="icon.success" name={text("name", "dashboard")} fixedWidth />
-);
+export const defaultFixedWidth = (args) => <Icon {...args} />;
+
+defaultFixedWidth.args = {
+  color: "icon.success",
+  name: "dashboard",
+  fixedWidth: true,
+};
 
 defaultFixedWidth.story = {
   name: "Fixed Width (16 x 16)",

package/__flow__/Image/index.js

@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
+    const {
+      alt,
+      title,
+      onClick,
+      onError,
+      onLoad,
+      src,
+      qa,
+      ...rest
+    } = this.props;
 
     return (
       <ImageContainer

package/__flow__/Loader/index.stories.js

@@ -1,34 +1,38 @@
 import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
-
 import Loader from "./";
 
 export default {
   title: "Loader",
+  component: Loader,
 };
 
-export const defaultStory = () => (
-  <Loader text={text("text", "Content loading")} />
-);
+export const defaultStory = (args) => <Loader {...args} />;
+
+defaultStory.args = {
+  text: "Content loading",
+};
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const small = () => (
-  <Loader text={text("text", "Content loading")} size={text("size", "small")} />
-);
+export const small = (args) => <Loader {...args} />;
+
+small.args = {
+  text: "Content loading",
+  size: "small",
+};
 
 small.story = {
   name: "Small",
 };
 
-export const noDelay = () => (
-  <Loader
-    text={text("text", "Content loading")}
-    delay={boolean("delay", false)}
-  />
-);
+export const noDelay = (args) => <Loader {...args} />;
+
+noDelay.args = {
+  text: "Content loading",
+  delay: false,
+};
 
 noDelay.story = {
   name: "No delay",