@sproutsocial/racine 11.0.2-dependencies.0 → 11.0.2

package/__flow__/Message/index.js

@@ -92,6 +92,7 @@ Message.Body = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Body.displayName = "Message.Body";
 
 Message.Header = (props) => (
   <MessageContext.Consumer>
@@ -100,6 +101,7 @@ Message.Header = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Header.displayName = "Message.Header";
 
 Message.Footer = (props) => (
   <MessageContext.Consumer>
@@ -113,6 +115,7 @@ Message.Footer = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Footer.displayName = "Message.Footer";
 
 Message.Meta = (props) => (
   <MessageContext.Consumer>
@@ -126,16 +129,19 @@ Message.Meta = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Meta.displayName = "Message.Meta";
 
 Message.Button = (props: TypeButtonProps) => (
   <Button {...props} appearance={props.appearance || "pill"} />
 );
+Message.Button.displayName = "Message.Button";
 
 Message.Avatar = (props: TypeAvatarProps) => (
   <MessageContext.Consumer>
     {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}
   </MessageContext.Consumer>
 );
+Message.Avatar.displayName = "Message.Avatar";
 
 Message.Checkbox = (props: TypeCheckboxProps) => (
   <MessageContext.Consumer>
@@ -145,6 +151,7 @@ Message.Checkbox = (props: TypeCheckboxProps) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Checkbox.displayName = "Message.Checkbox";
 
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;

package/__flow__/Modal/index.js

@@ -183,6 +183,11 @@ Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
 
+Modal.Header.displayName = "Modal.Header";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.Content.displayName = "Modal.Content";
+Modal.CloseButton.displayName = "Modal.CloseButton";
+
 Modal.defaultProps = {
   width: "800px",
   zIndex: 6,

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__/Popout/index.js

@@ -388,7 +388,7 @@ export default function Popout({
 }
 
 type TypePopoutContentProps = React.ElementConfig<typeof Box>;
-Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
+const PopoutContent = ({ children, ...rest }: TypePopoutContentProps) => (
   <Box
     bg="container.background.base"
     color="text.body"
@@ -403,3 +403,6 @@ Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
     {children}
   </Box>
 );
+
+Popout.Content = PopoutContent;
+Popout.Content.displayName = "Popout.Content";

package/__flow__/SegmentedControl/index.js

@@ -111,4 +111,6 @@ const SegmentedControl = ({
 
 SegmentedControl.Item = SegmentedControlItem;
 
+SegmentedControl.Item.displayName = "SegmentedControl.Item";
+
 export default SegmentedControl;

package/__flow__/Table/index.js

@@ -116,4 +116,10 @@ Table.TableRow = TableRow;
 Table.HeaderCell = TableHeaderCell;
 Table.Cell = TableCell;
 
+Table.TableHead.displayName = "Table.TableHead";
+Table.TableBody.displayName = "Table.TableBody";
+Table.TableRow.displayName = "Table.TableRow";
+Table.HeaderCell.displayName = "Table.HeaderCell";
+Table.Cell.displayName = "Table.Cell";
+
 export default Table;

package/__flow__/Text/index.js

@@ -83,4 +83,12 @@ Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
 
+Text.Headline.displayName = "Text.Headline";
+Text.SubHeadline.displayName = "Text.SubHeadline";
+Text.SmallSubHeadline.displayName = "Text.SmallSubHeadline";
+Text.Byline.displayName = "Text.Byline";
+Text.SmallByline.displayName = "Text.SmallByline";
+Text.BodyCopy.displayName = "Text.BodyCopy";
+Text.SmallBodyCopy.displayName = "Text.SmallBodyCopy";
+
 export default Text;

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/__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/Breadcrumb/index.js

@@ -63,5 +63,6 @@ var Breadcrumb = function Breadcrumb(_ref2) {
 };
 
 Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Item.displayName = "Breadcrumb.Item";
 var _default = Breadcrumb;
 exports.default = _default;

package/commonjs/Collapsible/index.js

@@ -135,5 +135,7 @@ var Panel = function Panel(_ref3) {
 
 Collapsible.Trigger = Trigger;
 Collapsible.Panel = Panel;
+Collapsible.Trigger.displayName = "Collapsible.Trigger";
+Collapsible.Panel.displayName = "Collapsible.Panel";
 var _default = Collapsible;
 exports.default = _default;

package/commonjs/Drawer/index.js

@@ -233,5 +233,8 @@ var DrawerContainer = function DrawerContainer(_ref4) {
 DrawerContainer.Header = DrawerHeader;
 DrawerContainer.Content = DrawerContent;
 DrawerContainer.CloseButton = DrawerCloseButton;
+DrawerContainer.Header.displayName = "Drawer.Header";
+DrawerContainer.Content.displayName = "Drawer.Content";
+DrawerContainer.CloseButton.displayName = "Drawer.CloseButton";
 var _default = DrawerContainer;
 exports.default = _default;

package/commonjs/Fieldset/index.js

@@ -51,7 +51,7 @@ var Fieldset = function Fieldset(_ref) {
   );
 };
 
-Fieldset.Legend = function (_ref2) {
+var FieldsetLegend = function FieldsetLegend(_ref2) {
   var children = _ref2.children,
       rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
@@ -64,7 +64,7 @@ Fieldset.Legend = function (_ref2) {
   }, rest), children);
 };
 
-Fieldset.HelperText = function (_ref3) {
+var FieldsetHelperText = function FieldsetHelperText(_ref3) {
   var children = _ref3.children,
       rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
 
@@ -75,5 +75,9 @@ Fieldset.HelperText = function (_ref3) {
   }, rest), children);
 };
 
+Fieldset.Legend = FieldsetLegend;
+Fieldset.HelperText = FieldsetHelperText;
+Fieldset.Legend.displayName = "Fieldset.Legend";
+Fieldset.HelperText.displayName = "Fieldset.HelperText";
 var _default = Fieldset;
 exports.default = _default;

package/commonjs/Icon/index.js

@@ -64,7 +64,7 @@ var ToggleableIcon = (0, _styledComponents.default)(Icon).withConfig({
   return !p.active && (0, _styledComponents.css)(["position:absolute;opacity:0;transform:scale(0);"]);
 });
 
-Icon.Toggle = function (_ref2) {
+var IconToggle = function IconToggle(_ref2) {
   var activeName = _ref2.activeName,
       inactiveName = _ref2.inactiveName,
       isActive = _ref2.isActive,
@@ -100,5 +100,7 @@ Icon.Toggle = function (_ref2) {
   );
 };
 
+Icon.Toggle = IconToggle;
+Icon.Toggle.displayName = "Icon.Toggle";
 var _default = Icon;
 exports.default = _default;

package/commonjs/IconViewBoxes.js

@@ -6,6 +6,7 @@ module.exports = {
   "add-keyword": "0 0 16 16",
   "add-team-member": "0 0 18 13",
   "add-variable": "0 0 18 14",
+  "address-card-outline": "0 0 16 16",
   "address-card-solid": "0 0 18 16",
   "adobe-experience-manager": "0 0 16 18",
   "ads": "0 0 9 16",
@@ -210,6 +211,7 @@ module.exports = {
   "location-outline": "0 0 12 16",
   "location": "0 0 12 16",
   "lock": "0 0 14 16",
+  "magic-wand": "0 0 17 16",
   "male": "0 0 16 20",
   "marketo": "0 0 16 18",
   "mention": "0 0 16 16",

package/commonjs/Menu/index.js

@@ -429,6 +429,12 @@ Menu.Checkbox = MenuCheckbox;
 Menu.Radio = MenuRadio;
 Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
+Menu.Group.displayName = "Menu.Group";
+Menu.Item.displayName = "Menu.Item";
+Menu.Checkbox.displayName = "Menu.Checkbox";
+Menu.Radio.displayName = "Menu.Radio";
+Menu.Divider.displayName = "Menu.Divider";
+Menu.FilterInput.displayName = "Menu.FilterInput";
 var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
   componentId: "sc-1p3rdnp-1"

package/commonjs/Message/index.js

@@ -98,6 +98,8 @@ Message.Body = function (props) {
   });
 };
 
+Message.Body.displayName = "Message.Body";
+
 Message.Header = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref3) {
     var density = _ref3.density,
@@ -109,6 +111,8 @@ Message.Header = function (props) {
   });
 };
 
+Message.Header.displayName = "Message.Header";
+
 Message.Footer = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref4) {
     var density = _ref4.density,
@@ -122,6 +126,8 @@ Message.Footer = function (props) {
   });
 };
 
+Message.Footer.displayName = "Message.Footer";
+
 Message.Meta = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref5) {
     var density = _ref5.density,
@@ -135,12 +141,16 @@ Message.Meta = function (props) {
   });
 };
 
+Message.Meta.displayName = "Message.Meta";
+
 Message.Button = function (props) {
   return /*#__PURE__*/React.createElement(_Button.default, _extends({}, props, {
     appearance: props.appearance || "pill"
   }));
 };
 
+Message.Button.displayName = "Message.Button";
+
 Message.Avatar = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref6) {
     var density = _ref6.density;
@@ -150,6 +160,8 @@ Message.Avatar = function (props) {
   });
 };
 
+Message.Avatar.displayName = "Message.Avatar";
+
 Message.Checkbox = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref7) {
     var density = _ref7.density;
@@ -164,6 +176,7 @@ Message.Checkbox = function (props) {
   });
 };
 
+Message.Checkbox.displayName = "Message.Checkbox";
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;
 var _default = Message;

package/commonjs/Modal/index.js

@@ -147,6 +147,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
+Modal.Header.displayName = "Modal.Header";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.Content.displayName = "Modal.Content";
+Modal.CloseButton.displayName = "Modal.CloseButton";
 Modal.defaultProps = {
   width: "800px",
   zIndex: 6

package/commonjs/Popout/index.js

@@ -280,7 +280,7 @@ function Popout(_ref) {
   }));
 }
 
-Popout.Content = function (_ref4) {
+var PopoutContent = function PopoutContent(_ref4) {
   var children = _ref4.children,
       rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
@@ -294,4 +294,7 @@ Popout.Content = function (_ref4) {
     p: 400,
     m: 300
   }, rest), children);
-};
+};
+
+Popout.Content = PopoutContent;
+Popout.Content.displayName = "Popout.Content";

package/commonjs/SegmentedControl/index.js

@@ -90,5 +90,6 @@ var SegmentedControl = function SegmentedControl(_ref2) {
 };
 
 SegmentedControl.Item = SegmentedControlItem;
+SegmentedControl.Item.displayName = "SegmentedControl.Item";
 var _default = SegmentedControl;
 exports.default = _default;

package/commonjs/Table/index.js

@@ -103,5 +103,10 @@ Table.TableBody = TableBody;
 Table.TableRow = TableRow;
 Table.HeaderCell = _TableHeaderCell.default;
 Table.Cell = _TableCell.default;
+Table.TableHead.displayName = "Table.TableHead";
+Table.TableBody.displayName = "Table.TableBody";
+Table.TableRow.displayName = "Table.TableRow";
+Table.HeaderCell.displayName = "Table.HeaderCell";
+Table.Cell.displayName = "Table.Cell";
 var _default = Table;
 exports.default = _default;

package/commonjs/Text/index.js

@@ -106,5 +106,12 @@ Text.Byline = Byline;
 Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
+Text.Headline.displayName = "Text.Headline";
+Text.SubHeadline.displayName = "Text.SubHeadline";
+Text.SmallSubHeadline.displayName = "Text.SmallSubHeadline";
+Text.Byline.displayName = "Text.Byline";
+Text.SmallByline.displayName = "Text.SmallByline";
+Text.BodyCopy.displayName = "Text.BodyCopy";
+Text.SmallBodyCopy.displayName = "Text.SmallBodyCopy";
 var _default = Text;
 exports.default = _default;