@sproutsocial/racine 11.0.2-beta.0 → 11.1.0

package/__flow__/systemProps/tests/__snapshots__/shadow.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`shadow system props boxShadow 1`] = `
+.c0 {
+  box-shadow: string;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;
+
+exports[`shadow system props textShadow 1`] = `
+.c0 {
+  text-shadow: string;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;

package/__flow__/systemProps/tests/__snapshots__/space.test.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`space system props margin 1`] = `
+.c0 {
+  margin: string;
+}
+
+.c1 {
+  margin: 1px;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c1"
+  />
+</div>
+`;
+
+exports[`space system props padding 1`] = `
+.c0 {
+  padding: string;
+}
+
+.c1 {
+  padding: 1px;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c1"
+  />
+</div>
+`;

package/__flow__/systemProps/tests/__snapshots__/typography.test.js.snap

@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`typography system props fontFamily 1`] = `
+.c0 {
+  font-family: string;
+}
+
+<div>
+  <div
+    class="c0"
+    font-family="string"
+  />
+</div>
+`;
+
+exports[`typography system props fontSize 1`] = `
+.c0 {
+  font-size: string;
+}
+
+.c1 {
+  font-size: 100px;
+}
+
+<div>
+  <div
+    class="c0"
+    font-size="string"
+  />
+  <div
+    class="c1"
+    font-size="100"
+  />
+</div>
+`;
+
+exports[`typography system props fontStyle 1`] = `
+.c0 {
+  font-style: string;
+}
+
+<div>
+  <div
+    class="c0"
+    font-style="string"
+  />
+</div>
+`;
+
+exports[`typography system props fontWeight 1`] = `
+.c0 {
+  font-weight: 400;
+}
+
+.c1 {
+  font-weight: 600;
+}
+
+.c2 {
+  font-weight: 700;
+}
+
+.c3 {
+  font-weight: 800;
+}
+
+.c4 {
+  font-weight: 100;
+}
+
+.c5 {
+  font-weight: string;
+}
+
+<div>
+  <div
+    class="c0"
+    font-weight="normal"
+  />
+  <div
+    class="c1"
+    font-weight="semibold"
+  />
+  <div
+    class="c2"
+    font-weight="bold"
+  />
+  <div
+    class="c3"
+    font-weight="extrabold"
+  />
+  <div
+    class="c4"
+    font-weight="100"
+  />
+  <div
+    class="c5"
+    font-weight="string"
+  />
+</div>
+`;
+
+exports[`typography system props letterSpacing 1`] = `
+.c0 {
+  -webkit-letter-spacing: string;
+  -moz-letter-spacing: string;
+  -ms-letter-spacing: string;
+  letter-spacing: string;
+}
+
+.c1 {
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+}
+
+<div>
+  <div
+    class="c0"
+    letter-spacing="string"
+  />
+  <div
+    class="c1"
+    letter-spacing="1"
+  />
+</div>
+`;
+
+exports[`typography system props lineHeight 1`] = `
+.c0 {
+  line-height: string;
+}
+
+.c1 {
+  line-height: 1;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c1"
+  />
+</div>
+`;
+
+exports[`typography system props textAlign 1`] = `
+.c0 {
+  text-align: center;
+}
+
+.c1 {
+  text-align: string;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c1"
+  />
+</div>
+`;

package/__flow__/systemProps/tests/__snapshots__/variant.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`variant system props typeScale 1`] = `
+.c0 {
+  font-size: 11px;
+  line-height: 18.666666666666668px;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c0"
+  />
+</div>
+`;

package/__flow__/systemProps/tests/background.test.js

@@ -0,0 +1,90 @@
+// @flow strict-local
+import React from "react";
+import styled from "styled-components";
+import { render } from "../../utils/react-testing-library";
+import type { TypeTheme } from "../../types/theme.flow";
+import {
+  backgroundSystemProps,
+  type TypeBackgroundSystemProps,
+} from "../background";
+
+describe("background system props", () => {
+  const Component = styled<TypeBackgroundSystemProps, TypeTheme, "div">("div")`
+    ${backgroundSystemProps}
+  `;
+
+  test("background", () => {
+    const { container } = render(
+      <>
+        <Component background="string" />
+        <Component
+          background={
+            // $FlowExpectedError
+            1
+          }
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("backgroundImage", () => {
+    const { container } = render(
+      <>
+        <Component backgroundImage="string" />
+        <Component
+          backgroundImage={
+            // $FlowExpectedError
+            1
+          }
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("backgroundSize", () => {
+    const { container } = render(
+      <>
+        <Component backgroundSize="string" />
+        <Component
+          backgroundSize={
+            // $FlowExpectedError
+            1
+          }
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("backgroundPosition", () => {
+    const { container } = render(
+      <>
+        <Component backgroundPosition="string" />
+        <Component
+          backgroundPosition={
+            // $FlowExpectedError
+            1
+          }
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("backgroundRepeat", () => {
+    const { container } = render(
+      <>
+        <Component backgroundRepeat="string" />
+        <Component
+          backgroundRepeat={
+            // $FlowExpectedError
+            1
+          }
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/__flow__/systemProps/tests/border.test.js

@@ -0,0 +1,299 @@
+// @flow strict-local
+import React from "react";
+import styled from "styled-components";
+import { render } from "../../utils/react-testing-library";
+import type { TypeTheme } from "../../types/theme.flow";
+import { borderSystemProps, type TypeBorderSystemProps } from "../border";
+
+describe("border system props", () => {
+  const Component = styled<TypeBorderSystemProps, TypeTheme, "div">("div")`
+    ${borderSystemProps}
+  `;
+
+  test("border", () => {
+    const { container } = render(
+      <>
+        <Component border="string" />
+        <Component border={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottom", () => {
+    const { container } = render(
+      <>
+        <Component borderBottom="string" />
+        <Component borderBottom={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottomColor", () => {
+    const { container } = render(
+      <>
+        <Component borderBottomColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottomLeftRadius", () => {
+    const { container } = render(
+      <>
+        <Component borderBottomLeftRadius="string" />
+        <Component borderBottomLeftRadius={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottomRightRadius", () => {
+    const { container } = render(
+      <>
+        <Component borderBottomRightRadius="string" />
+        <Component borderBottomRightRadius={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottomStyle", () => {
+    const { container } = render(
+      <>
+        <Component borderBottomStyle="dashed" />
+        <Component
+          // $FlowExpectedError
+          borderBottomStyle="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderBottomWidth", () => {
+    const { container } = render(
+      <>
+        <Component borderBottomWidth="thick" />
+        <Component borderBottomWidth={1} />
+        <Component
+          // $FlowExpectedError
+          borderBottomWidth="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderColor", () => {
+    const { container } = render(
+      <>
+        <Component borderColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderLeft", () => {
+    const { container } = render(
+      <>
+        <Component borderLeft="string" />
+        <Component borderLeft={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderLeftColor", () => {
+    const { container } = render(
+      <>
+        <Component borderLeftColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderLeftStyle", () => {
+    const { container } = render(
+      <>
+        <Component borderLeftStyle="dashed" />
+        <Component
+          // $FlowExpectedError
+          borderLeftStyle="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderLeftWidth", () => {
+    const { container } = render(
+      <>
+        <Component borderLeftWidth="thick" />
+        <Component borderLeftWidth={1} />
+        <Component
+          // $FlowExpectedError
+          borderLeftWidth="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderRadius", () => {
+    const { container } = render(
+      <>
+        <Component borderRadius="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderRight", () => {
+    const { container } = render(
+      <>
+        <Component borderRight="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderRightColor", () => {
+    const { container } = render(
+      <>
+        <Component borderRightColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderRightStyle", () => {
+    const { container } = render(
+      <>
+        <Component borderRightStyle="dashed" />
+        <Component
+          // $FlowExpectedError
+          borderRightStyle="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderRightWidth", () => {
+    const { container } = render(
+      <>
+        <Component borderRightWidth="thick" />
+        <Component borderRightWidth={1} />
+        <Component
+          // $FlowExpectedError
+          borderRightWidth="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderStyle", () => {
+    const { container } = render(
+      <>
+        <Component borderStyle="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTop", () => {
+    const { container } = render(
+      <>
+        <Component borderTop="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTopColor", () => {
+    const { container } = render(
+      <>
+        <Component borderTopColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTopLeftRadius", () => {
+    const { container } = render(
+      <>
+        <Component borderTopLeftRadius="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTopRightRadius", () => {
+    const { container } = render(
+      <>
+        <Component borderTopRightRadius="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTopStyle", () => {
+    const { container } = render(
+      <>
+        <Component borderTopStyle="dashed" />
+        <Component
+          // $FlowExpectedError
+          borderTopStyle="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderTopWidth", () => {
+    const { container } = render(
+      <>
+        <Component borderTopWidth="thick" />
+        <Component borderTopWidth={1} />
+        <Component
+          // $FlowExpectedError
+          borderTopWidth="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderWidth", () => {
+    const { container } = render(
+      <>
+        <Component borderWidth="string" />
+        <Component borderWidth={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderX", () => {
+    const { container } = render(
+      <>
+        <Component borderX="string" />
+        <Component borderX={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("borderY", () => {
+    const { container } = render(
+      <>
+        <Component borderY="string" />
+        <Component borderY={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/__flow__/systemProps/tests/color.test.js

@@ -0,0 +1,49 @@
+// @flow strict-local
+import React from "react";
+import styled from "styled-components";
+import { render } from "../../utils/react-testing-library";
+import type { TypeTheme } from "../../types/theme.flow";
+import { colorSystemProps, type TypeColorSystemProps } from "../color";
+
+describe("color system props", () => {
+  const Component = styled<TypeColorSystemProps, TypeTheme, "div">("div")`
+    ${colorSystemProps}
+  `;
+
+  test("backgroundColor", () => {
+    const { container } = render(
+      <>
+        <Component backgroundColor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("bg", () => {
+    const { container } = render(
+      <>
+        <Component bg="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("color", () => {
+    const { container } = render(
+      <>
+        <Component color="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("opacity", () => {
+    const { container } = render(
+      <>
+        <Component opacity="0" />
+        <Component opacity={0} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});