@sproutsocial/racine 12.5.0 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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/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/lib/PartnerLogo/index.js

@@ -1,10 +1,25 @@
+var _excluded = ["partnerName", "backgroundType", "height", "width"];
+
+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; }
+
 import React from "react";
 import logoViewBoxes from "../LogoViewBoxes";
 import { useTheme } from "styled-components";
+import styled from "styled-components";
+import { COMMON, FLEXBOX } from "../utils/system-props";
+var StyledSVG = styled.svg.withConfig({
+  displayName: "PartnerLogo__StyledSVG",
+  componentId: "sc-ivi11w-0"
+})(["", ";", ""], FLEXBOX, 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 = useTheme(),
       mode = _useTheme.mode;
@@ -22,10 +37,16 @@ var PartnerLogo = function PartnerLogo(_ref) {
   };
 
   var logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
-  return /*#__PURE__*/React.createElement("svg", {
+  var viewBoxCoordinates = (logoViewBox == null ? void 0 : logoViewBox.split(" ")) || [];
+  var defaultWidth = viewBoxCoordinates[2];
+  var defaultHeight = viewBoxCoordinates[3];
+  return /*#__PURE__*/React.createElement(StyledSVG, _extends({
+    width: width ? width : defaultWidth,
+    height: height ? height : defaultHeight,
     viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/React.createElement("use", {
+    focusable: false // $FlowIssue - upgrade v0.112.0
+
+  }, rest), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-" + whichLogo(backgroundType)
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.5.0",
+  "version": "12.6.0",
   "license": "MIT",
   "files": [
     "__flow__",