@sproutsocial/racine 12.21.0 → 12.21.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 12.21.2
+
+### Patch Changes
+
+- 8461abb8: Fixed the Checkbox SVG, which became broken during the addition of new prettier rules.
+
+## 12.21.1
+
+### Patch Changes
+
+- e0e4fc78: Storybook addon-essentials has been moved to devDependencies rather than dependencies since it is only used for development and isn't required in production.
+
 ## 12.21.0
 
 ### Minor Changes

package/__flow__/Checkbox/styles.js

@@ -1,4 +1,6 @@
 //@flow
+import * as React from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
 import styled, {css, type StyledComponent} from 'styled-components';
 import {COMMON} from '../utils/system-props';
 import {focusRing, pill} from '../utils/mixins';
@@ -164,14 +166,22 @@ export const LabelText = styled<typeof Text, TypeTheme, any>(Text)`
 
 LabelText.displayName = 'LabelText';
 
-const checkSVG = (color) =>
-  `<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='${color}'/></svg>`;
-
-const indeterminateSVG = (color) =>
-  `<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><rect width='10' height='2' x='2' y='6' rx='1' ry='1' fill='${color}'/></svg>`;
+const checkSVG = (color) => (
+  <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46"
+      fill={color}
+    />
+  </svg>
+);
+const indeterminateSVG = (color) => (
+  <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <rect width="10" height="2" x="2" y="6" rx="1" ry="1" fill={color} />
+  </svg>
+);
 
 const getIcon = (type, color) => {
-  const escapedColor = color.replace('#', '%23');
+  const escapedColor = encodeURIComponent(color);
   const icon =
     type === 'indeterminate'
       ? indeterminateSVG(escapedColor)
@@ -191,12 +201,13 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
       @supports (-webkit-appearance: none) {
         &:before {
           /* stylelint-disable */
-          content: url('data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? 'indeterminate' : 'check',
-
-            props.checked
-              ? props.theme.colors.form.background.base
-              : props.theme.colors.form.border.base
+          content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(
+            getIcon(
+              props.indeterminate ? 'indeterminate' : 'check',
+              props.checked
+                ? props.theme.colors.form.background.base
+                : props.theme.colors.form.border.base
+            )
           )}');
           opacity: ${props.checked ? 1 : 0};
           position: absolute;

package/commonjs/Checkbox/styles.js

@@ -2,6 +2,8 @@
 
 exports.__esModule = true;
 exports.default = exports.PillInput = exports.LabelText = exports.InputWrapper = exports.CheckboxContainer = exports.CheckboxBox = exports.CheckIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _server = require("react-dom/server");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _systemProps = require("../utils/system-props");
 var _mixins = require("../utils/mixins");
@@ -98,13 +100,32 @@ var LabelText = (0, _styledComponents.default)(_Text.default).withConfig({
 exports.LabelText = LabelText;
 LabelText.displayName = 'LabelText';
 var checkSVG = function checkSVG(color) {
-  return "<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='" + color + "'/></svg>";
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46",
+    fill: color
+  }));
 };
 var indeterminateSVG = function indeterminateSVG(color) {
-  return "<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><rect width='10' height='2' x='2' y='6' rx='1' ry='1' fill='" + color + "'/></svg>";
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "10",
+    height: "2",
+    x: "2",
+    y: "6",
+    rx: "1",
+    ry: "1",
+    fill: color
+  }));
 };
 var getIcon = function getIcon(type, color) {
-  var escapedColor = color.replace('#', '%23');
+  var escapedColor = encodeURIComponent(color);
   var icon = type === 'indeterminate' ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
   return icon;
 };
@@ -112,7 +133,7 @@ var CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, (0, _server.renderToStaticMarkup)(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
 });
 exports.CheckboxContainer = CheckboxContainer;
 var _default = Container;

package/lib/Checkbox/styles.js

@@ -1,4 +1,6 @@
 
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import styled, { css } from 'styled-components';
 import { COMMON } from '../utils/system-props';
 import { focusRing, pill } from '../utils/mixins';
@@ -86,13 +88,32 @@ export var LabelText = styled(Text).withConfig({
 });
 LabelText.displayName = 'LabelText';
 var checkSVG = function checkSVG(color) {
-  return "<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='" + color + "'/></svg>";
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46",
+    fill: color
+  }));
 };
 var indeterminateSVG = function indeterminateSVG(color) {
-  return "<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><rect width='10' height='2' x='2' y='6' rx='1' ry='1' fill='" + color + "'/></svg>";
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "10",
+    height: "2",
+    x: "2",
+    y: "6",
+    rx: "1",
+    ry: "1",
+    fill: color
+  }));
 };
 var getIcon = function getIcon(type, color) {
-  var escapedColor = color.replace('#', '%23');
+  var escapedColor = encodeURIComponent(color);
   var icon = type === 'indeterminate' ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
   return icon;
 };
@@ -100,6 +121,6 @@ export var CheckboxContainer = styled.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return css(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && css(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && css(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), focusRing, COMMON);
+  return css(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url('data:image/svg+xml;utf8,", "');opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, renderToStaticMarkup(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base)), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && css(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? 'not-allowed' : 'pointer', !props.indeterminate && css(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), focusRing, COMMON);
 });
 export default Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.21.0",
+  "version": "12.21.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -63,7 +63,6 @@
     ]
   },
   "dependencies": {
-    "@storybook/addon-essentials": "^6.5.12",
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
@@ -102,6 +101,7 @@
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-storysource": "^6.4.19",
     "@storybook/addon-viewport": "^6.4.19",
     "@storybook/addons": "^6.4.19",