@sproutsocial/racine 16.0.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 17.0.0
+
+### Major Changes
+
+- 5234f32d: Accessibility updates to Card based on Perkins review.
+
+  **Breaking changes**
+
+  - Card using role='link' will no longer work without the `CardLink` subcomponent
+
+  **Enhancements**
+
+  - Cards with `role='link'` should now wrap link text in the `CardLink` subcomponent
+  - Improves screen reader accessiblity by pairing Cards as links with the new `CardLink` subcomponent
+  - Adds `CardLink` subcomponent
+    - Link text wrapped in CardLink renders an anchor tag as a child of Card
+    - Preserves the behavior that allows the user to click the whole Card as the link
+    - Handles navigating to the href using default link behavior.
+    - Includes an `affordance` prop that makes composing a Card as a link easy and visually appealing
+
+### Minor Changes
+
+- 99b984a6: Add the following Partner Logos:
+  - android
+  - apple
+  - github
+  - github-alien
+  - salesforce-cloud
+- 6c2753bc: Adds Tableau symbol and lockup to the `PartnerLogo` component
+
+### Patch Changes
+
+- b31737fa: Fixed automation for `PartnerLogo` names and type, which updated `PartnerLogoNames` and `EnumLogoNames` so they now include all logos.
+
+  **Deprecation Warning**:
+
+  - `PartnerNames` is now deprecated in favor of `PartnerLogoNames`
+  - `TypePartnerNames` is now deprecated in favor of `EnumLogoNames`
+
+- fb536bed: Applies `box-sizing: content-box` property to Switch loading state in order to avoid conflicts with global CSS reset properties
+- adec46fc: Updates Toast to accept Partner Logo names for 'icon' prop
+  - Toast erroneously did not accept Partner Logo names for the 'icon' prop, even after the Icon component was updated to render PartnerLogos.
+  - The Flow and Typescript types have been updated to add all partner names to the valid values for the 'icon' prop.
+
 ## 16.0.0
 
 ### Major Changes

package/__flow__/EnumLogoNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumLogoNames = "adobe-experience-manager-dark" | "adobe-experience-manager" | "apple-app-store-dark" | "apple-app-store" | "bigcommerce-dark" | "bigcommerce-lockup-dark" | "bigcommerce-lockup" | "bigcommerce" | "bitly-dark" | "bitly" | "bynder-dark" | "bynder" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox-lockup-dark" | "dropbox-lockup" | "dropbox-wordmark-dark" | "dropbox-wordmark" | "dropbox" | "facebook-audience-network-dark" | "facebook-audience-network" | "facebook-dark" | "facebook-groups-dark" | "facebook-groups" | "facebook-shops-dark" | "facebook-shops" | "facebook" | "feedly-dark" | "feedly" | "glassdoor-dark" | "glassdoor" | "google-analytics-dark" | "google-analytics" | "google-business-messages-dark" | "google-business-messages" | "google-drive-dark" | "google-drive" | "google-my-business-dark" | "google-my-business" | "google-play-store-dark" | "google-play-store" | "hubspot-dark" | "hubspot" | "instagram-dark" | "instagram" | "linkedin-audience-network-dark" | "linkedin-audience-network" | "linkedin-dark" | "linkedin" | "marketo-dark" | "marketo" | "messenger-dark" | "messenger" | "microsoft-dynamics-dark" | "microsoft-dynamics" | "pinterest-dark" | "pinterest" | "reddit-dark" | "reddit" | "salesforce-dark" | "salesforce" | "shopify-dark" | "shopify" | "slack-dark" | "slack" | "sproutsocial-dark" | "sproutsocial-lockup-dark" | "sproutsocial-lockup" | "sproutsocial-wordmark-dark" | "sproutsocial-wordmark" | "sproutsocial" | "tiktok-dark" | "tiktok" | "tripadvisor-dark" | "tripadvisor" | "tumblr-dark" | "tumblr" | "twitter-audience-network-dark" | "twitter-audience-network" | "twitter-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk-lockup-dark" | "zendesk-lockup" | "zendesk-wordmark-dark" | "zendesk-wordmark" | "zendesk";
+export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit-alien" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "yelp" | "youtube" | "zendesk";

package/__flow__/Icon/Icon.flow.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import type { StyledComponent } from 'styled-components';
 import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { EnumLogoNames } from "../EnumLogoNames.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import deprecatedIcons from "./deprecatedIcons.flow";
-import type { TypePartnerNames } from "../PartnerLogo/TypePartnerNames.flow";
 export type TypeIconSize = 'mini' // 12x12
 // TODO: deprecate default  in favor of small in future release
 | 'default' // 16x16
@@ -14,7 +14,7 @@ export type TypeIconSize = 'mini' // 12x12
 | 'large' // 32x32
 | 'jumbo'; // 64x64
 
-export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | TypePartnerNames;
+export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | EnumLogoNames;
 export type TypeIconProps = {
   /** Name of the icon in the svg sprite */
   name: TypeIconName,

package/__flow__/LogoViewBoxes.js

@@ -1,8 +1,12 @@
 module.exports = {
   "adobe-experience-manager-dark": "0 0 16 17",
   "adobe-experience-manager": "0 0 16 17",
+  "android-dark": "0 0 18 18",
+  "android": "0 0 18 18",
   "apple-app-store-dark": "0 0 140 140",
   "apple-app-store": "0 0 140 140",
+  "apple-dark": "0 0 18 18",
+  "apple": "0 0 18 18",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -29,6 +33,8 @@ module.exports = {
   "facebook": "0 0 141 139",
   "feedly-dark": "0 0 141 123",
   "feedly": "0 0 141 123",
+  "github-dark": "0 0 18 18",
+  "github": "0 0 18 18",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",
@@ -57,8 +63,12 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
+  "reddit-alien-dark": "0 0 18 18",
+  "reddit-alien": "0 0 18 18",
   "reddit-dark": "0 0 140 140",
   "reddit": "0 0 140 140",
+  "salesforce-cloud-dark": "0 0 20 18",
+  "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",
   "salesforce": "0 0 140 99",
   "shopify-dark": "0 0 140 159",
@@ -71,6 +81,10 @@ module.exports = {
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
   "sproutsocial": "0 0 140 174",
+  "tableau-dark": "0 0 18 18",
+  "tableau-lockup-dark": "0 0 291 56",
+  "tableau-lockup": "0 0 291 56",
+  "tableau": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/__flow__/PartnerLogo/PartnerLogo.flow.js

@@ -1,9 +1,14 @@
 // @flow
 import * as React from 'react';
-import type { TypePartnerNames } from "./TypePartnerNames.flow";
+import type { EnumLogoNames } from "../EnumLogoNames.flow";
+
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+export type TypePartnerNames = EnumLogoNames;
 export type TypePartnerLogoProps = {
   /** The name of the partner whose logo you want to render. */
-  partnerName: TypePartnerNames,
+  partnerName: EnumLogoNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
   backgroundType?: 'dark' | 'light',
   logoType?: 'symbol' | 'wordmark' | 'lockup',

package/__flow__/PartnerLogo/index.flow.js

@@ -1,3 +1,2 @@
 // @flow
-export * from "./PartnerLogo.flow";
-export * from "./TypePartnerNames.flow";
+export * from "./PartnerLogo.flow";

package/__flow__/Toast/Toast.flow.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from 'react';
 import type { TypeColor } from "../types/theme.flow";
-import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { TypeIconName } from "../Icon/Icon.flow";
 export type TypeToastTheme = 'info' | 'success' | 'warning' | 'error';
 export type TypeToastProps = {|
   theme?: TypeToastTheme,
   content: React.Node,
   color?: TypeColor,
-  icon?: EnumIconNames,
+  icon?: TypeIconName,
 |};
 export type TypeToastOptions = {|
   ...TypeToastProps,

package/__flow__/index.flow.js

@@ -105,8 +105,7 @@ export type { EnumDensities, TypeMessageProps } from "./Message/index.flow";
 export type { TypeModalProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./Modal/index.flow";
 export type { TypeNumeralProps } from "./Numeral/index.flow";
 export type { TypeOverflowListProps, TypeVirtualizedListProps } from "./OverflowList/index.flow";
-export type { TypePartnerLogoProps } from "./PartnerLogo/index.flow";
-export type { TypePartnerNames } from "./PartnerLogo/TypePartnerNames.flow";
+export type { TypePartnerLogoProps, TypePartnerNames } from "./PartnerLogo/index.flow";
 export type { EnumPlacements, TypePopoutProps } from "./Popout/index.flow";
 export type { TypeRadioProps } from "./Radio/index.flow";
 export type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./SegmentedControl/index.flow";

package/commonjs/Card/Card.js

@@ -51,13 +51,17 @@ var Card = function Card(_ref) {
     hasSubComponent = _useState2[0],
     setHasSubComponent = _useState2[1];
   var containerRef = (0, _react.useRef)(null);
+  var linkRef = (0, _react.useRef)(null);
+  var isRoleLink = role === 'link';
   var checkedConditions = role === 'checkbox' ? selected : undefined;
+  var cardContext = {
+    setHasSubComponent: setHasSubComponent,
+    href: href,
+    linkRef: linkRef
+  };
   var handleClickConditions = function handleClickConditions(e) {
-    return role === 'link' ? (0, _utils.navigateTo)({
-      e: e,
-      href: href,
-      ref: containerRef
-    }) : onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    var _linkRef$current;
+    return isRoleLink ? (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.click() : onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
   var handleKeyDown = function handleKeyDown(e) {
     return (0, _utils.onKeyDown)({
@@ -69,8 +73,8 @@ var Card = function Card(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_styles.StyledCard, _extends({
-    tabIndex: 0,
-    role: role,
+    tabIndex: isRoleLink ? -1 : 0,
+    role: isRoleLink ? undefined : role,
     onClick: handleClickConditions,
     onKeyDown: handleKeyDown,
     $elevation: elevation,
@@ -79,11 +83,12 @@ var Card = function Card(_ref) {
     "aria-checked": checkedConditions,
     $disabled: disabled,
     "aria-disabled": disabled && disabled,
-    $compositionalComponents: hasSubComponent
+    $compositionalComponents: hasSubComponent,
+    $isRoleLink: isRoleLink
   }, rest), /*#__PURE__*/_react.default.createElement(_subComponents.SelectedIcon, {
     $selected: selected
   }), /*#__PURE__*/_react.default.createElement(_utils.SubComponentContext.Provider, {
-    value: setHasSubComponent
+    value: cardContext
   }, children));
 };
 var _default = Card;

package/commonjs/Card/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   Card: true,
   CardHeader: true,
   CardContent: true,
-  CardFooter: true
+  CardFooter: true,
+  CardLink: true
 };
 Object.defineProperty(exports, "Card", {
   enumerable: true,
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "CardHeader", {
     return _subComponents.CardHeader;
   }
 });
+Object.defineProperty(exports, "CardLink", {
+  enumerable: true,
+  get: function get() {
+    return _subComponents.CardLink;
+  }
+});
 exports.default = void 0;
 var _Card = _interopRequireDefault(require("./Card"));
 var _subComponents = require("./subComponents");

package/commonjs/Card/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectedIcon = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCard = exports.SelectedIconWrapper = void 0;
+exports.StyledSelectedIcon = exports.StyledCardLink = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCardAffordance = exports.StyledCard = exports.SelectedIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _mixins = require("../utils/mixins");
@@ -69,10 +69,23 @@ var StyledSelectedIcon = (0, _styledComponents.default)(_Icon.default).withConfi
   return $selected && "\n    opacity: 1;\n  ";
 });
 exports.StyledSelectedIcon = StyledSelectedIcon;
+var StyledCardLink = _styledComponents.default.a.withConfig({
+  displayName: "styles__StyledCardLink",
+  componentId: "sc-9tyqu4-5"
+})(["font-family:", ";font-weight:", ";color:", ";", ";", " ", ""], function (p) {
+  return p.theme.fontFamily;
+}, function (p) {
+  return p.theme.fontWeights.bold;
+}, function (p) {
+  return p.theme.colors.text.headline;
+}, function (p) {
+  return p.theme.typography[400];
+}, _styledSystem.color, _styledSystem.typography);
+exports.StyledCardLink = StyledCardLink;
 var StyledCard = _styledComponents.default.div.withConfig({
   displayName: "styles__StyledCard",
-  componentId: "sc-9tyqu4-5"
-})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='link'],&[role='button'],&[role='checkbox']{cursor:pointer;}&:hover{box-shadow:", ";}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
+  componentId: "sc-9tyqu4-6"
+})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='button'],&[role='checkbox']{cursor:pointer;}", " &:hover{box-shadow:", ";}&:focus-within{", " ", ":focus{border:none;box-shadow:none;outline:none;}}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
   var theme = _ref11.theme;
   return theme.colors.container.background.base;
 }, function (_ref12) {
@@ -95,16 +108,31 @@ var StyledCard = _styledComponents.default.div.withConfig({
   var theme = _ref17.theme;
   return theme.duration.medium;
 }, function (_ref18) {
-  var theme = _ref18.theme,
-    _ref18$$elevation = _ref18.$elevation,
-    $elevation = _ref18$$elevation === void 0 ? 'low' : _ref18$$elevation;
+  var $isRoleLink = _ref18.$isRoleLink;
+  return $isRoleLink && "\n\t\tcursor: pointer;\n\t";
+}, function (_ref19) {
+  var theme = _ref19.theme,
+    _ref19$$elevation = _ref19.$elevation,
+    $elevation = _ref19$$elevation === void 0 ? 'low' : _ref19$$elevation;
   return theme.shadows[$elevation];
-}, _mixins.focusRing, function (_ref19) {
-  var $disabled = _ref19.$disabled;
-  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
 }, function (_ref20) {
-  var $selected = _ref20.$selected,
-    theme = _ref20.theme;
+  var $isRoleLink = _ref20.$isRoleLink;
+  return $isRoleLink ? _mixins.focusRing : null;
+}, StyledCardLink, _mixins.focusRing, function (_ref21) {
+  var $disabled = _ref21.$disabled;
+  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
+}, function (_ref22) {
+  var $selected = _ref22.$selected,
+    theme = _ref22.theme;
   return $selected && "\n    border: ".concat(theme.borderWidths[500], " solid ").concat(theme.colors.container.border.selected, ";  \n  ");
 }, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.position, _styledSystem.space);
-exports.StyledCard = StyledCard;
+exports.StyledCard = StyledCard;
+var StyledCardAffordance = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "styles__StyledCardAffordance",
+  componentId: "sc-9tyqu4-7"
+})(["", ":hover &{transform:translateX(", ");}transition:", ";"], StyledCard, function (p) {
+  return p.theme.space[200];
+}, function (p) {
+  return p.theme.duration.medium;
+});
+exports.StyledCardAffordance = StyledCardAffordance;

package/commonjs/Card/subComponents.js

@@ -1,16 +1,21 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectedIcon = exports.CardHeader = exports.CardFooter = exports.CardContent = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.SelectedIcon = exports.CardLink = exports.CardHeader = exports.CardFooter = exports.CardContent = exports.CardAffordance = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
 var _styles = require("./styles");
 var _excluded = ["children"],
   _excluded2 = ["children"],
-  _excluded3 = ["children"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  _excluded3 = ["children"],
+  _excluded4 = ["affordance", "children"];
+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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 CardContent = function CardContent(_ref) {
@@ -45,4 +50,32 @@ var SelectedIcon = function SelectedIcon(_ref4) {
     $selected: $selected
   }));
 };
-exports.SelectedIcon = SelectedIcon;
+exports.SelectedIcon = SelectedIcon;
+var CardAffordance = function CardAffordance(_ref5) {
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardAffordance, _extends({}, rest, {
+    size: "mini",
+    name: "arrow-right",
+    "aria-hidden": true
+  }));
+};
+
+// jsdocs, never types?
+exports.CardAffordance = CardAffordance;
+var CardLink = function CardLink(_ref6) {
+  var affordance = _ref6.affordance,
+    children = _ref6.children,
+    rest = _objectWithoutProperties(_ref6, _excluded4);
+  var _useContext = (0, _react.useContext)(_utils.SubComponentContext),
+    href = _useContext.href,
+    linkRef = _useContext.linkRef;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardLink, _extends({}, rest, {
+    target: "_blank",
+    rel: "noreferrer",
+    href: href,
+    ref: linkRef
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, affordance ? /*#__PURE__*/_react.default.createElement(CardAffordance, {
+    ml: 300
+  }) : null));
+};
+exports.CardLink = CardLink;

package/commonjs/Card/utils.js

@@ -7,13 +7,17 @@ exports.onKeyDown = exports.navigateTo = exports.SubComponentContext = void 0;
 exports.useChildContext = useChildContext;
 var _react = require("react");
 var _utils = require("../utils");
-var SubComponentContext = /*#__PURE__*/(0, _react.createContext)(
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function () {});
+var SubComponentContext = /*#__PURE__*/(0, _react.createContext)({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHasSubComponent: function setHasSubComponent() {},
+  href: '',
+  linkRef: null
+});
 exports.SubComponentContext = SubComponentContext;
 function useChildContext() {
-  var setHasSubComponent = (0, _react.useContext)(SubComponentContext);
-  setHasSubComponent(true);
+  var _useContext = (0, _react.useContext)(SubComponentContext),
+    setHasSubComponent = _useContext.setHasSubComponent;
+  setHasSubComponent && setHasSubComponent(true);
 }
 var navigateTo = function navigateTo(_ref) {
   var _ref$current, _window$open;

package/commonjs/Icon/Icon.js

@@ -9,8 +9,9 @@ var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _IconViewBoxes = _interopRequireDefault(require("../IconViewBoxes"));
 var _Box = _interopRequireDefault(require("../Box"));
-var _PartnerLogo = _interopRequireWildcard(require("../PartnerLogo"));
+var _PartnerLogo = _interopRequireDefault(require("../PartnerLogo"));
 var _utils = require("../utils");
+var _logoNames = _interopRequireDefault(require("../logoNames"));
 var _deprecatedIcons = _interopRequireDefault(require("./deprecatedIcons"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["name", "size", "fixedWidth", "ariaLabel", "color", "svgProps"],
@@ -31,7 +32,7 @@ var Icon = function Icon(_ref) {
     color = _ref.color,
     svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  if ((0, _utils.includes)(_PartnerLogo.PartnerNames, name)) {
+  if ((0, _utils.includes)(_logoNames.default, name)) {
     // Icon's "default" size is equivalent to PartnerLogo's "small" size
     var logoSize = size === 'default' ? 'small' : size;
     var logoProps = {

package/commonjs/LogoViewBoxes.js

@@ -3,8 +3,12 @@
 module.exports = {
   "adobe-experience-manager-dark": "0 0 16 17",
   "adobe-experience-manager": "0 0 16 17",
+  "android-dark": "0 0 18 18",
+  "android": "0 0 18 18",
   "apple-app-store-dark": "0 0 140 140",
   "apple-app-store": "0 0 140 140",
+  "apple-dark": "0 0 18 18",
+  "apple": "0 0 18 18",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -31,6 +35,8 @@ module.exports = {
   "facebook": "0 0 141 139",
   "feedly-dark": "0 0 141 123",
   "feedly": "0 0 141 123",
+  "github-dark": "0 0 18 18",
+  "github": "0 0 18 18",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",
@@ -59,8 +65,12 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
+  "reddit-alien-dark": "0 0 18 18",
+  "reddit-alien": "0 0 18 18",
   "reddit-dark": "0 0 140 140",
   "reddit": "0 0 140 140",
+  "salesforce-cloud-dark": "0 0 20 18",
+  "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",
   "salesforce": "0 0 140 99",
   "shopify-dark": "0 0 140 159",
@@ -73,6 +83,10 @@ module.exports = {
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
   "sproutsocial": "0 0 140 174",
+  "tableau-dark": "0 0 18 18",
+  "tableau-lockup-dark": "0 0 291 56",
+  "tableau-lockup": "0 0 291 56",
+  "tableau": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/commonjs/PartnerLogo/PartnerLogo.js

@@ -1,47 +1,52 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = require("styled-components");
-var logoViewBoxes = _interopRequireWildcard(require("../LogoViewBoxes"));
+var _LogoViewBoxes = _interopRequireDefault(require("../LogoViewBoxes"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["partnerName", "backgroundType", "logoType", "height", "width", "size", "aria-label", "svgProps"];
-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 ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 PartnerLogo = function PartnerLogo(_ref) {
-  var partnerName = _ref.partnerName,
-    backgroundType = _ref.backgroundType,
-    _ref$logoType = _ref.logoType,
-    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
-    height = _ref.height,
-    width = _ref.width,
-    size = _ref.size,
-    ariaLabel = _ref['aria-label'],
-    svgProps = _ref.svgProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var whichLogo = function whichLogo(_ref, mode) {
+  var backgroundType = _ref.backgroundType,
+    logoType = _ref.logoType,
+    partnerName = _ref.partnerName;
+  var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
+  if (backgroundType && backgroundType === 'dark') {
+    return "".concat(logo, "-dark");
+  } else if (backgroundType && backgroundType === 'light') {
+    return logo;
+  } else if (mode === 'dark') {
+    return "".concat(logo, "-dark");
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = function PartnerLogo(_ref2) {
+  var partnerName = _ref2.partnerName,
+    backgroundType = _ref2.backgroundType,
+    _ref2$logoType = _ref2.logoType,
+    logoType = _ref2$logoType === void 0 ? 'symbol' : _ref2$logoType,
+    height = _ref2.height,
+    width = _ref2.width,
+    size = _ref2.size,
+    ariaLabel = _ref2['aria-label'],
+    svgProps = _ref2.svgProps,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useTheme = (0, _styledComponents.useTheme)(),
     mode = _useTheme.mode;
-  var whichLogo = function whichLogo(type) {
-    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
-    if (type && type === 'dark') {
-      return "".concat(logo, "-dark");
-    } else if (type && type === 'light') {
-      return logo;
-    } else if (mode === 'dark') {
-      return "".concat(logo, "-dark");
-    } else {
-      return logo;
-    }
-  };
-  var logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
+  var logo = whichLogo({
+    backgroundType: backgroundType,
+    logoType: logoType,
+    partnerName: partnerName
+  }, mode);
+  var logoViewBox = _LogoViewBoxes.default[logo];
   var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
@@ -61,7 +66,7 @@ var PartnerLogo = function PartnerLogo(_ref) {
     "data-qa-logo-svg": "".concat(partnerName, "-svg")
   }, svgProps), /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
+    xlinkHref: "#sslogosvg-".concat(logo)
   })));
 };
 var _default = PartnerLogo;

package/commonjs/PartnerLogo/PartnerLogoTypes.js

@@ -3,8 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PartnerNames = exports.PartnerLogoSizes = void 0;
-var PartnerNames = ['apple-app-store', 'bigcommerce', 'bitly', 'bynder', 'canva', 'dropbox', 'facebook', 'facebook-audience-network', 'facebook-groups', 'facebook-shops', 'feedly', 'glassdoor', 'google-analytics', 'google-business-messages', 'google-drive', 'google-my-business', 'google-play-store', 'hubspot', 'instagram', 'linkedin', 'linkedin-audience-network', 'marketo', 'messenger', 'microsoft-dynamics', 'pinterest', 'reddit', 'salesforce', 'shopify', 'slack', 'sproutsocial', 'tiktok', 'tripadvisor', 'tumblr', 'twitter', 'twitter-audience-network', 'whatsapp', 'woocommerce', 'yelp', 'youtube', 'zendesk'];
+exports.PartnerNames = exports.PartnerLogoTypes = exports.PartnerLogoSizes = void 0;
+var _logoNames = _interopRequireDefault(require("../logoNames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @deprecated Use PartnerLogoNames instead
+ */
+var PartnerNames = _logoNames.default;
+
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
 exports.PartnerNames = PartnerNames;
 var PartnerLogoSizes = {
   mini: '12px',
@@ -13,4 +22,6 @@ var PartnerLogoSizes = {
   large: '32px',
   jumbo: '64px'
 };
-exports.PartnerLogoSizes = PartnerLogoSizes;
+exports.PartnerLogoSizes = PartnerLogoSizes;
+var PartnerLogoTypes = ['symbol', 'wordmark', 'lockup'];
+exports.PartnerLogoTypes = PartnerLogoTypes;

package/commonjs/PartnerLogo/index.flow.js

@@ -13,15 +13,4 @@ Object.keys(_PartnerLogo).forEach(function (key) {
       return _PartnerLogo[key];
     }
   });
-});
-var _TypePartnerNames = require("./TypePartnerNames.flow");
-Object.keys(_TypePartnerNames).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _TypePartnerNames[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _TypePartnerNames[key];
-    }
-  });
 });