@sproutsocial/racine 10.0.0-dar97-beta.1 → 10.0.1-dependencies.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- 98f063a: Make theme names consistent by removing references to "default-light" and "default-dark"
+  - We no longer refer to the "light" theme as "default-light" in the theme object.
+  - We no longer refer to the "dark" theme as "default-dark" in the theme object.
+- 98f063a: Change "themed" SCSS mixin setup
+  - A parent theme classname of 'theme--light' or 'theme--dark' is no longer required to use the mixin.
+  - A separate mixin is offered per theme, instead of a single mixin for all themes.
+- 98f063a: Rename "default" theme to "light"
+
+## 9.0.3
+
+### Patch Changes
+
+- a9a06a6: Added aliases for sentiment colors
+
+## 9.0.2
+
+### Patch Changes
+
+- 3215099: bug fix for mix blend mode
+
 ## 9.0.1
 
 ### Patch Changes

package/__flow__/Avatar/index.test.js

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

package/__flow__/Button/styles.js

@@ -87,7 +87,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       align-items: center;
       justify-content: center;
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
 
       ${pill}
     `}

package/__flow__/CharacterCounter/index.test.js

@@ -2,7 +2,6 @@ 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", () => {
@@ -13,11 +12,4 @@ 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,7 +2,6 @@ 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" }];
@@ -15,40 +14,4 @@ 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__/Checkbox/styles.js

@@ -35,7 +35,7 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
       ${pill}
 
       &:hover {

package/__flow__/EmptyState/index.test.js

@@ -97,7 +97,6 @@ describe("EmptyState", () => {
     );
     const element = getByText("Reload Page");
     expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule("color", "#FFFFFF");
   });
 
   it("should render a secondary button", async () => {
@@ -105,7 +104,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}
           />
@@ -118,6 +117,5 @@ 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,7 +2,6 @@ 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", () => {
@@ -83,10 +82,6 @@ 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", () => {
@@ -99,9 +94,4 @@ 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/__snapshots__/index.test.js.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
-<body>
-  .c5 {
+.c5 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -20,12 +19,12 @@ exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
   width: 16px;
 }
 
-_:-ms-fullscreen .c5,
+_:-ms-fullscreen .c4,
 html .c5 {
   width: 16px;
 }
 
-.pdf-page .c5 {
+.pdf-page .c4 {
   width: 16px;
 }
 
@@ -131,7 +130,8 @@ html .c5 {
   transform: none;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >
@@ -185,12 +185,12 @@ exports[`Listbox AsListbox should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c6,
+_:-ms-fullscreen .c5,
 html .c6 {
   width: 16px;
 }
 
-.pdf-page .c6 {
+.pdf-page .c5 {
   width: 16px;
 }
 
@@ -375,8 +375,7 @@ html .c6 {
 `;
 
 exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
-<body>
-  .c0 {
+.c0 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
   margin: 0px;
@@ -550,7 +549,8 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   }
 }
 
-<div>
+<body>
+  <div>
     <ul
       aria-activedescendant="MenuItem-28"
       aria-multiselectable="true"
@@ -673,8 +673,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 `;
 
 exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
-<body>
-  .c0 {
+.c0 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
   margin: 0px;
@@ -905,7 +904,8 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   }
 }
 
-<div>
+<body>
+  <div>
     <ul
       aria-activedescendant="MenuItem-34"
       aria-multiselectable="true"

package/__flow__/Loader/index.test.js

@@ -8,18 +8,4 @@ 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

@@ -270,8 +270,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 `;
 
 exports[`Menu AsMenuButton should match snapshot 1`] = `
-<body>
-  .c3 {
+.c3 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -284,12 +283,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c3,
+_:-ms-fullscreen .c2,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c3 {
+.pdf-page .c2 {
   width: 16px;
 }
 
@@ -357,7 +356,8 @@ html .c3 {
   display: inline-block;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >

package/__flow__/Modal/index.test.js

@@ -7,25 +7,6 @@ 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__/Modal/styles.js

@@ -6,7 +6,6 @@ import styled, {
 } from "styled-components";
 import { width, zIndex } from "styled-system";
 import ReactModal from "react-modal";
-import { transparentize } from "polished";
 import Box from "../Box";
 import { COMMON } from "../utils/system-props";
 
@@ -62,8 +61,7 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAd
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${(props) =>
-      transparentize(0.32, props.theme.colors.neutral[1000])};
+    background-color: ${(props) => props.theme.colors.overlay.background.base};
     opacity: 0;
     will-change: opacity;
     transition: opacity ${(props) => props.theme.duration.medium}

package/__flow__/Text/index.test.js

@@ -4,49 +4,10 @@ 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/__flow__/themes/dark/{_themes.scss → _themed.scss}

@@ -2,15 +2,16 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/dark/dark.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($dark, 'default');
 
 // MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
 @mixin themed() {
   & {
     $theme-map: () !global;