@sproutsocial/seeds-react-partner-logo 1.2.0 → 1.3.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 +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/esm/index.js
CHANGED
|
@@ -75,6 +75,7 @@ var PartnerLogo = ({
|
|
|
75
75
|
const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
|
|
76
76
|
const logoViewBox = ViewBoxes[logo];
|
|
77
77
|
const viewBoxCoordinates = logoViewBox?.split(" ") || [];
|
|
78
|
+
const defaultSize = logoType === "symbol" ? "small" : void 0;
|
|
78
79
|
const defaultWidth = viewBoxCoordinates[2];
|
|
79
80
|
const defaultHeight = viewBoxCoordinates[3];
|
|
80
81
|
return /* @__PURE__ */ jsx(
|
|
@@ -82,7 +83,7 @@ var PartnerLogo = ({
|
|
|
82
83
|
{
|
|
83
84
|
height: height ? height : defaultHeight + "px",
|
|
84
85
|
width: width ? width : defaultWidth + "px",
|
|
85
|
-
logoSize: size,
|
|
86
|
+
logoSize: size ?? defaultSize,
|
|
86
87
|
className: "logo",
|
|
87
88
|
role: "img",
|
|
88
89
|
"aria-label": ariaLabel,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -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 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}\n className=\"logo\"\n role=\"img\"\n aria-label={ariaLabel}\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;
|
|
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 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;AA8DlB;AA5DR,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,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;;;AG1Ef,IAAO,cAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -6,7 +6,7 @@ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexb
|
|
|
6
6
|
/**
|
|
7
7
|
* @deprecated Use PartnerLogoNames instead
|
|
8
8
|
*/
|
|
9
|
-
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", "meta", "microsoft-dynamics", "paypal", "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"];
|
|
9
|
+
declare const PartnerNames: readonly ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bluesky", "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", "meta", "microsoft-dynamics", "paypal", "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"];
|
|
10
10
|
/**
|
|
11
11
|
* @deprecated Use EnumLogoNames instead
|
|
12
12
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexb
|
|
|
6
6
|
/**
|
|
7
7
|
* @deprecated Use PartnerLogoNames instead
|
|
8
8
|
*/
|
|
9
|
-
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", "meta", "microsoft-dynamics", "paypal", "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"];
|
|
9
|
+
declare const PartnerNames: readonly ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bluesky", "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", "meta", "microsoft-dynamics", "paypal", "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"];
|
|
10
10
|
/**
|
|
11
11
|
* @deprecated Use EnumLogoNames instead
|
|
12
12
|
*/
|
package/dist/index.js
CHANGED
|
@@ -115,6 +115,7 @@ var PartnerLogo = ({
|
|
|
115
115
|
const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
|
|
116
116
|
const logoViewBox = import_seeds_partner_logos2.ViewBoxes[logo];
|
|
117
117
|
const viewBoxCoordinates = logoViewBox?.split(" ") || [];
|
|
118
|
+
const defaultSize = logoType === "symbol" ? "small" : void 0;
|
|
118
119
|
const defaultWidth = viewBoxCoordinates[2];
|
|
119
120
|
const defaultHeight = viewBoxCoordinates[3];
|
|
120
121
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -122,7 +123,7 @@ var PartnerLogo = ({
|
|
|
122
123
|
{
|
|
123
124
|
height: height ? height : defaultHeight + "px",
|
|
124
125
|
width: width ? width : defaultWidth + "px",
|
|
125
|
-
logoSize: size,
|
|
126
|
+
logoSize: size ?? defaultSize,
|
|
126
127
|
className: "logo",
|
|
127
128
|
role: "img",
|
|
128
129
|
"aria-label": ariaLabel,
|
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 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}\n className=\"logo\"\n role=\"img\"\n aria-label={ariaLabel}\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;
|
|
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 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;AA8DlB;AA5DR,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,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;;;AD1Ef,IAAO,cAAQ;","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.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Seeds React Partner Logo component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -12,14 +12,15 @@
|
|
|
12
12
|
],
|
|
13
13
|
"scripts": {
|
|
14
14
|
"build": "tsup --dts",
|
|
15
|
+
"build:debug": "tsup --dts --metafile",
|
|
15
16
|
"dev": "tsup --watch --dts",
|
|
16
17
|
"clean": "rm -rf .turbo dist",
|
|
17
18
|
"clean:modules": "rm -rf node_modules",
|
|
18
19
|
"typecheck": "tsc --noEmit"
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
22
|
-
"@sproutsocial/seeds-react-theme": "
|
|
22
|
+
"@sproutsocial/seeds-react-system-props": "*",
|
|
23
|
+
"@sproutsocial/seeds-react-theme": "*",
|
|
23
24
|
"styled-system": "^5.1.5"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|