@sproutsocial/racine 11.0.2-dependencies.1 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 11.1.1
+
+### Patch Changes
+
+- 17cfdda: New Icon: power-up-outline
+
+## 11.1.0
+
+### Minor Changes
+
+- 03d1f1a: Export system props
+
 ## 11.0.2
 
 ### Patch Changes

package/__flow__/Avatar/index.test.js

@@ -14,4 +14,9 @@ describe("Avatar", () => {
     const { container } = render(<Avatar name="Test User" />);
     expect(container.textContent).toEqual("TU");
   });
+
+  it("should set the correct font size", () => {
+    const { getByText } = render(<Avatar name="Test User" />);
+    expect(getByText("TU")).toHaveStyleRule("font-size", "16px");
+  });
 });

package/__flow__/Badge/index.test.js

@@ -10,6 +10,11 @@ describe("Racine Badge", () => {
     expect(getByDataQaLabel({ "badge-type": "primary" })).toBeTruthy();
   });
 
+  it("should render with correct size styling", () => {
+    const { getByText } = render(<Badge text="Test" size="small" />);
+    expect(getByText("Test")).toHaveStyleRule("padding", "4px 8px");
+  });
+
   it("should render with secondary type", () => {
     const { getByText, getByDataQaLabel } = render(
       <Badge text="Test" type="secondary" />

package/__flow__/Button/index.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -7,140 +8,155 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = (args) => (
-  <Button {...args} onClick={() => alert("Testing...")}>
+export const defaultStory = () => (
+  <Button
+    appearance={text("appearance", "default")}
+    onClick={() => alert("Testing...")}
+  >
     Default
   </Button>
 );
 
-defaultStory.args = { appearance: "default" };
-
 defaultStory.story = {
   name: "Default",
 };
 
-export const primary = (args) => (
-  <Button {...args} onClick={() => alert("Testing...")}>
+export const primary = () => (
+  <Button
+    appearance={text("appearance", "primary")}
+    onClick={() => alert("Testing...")}
+  >
     Primary Button
   </Button>
 );
 
-primary.args = { appearance: "primary" };
-
 primary.story = {
   name: "Primary",
 };
 
-export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
-
-secondary.args = { appearance: "secondary" };
+export const secondary = () => (
+  <Button appearance={text("appearance", "secondary")}>Secondary Button</Button>
+);
 
 secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = (args) => (
-  <Button {...args}>Destructive Button</Button>
+export const destructive = () => (
+  <Button appearance={text("appearance", "destructive")}>
+    Destructive Button
+  </Button>
 );
 
-destructive.args = { appearance: "destructive" };
 destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = (args) => (
-  <Button {...args}>Placeholder Button</Button>
+export const placeholder = () => (
+  <Button appearance={text("appearance", "placeholder")}>
+    Placeholder Button
+  </Button>
 );
 
-placeholder.args = { appearance: "placeholder" };
 placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = (args) => <Button {...args}>Large Button</Button>;
-largeButton.args = { size: "large", appearance: "primary" };
+export const largeButton = () => (
+  <Button
+    appearance={text("appearance", "primary")}
+    size={text("size", "large")}
+  >
+    Large Button
+  </Button>
+);
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = (args) => (
+export const pillButton = () => (
   <Box bg="container.background.base" p={400}>
-    <Button {...args}>
+    <Button appearance={text("shape", "pill")}>
       <Icon name="reply" mr={350} />
       Pill Button
     </Button>
   </Box>
 );
-pillButton.args = { appearance: "pill" };
+
 pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = (args) => (
+export const pillIconOnlyButton = () => (
   <Box bg="container.background.base" p={400}>
-    <Button {...args} ariaLabel="This is a label">
+    <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>
   </Box>
 );
 
-pillIconOnlyButton.args = { appearance: "pill" };
 pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = (args) => <Button {...args}>Active Button</Button>;
+export const activeButton = () => (
+  <Button
+    appearance={text("appearance", "secondary")}
+    active={boolean("active", true)}
+  >
+    Active Button
+  </Button>
+);
 
-activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = (args) => (
-  <Button {...args}>Button using anchor element</Button>
+export const buttonAsALink = () => (
+  <Button
+    href={text("href", "http://sproutsocial.style")}
+    external={boolean("external", true)}
+    appearance={text("appearance", "primary")}
+  >
+    Button using anchor element
+  </Button>
 );
-buttonAsALink.args = {
-  appearance: "primary",
-  external: true,
-  href: "http://sproutsocial.style",
-};
+
 buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = (args) => (
-  <Button {...args}>This Button is disabled</Button>
+export const disabledButton = () => (
+  <Button
+    appearance={text("appearance", "primary")}
+    disabled={text("disabled", "true")}
+  >
+    This Button is disabled
+  </Button>
 );
-disabledButton.args = {
-  appearance: "primary",
-  disabled: true,
-};
+
 disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = (args) => (
-  <Button {...args}>Full-Width Button</Button>
+export const fullWidthButton = () => (
+  <Button appearance={text("appearance", "primary")} width={number("width", 1)}>
+    Full-Width Button
+  </Button>
 );
-fullWidthButton.args = {
-  appearance: "primary",
-  width: 1,
-};
+
 fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = (args) => (
-  <Button {...args}>
+export const withIcon = () => (
+  <Button appearance={text("appearance", "secondary")}>
     <Icon name="twitter" mr={350} />
     Secondary Button
   </Button>
 );
 
-withIcon.args = {
-  appearance: "secondary",
-};
 withIcon.story = {
   name: "With icon",
 };

package/__flow__/CharacterCounter/index.test.js

@@ -2,6 +2,7 @@ import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 import CharacterCounter from "./";
+import { COLOR_RED_800 } from "@sproutsocial/seeds-color";
 
 describe.only("CharacterCounter", () => {
   it("should render properly", () => {
@@ -12,4 +13,11 @@ describe.only("CharacterCounter", () => {
 
     expect(getByText(remainingNumber.toString())).toBeTruthy();
   });
+
+  it("should render properly with overlimit values", () => {
+    const { getByText } = render(
+      <CharacterCounter currentValue={2} maxValue={1} />
+    );
+    expect(getByText("-1")).toHaveStyleRule("color", COLOR_RED_800);
+  });
 });

package/__flow__/ChartLegend/index.test.js

@@ -2,6 +2,7 @@ import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 import ChartLegend from "./";
+import { CONTRAST_THEME, COMPARE_THEME } from "../utils/chartColors";
 
 describe("ChartLegend", () => {
   let legendLabelsArray = [{ name: "Label One" }, { name: "Label Two" }];
@@ -14,4 +15,40 @@ describe("ChartLegend", () => {
     expect(getByText("Label One")).toBeTruthy();
     expect(getByText("Label Two")).toBeTruthy();
   });
+
+  it("should render the correct theme", () => {
+    const { getAllByDataQaLabel } = render(
+      <ChartLegend legendLabels={legendLabelsArray} theme="contrast" />
+    );
+
+    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
+      "background-color",
+      CONTRAST_THEME[0]
+    );
+
+    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
+      "background-color",
+      CONTRAST_THEME[1]
+    );
+  });
+
+  it("should display a custom color", () => {
+    const newLegendLabelsArray = [
+      { name: "Label One", color: "#000" },
+      { name: "Label Two" },
+    ];
+    const { getAllByDataQaLabel } = render(
+      <ChartLegend legendLabels={newLegendLabelsArray} />
+    );
+
+    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
+      "background-color",
+      "#000"
+    );
+
+    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
+      "background-color",
+      COMPARE_THEME[1]
+    );
+  });
 });

package/__flow__/EmptyState/index.test.js

@@ -97,6 +97,7 @@ describe("EmptyState", () => {
     );
     const element = getByText("Reload Page");
     expect(element).toBeTruthy();
+    expect(element).toHaveStyleRule("color", "#FFFFFF");
   });
 
   it("should render a secondary button", async () => {
@@ -104,7 +105,7 @@ describe("EmptyState", () => {
       <EmptyState
         media={
           <Image
-            alt="No assets matching your 
 search or filters"
+            alt="No assets matching your
 search or filters"
             src="https://cl.ly/db498c7682df/download/analytics.svg"
             m={0}
           />
@@ -117,5 +118,6 @@ describe("EmptyState", () => {
     );
     const element = getByText("I'll do this later");
     expect(element).toBeTruthy();
+    expect(element).toHaveStyleRule("color", "#515e5f");
   });
 });

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" | "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" | "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";

package/__flow__/IconViewBoxes.js

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

package/__flow__/Link/index.test.js

@@ -2,6 +2,7 @@ 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", () => {
@@ -82,6 +83,10 @@ describe("Racine Link", () => {
     );
 
     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", () => {
@@ -94,4 +99,9 @@ describe("Racine 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");
+  });
 });

package/__flow__/Loader/index.test.js

@@ -8,4 +8,18 @@ describe("Loader", () => {
     const { getByText } = render(<Loader />);
     expect(getByText("Loading")).toBeTruthy();
   });
+
+  it("should render with small size class", () => {
+    const { getByDataQaLabel } = render(<Loader size="small" />);
+    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule("width", "20px");
+  });
+
+  it("should render with light theme", () => {
+    const { getByDataQaLabel } = render(<Loader color="light" />);
+    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule(
+      "border-color",
+      "rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.7) rgba(255,255,255,0.7)",
+      { modifier: ":after" }
+    );
+  });
 });

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -14,12 +14,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c2,
+_:-ms-fullscreen .c3,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c2 {
+.pdf-page .c3 {
   width: 16px;
 }
 

package/__flow__/Modal/index.test.js

@@ -7,6 +7,25 @@ import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
 afterEach(() => cleanup());
 
 describe("Modal", () => {
+  it("renders a custom background color", () => {
+    // Use baseElement since it renders in a Portal
+    const { baseElement } = render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        onClose={() => {}}
+        closeButtonLabel="Close this dialog"
+      >
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+    expect(baseElement.querySelector(".ReactModal__Content")).toHaveStyleRule(
+      "background-color",
+      COLOR_PURPLE_300
+    );
+  });
+
   it("should close on overlay click and esc", () => {
     const onClose = jest.fn();
     const { baseElement, getByText, getByLabelText } = render(

package/__flow__/Text/index.test.js

@@ -4,10 +4,49 @@ 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");
+  });
+
+  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("is italic when isItalicized is true", () => {
+    const { getByDataQaLabel } = render(
+      <Text isItalicized children="Italicized" />
+    );
+    const component = getByDataQaLabel({ text: "Italicized" });
+    expect(component).toHaveStyleRule("font-style", "italic");
+  });
+
   it("outputs the correct string/content", () => {
     const { getByText } = render(
       <Text children="Supercalifragilisticexpialidocious" />
     );
     expect(getByText("Supercalifragilisticexpialidocious")).toBeTruthy();
   });
+
+  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");
+  });
 });

package/commonjs/IconViewBoxes.js

@@ -257,6 +257,7 @@ module.exports = {
   "play": "0 0 14 16",
   "plus": "0 0 16 18",
   "positive-sentiment": "0 0 16 16",
+  "power-up-outline": "0 0 12 16",
   "power-up": "0 0 10 16",
   "profile-connect": "0 0 16 16",
   "profile-disconnect": "0 0 16 16",