@sproutsocial/racine 11.7.0 → 11.9.0-typescript.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 11.8.0
+
+### Minor Changes
+
+- 1b66f38: Input.ClearButton no longer requires onClear prop
+  - Input has been updated to be able to clear itself for both controlled and uncontrolled Inputs
+  - The onChange function will be called upon clearing the input.
+  - Due to this change, Inputs with type "search" will now automatically include a ClearButton, whereas previously a ClearButton would not be rendered unless an onClear prop was provided.
+
+### Patch Changes
+
+- 1b66f38: Adjust Input elemBefore and elemAfter positioning
+  - These elements were previously positioned 12px from the side of the Input
+  - They are now positioned 8px from the side of the Input, for better alignment with Input.ClearButton.
+- 1b66f38: Expose Input.ClearButton for uncontrolled Inputs
+  - Previously, Input.ClearButton would not be usable for uncontrolled Inputs due to checking whether a value was in the input to clear only via the "value" prop.
+  - Now, Input.ClearButton is usable for uncontrolled Inputs because it is checking for updates to the value in its handleChange function.
+
+## 11.7.1
+
+### Patch Changes
+
+- d7b2b1f: - Plug icon
+  - Alternate help icon
+
 ## 11.7.0
 
 ### Minor Changes

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__/EnumIconNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
+    export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";

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)",