@sproutsocial/racine 12.4.0 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 12.6.0
+
+### Minor Changes
+
+- 2a6861c: Adds size props and common system-props to the partner logo component
+
+## 12.5.0
+
+### Minor Changes
+
+- b9d2645: add optional label props to checkbox component
+
+### Patch Changes
+
+- e73ecb3: Adjust neutral.background in decorative palette to differ from container.background.base"
+- 178c7d9: Add tiktok to theme in network colors for flow typings
+- 9955641: Fix typo for theme colors for settings navigation
+
+## 12.4.1
+
+### Patch Changes
+
+- 19d74a4: Quote property names in theme.scss files
+  - This fixes a bug where properties with names that have specific meanings in CSS (such as "green") would not be accessible using SCSS's map-get.
+
 ## 12.4.0
 
 ### Minor Changes

package/__flow__/Checkbox/index.js

@@ -18,6 +18,7 @@ export type TypeProps = {
   label?: string,
   /** Label used to describe the input (if not used with an accompanying visual label) */
   ariaLabel?: string,
+  labelProps?: Object,
   checked: boolean,
   indeterminate: boolean,
   disabled?: boolean,
@@ -59,6 +60,7 @@ export default class Checkbox extends React.Component<TypeProps> {
       value,
       name,
       label,
+      labelProps,
       checked,
       disabled,
       indeterminate,
@@ -102,7 +104,11 @@ export default class Checkbox extends React.Component<TypeProps> {
             {...qa}
             {...inputProps}
           />
-          {label && <LabelText disabled={disabled}>{label}</LabelText>}
+          {label && (
+            <LabelText {...labelProps} disabled={disabled}>
+              {label}
+            </LabelText>
+          )}
         </CheckboxContainer>
       );
     }

package/__flow__/PartnerLogo/index.js

@@ -1,17 +1,44 @@
-// @flow strict-local
+// @flow
 import React from "react";
 import logoViewBoxes from "../LogoViewBoxes";
 import type { TypePartnerNames } from "./TypePartnerNames";
 import { useTheme } from "styled-components";
+import styled, { type StyledComponent } from "styled-components";
+import { COMMON, FLEXBOX } from "../utils/system-props";
+import type {
+  TypeSystemCommonProps,
+  TypeSystemFlexboxProps,
+} from "../types/system-props.flow";
+import type { TypeTheme } from "../types/theme.flow";
+
+type TypeSystemProps = {|
+  ...TypeSystemCommonProps,
+  ...TypeSystemFlexboxProps,
+|};
+
+type TypeStyledSVG = StyledComponent<TypeSystemProps, TypeTheme, *>;
+
+const StyledSVG: TypeStyledSVG = styled.svg`
+  ${FLEXBOX};
+  ${COMMON}
+`;
 
 type TypeProps = {
   /** The name of the partner whose logo you want to render. */
   partnerName: TypePartnerNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
   backgroundType?: "dark" | "light",
+  height?: string,
+  width?: string,
 };
 
-const PartnerLogo = ({ partnerName, backgroundType }: TypeProps) => {
+const PartnerLogo = ({
+  partnerName,
+  backgroundType,
+  height,
+  width,
+  ...rest
+}: TypeProps) => {
   const { mode } = useTheme();
   const whichLogo = (type) => {
     if (type && type === "dark") {
@@ -25,14 +52,24 @@ const PartnerLogo = ({ partnerName, backgroundType }: TypeProps) => {
     }
   };
   const logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
+  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
+  const defaultWidth = viewBoxCoordinates[2];
+  const defaultHeight = viewBoxCoordinates[3];
 
   return (
-    <svg viewBox={logoViewBox} focusable={false}>
+    <StyledSVG
+      width={width ? width : defaultWidth}
+      height={height ? height : defaultHeight}
+      viewBox={logoViewBox}
+      focusable={false}
+      // $FlowIssue - upgrade v0.112.0
+      {...rest}
+    >
       <use
         xmlnsXlink="http://www.w3.org/1999/xlink"
         xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}
       />
-    </svg>
+    </StyledSVG>
   );
 };
 

package/__flow__/PartnerLogo/index.stories.js

@@ -71,3 +71,20 @@ ModeOverride.args = {
 ModeOverride.story = {
   name: "Mode override",
 };
+
+export const LogoLayout = (args) => (
+  <Box display="flex" alignItems="center">
+    <PartnerLogo partnerName="facebook" height="40" width="40" mr={400} />
+    <PartnerLogo
+      partnerName="microsoft-dynamics"
+      height="40"
+      width="40"
+      mr={400}
+    />
+    <PartnerLogo partnerName="zendesk" />
+  </Box>
+);
+
+LogoLayout.story = {
+  name: "Layout and size",
+};

package/__flow__/themes/dark/decorative-palettes.js

@@ -37,7 +37,7 @@ export const red = {
 };
 
 export const neutral = {
-  background: COLORS.COLOR_NEUTRAL_900,
+  background: COLORS.COLOR_NEUTRAL_1000,
   highlight: COLORS.COLOR_NEUTRAL_500,
   foreground: COLORS.COLOR_NEUTRAL_100,
 };

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -17,7 +17,7 @@ export const navigation = {
   },
   settings: {
     listItem: {
-      backgound: {
+      background: {
         base: "transparent",
         hover: baseDarkTheme.colors.neutral[1100],
         selected: baseDarkTheme.colors.neutral[800],

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -17,7 +17,7 @@ export const navigation = {
   },
   settings: {
     listItem: {
-      backgound: {
+      background: {
         base: "transparent",
         hover: baseLightTheme.colors.neutral[200],
         selected: baseLightTheme.colors.neutral[0],

package/__flow__/types/theme.colors.flow.js

@@ -271,6 +271,7 @@ type TypeNetworkColors = {|
     microsoft_dynamics: string,
     yelp: string,
     whatsapp: string,
+    tiktok: string,
   },
 |};
 

package/commonjs/Checkbox/index.js

@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styles = _interopRequireWildcard(require("./styles"));
 
-var _excluded = ["id", "value", "name", "label", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"];
+var _excluded = ["id", "value", "name", "label", "labelProps", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"];
 
 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); }
 
@@ -63,6 +63,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         value = _this$props.value,
         name = _this$props.name,
         label = _this$props.label,
+        labelProps = _this$props.labelProps,
         checked = _this$props.checked,
         disabled = _this$props.disabled,
         indeterminate = _this$props.indeterminate,
@@ -102,9 +103,9 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
-      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
+      }, qa, inputProps)), label && /*#__PURE__*/React.createElement(_styles.LabelText, _extends({}, labelProps, {
         disabled: disabled
-      }, label));
+      }), label));
     }
 
     return (

package/commonjs/PartnerLogo/index.js

@@ -7,13 +7,33 @@ var _react = _interopRequireDefault(require("react"));
 
 var _LogoViewBoxes = _interopRequireDefault(require("../LogoViewBoxes"));
 
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _systemProps = require("../utils/system-props");
+
+var _excluded = ["partnerName", "backgroundType", "height", "width"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 _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; }
+
+var StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "PartnerLogo__StyledSVG",
+  componentId: "sc-ivi11w-0"
+})(["", ";", ""], _systemProps.FLEXBOX, _systemProps.COMMON);
+
 var PartnerLogo = function PartnerLogo(_ref) {
   var partnerName = _ref.partnerName,
-      backgroundType = _ref.backgroundType;
+      backgroundType = _ref.backgroundType,
+      height = _ref.height,
+      width = _ref.width,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useTheme = (0, _styledComponents.useTheme)(),
       mode = _useTheme.mode;
@@ -32,10 +52,16 @@ var PartnerLogo = function PartnerLogo(_ref) {
 
   var logoViewBox = _LogoViewBoxes.default[whichLogo(backgroundType)];
 
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  var viewBoxCoordinates = (logoViewBox == null ? void 0 : logoViewBox.split(" ")) || [];
+  var defaultWidth = viewBoxCoordinates[2];
+  var defaultHeight = viewBoxCoordinates[3];
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, _extends({
+    width: width ? width : defaultWidth,
+    height: height ? height : defaultHeight,
     viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/_react.default.createElement("use", {
+    focusable: false // $FlowIssue - upgrade v0.112.0
+
+  }, rest), /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-" + whichLogo(backgroundType)
   }));

package/commonjs/themes/dark/decorative-palettes.js

@@ -44,7 +44,7 @@ var red = {
 };
 exports.red = red;
 var neutral = {
-  background: _seedsColor.default.COLOR_NEUTRAL_900,
+  background: _seedsColor.default.COLOR_NEUTRAL_1000,
   highlight: _seedsColor.default.COLOR_NEUTRAL_500,
   foreground: _seedsColor.default.COLOR_NEUTRAL_100
 };

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -25,7 +25,7 @@ var navigation = {
   },
   settings: {
     listItem: {
-      backgound: {
+      background: {
         base: "transparent",
         hover: _theme.default.colors.neutral[1100],
         selected: _theme.default.colors.neutral[800]

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -25,7 +25,7 @@ var navigation = {
   },
   settings: {
     listItem: {
-      backgound: {
+      background: {
         base: "transparent",
         hover: _theme.default.colors.neutral[200],
         selected: _theme.default.colors.neutral[0]