@sproutsocial/racine 11.0.2-beta.0 → 11.1.0

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

@@ -0,0 +1,93 @@
+// @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 {
+  typographySystemProps,
+  type TypeTypographySystemProps,
+} from "../typography";
+
+describe("typography system props", () => {
+  const Component = styled<TypeTypographySystemProps, TypeTheme, "div">("div")`
+    ${typographySystemProps}
+  `;
+
+  test("fontFamily", () => {
+    const { container } = render(
+      <>
+        <Component fontFamily="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("fontSize", () => {
+    const { container } = render(
+      <>
+        <Component fontSize="string" />
+        <Component fontSize={100} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("fontStyle", () => {
+    const { container } = render(
+      <>
+        <Component fontStyle="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("fontWeight", () => {
+    const { container } = render(
+      <>
+        <Component fontWeight="normal" />
+        <Component fontWeight="semibold" />
+        <Component fontWeight="bold" />
+        <Component fontWeight="extrabold" />
+        <Component fontWeight={100} />
+        <Component
+          // $FlowExpectedError
+          fontWeight="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("letterSpacing", () => {
+    const { container } = render(
+      <>
+        <Component letterSpacing="string" />
+        <Component letterSpacing={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("lineHeight", () => {
+    const { container } = render(
+      <>
+        <Component lineHeight="string" />
+        <Component lineHeight={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("textAlign", () => {
+    const { container } = render(
+      <>
+        <Component textAlign="center" />
+        <Component
+          // $FlowExpectedError
+          textAlign="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,25 @@
+// @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 { variantSystemProps, type TypeVariantSystemProps } from "../variant";
+
+describe("variant system props", () => {
+  const Component = styled<TypeVariantSystemProps, TypeTheme, "div">("div")`
+    ${variantSystemProps}
+  `;
+
+  test("typeScale", () => {
+    const { container } = render(
+      <>
+        <Component typeScale="100" />
+        <Component
+          // $FlowExpectedError
+          typeScale={100}
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/__flow__/systemProps/types.flow.js

@@ -0,0 +1,20 @@
+// @flow strict
+
+export type TypeResponsiveSystemProp<T> =
+  | T
+  | [T]
+  | [T, T]
+  | [T, T, T]
+  | [T, T, T, T]
+  | [T, T, T, T, T];
+export type TypeBaseSystemProp<T> = ?T | boolean;
+// eslint-disable-next-line prettier/prettier
+export type TypeResponsiveBaseSystemProp<T> = TypeResponsiveSystemProp<TypeBaseSystemProp<T>>;
+
+export interface StyledSystemStyleFn {
+  (...args: mixed[]): mixed;
+
+  config?: { ... } | void;
+  propNames?: string[] | void;
+  cache?: { ... } | void;
+}

package/__flow__/systemProps/typography.js

@@ -0,0 +1,34 @@
+// @flow strict-local
+
+import { typography } from "styled-system";
+import type {
+  FontFamilyProperty,
+  FontSizeProperty,
+  FontStyleProperty,
+  FontWeightProperty,
+  LetterSpacingProperty,
+  LineHeightProperty,
+  TextAlignProperty,
+} from "csstype";
+
+import typeof { fontWeights as TypeofFontWeights } from "../themes/light/theme";
+import type {
+  StyledSystemStyleFn,
+  TypeResponsiveBaseSystemProp,
+} from "./types.flow.js";
+
+// https://styled-system.com/table#typography
+
+export type TypeTypographySystemProps = $ReadOnly<{|
+  fontFamily?: TypeResponsiveBaseSystemProp<FontFamilyProperty>,
+  fontSize?: TypeResponsiveBaseSystemProp<FontSizeProperty<number>>,
+  fontStyle?: TypeResponsiveBaseSystemProp<FontStyleProperty>,
+  // eslint-disable-next-line prettier/prettier
+  fontWeight?: TypeResponsiveBaseSystemProp<FontWeightProperty | $Keys<TypeofFontWeights>>,
+  // eslint-disable-next-line prettier/prettier
+  letterSpacing?: TypeResponsiveBaseSystemProp<LetterSpacingProperty<string | number>>,
+  lineHeight?: TypeResponsiveBaseSystemProp<LineHeightProperty<void>>,
+  textAlign?: TypeResponsiveBaseSystemProp<TextAlignProperty>,
+|}>;
+
+export const typographySystemProps: StyledSystemStyleFn = typography;

package/__flow__/systemProps/variant.js

@@ -0,0 +1,18 @@
+// @flow strict-local
+import { compose, variant } from "styled-system";
+import type { TypeTypography } from "../types/theme.flow";
+
+import type { TypeResponsiveBaseSystemProp } from "./types.flow.js";
+
+// https://styled-system.com/variants
+
+export type TypeVariantSystemProps = $ReadOnly<{|
+  typeScale?: TypeResponsiveBaseSystemProp<$Keys<TypeTypography>>,
+|}>;
+
+export const variantSystemProps = compose(
+  variant({
+    key: "typography",
+    prop: "typeScale",
+  })
+);

package/__flow__/themes/dark/theme.js

@@ -184,6 +184,7 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    applied: COLORS.COLOR_BLUE_400,
     positive_sentiment: COLORS.COLOR_BLUE_700,
     negative_sentiment: COLORS.COLOR_RED_600,
     neutral_sentiment: COLORS.COLOR_NEUTRAL_600,

package/__flow__/themes/light/theme.js

@@ -181,6 +181,7 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    applied: COLORS.COLOR_BLUE_700,
     positive_sentiment: COLORS.COLOR_BLUE_700,
     negative_sentiment: COLORS.COLOR_RED_600,
     neutral_sentiment: COLORS.COLOR_NEUTRAL_600,

package/commonjs/index.js

@@ -1,8 +1,86 @@
 "use strict";
 
 exports.__esModule = true;
+var _exportNames = {
+  visuallyHidden: true,
+  focusRing: true,
+  disabled: true,
+  useSelect: true,
+  useMultiselect: true,
+  useTextContent: true,
+  theme: true,
+  darkTheme: true,
+  Icon: true,
+  Alert: true,
+  Banner: true,
+  Badge: true,
+  Indicator: true,
+  Card: true,
+  CharacterCounter: true,
+  Checkbox: true,
+  Radio: true,
+  Textarea: true,
+  ToggleHint: true,
+  Loader: true,
+  Text: true,
+  Image: true,
+  KeyboardKey: true,
+  ChartLegend: true,
+  Table: true,
+  TableCell: true,
+  TableHeaderCell: true,
+  TableRowAccordion: true,
+  Box: true,
+  Label: true,
+  Input: true,
+  Select: true,
+  Button: true,
+  Link: true,
+  Switch: true,
+  Token: true,
+  TokenInput: true,
+  Tabs: true,
+  Modal: true,
+  Popout: true,
+  ThemeProvider: true,
+  Tooltip: true,
+  Drawer: true,
+  LoaderButton: true,
+  Numeral: true,
+  Collapsible: true,
+  SegmentedControl: true,
+  EmptyState: true,
+  FormField: true,
+  Fieldset: true,
+  Message: true,
+  Stack: true,
+  Avatar: true,
+  Breadcrumb: true,
+  Skeleton: true,
+  ToastContainer: true,
+  Menu: true,
+  Listbox: true,
+  OverflowList: true,
+  toast: true,
+  MenuButton: true,
+  MenuButtonContext: true,
+  MenuItemContainer: true,
+  ListboxButton: true,
+  SingleDatePicker: true,
+  DateRangePicker: true,
+  VisuallyHidden: true
+};
 exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
 
+var _systemProps = require("./systemProps");
+
+Object.keys(_systemProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _systemProps[key]) return;
+  exports[key] = _systemProps[key];
+});
+
 var _mixins = require("./utils/mixins");
 
 exports.visuallyHidden = _mixins.visuallyHidden;

package/commonjs/systemProps/background.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.backgroundSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var backgroundSystemProps = _styledSystem.background;
+exports.backgroundSystemProps = backgroundSystemProps;

package/commonjs/systemProps/border.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.borderSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var borderSystemProps = _styledSystem.border;
+exports.borderSystemProps = borderSystemProps;

package/commonjs/systemProps/color.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.colorSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var colorSystemProps = _styledSystem.color;
+exports.colorSystemProps = colorSystemProps;

package/commonjs/systemProps/custom.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.customSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var customSystemProps = (0, _styledSystem.compose)((0, _styledSystem.system)({
+  cursor: true,
+  whiteSpace: true
+}));
+exports.customSystemProps = customSystemProps;

package/commonjs/systemProps/flexbox.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.flexboxSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var flexboxSystemProps = _styledSystem.flexbox;
+exports.flexboxSystemProps = flexboxSystemProps;

package/commonjs/systemProps/grid.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.gridSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var gridSystemProps = _styledSystem.grid;
+exports.gridSystemProps = gridSystemProps;

package/commonjs/systemProps/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _typesFlow = require("./types.flow.js");
+
+Object.keys(_typesFlow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typesFlow[key]) return;
+  exports[key] = _typesFlow[key];
+});
+
+var _background = require("./background");
+
+Object.keys(_background).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _background[key]) return;
+  exports[key] = _background[key];
+});
+
+var _border = require("./border");
+
+Object.keys(_border).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _border[key]) return;
+  exports[key] = _border[key];
+});
+
+var _color = require("./color");
+
+Object.keys(_color).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _color[key]) return;
+  exports[key] = _color[key];
+});
+
+var _custom = require("./custom");
+
+Object.keys(_custom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _custom[key]) return;
+  exports[key] = _custom[key];
+});
+
+var _flexbox = require("./flexbox");
+
+Object.keys(_flexbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _flexbox[key]) return;
+  exports[key] = _flexbox[key];
+});
+
+var _grid = require("./grid");
+
+Object.keys(_grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _grid[key]) return;
+  exports[key] = _grid[key];
+});
+
+var _layout = require("./layout");
+
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _layout[key]) return;
+  exports[key] = _layout[key];
+});
+
+var _position = require("./position");
+
+Object.keys(_position).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _position[key]) return;
+  exports[key] = _position[key];
+});
+
+var _shadow = require("./shadow");
+
+Object.keys(_shadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shadow[key]) return;
+  exports[key] = _shadow[key];
+});
+
+var _space = require("./space");
+
+Object.keys(_space).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _space[key]) return;
+  exports[key] = _space[key];
+});
+
+var _systemProps = require("./systemProps");
+
+Object.keys(_systemProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _systemProps[key]) return;
+  exports[key] = _systemProps[key];
+});
+
+var _typography = require("./typography");
+
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typography[key]) return;
+  exports[key] = _typography[key];
+});
+
+var _variant = require("./variant");
+
+Object.keys(_variant).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _variant[key]) return;
+  exports[key] = _variant[key];
+});

package/commonjs/systemProps/layout.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.layoutSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var layoutSystemProps = _styledSystem.layout;
+exports.layoutSystemProps = layoutSystemProps;

package/commonjs/systemProps/position.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.positionSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var positionSystemProps = _styledSystem.position;
+exports.positionSystemProps = positionSystemProps;

package/commonjs/systemProps/shadow.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.shadowSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var shadowSystemProps = _styledSystem.shadow;
+exports.shadowSystemProps = shadowSystemProps;

package/commonjs/systemProps/space.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.spaceSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+/* eslint-disable prettier/prettier */
+var spaceSystemProps = _styledSystem.space;
+exports.spaceSystemProps = spaceSystemProps;

package/commonjs/systemProps/systemProps.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.systemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var _background = require("./background");
+
+var _border = require("./border");
+
+var _color = require("./color");
+
+var _custom = require("./custom");
+
+var _flexbox = require("./flexbox");
+
+var _grid = require("./grid");
+
+var _layout = require("./layout");
+
+var _position = require("./position");
+
+var _shadow = require("./shadow");
+
+var _space = require("./space");
+
+var _typography = require("./typography");
+
+var _variant = require("./variant");
+
+var systemProps = (0, _styledSystem.compose)(_custom.customSystemProps, _variant.variantSystemProps, _background.backgroundSystemProps, _border.borderSystemProps, _color.colorSystemProps, _flexbox.flexboxSystemProps, _grid.gridSystemProps, _layout.layoutSystemProps, _position.positionSystemProps, _shadow.shadowSystemProps, _space.spaceSystemProps, _typography.typographySystemProps);
+exports.systemProps = systemProps;

package/commonjs/systemProps/tests/types.flow.js

@@ -0,0 +1,46 @@
+"use strict";
+
+/**
+ * All system props should be responsive but accepting a tuple of length 1-5.
+ */
+"a";
+["a"];
+["a", "a"];
+["a", "a", "a"];
+["a", "a", "a", "a"];
+["a", "a", "a", "a", "a"]; // $FlowExpectedError
+
+["a", "a", "a", "a", "a", "a"]; // $FlowExpectedError
+
+["b"]; // $FlowExpectedError
+
+[null];
+/**
+ * All system props should accept "base" values: boolean, null, and undefined.
+ */
+
+"a";
+true;
+false;
+null;
+undefined;
+/**
+ * All system props should be responsive and allow "base" values.
+ */
+
+"a";
+"b";
+true;
+false;
+null;
+undefined;
+["a", null, undefined, false, "b"];
+["a"]; // $FlowExpectedError
+
+"c"; // $FlowExpectedError
+
+1; // $FlowExpectedError
+
+({}); // $FlowExpectedError
+
+[];

package/commonjs/systemProps/types.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/systemProps/typography.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.typographySystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var typographySystemProps = _styledSystem.typography;
+exports.typographySystemProps = typographySystemProps;

package/commonjs/systemProps/variant.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.variantSystemProps = void 0;
+
+var _styledSystem = require("styled-system");
+
+var variantSystemProps = (0, _styledSystem.compose)((0, _styledSystem.variant)({
+  key: "typography",
+  prop: "typeScale"
+}));
+exports.variantSystemProps = variantSystemProps;

package/commonjs/themes/dark/theme.js

@@ -186,6 +186,7 @@ var colors = _extends({}, _theme.default.colors, {
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
     opportunity: _decorativePalettes.purple.foreground,
+    applied: _seedsColor.default.COLOR_BLUE_400,
     positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
     negative_sentiment: _seedsColor.default.COLOR_RED_600,
     neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600

package/commonjs/themes/light/theme.js

@@ -188,6 +188,7 @@ var colors = _extends({
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
     opportunity: _decorativePalettes.purple.foreground,
+    applied: _seedsColor.default.COLOR_BLUE_700,
     positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
     negative_sentiment: _seedsColor.default.COLOR_RED_600,
     neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600

package/dist/themes/dark/dark.scss

@@ -163,6 +163,7 @@ $dark: (
         danger: #ffd5d2,
         info: #dcf2ff,
         opportunity: #eaeaf9,
+        applied: #56adf5,
         positive_sentiment: #2079c3,
         negative_sentiment: #ed4c42,
         neutral_sentiment: #6e797a

package/dist/themes/light/light.scss

@@ -257,6 +257,7 @@ $light: (
         danger: #992222,
         info: #0c5689,
         opportunity: #5e4eba,
+        applied: #2079c3,
         positive_sentiment: #2079c3,
         negative_sentiment: #ed4c42,
         neutral_sentiment: #6e797a

package/lib/index.js

@@ -1,3 +1,4 @@
+export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";