@sproutsocial/seeds-react-partner-logo 1.3.8 → 1.5.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 +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
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 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;
|
|
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":[]}
|
package/dist/index.js
CHANGED
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 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 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-partner-logo",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Seeds React Partner Logo component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
23
|
-
"@sproutsocial/seeds-react-theme": "^3.
|
|
23
|
+
"@sproutsocial/seeds-react-theme": "^3.3.0",
|
|
24
24
|
"styled-system": "^5.1.5"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@sproutsocial/seeds-partner-logos": "^
|
|
27
|
+
"@sproutsocial/seeds-partner-logos": "^2.0.0",
|
|
28
28
|
"react": "^18.0.0",
|
|
29
29
|
"styled-components": "^5.2.3",
|
|
30
30
|
"typescript": "^5.6.2",
|