@sproutsocial/racine 10.0.1-dependencies.0 → 10.0.2-menuCSS.0

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__/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__/Listbox/index.test.js

@@ -165,10 +165,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListbox />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with option role", async () => {
       const { findByText, queryByLabelText, queryByRole } = render(
         <AsListbox />
@@ -211,10 +207,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox multiselect", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListboxMultiselect />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with option role", async () => {
       const { queryByLabelText, queryByText, queryByRole } = render(
         <AsListboxMultiselect />
@@ -244,10 +236,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with checkboxes", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListboxWithCheckboxes />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with checkbox role", async () => {
       const { queryByRole } = render(<AsListboxWithCheckboxes />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
@@ -267,12 +255,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with filter input", () => {
-    it("should match snapshot", () => {
-      expect(
-        render(<AsListboxWithFilterInput />).baseElement
-      ).toMatchSnapshot();
-    });
-
     it("should allow filtering", async () => {
       const { queryByLabelText, queryAllByRole } = render(
         <AsListboxWithFilterInput />

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" }
+    );
+  });
 });