@sproutsocial/racine 11.0.1-menustyles.0 → 11.0.2-dependencies.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.0.1
+
+### Patch Changes
+
+- 82a6a89: Adjusted styling of selected state to be less confusing for users based on org wide feedback
+
 ## 11.0.0
 
 ### Major 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__/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__/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__/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

@@ -14,12 +14,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;
 }
 

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__/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.0.1-menustyles.0",
+  "version": "11.0.2-dependencies.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -21,6 +21,7 @@
     "./includeIcons.js"
   ],
   "scripts": {
+    "preinstall": "node ./bin/buildNpm.js",
     "install-deps": "yarn install",
     "prepublishOnly": "yarn run build",
     "precommit": "lint-staged",
@@ -62,6 +63,7 @@
     ]
   },
   "dependencies": {
+    "@storybook/addon-controls": "^6.4.19",
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
@@ -75,14 +77,14 @@
     "react-popper": "^1.3.3",
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
-    "react-virtualized": "9.18.5",
+    "react-virtualized": "9.22.3",
     "scroll-into-view-if-needed": "1.1.0",
     "styled-system": "^5.1.5",
     "use-measure": "^0.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -97,20 +99,22 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addon-viewport": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.1.11",
+    "@storybook/theming": "^6.4.19",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",
+    "axios": "^0.26.1",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.1.0",
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.2.3",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.0",
@@ -138,7 +142,7 @@
     "jest": "26.1.0",
     "jest-axe": "3.4.0",
     "jest-dom": "^3.5.0",
-    "jest-styled-components": "7.0.0-beta.1",
+    "jest-styled-components": "7.0.8",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
@@ -146,15 +150,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.22.2",
+    "playroom": "^0.27.9",
     "prettier": "^2.0.5",
     "prop-types": "^15.6.1",
     "react": "16.12.0",
     "react-dates": "^21.8.0",
     "react-dom": "16.12.0",
     "rimraf": "^2.6.3",
-    "storybook-dark-mode": "^1.0.7",
-    "styled-components": "5.0.0-rc.2",
+    "storybook-dark-mode": "^1.0.9",
+    "styled-components": "5.3.3",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -179,6 +183,7 @@
     "styled-components": "^5.0.0-rc.2"
   },
   "resolutions": {
+    "**/eslint-import-resolver-node": "0.3.4",
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0"
   },