@sproutsocial/racine 11.2.3-dependencies.0 → 11.2.4-linkupdate.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 11.2.4
+
+### Patch Changes
+
+- 206bd32: copy updates to the TypeProps comments that power Seeds prop tables
+
+## 11.2.3
+
+### Patch Changes
+
+- 514d738: Patch badge component flow issue
+
 ## 11.2.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.js

@@ -7,7 +7,7 @@ import Box from "../Box";
 type TypeProps = {
   children?: React.Node,
   /** DEPRECATED: Use children instead of text */
-  text: React.Node,
+  text?: React.Node,
   /** Size default is deprecated in favor of small and large */
   size?: "small" | "large" | "default",
   badgeColor?:

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.js

@@ -8,10 +8,11 @@ type TypeProps = {
   /** Optional prop to make the URL open in a new tab */
   external?: boolean,
   children: React.Node,
+  /** Setting this prop will cause the component to be rendered as a link */
   href?: string,
   /** Disables user action and applies a disabled style to the component */
   disabled?: boolean,
-  /** Setting this prop will cause the component to be rendered as a button instead of an anchor) */
+  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
   underline?: boolean,

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

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.3-dependencies.0",
+  "version": "11.2.4-linkupdate.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -64,7 +64,6 @@
     ]
   },
   "dependencies": {
-    "@storybook/addon-controls": "^6.4.19",
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
@@ -78,14 +77,14 @@
     "react-popper": "^1.3.3",
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
-    "react-virtualized": "9.22.3",
+    "react-virtualized": "9.18.5",
     "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.12.9",
+    "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -100,22 +99,20 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@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/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/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/theming": "^6.1.11",
     "@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.2.3",
+    "babel-loader": "8.0.6",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.0",
@@ -143,7 +140,7 @@
     "jest": "26.1.0",
     "jest-axe": "3.4.0",
     "jest-dom": "^3.5.0",
-    "jest-styled-components": "7.0.8",
+    "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
@@ -151,15 +148,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.27.9",
+    "playroom": "^0.22.2",
     "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.9",
-    "styled-components": "5.3.3",
+    "storybook-dark-mode": "^1.0.7",
+    "styled-components": "5.0.0-rc.2",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -184,7 +181,6 @@
     "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"
   },