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

package/commonjs/Text/index.js

@@ -7,6 +7,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -17,9 +19,69 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-/**
- * The Text Component is used to render textual content in various presentations.
- */
+var Headline = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__Headline",
+  componentId: "sc-12xhmyx-0"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[400];
+});
+var SubHeadline = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__SubHeadline",
+  componentId: "sc-12xhmyx-1"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[300];
+});
+var SmallSubHeadline = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__SmallSubHeadline",
+  componentId: "sc-12xhmyx-2"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[200];
+});
+var Byline = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__Byline",
+  componentId: "sc-12xhmyx-3"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.subtext;
+}, function (props) {
+  return props.theme.typography[200];
+});
+var SmallByline = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__SmallByline",
+  componentId: "sc-12xhmyx-4"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.subtext;
+}, function (props) {
+  return props.theme.typography[100];
+});
+var BodyCopy = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__BodyCopy",
+  componentId: "sc-12xhmyx-5"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.body;
+}, function (props) {
+  return props.theme.typography[300];
+});
+var SmallBodyCopy = (0, _styledComponents.default)(_styles.default).withConfig({
+  displayName: "Text__SmallBodyCopy",
+  componentId: "sc-12xhmyx-6"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.body;
+}, function (props) {
+  return props.theme.typography[200];
+});
+
 var Text = function Text(_ref) {
   var fontSize = _ref.fontSize,
       children = _ref.children,
@@ -37,5 +99,12 @@ var Text = function Text(_ref) {
   );
 };
 
+Text.Headline = Headline;
+Text.SubHeadline = SubHeadline;
+Text.SmallSubHeadline = SmallSubHeadline;
+Text.Byline = Byline;
+Text.SmallByline = SmallByline;
+Text.BodyCopy = BodyCopy;
+Text.SmallBodyCopy = SmallBodyCopy;
 var _default = Text;
 exports.default = _default;

package/commonjs/Text/styles.js

@@ -14,8 +14,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.span.withConfig({
   displayName: "styles__Container",
   componentId: "mmg963-0"
-})(["margin:0;padding-left:0;padding-right:0;font-family:", ";", " ", " ", " ", " ", ""], function (props) {
+})(["margin:0;padding-left:0;padding-right:0;font-family:", ";font-style:", ";", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.isItalicized && "italic";
 }, function (props) {
   return props.truncated && (0, _styledComponents.css)(["display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 }, function (props) {

package/lib/Checkbox/index.js

@@ -61,7 +61,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
 
@@ -88,7 +90,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(LabelText, {
+      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, {
         disabled: disabled
       }, label));
     }
@@ -116,13 +118,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(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
+      }, qa, inputProps)), /*#__PURE__*/React.createElement(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
         name: indeterminate ? "minus" : "check",
         size: "mini",
         fixedWidth: true
-      }))), label && !isPill && /*#__PURE__*/React.createElement(LabelText, {
-        disabled: disabled
-      }, label))
+      }))))
     );
   };
 

package/lib/Table/index.js

@@ -2,83 +2,80 @@ 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); }
-
 import * as React from "react";
 import TableCell from "../TableCell";
 import TableHeaderCell from "../TableHeaderCell";
 import Container from "./styles";
 
+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, _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, _extends({
-          key: td.id
-        }, td));
-      })));
-    };
 
-    return _this;
+export 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(Container, _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__*/React.createElement(Container, _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, _extends({}, th, {
+      key: th.id,
+      onSort: onSort,
+      sortId: sortId,
+      sortDirection: sortDirection
+    }));
+  }))), rows.map(function (row) {
+    return rowRender ? rowRender(row) : renderTableRow(row);
+  }));
+};
+export var TableHead = function TableHead(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
-    return (
-      /*#__PURE__*/
-      // $FlowIssue - upgrade v0.112.0
-      React.createElement(Container, _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, _extends({}, th, {
-          key: th.id,
-          onSort: onSort,
-          sortId: sortId,
-          sortDirection: sortDirection
-        }));
-      }))), rows.map(function (row) {
-        return rowRender ? rowRender(row) : _this2.renderTableRow(row);
-      }))
-    );
-  };
+  return /*#__PURE__*/React.createElement("thead", props, children);
+};
+export var TableBody = function TableBody(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
 
-  return Table;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("tbody", props, children);
+};
+export var TableRow = function TableRow(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
-Table.defaultProps = {
-  head: [],
-  rows: []
+  return /*#__PURE__*/React.createElement("tr", props, children);
 };
-export { Table as default };
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+export default Table;

package/lib/TableCell/index.js

@@ -28,15 +28,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(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
       alignment: align || "left",
       key: id,
       colSpan: colSpan,
       width: width,
       "data-qa-table-cell": ""
-    }, rest), content);
+    }), children || content);
   };
 
   return TableCell;

package/lib/TableHeaderCell/index.js

@@ -45,39 +45,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(Container, _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(Container, _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/lib/TableRowAccordion/index.js

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

package/lib/Text/index.js

@@ -4,10 +4,70 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from "react";
 import Container from "./styles";
+import styled from "styled-components";
+var Headline = styled(Container).withConfig({
+  displayName: "Text__Headline",
+  componentId: "sc-12xhmyx-0"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[400];
+});
+var SubHeadline = styled(Container).withConfig({
+  displayName: "Text__SubHeadline",
+  componentId: "sc-12xhmyx-1"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[300];
+});
+var SmallSubHeadline = styled(Container).withConfig({
+  displayName: "Text__SmallSubHeadline",
+  componentId: "sc-12xhmyx-2"
+})(["color:", ";font-weight:", ";", ""], function (props) {
+  return props.theme.colors.text.headline;
+}, function (props) {
+  return props.theme.fontWeights.bold;
+}, function (props) {
+  return props.theme.typography[200];
+});
+var Byline = styled(Container).withConfig({
+  displayName: "Text__Byline",
+  componentId: "sc-12xhmyx-3"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.subtext;
+}, function (props) {
+  return props.theme.typography[200];
+});
+var SmallByline = styled(Container).withConfig({
+  displayName: "Text__SmallByline",
+  componentId: "sc-12xhmyx-4"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.subtext;
+}, function (props) {
+  return props.theme.typography[100];
+});
+var BodyCopy = styled(Container).withConfig({
+  displayName: "Text__BodyCopy",
+  componentId: "sc-12xhmyx-5"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.body;
+}, function (props) {
+  return props.theme.typography[300];
+});
+var SmallBodyCopy = styled(Container).withConfig({
+  displayName: "Text__SmallBodyCopy",
+  componentId: "sc-12xhmyx-6"
+})(["color:", ";", ""], function (props) {
+  return props.theme.colors.text.body;
+}, function (props) {
+  return props.theme.typography[200];
+});
 
-/**
- * The Text Component is used to render textual content in various presentations.
- */
 var Text = function Text(_ref) {
   var fontSize = _ref.fontSize,
       children = _ref.children,
@@ -25,4 +85,11 @@ var Text = function Text(_ref) {
   );
 };
 
+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/lib/Text/styles.js

@@ -3,8 +3,10 @@ import { COMMON, LAYOUT, TYPOGRAPHY } from "../utils/system-props";
 var Container = styled.span.withConfig({
   displayName: "styles__Container",
   componentId: "mmg963-0"
-})(["margin:0;padding-left:0;padding-right:0;font-family:", ";", " ", " ", " ", " ", ""], function (props) {
+})(["margin:0;padding-left:0;padding-right:0;font-family:", ";font-style:", ";", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.isItalicized && "italic";
 }, function (props) {
   return props.truncated && css(["display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "7.1.0-beta-maurice.0",
+  "version": "7.2.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -42,17 +42,12 @@
     "test": "npm-run-all flow lint-js lint-css lint-icons jest",
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
-    "release": "yarn test && node ./bin/beta complete && yarn changeset publish",
+    "release": "yarn test && yarn changeset publish",
     "storybook": "start-storybook -c .storybook",
     "build-storybook": "build-storybook --quiet -c .storybook -o .storybook-dist",
     "icon-lint": "node bin/icon-lint/cli",
     "playroom:start": "playroom start",
-    "playroom:build": "playroom build",
-    "check-env": "node -e 'console.log(process.env)' | grep version",
-    "beta:publish": "npm publish --tag beta",
-    "beta:status": "node ./bin/beta status",
-    "beta:release": "node ./bin/beta release",
-    "beta:deprecate": "node ./bin/beta deprecate"
+    "playroom:build": "playroom build"
   },
   "lint-staged": {
     "**/*.js": [
@@ -105,6 +100,7 @@
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
     "@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",
@@ -158,7 +154,6 @@
     "react-dates": "^21.8.0",
     "react-dom": "16.12.0",
     "rimraf": "^2.6.3",
-    "semver": "^7.3.5",
     "storybook-dark-mode": "^1.0.7",
     "styled-components": "5.0.0-rc.2",
     "stylelint": "^13.8.0",