@sproutsocial/racine 7.1.0-beta-maurice.0 → 7.2.1

package/__flow__/TableRowAccordion/index.js

@@ -35,7 +35,7 @@ export default class TableRowAccordion extends React.Component<TypeProps> {
       <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
         <tr data-tablerowaccordion-summary onClick={this.handleToggle}>
           {cells.map((td) => {
-            return <TableCell key={td.id} {...td} />;
+            return <TableCell {...td} key={td.id} />;
           })}
           <TableCell
             id="tableRowAccordion_trigger"

package/__flow__/Text/index.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import Container from "./styles";
+import styled from "styled-components";
 
 type TypeProps = {
   /** Maps to the typeScale system prop, sets font size and line height using Seeds values */
@@ -25,9 +26,44 @@ type TypeProps = {
   qa?: Object,
 };
 
-/**
- * The Text Component is used to render textual content in various presentations.
- */
+const Headline = styled(Container)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[400]}
+`;
+
+const SubHeadline = styled(Container)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[300]}
+`;
+
+const SmallSubHeadline = styled(Container)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[200]}
+`;
+
+const Byline = styled(Container)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[200]}
+`;
+
+const SmallByline = styled(Container)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[100]}
+`;
+
+const BodyCopy = styled(Container)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[300]}
+`;
+
+const SmallBodyCopy = styled(Container)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[200]}
+`;
+
 const Text = ({ fontSize, children, qa, ...rest }: TypeProps) => {
   const qaText = typeof children === "string" ? children : undefined;
 
@@ -39,4 +75,12 @@ const Text = ({ fontSize, children, qa, ...rest }: TypeProps) => {
   );
 };
 
+Text.Headline = Headline;
+Text.SubHeadline = SubHeadline;
+Text.SmallSubHeadline = SmallSubHeadline;
+Text.Byline = Byline;
+Text.SmallByline = SmallByline;
+Text.BodyCopy = BodyCopy;
+Text.SmallBodyCopy = SmallBodyCopy;
+
 export default Text;

package/__flow__/Text/index.stories.js

@@ -15,164 +15,85 @@ defaultStory.story = {
   name: "Default",
 };
 
-export const size100 = () => (
-  <Text fontSize={number("fontSize", 100)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size100.story = {
-  name: "Size 100",
-};
-
-export const size200 = () => (
-  <Text fontSize={number("fontSize", 200)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size200.story = {
-  name: "Size 200",
-};
-
-export const size300 = () => (
-  <Text fontSize={number("fontSize", 300)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size300.story = {
-  name: "Size 300",
-};
-
-export const size400 = () => (
-  <Text fontSize={number("fontSize", 400)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size400.story = {
-  name: "Size 400",
-};
-
-export const size500 = () => (
-  <Text fontSize={number("fontSize", 500)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size500.story = {
-  name: "Size 500",
-};
-
-export const size600 = () => (
-  <Text fontSize={number("fontSize", 600)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size600.story = {
-  name: "Size 600",
-};
-
-export const size700 = () => (
-  <Text fontSize={number("fontSize", 700)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size700.story = {
-  name: "Size 700",
-};
-
-export const size800 = () => (
-  <Text fontSize={number("fontSize", 800)}>
-    {text("children", "Some default content here.")}
-  </Text>
-);
-
-size800.story = {
-  name: "Size 800",
-};
-
-export const size900 = () => (
-  <Text fontSize={number("fontSize", 900)}>
+export const bold = () => (
+  <Text fontWeight={text("fontWeight", "bold")}>
     {text("children", "Some default content here.")}
   </Text>
 );
 
-size900.story = {
-  name: "Size 900",
+bold.story = {
+  name: "Bold",
 };
 
-export const size1000 = () => (
-  <Text fontSize={number("fontSize", 1000)}>
+export const italicized = () => (
+  <Text isItalicized={boolean("isItalicized", true)}>
     {text("children", "Some default content here.")}
   </Text>
 );
 
-size1000.story = {
-  name: "Size 1000",
+italicized.story = {
+  name: "Italicized",
 };
 
-export const bold = () => (
-  <Text fontWeight={text("fontWeight", "bold")}>
+export const headline = () => (
+  <Text.Headline as={text("as", "h1")}>
     {text("children", "Some default content here.")}
-  </Text>
+  </Text.Headline>
 );
 
-bold.story = {
-  name: "Bold",
+headline.story = {
+  name: "Headline",
 };
 
-export const italicized = () => (
-  <Text isItalicized={boolean("isItalicized", true)}>
+export const subheadline = () => (
+  <Text.SubHeadline as={text("as", "h2")}>
     {text("children", "Some default content here.")}
-  </Text>
+  </Text.SubHeadline>
 );
 
-italicized.story = {
-  name: "Italicized",
+subheadline.story = {
+  name: "Subheadline",
 };
 
-export const h1Tag = () => (
-  <Text as={text("as", "h1")}>
+export const smallSubheadline = () => (
+  <Text.SmallSubHeadline as={text("as", "h3")}>
     {text("children", "Some default content here.")}
-  </Text>
+  </Text.SmallSubHeadline>
 );
 
-h1Tag.story = {
-  name: "H1 tag",
+smallSubheadline.story = {
+  name: "Small subheadline",
 };
 
-export const h2Tag = () => (
-  <Text as={text("as", "h2")}>
+export const bodyCopy = () => (
+  <Text.BodyCopy as={text("as", "p")}>
     {text("children", "Some default content here.")}
-  </Text>
+  </Text.BodyCopy>
 );
 
-h2Tag.story = {
-  name: "H2 tag",
+bodyCopy.story = {
+  name: "Body copy",
 };
 
-export const pTag = () => (
-  <Text as={text("as", "p")}>
+export const smallBodyCopy = () => (
+  <Text.SmallBodyCopy as={text("as", "p")}>
     {text("children", "Some default content here.")}
-  </Text>
+  </Text.SmallBodyCopy>
 );
 
-pTag.story = {
-  name: "P tag",
+smallBodyCopy.story = {
+  name: "Small body copy",
 };
 
-export const spanTag = () => (
-  <Text as={text("as", "span")}>
-    {text("children", "Some default content here.")}
+export const customSize = () => (
+  <Text as={text("as", "span")} fontSize={number("fontSize", 1000)}>
+    {text("children", "")}
+    Custom sized text!
   </Text>
 );
 
-spanTag.story = {
-  name: "Span tag",
+customSize.story = {
+  name: "Custom size",
 };
 
 export const noWordBreak = () => (

package/__flow__/Text/index.test.js

@@ -27,10 +27,26 @@ describe("Text", () => {
     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__/Text/styles.js

@@ -9,6 +9,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.span`
   padding-left: 0;
   padding-right: 0;
   font-family: ${(props) => props.theme.fontFamily};
+  font-style: ${(props) => props.isItalicized && "italic"};
 
   ${(props) =>
     props.truncated &&

package/__flow__/utils/theme.js

@@ -310,7 +310,6 @@ const colors = {
     hubspot: NETWORKCOLORS.NETWORK_COLOR_HUBSPOT,
     microsoft_dynamics: NETWORKCOLORS.NETWORK_COLOR_MICROSOFT_DYNAMICS,
     yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
-
   },
 };
 

package/commonjs/Checkbox/index.js

@@ -71,7 +71,9 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         tabIndex = _this$props.tabIndex,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex"]);
+        _this$props$inputProp = _this$props.inputProps,
+        inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"]);
 
     var isPill = appearance === "pill"; // TODO: Refactor pill checkboxes to use fewer elements for performance gains
 
@@ -98,7 +100,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
+      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
         disabled: disabled
       }, label));
     }
@@ -126,13 +128,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa)), /*#__PURE__*/React.createElement(_styles.CheckboxBox, null, /*#__PURE__*/React.createElement(_styles.CheckIcon, {
+      }, qa, inputProps)), /*#__PURE__*/React.createElement(_styles.CheckboxBox, null, /*#__PURE__*/React.createElement(_styles.CheckIcon, {
         name: indeterminate ? "minus" : "check",
         size: "mini",
         fixedWidth: true
-      }))), label && !isPill && /*#__PURE__*/React.createElement(_styles.LabelText, {
-        disabled: disabled
-      }, label))
+      }))))
     );
   };
 

package/commonjs/Table/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -21,78 +21,87 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+var renderTableRow = function renderTableRow(row) {
+  return /*#__PURE__*/React.createElement("tbody", {
+    key: row.id,
+    "data-qa-table-row": ""
+  }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
+    return /*#__PURE__*/React.createElement(_TableCell.default, _extends({}, td, {
+      key: td.id
+    }));
+  })));
+};
 /**
  * The table component assist in rendering tablular data.
  */
-var Table = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Table, _React$Component);
-
-  function Table() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _this.renderTableRow = function (row) {
-      return /*#__PURE__*/React.createElement("tbody", {
-        key: row.id,
-        "data-qa-table-row": ""
-      }, /*#__PURE__*/React.createElement("tr", null, row.cells.map(function (td) {
-        return /*#__PURE__*/React.createElement(_TableCell.default, _extends({
-          key: td.id
-        }, td));
-      })));
-    };
-
-    return _this;
+
+
+var Table = function Table(_ref) {
+  var _ref$head = _ref.head,
+      head = _ref$head === void 0 ? [] : _ref$head,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? [] : _ref$rows,
+      onSort = _ref.onSort,
+      sortId = _ref.sortId,
+      sortDirection = _ref.sortDirection,
+      rowRender = _ref.rowRender,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender", "children"]);
+
+  if (children) {
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
+      "data-qa-table": ""
+    }), children);
   }
 
-  var _proto = Table.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        head = _this$props.head,
-        rows = _this$props.rows,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rowRender = _this$props.rowRender,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["head", "rows", "onSort", "sortId", "sortDirection", "rowRender"]);
-
-    return (
-      /*#__PURE__*/
-      // $FlowIssue - upgrade v0.112.0
-      React.createElement(_styles.default, _extends({
-        "data-qa-table": ""
-      }, rest), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
-        "data-qa-table-header": ""
-      }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
-        return /*#__PURE__*/React.createElement(_TableHeaderCell.default, _extends({}, th, {
-          key: th.id,
-          onSort: onSort,
-          sortId: sortId,
-          sortDirection: sortDirection
-        }));
-      }))), rows.map(function (row) {
-        return rowRender ? rowRender(row) : _this2.renderTableRow(row);
-      }))
-    );
-  };
-
-  return Table;
-}(React.Component);
-
-exports.default = Table;
-Table.defaultProps = {
-  head: [],
-  rows: []
-};
+  return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
+    "data-qa-table": ""
+  }), head.length > 0 && /*#__PURE__*/React.createElement("thead", {
+    "data-qa-table-header": ""
+  }, /*#__PURE__*/React.createElement("tr", null, head.map(function (th) {
+    return /*#__PURE__*/React.createElement(_TableHeaderCell.default, _extends({}, th, {
+      key: th.id,
+      onSort: onSort,
+      sortId: sortId,
+      sortDirection: sortDirection
+    }));
+  }))), rows.map(function (row) {
+    return rowRender ? rowRender(row) : renderTableRow(row);
+  }));
+};
+
+exports.Table = Table;
+
+var TableHead = function TableHead(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return /*#__PURE__*/React.createElement("thead", props, children);
+};
+
+exports.TableHead = TableHead;
+
+var TableBody = function TableBody(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+
+  return /*#__PURE__*/React.createElement("tbody", props, children);
+};
+
+exports.TableBody = TableBody;
+
+var TableRow = function TableRow(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children"]);
+
+  return /*#__PURE__*/React.createElement("tr", props, children);
+};
+
+exports.TableRow = TableRow;
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = _TableHeaderCell.default;
+Table.Cell = _TableCell.default;
+var _default = Table;
+exports.default = _default;

package/commonjs/TableCell/index.js

@@ -40,15 +40,16 @@ var TableCell = /*#__PURE__*/function (_React$Component) {
         colSpan = _this$props.colSpan,
         width = _this$props.width,
         align = _this$props.align,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align"]);
+        children = _this$props.children,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "children"]);
 
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
       alignment: align || "left",
       key: id,
       colSpan: colSpan,
       width: width,
       "data-qa-table-cell": ""
-    }, rest), content);
+    }), children || content);
   };
 
   return TableCell;

package/commonjs/TableHeaderCell/index.js

@@ -60,39 +60,54 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }));
     };
 
+    _this.handleClick = function (e) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onSort = _this$props.onSort,
+          isSortable = _this$props.isSortable,
+          id = _this$props.id;
+
+      if (onClick) {
+        onClick(e);
+        return;
+      }
+
+      if (!isSortable || !onSort) return;
+      onSort(id);
+    };
+
     return _this;
   }
 
   var _proto = TableHeaderCell.prototype;
 
   _proto.render = function render() {
-    var _this$props = this.props,
-        id = _this$props.id,
-        content = _this$props.content,
-        colSpan = _this$props.colSpan,
-        width = _this$props.width,
-        align = _this$props.align,
-        isSortable = _this$props.isSortable,
-        shouldTruncate = _this$props.shouldTruncate,
-        onSort = _this$props.onSort,
-        sortId = _this$props.sortId,
-        sortDirection = _this$props.sortDirection,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection"]);
-
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    var _this$props2 = this.props,
+        id = _this$props2.id,
+        content = _this$props2.content,
+        colSpan = _this$props2.colSpan,
+        width = _this$props2.width,
+        align = _this$props2.align,
+        isSortable = _this$props2.isSortable,
+        shouldTruncate = _this$props2.shouldTruncate,
+        onSort = _this$props2.onSort,
+        sortId = _this$props2.sortId,
+        sortDirection = _this$props2.sortDirection,
+        children = _this$props2.children,
+        onClick = _this$props2.onClick,
+        rest = _objectWithoutPropertiesLoose(_this$props2, ["id", "content", "colSpan", "width", "align", "isSortable", "shouldTruncate", "onSort", "sortId", "sortDirection", "children", "onClick"]);
+
+    return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
       key: id,
       alignment: align || "left",
       sortable: isSortable,
       colSpan: colSpan,
       width: width,
-      onClick: isSortable && onSort ? function () {
-        return onSort(id);
-      } : undefined,
+      onClick: this.handleClick,
       "data-tableheadercell-sortable": isSortable,
       "data-qa-table-header-cell": "",
-      "data-qa-table-header-cell-sortdirection": sortDirection // $FlowIssue - upgrade v0.112.0
-
-    }, rest), content, isSortable && this.getSortIcon(id === sortId));
+      "data-qa-table-header-cell-sortdirection": sortDirection
+    }), children || content, isSortable && !children && this.getSortIcon(id === sortId));
   };
 
   return TableHeaderCell;

package/commonjs/TableRowAccordion/index.js

@@ -72,9 +72,9 @@ var TableRowAccordion = /*#__PURE__*/function (_React$Component) {
       "data-tablerowaccordion-summary": true,
       onClick: this.handleToggle
     }, cells.map(function (td) {
-      return /*#__PURE__*/React.createElement(_TableCell.default, _extends({
+      return /*#__PURE__*/React.createElement(_TableCell.default, _extends({}, td, {
         key: td.id
-      }, td));
+      }));
     }), /*#__PURE__*/React.createElement(_TableCell.default, {
       id: "tableRowAccordion_trigger",
       content: /*#__PURE__*/React.createElement(_styles.Trigger, {