@sproutsocial/seeds-react-partner-logo 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import React__default from 'react';
+import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
+
+/**
+ * @deprecated Use PartnerLogoNames instead
+ */
+declare const PartnerNames: readonly ["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", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "threads", "tiktok", "tripadvisor", "trustpilot", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "x-twitter", "yelp", "youtube", "zendesk"];
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+type TypePartnerNames = EnumLogoNamesWithoutVariants;
+declare const PartnerLogoSizes: {
+    readonly mini: "12px";
+    readonly small: "16px";
+    readonly medium: "24px";
+    readonly large: "32px";
+    readonly jumbo: "64px";
+};
+type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;
+declare const PartnerLogoTypes: readonly ["symbol", "wordmark", "lockup"];
+type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];
+interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** The name of the partner whose logo you want to render. */
+    partnerName: EnumLogoNamesWithoutVariants;
+    /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
+    backgroundType?: "dark" | "light";
+    logoType?: TypePartnerLogoTypes;
+    height?: string;
+    width?: string;
+    size?: TypePartnerLogoSize;
+    svgProps?: React.ComponentPropsWithoutRef<"svg">;
+}
+
+declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => React__default.JSX.Element;
+
+export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import React__default from 'react';
+import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
+
+/**
+ * @deprecated Use PartnerLogoNames instead
+ */
+declare const PartnerNames: readonly ["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", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "threads", "tiktok", "tripadvisor", "trustpilot", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "x-twitter", "yelp", "youtube", "zendesk"];
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+type TypePartnerNames = EnumLogoNamesWithoutVariants;
+declare const PartnerLogoSizes: {
+    readonly mini: "12px";
+    readonly small: "16px";
+    readonly medium: "24px";
+    readonly large: "32px";
+    readonly jumbo: "64px";
+};
+type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;
+declare const PartnerLogoTypes: readonly ["symbol", "wordmark", "lockup"];
+type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];
+interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** The name of the partner whose logo you want to render. */
+    partnerName: EnumLogoNamesWithoutVariants;
+    /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
+    backgroundType?: "dark" | "light";
+    logoType?: TypePartnerLogoTypes;
+    height?: string;
+    width?: string;
+    size?: TypePartnerLogoSize;
+    svgProps?: React.ComponentPropsWithoutRef<"svg">;
+}
+
+declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => React__default.JSX.Element;
+
+export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };

package/dist/index.js

@@ -0,0 +1,164 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PartnerLogo: () => PartnerLogo_default,
+  PartnerLogoSizes: () => PartnerLogoSizes,
+  PartnerLogoTypes: () => PartnerLogoTypes,
+  PartnerNames: () => PartnerNames,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/PartnerLogo.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components2 = require("styled-components");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var sizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize = (height, width, logoSize) => import_styled_components.css`
+  height: ${logoSize ? logoSize : height};
+  line-height: ${logoSize ? logoSize : height};
+
+  .logo-svg {
+    height: ${logoSize ? logoSize : height};
+    width: ${logoSize ? logoSize : ""};
+  }
+`;
+var Container = (0, import_styled_components.default)("span")`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props.FLEXBOX}
+  ${import_styled_system.verticalAlign}
+  ${(props) => stylesForSize(props.height, props.width, sizes[props.logoSize])}
+`;
+var styles_default = Container;
+
+// src/PartnerLogo.tsx
+var import_seeds_partner_logos = require("@sproutsocial/seeds-partner-logos");
+var whichLogo = ({
+  backgroundType,
+  logoType,
+  partnerName
+}, mode) => {
+  const logo = logoType && logoType !== "symbol" ? partnerName + "-" + logoType : partnerName;
+  if (backgroundType && backgroundType === "dark") {
+    return `${logo}-dark`;
+  } else if (backgroundType && backgroundType === "light") {
+    return logo;
+  } else if (mode === "dark") {
+    return `${logo}-dark`;
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = ({
+  partnerName,
+  backgroundType,
+  logoType = "symbol",
+  height,
+  width,
+  size,
+  "aria-label": ariaLabel,
+  svgProps,
+  ...rest
+}) => {
+  const { mode } = (0, import_styled_components2.useTheme)();
+  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
+  const logoViewBox = import_seeds_partner_logos.ViewBoxes[logo];
+  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
+  const defaultWidth = viewBoxCoordinates[2];
+  const defaultHeight = viewBoxCoordinates[3];
+  return /* @__PURE__ */ import_react.default.createElement(
+    styles_default,
+    {
+      height: height ? height : defaultHeight + "px",
+      width: width ? width : defaultWidth + "px",
+      logoSize: size,
+      className: "logo",
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-logo": partnerName,
+      ...rest
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        className: "logo-svg",
+        viewBox: logoViewBox,
+        focusable: false,
+        "data-qa-logo-svg": `${partnerName}-svg`,
+        ...svgProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "use",
+        {
+          xmlnsXlink: "http://www.w3.org/1999/xlink",
+          xlinkHref: `#seeds-svgs_${logo}`
+        }
+      )
+    )
+  );
+};
+var PartnerLogo_default = PartnerLogo;
+
+// src/PartnerLogoTypes.ts
+var import_seeds_partner_logos2 = require("@sproutsocial/seeds-partner-logos");
+var PartnerNames = import_seeds_partner_logos2.LogoNamesWithoutVariants;
+var PartnerLogoSizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
+
+// src/index.ts
+var src_default = PartnerLogo_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PartnerLogo,
+  PartnerLogoSizes,
+  PartnerLogoTypes,
+  PartnerNames
+});

package/dist/index.mjs

@@ -0,0 +1,124 @@
+// src/PartnerLogo.tsx
+import React from "react";
+import { useTheme } from "styled-components";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { verticalAlign } from "styled-system";
+import { COMMON, FLEXBOX } from "@sproutsocial/seeds-react-system-props";
+var sizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize = (height, width, logoSize) => css`
+  height: ${logoSize ? logoSize : height};
+  line-height: ${logoSize ? logoSize : height};
+
+  .logo-svg {
+    height: ${logoSize ? logoSize : height};
+    width: ${logoSize ? logoSize : ""};
+  }
+`;
+var Container = styled("span")`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+  ${COMMON}
+  ${FLEXBOX}
+  ${verticalAlign}
+  ${(props) => stylesForSize(props.height, props.width, sizes[props.logoSize])}
+`;
+var styles_default = Container;
+
+// src/PartnerLogo.tsx
+import { ViewBoxes } from "@sproutsocial/seeds-partner-logos";
+var whichLogo = ({
+  backgroundType,
+  logoType,
+  partnerName
+}, mode) => {
+  const logo = logoType && logoType !== "symbol" ? partnerName + "-" + logoType : partnerName;
+  if (backgroundType && backgroundType === "dark") {
+    return `${logo}-dark`;
+  } else if (backgroundType && backgroundType === "light") {
+    return logo;
+  } else if (mode === "dark") {
+    return `${logo}-dark`;
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = ({
+  partnerName,
+  backgroundType,
+  logoType = "symbol",
+  height,
+  width,
+  size,
+  "aria-label": ariaLabel,
+  svgProps,
+  ...rest
+}) => {
+  const { mode } = useTheme();
+  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
+  const logoViewBox = ViewBoxes[logo];
+  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
+  const defaultWidth = viewBoxCoordinates[2];
+  const defaultHeight = viewBoxCoordinates[3];
+  return /* @__PURE__ */ React.createElement(
+    styles_default,
+    {
+      height: height ? height : defaultHeight + "px",
+      width: width ? width : defaultWidth + "px",
+      logoSize: size,
+      className: "logo",
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-logo": partnerName,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: "logo-svg",
+        viewBox: logoViewBox,
+        focusable: false,
+        "data-qa-logo-svg": `${partnerName}-svg`,
+        ...svgProps
+      },
+      /* @__PURE__ */ React.createElement(
+        "use",
+        {
+          xmlnsXlink: "http://www.w3.org/1999/xlink",
+          xlinkHref: `#seeds-svgs_${logo}`
+        }
+      )
+    )
+  );
+};
+var PartnerLogo_default = PartnerLogo;
+
+// src/PartnerLogoTypes.ts
+import { LogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
+var PartnerNames = LogoNamesWithoutVariants;
+var PartnerLogoSizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
+
+// src/index.ts
+var src_default = PartnerLogo_default;
+export {
+  PartnerLogo_default as PartnerLogo,
+  PartnerLogoSizes,
+  PartnerLogoTypes,
+  PartnerNames,
+  src_default as default
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sproutsocial/seeds-react-partner-logo",
+  "version": "1.0.0",
+  "description": "Seeds React Partner Logo component",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-system-props": "^2.1.0",
+    "@sproutsocial/seeds-react-theme": "^1.0.0",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@sproutsocial/seeds-partner-logos": "*",
+    "react": "^17.0.2",
+    "styled-components": "^5.2.3",
+    "tsx": "3.13.0",
+    "typescript": "^5.1.6",
+    "tsup": "^8.0.2"
+  },
+  "peerDependencies": {
+    "@sproutsocial/seeds-partner-logos": ">=1.5.0",
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}