@sproutsocial/seeds-react-partner-logo 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -78,16 +78,16 @@ var PartnerLogo = ({
78
78
  const defaultSize = logoType === "symbol" ? "small" : void 0;
79
79
  const defaultWidth = viewBoxCoordinates[2];
80
80
  const defaultHeight = viewBoxCoordinates[3];
81
+ const hasAriaLabel = !!ariaLabel;
82
+ const ariaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": "true" };
81
83
  return /* @__PURE__ */ jsx(
82
84
  styles_default,
83
85
  {
86
+ ...ariaProps,
84
87
  height: height ? height : defaultHeight + "px",
85
88
  width: width ? width : defaultWidth + "px",
86
89
  logoSize: size ?? defaultSize,
87
90
  className: "logo",
88
- role: "img",
89
- "aria-label": ariaLabel,
90
- "aria-hidden": ariaLabel ? void 0 : "true",
91
91
  "data-qa-logo": partnerName,
92
92
  ...rest,
93
93
  children: /* @__PURE__ */ jsx(
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/PartnerLogo.tsx","../../src/styles.ts","../../src/PartnerLogoTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n {\n backgroundType,\n logoType,\n partnerName,\n }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n mode: TypeTheme[\"mode\"]\n) => {\n const logo =\n logoType && logoType !== \"symbol\"\n ? partnerName + \"-\" + logoType\n : partnerName;\n if (backgroundType && backgroundType === \"dark\") {\n return `${logo}-dark`;\n } else if (backgroundType && backgroundType === \"light\") {\n return logo;\n } else if (mode === \"dark\") {\n return `${logo}-dark`;\n } else {\n return logo;\n }\n};\n\nconst PartnerLogo = ({\n partnerName,\n backgroundType,\n logoType = \"symbol\",\n height,\n width,\n size,\n \"aria-label\": ariaLabel,\n svgProps,\n ...rest\n}: TypePartnerLogoProps) => {\n const { mode } = useTheme() as TypeTheme;\n\n const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n const defaultWidth = viewBoxCoordinates[2];\n const defaultHeight = viewBoxCoordinates[3];\n return (\n <Container //we add pixels here because view box coordinates are numbers\n height={height ? height : defaultHeight + \"px\"}\n width={width ? width : defaultWidth + \"px\"}\n logoSize={size ?? defaultSize}\n className=\"logo\"\n role=\"img\"\n aria-label={ariaLabel}\n aria-hidden={ariaLabel ? undefined : \"true\"}\n data-qa-logo={partnerName}\n {...rest}\n >\n <svg\n className=\"logo-svg\"\n viewBox={logoViewBox}\n focusable={false}\n data-qa-logo-svg={`${partnerName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${logo}`}\n />\n </svg>\n </Container>\n );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n type TypePartnerLogoProps,\n type TypePartnerLogoSize,\n type TypePartnerLogoSizeValues,\n PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n height: TypePartnerLogoProps[\"height\"],\n logoSize: TypePartnerLogoSizeValues\n) => css`\n height: ${logoSize ? logoSize : height};\n line-height: ${logoSize ? logoSize : height};\n\n .logo-svg {\n height: ${logoSize ? logoSize : height};\n width: ${logoSize ? logoSize : \"\"};\n }\n`;\n\ninterface ContainerProps\n extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n ${COMMON}\n ${FLEXBOX}\n ${verticalAlign}\n ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n mini: \"12px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** The name of the partner whose logo you want to render. */\n partnerName: EnumLogoNamesWithoutVariants;\n\n /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n backgroundType?: \"dark\" | \"light\";\n logoType?: TypePartnerLogoTypes;\n height?: string;\n width?: string;\n size?: TypePartnerLogoSize;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n","import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,gBAAgB;;;ACDzB,OAAO,UAAU,WAAW;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,eAAe;;;ACFhC,OAAuB;AAEvB,SAAS,gCAAgC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,SAAS,iBAAiB;AA+DlB;AA7DR,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,UAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,YAAY,SAAY;AAAA,MACrC,gBAAc;AAAA,MACb,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AG3Ef,IAAO,gBAAQ;","names":[]}
1
+ {"version":3,"sources":["../../src/PartnerLogo.tsx","../../src/styles.ts","../../src/PartnerLogoTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n {\n backgroundType,\n logoType,\n partnerName,\n }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n mode: TypeTheme[\"mode\"]\n) => {\n const logo =\n logoType && logoType !== \"symbol\"\n ? partnerName + \"-\" + logoType\n : partnerName;\n if (backgroundType && backgroundType === \"dark\") {\n return `${logo}-dark`;\n } else if (backgroundType && backgroundType === \"light\") {\n return logo;\n } else if (mode === \"dark\") {\n return `${logo}-dark`;\n } else {\n return logo;\n }\n};\n\nconst PartnerLogo = ({\n partnerName,\n backgroundType,\n logoType = \"symbol\",\n height,\n width,\n size,\n \"aria-label\": ariaLabel,\n svgProps,\n ...rest\n}: TypePartnerLogoProps) => {\n const { mode } = useTheme() as TypeTheme;\n\n const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n const defaultWidth = viewBoxCoordinates[2];\n const defaultHeight = viewBoxCoordinates[3];\n\n const hasAriaLabel = !!ariaLabel;\n const ariaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel }\n : { \"aria-hidden\": \"true\" };\n\n return (\n <Container\n {...ariaProps}\n // we add pixels here because view box coordinates are numbers\n height={height ? height : defaultHeight + \"px\"}\n width={width ? width : defaultWidth + \"px\"}\n logoSize={size ?? defaultSize}\n className=\"logo\"\n data-qa-logo={partnerName}\n {...rest}\n >\n <svg\n className=\"logo-svg\"\n viewBox={logoViewBox}\n focusable={false}\n data-qa-logo-svg={`${partnerName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${logo}`}\n />\n </svg>\n </Container>\n );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n type TypePartnerLogoProps,\n type TypePartnerLogoSize,\n type TypePartnerLogoSizeValues,\n PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n height: TypePartnerLogoProps[\"height\"],\n logoSize: TypePartnerLogoSizeValues\n) => css`\n height: ${logoSize ? logoSize : height};\n line-height: ${logoSize ? logoSize : height};\n\n .logo-svg {\n height: ${logoSize ? logoSize : height};\n width: ${logoSize ? logoSize : \"\"};\n }\n`;\n\ninterface ContainerProps\n extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n ${COMMON}\n ${FLEXBOX}\n ${verticalAlign}\n ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n mini: \"12px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** The name of the partner whose logo you want to render. */\n partnerName: EnumLogoNamesWithoutVariants;\n\n /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n backgroundType?: \"dark\" | \"light\";\n logoType?: TypePartnerLogoTypes;\n height?: string;\n width?: string;\n size?: TypePartnerLogoSize;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n","import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,gBAAgB;;;ACDzB,OAAO,UAAU,WAAW;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,QAAQ,eAAe;;;ACFhC,OAAuB;AAEvB,SAAS,gCAAgC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,SAAS,iBAAiB;AAoElB;AAlER,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,UAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAE1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,YAAY,eACd,EAAE,MAAM,OAAO,cAAc,UAAU,IACvC,EAAE,eAAe,OAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MAEJ,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AGhFf,IAAO,gBAAQ;","names":[]}
package/dist/index.js CHANGED
@@ -118,16 +118,16 @@ var PartnerLogo = ({
118
118
  const defaultSize = logoType === "symbol" ? "small" : void 0;
119
119
  const defaultWidth = viewBoxCoordinates[2];
120
120
  const defaultHeight = viewBoxCoordinates[3];
121
+ const hasAriaLabel = !!ariaLabel;
122
+ const ariaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": "true" };
121
123
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
122
124
  styles_default,
123
125
  {
126
+ ...ariaProps,
124
127
  height: height ? height : defaultHeight + "px",
125
128
  width: width ? width : defaultWidth + "px",
126
129
  logoSize: size ?? defaultSize,
127
130
  className: "logo",
128
- role: "img",
129
- "aria-label": ariaLabel,
130
- "aria-hidden": ariaLabel ? void 0 : "true",
131
131
  "data-qa-logo": partnerName,
132
132
  ...rest,
133
133
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/PartnerLogo.tsx","../src/styles.ts","../src/PartnerLogoTypes.ts"],"sourcesContent":["import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n","import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n {\n backgroundType,\n logoType,\n partnerName,\n }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n mode: TypeTheme[\"mode\"]\n) => {\n const logo =\n logoType && logoType !== \"symbol\"\n ? partnerName + \"-\" + logoType\n : partnerName;\n if (backgroundType && backgroundType === \"dark\") {\n return `${logo}-dark`;\n } else if (backgroundType && backgroundType === \"light\") {\n return logo;\n } else if (mode === \"dark\") {\n return `${logo}-dark`;\n } else {\n return logo;\n }\n};\n\nconst PartnerLogo = ({\n partnerName,\n backgroundType,\n logoType = \"symbol\",\n height,\n width,\n size,\n \"aria-label\": ariaLabel,\n svgProps,\n ...rest\n}: TypePartnerLogoProps) => {\n const { mode } = useTheme() as TypeTheme;\n\n const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n const defaultWidth = viewBoxCoordinates[2];\n const defaultHeight = viewBoxCoordinates[3];\n return (\n <Container //we add pixels here because view box coordinates are numbers\n height={height ? height : defaultHeight + \"px\"}\n width={width ? width : defaultWidth + \"px\"}\n logoSize={size ?? defaultSize}\n className=\"logo\"\n role=\"img\"\n aria-label={ariaLabel}\n aria-hidden={ariaLabel ? undefined : \"true\"}\n data-qa-logo={partnerName}\n {...rest}\n >\n <svg\n className=\"logo-svg\"\n viewBox={logoViewBox}\n focusable={false}\n data-qa-logo-svg={`${partnerName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${logo}`}\n />\n </svg>\n </Container>\n );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n type TypePartnerLogoProps,\n type TypePartnerLogoSize,\n type TypePartnerLogoSizeValues,\n PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n height: TypePartnerLogoProps[\"height\"],\n logoSize: TypePartnerLogoSizeValues\n) => css`\n height: ${logoSize ? logoSize : height};\n line-height: ${logoSize ? logoSize : height};\n\n .logo-svg {\n height: ${logoSize ? logoSize : height};\n width: ${logoSize ? logoSize : \"\"};\n }\n`;\n\ninterface ContainerProps\n extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n ${COMMON}\n ${FLEXBOX}\n ${verticalAlign}\n ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n mini: \"12px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** The name of the partner whose logo you want to render. */\n partnerName: EnumLogoNamesWithoutVariants;\n\n /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n backgroundType?: \"dark\" | \"light\";\n logoType?: TypePartnerLogoTypes;\n height?: string;\n width?: string;\n size?: TypePartnerLogoSize;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAyB;;;ACDzB,+BAA4B;AAC5B,2BAA8B;AAC9B,sCAAgC;;;ACFhC,YAAuB;AAEvB,iCAAyC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,gBAAY,yBAAAC,SAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,sCAAM;AAAA,IACN,uCAAO;AAAA,IACP,kCAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,IAAAC,8BAA0B;AA+DlB;AA7DR,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,QAAI,oCAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,sCAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,YAAY,SAAY;AAAA,MACrC,gBAAc;AAAA,MACb,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AD3Ef,IAAO,gBAAQ;","names":["import_styled_components","styled","import_seeds_partner_logos"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/PartnerLogo.tsx","../src/styles.ts","../src/PartnerLogoTypes.ts"],"sourcesContent":["import PartnerLogo from \"./PartnerLogo\";\n\nexport default PartnerLogo;\nexport { PartnerLogo };\nexport * from \"./PartnerLogoTypes\";\n","import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport Container from \"./styles\";\nimport type { TypePartnerLogoProps } from \"./PartnerLogoTypes\";\nimport { ViewBoxes } from \"@sproutsocial/seeds-partner-logos\";\n\nconst whichLogo = (\n {\n backgroundType,\n logoType,\n partnerName,\n }: Pick<TypePartnerLogoProps, \"backgroundType\" | \"logoType\" | \"partnerName\">,\n mode: TypeTheme[\"mode\"]\n) => {\n const logo =\n logoType && logoType !== \"symbol\"\n ? partnerName + \"-\" + logoType\n : partnerName;\n if (backgroundType && backgroundType === \"dark\") {\n return `${logo}-dark`;\n } else if (backgroundType && backgroundType === \"light\") {\n return logo;\n } else if (mode === \"dark\") {\n return `${logo}-dark`;\n } else {\n return logo;\n }\n};\n\nconst PartnerLogo = ({\n partnerName,\n backgroundType,\n logoType = \"symbol\",\n height,\n width,\n size,\n \"aria-label\": ariaLabel,\n svgProps,\n ...rest\n}: TypePartnerLogoProps) => {\n const { mode } = useTheme() as TypeTheme;\n\n const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);\n const logoViewBox = ViewBoxes[logo as keyof typeof ViewBoxes];\n const viewBoxCoordinates = logoViewBox?.split(\" \") || [];\n const defaultSize = logoType === \"symbol\" ? \"small\" : undefined;\n const defaultWidth = viewBoxCoordinates[2];\n const defaultHeight = viewBoxCoordinates[3];\n\n const hasAriaLabel = !!ariaLabel;\n const ariaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel }\n : { \"aria-hidden\": \"true\" };\n\n return (\n <Container\n {...ariaProps}\n // we add pixels here because view box coordinates are numbers\n height={height ? height : defaultHeight + \"px\"}\n width={width ? width : defaultWidth + \"px\"}\n logoSize={size ?? defaultSize}\n className=\"logo\"\n data-qa-logo={partnerName}\n {...rest}\n >\n <svg\n className=\"logo-svg\"\n viewBox={logoViewBox}\n focusable={false}\n data-qa-logo-svg={`${partnerName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${logo}`}\n />\n </svg>\n </Container>\n );\n};\n\nexport default PartnerLogo;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON, FLEXBOX } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n type TypePartnerLogoProps,\n type TypePartnerLogoSize,\n type TypePartnerLogoSizeValues,\n PartnerLogoSizes,\n} from \"./PartnerLogoTypes\";\n\nconst stylesForSize = (\n height: TypePartnerLogoProps[\"height\"],\n logoSize: TypePartnerLogoSizeValues\n) => css`\n height: ${logoSize ? logoSize : height};\n line-height: ${logoSize ? logoSize : height};\n\n .logo-svg {\n height: ${logoSize ? logoSize : height};\n width: ${logoSize ? logoSize : \"\"};\n }\n`;\n\ninterface ContainerProps\n extends Required<Pick<TypePartnerLogoProps, \"height\" | \"width\">> {\n logoSize: TypePartnerLogoSize;\n}\n\nconst Container = styled(\"span\")<ContainerProps>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n ${COMMON}\n ${FLEXBOX}\n ${verticalAlign}\n ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport { LogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/**\n * @deprecated Use PartnerLogoNames instead\n */\nexport const PartnerNames = LogoNamesWithoutVariants;\n\n/**\n * @deprecated Use EnumLogoNames instead\n */\nexport type TypePartnerNames = EnumLogoNamesWithoutVariants;\n\nexport const PartnerLogoSizes = {\n mini: \"12px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n} as const;\n\nexport type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;\nexport type TypePartnerLogoSizeValues =\n (typeof PartnerLogoSizes)[TypePartnerLogoSize];\n\nexport const PartnerLogoTypes = [\"symbol\", \"wordmark\", \"lockup\"] as const;\n\nexport type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];\n\nexport interface TypePartnerLogoProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemFlexboxProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** The name of the partner whose logo you want to render. */\n partnerName: EnumLogoNamesWithoutVariants;\n\n /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */\n backgroundType?: \"dark\" | \"light\";\n logoType?: TypePartnerLogoTypes;\n height?: string;\n width?: string;\n size?: TypePartnerLogoSize;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAyB;;;ACDzB,+BAA4B;AAC5B,2BAA8B;AAC9B,sCAAgC;;;ACFhC,YAAuB;AAEvB,iCAAyC;AAUlC,IAAM,eAAe;AAOrB,IAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAMO,IAAM,mBAAmB,CAAC,UAAU,YAAY,QAAQ;;;ADrB/D,IAAM,gBAAgB,CACpB,QACA,aACG;AAAA,YACO,WAAW,WAAW,MAAM;AAAA,iBACvB,WAAW,WAAW,MAAM;AAAA;AAAA;AAAA,cAG/B,WAAW,WAAW,MAAM;AAAA,aAC7B,WAAW,WAAW,EAAE;AAAA;AAAA;AASrC,IAAM,gBAAY,yBAAAC,SAAO,MAAM;AAAA;AAAA;AAAA;AAAA,IAI3B,sCAAM;AAAA,IACN,uCAAO;AAAA,IACP,kCAAa;AAAA,IACb,CAAC,UAAU,cAAc,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,CAAC,CAAC;AAAA;AAE5E,IAAO,iBAAQ;;;ADhCf,IAAAC,8BAA0B;AAoElB;AAlER,IAAM,YAAY,CAChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GACA,SACG;AACH,QAAM,OACJ,YAAY,aAAa,WACrB,cAAc,MAAM,WACpB;AACN,MAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,WAAO,GAAG,IAAI;AAAA,EAChB,WAAW,kBAAkB,mBAAmB,SAAS;AACvD,WAAO;AAAA,EACT,WAAW,SAAS,QAAQ;AAC1B,WAAO,GAAG,IAAI;AAAA,EAChB,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,KAAK,QAAI,oCAAS;AAE1B,QAAM,OAAO,UAAU,EAAE,gBAAgB,UAAU,YAAY,GAAG,IAAI;AACtE,QAAM,cAAc,sCAAU,IAA8B;AAC5D,QAAM,qBAAqB,aAAa,MAAM,GAAG,KAAK,CAAC;AACvD,QAAM,cAAc,aAAa,WAAW,UAAU;AACtD,QAAM,eAAe,mBAAmB,CAAC;AACzC,QAAM,gBAAgB,mBAAmB,CAAC;AAE1C,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,YAAY,eACd,EAAE,MAAM,OAAO,cAAc,UAAU,IACvC,EAAE,eAAe,OAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MAEJ,QAAQ,SAAS,SAAS,gBAAgB;AAAA,MAC1C,OAAO,QAAQ,QAAQ,eAAe;AAAA,MACtC,UAAU,QAAQ;AAAA,MAClB,WAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,WAAW;AAAA,UAC/B,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,IAAI;AAAA;AAAA,UAChC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;ADhFf,IAAO,gBAAQ;","names":["import_styled_components","styled","import_seeds_partner_logos"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-partner-logo",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Seeds React Partner Logo component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -20,7 +20,7 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@sproutsocial/seeds-react-system-props": "^3.0.1",
23
- "@sproutsocial/seeds-react-theme": "^3.3.0",
23
+ "@sproutsocial/seeds-react-theme": "^3.3.1",
24
24
  "styled-system": "^5.1.5"
25
25
  },
26
26
  "devDependencies": {