@sproutsocial/seeds-react-partner-logo 1.1.0 → 1.2.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 +30 -33
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +32 -35
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/esm/index.js
CHANGED
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
// src/PartnerLogo.tsx
|
|
2
|
-
import
|
|
2
|
+
import "react";
|
|
3
3
|
import { useTheme } from "styled-components";
|
|
4
4
|
|
|
5
5
|
// src/styles.ts
|
|
6
6
|
import styled, { css } from "styled-components";
|
|
7
7
|
import { verticalAlign } from "styled-system";
|
|
8
8
|
import { COMMON, FLEXBOX } from "@sproutsocial/seeds-react-system-props";
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
// src/PartnerLogoTypes.ts
|
|
11
|
+
import "react";
|
|
12
|
+
import { LogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
|
|
13
|
+
var PartnerNames = LogoNamesWithoutVariants;
|
|
14
|
+
var PartnerLogoSizes = {
|
|
10
15
|
mini: "12px",
|
|
11
16
|
small: "16px",
|
|
12
17
|
medium: "24px",
|
|
13
18
|
large: "32px",
|
|
14
19
|
jumbo: "64px"
|
|
15
20
|
};
|
|
16
|
-
var
|
|
21
|
+
var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
|
|
22
|
+
|
|
23
|
+
// src/styles.ts
|
|
24
|
+
var stylesForSize = (height, logoSize) => css`
|
|
17
25
|
height: ${logoSize ? logoSize : height};
|
|
18
26
|
line-height: ${logoSize ? logoSize : height};
|
|
19
27
|
|
|
@@ -29,12 +37,13 @@ var Container = styled("span")`
|
|
|
29
37
|
${COMMON}
|
|
30
38
|
${FLEXBOX}
|
|
31
39
|
${verticalAlign}
|
|
32
|
-
${(props) => stylesForSize(props.height,
|
|
40
|
+
${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}
|
|
33
41
|
`;
|
|
34
42
|
var styles_default = Container;
|
|
35
43
|
|
|
36
44
|
// src/PartnerLogo.tsx
|
|
37
45
|
import { ViewBoxes } from "@sproutsocial/seeds-partner-logos";
|
|
46
|
+
import { jsx } from "react/jsx-runtime";
|
|
38
47
|
var whichLogo = ({
|
|
39
48
|
backgroundType,
|
|
40
49
|
logoType,
|
|
@@ -68,7 +77,7 @@ var PartnerLogo = ({
|
|
|
68
77
|
const viewBoxCoordinates = logoViewBox?.split(" ") || [];
|
|
69
78
|
const defaultWidth = viewBoxCoordinates[2];
|
|
70
79
|
const defaultHeight = viewBoxCoordinates[3];
|
|
71
|
-
return /* @__PURE__ */
|
|
80
|
+
return /* @__PURE__ */ jsx(
|
|
72
81
|
styles_default,
|
|
73
82
|
{
|
|
74
83
|
height: height ? height : defaultHeight + "px",
|
|
@@ -78,41 +87,29 @@ var PartnerLogo = ({
|
|
|
78
87
|
role: "img",
|
|
79
88
|
"aria-label": ariaLabel,
|
|
80
89
|
"data-qa-logo": partnerName,
|
|
81
|
-
...rest
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
"svg",
|
|
85
|
-
{
|
|
86
|
-
className: "logo-svg",
|
|
87
|
-
viewBox: logoViewBox,
|
|
88
|
-
focusable: false,
|
|
89
|
-
"data-qa-logo-svg": `${partnerName}-svg`,
|
|
90
|
-
...svgProps
|
|
91
|
-
},
|
|
92
|
-
/* @__PURE__ */ React.createElement(
|
|
93
|
-
"use",
|
|
90
|
+
...rest,
|
|
91
|
+
children: /* @__PURE__ */ jsx(
|
|
92
|
+
"svg",
|
|
94
93
|
{
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
className: "logo-svg",
|
|
95
|
+
viewBox: logoViewBox,
|
|
96
|
+
focusable: false,
|
|
97
|
+
"data-qa-logo-svg": `${partnerName}-svg`,
|
|
98
|
+
...svgProps,
|
|
99
|
+
children: /* @__PURE__ */ jsx(
|
|
100
|
+
"use",
|
|
101
|
+
{
|
|
102
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
103
|
+
xlinkHref: `#seeds-svgs_${logo}`
|
|
104
|
+
}
|
|
105
|
+
)
|
|
97
106
|
}
|
|
98
107
|
)
|
|
99
|
-
|
|
108
|
+
}
|
|
100
109
|
);
|
|
101
110
|
};
|
|
102
111
|
var PartnerLogo_default = PartnerLogo;
|
|
103
112
|
|
|
104
|
-
// src/PartnerLogoTypes.ts
|
|
105
|
-
import { LogoNamesWithoutVariants } from "@sproutsocial/seeds-partner-logos";
|
|
106
|
-
var PartnerNames = LogoNamesWithoutVariants;
|
|
107
|
-
var PartnerLogoSizes = {
|
|
108
|
-
mini: "12px",
|
|
109
|
-
small: "16px",
|
|
110
|
-
medium: "24px",
|
|
111
|
-
large: "32px",
|
|
112
|
-
jumbo: "64px"
|
|
113
|
-
};
|
|
114
|
-
var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
|
|
115
|
-
|
|
116
113
|
// src/index.ts
|
|
117
114
|
var src_default = PartnerLogo_default;
|
|
118
115
|
export {
|
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 { 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];\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 { TypePartnerLogoProps
|
|
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;AA6DlB;AA3DR,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,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;AAAA,MACV,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;;;AGzEf,IAAO,cAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
3
3
|
import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
|
|
4
4
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
|
|
5
5
|
|
|
@@ -19,6 +19,7 @@ declare const PartnerLogoSizes: {
|
|
|
19
19
|
readonly jumbo: "64px";
|
|
20
20
|
};
|
|
21
21
|
type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;
|
|
22
|
+
type TypePartnerLogoSizeValues = (typeof PartnerLogoSizes)[TypePartnerLogoSize];
|
|
22
23
|
declare const PartnerLogoTypes: readonly ["symbol", "wordmark", "lockup"];
|
|
23
24
|
type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];
|
|
24
25
|
interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
|
|
@@ -33,6 +34,6 @@ interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSyst
|
|
|
33
34
|
svgProps?: React.ComponentPropsWithoutRef<"svg">;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) =>
|
|
37
|
+
declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => react_jsx_runtime.JSX.Element;
|
|
37
38
|
|
|
38
|
-
export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };
|
|
39
|
+
export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoSizeValues, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
3
3
|
import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
|
|
4
4
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps } from '@sproutsocial/seeds-react-system-props';
|
|
5
5
|
|
|
@@ -19,6 +19,7 @@ declare const PartnerLogoSizes: {
|
|
|
19
19
|
readonly jumbo: "64px";
|
|
20
20
|
};
|
|
21
21
|
type TypePartnerLogoSize = keyof typeof PartnerLogoSizes;
|
|
22
|
+
type TypePartnerLogoSizeValues = (typeof PartnerLogoSizes)[TypePartnerLogoSize];
|
|
22
23
|
declare const PartnerLogoTypes: readonly ["symbol", "wordmark", "lockup"];
|
|
23
24
|
type TypePartnerLogoTypes = (typeof PartnerLogoTypes)[number];
|
|
24
25
|
interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemFlexboxProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
|
|
@@ -33,6 +34,6 @@ interface TypePartnerLogoProps extends TypeStyledComponentsCommonProps, TypeSyst
|
|
|
33
34
|
svgProps?: React.ComponentPropsWithoutRef<"svg">;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) =>
|
|
37
|
+
declare const PartnerLogo: ({ partnerName, backgroundType, logoType, height, width, size, "aria-label": ariaLabel, svgProps, ...rest }: TypePartnerLogoProps) => react_jsx_runtime.JSX.Element;
|
|
37
38
|
|
|
38
|
-
export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };
|
|
39
|
+
export { PartnerLogo, PartnerLogoSizes, PartnerLogoTypes, PartnerNames, type TypePartnerLogoProps, type TypePartnerLogoSize, type TypePartnerLogoSizeValues, type TypePartnerLogoTypes, type TypePartnerNames, PartnerLogo as default };
|
package/dist/index.js
CHANGED
|
@@ -39,21 +39,29 @@ __export(src_exports, {
|
|
|
39
39
|
module.exports = __toCommonJS(src_exports);
|
|
40
40
|
|
|
41
41
|
// src/PartnerLogo.tsx
|
|
42
|
-
var import_react =
|
|
42
|
+
var import_react = require("react");
|
|
43
43
|
var import_styled_components2 = require("styled-components");
|
|
44
44
|
|
|
45
45
|
// src/styles.ts
|
|
46
46
|
var import_styled_components = __toESM(require("styled-components"));
|
|
47
47
|
var import_styled_system = require("styled-system");
|
|
48
48
|
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
49
|
-
|
|
49
|
+
|
|
50
|
+
// src/PartnerLogoTypes.ts
|
|
51
|
+
var React = require("react");
|
|
52
|
+
var import_seeds_partner_logos = require("@sproutsocial/seeds-partner-logos");
|
|
53
|
+
var PartnerNames = import_seeds_partner_logos.LogoNamesWithoutVariants;
|
|
54
|
+
var PartnerLogoSizes = {
|
|
50
55
|
mini: "12px",
|
|
51
56
|
small: "16px",
|
|
52
57
|
medium: "24px",
|
|
53
58
|
large: "32px",
|
|
54
59
|
jumbo: "64px"
|
|
55
60
|
};
|
|
56
|
-
var
|
|
61
|
+
var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
|
|
62
|
+
|
|
63
|
+
// src/styles.ts
|
|
64
|
+
var stylesForSize = (height, logoSize) => import_styled_components.css`
|
|
57
65
|
height: ${logoSize ? logoSize : height};
|
|
58
66
|
line-height: ${logoSize ? logoSize : height};
|
|
59
67
|
|
|
@@ -69,12 +77,13 @@ var Container = (0, import_styled_components.default)("span")`
|
|
|
69
77
|
${import_seeds_react_system_props.COMMON}
|
|
70
78
|
${import_seeds_react_system_props.FLEXBOX}
|
|
71
79
|
${import_styled_system.verticalAlign}
|
|
72
|
-
${(props) => stylesForSize(props.height,
|
|
80
|
+
${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}
|
|
73
81
|
`;
|
|
74
82
|
var styles_default = Container;
|
|
75
83
|
|
|
76
84
|
// src/PartnerLogo.tsx
|
|
77
|
-
var
|
|
85
|
+
var import_seeds_partner_logos2 = require("@sproutsocial/seeds-partner-logos");
|
|
86
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
78
87
|
var whichLogo = ({
|
|
79
88
|
backgroundType,
|
|
80
89
|
logoType,
|
|
@@ -104,11 +113,11 @@ var PartnerLogo = ({
|
|
|
104
113
|
}) => {
|
|
105
114
|
const { mode } = (0, import_styled_components2.useTheme)();
|
|
106
115
|
const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
|
|
107
|
-
const logoViewBox =
|
|
116
|
+
const logoViewBox = import_seeds_partner_logos2.ViewBoxes[logo];
|
|
108
117
|
const viewBoxCoordinates = logoViewBox?.split(" ") || [];
|
|
109
118
|
const defaultWidth = viewBoxCoordinates[2];
|
|
110
119
|
const defaultHeight = viewBoxCoordinates[3];
|
|
111
|
-
return /* @__PURE__ */
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
121
|
styles_default,
|
|
113
122
|
{
|
|
114
123
|
height: height ? height : defaultHeight + "px",
|
|
@@ -118,41 +127,29 @@ var PartnerLogo = ({
|
|
|
118
127
|
role: "img",
|
|
119
128
|
"aria-label": ariaLabel,
|
|
120
129
|
"data-qa-logo": partnerName,
|
|
121
|
-
...rest
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
"svg",
|
|
125
|
-
{
|
|
126
|
-
className: "logo-svg",
|
|
127
|
-
viewBox: logoViewBox,
|
|
128
|
-
focusable: false,
|
|
129
|
-
"data-qa-logo-svg": `${partnerName}-svg`,
|
|
130
|
-
...svgProps
|
|
131
|
-
},
|
|
132
|
-
/* @__PURE__ */ import_react.default.createElement(
|
|
133
|
-
"use",
|
|
130
|
+
...rest,
|
|
131
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
"svg",
|
|
134
133
|
{
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
className: "logo-svg",
|
|
135
|
+
viewBox: logoViewBox,
|
|
136
|
+
focusable: false,
|
|
137
|
+
"data-qa-logo-svg": `${partnerName}-svg`,
|
|
138
|
+
...svgProps,
|
|
139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
140
|
+
"use",
|
|
141
|
+
{
|
|
142
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
143
|
+
xlinkHref: `#seeds-svgs_${logo}`
|
|
144
|
+
}
|
|
145
|
+
)
|
|
137
146
|
}
|
|
138
147
|
)
|
|
139
|
-
|
|
148
|
+
}
|
|
140
149
|
);
|
|
141
150
|
};
|
|
142
151
|
var PartnerLogo_default = PartnerLogo;
|
|
143
152
|
|
|
144
|
-
// src/PartnerLogoTypes.ts
|
|
145
|
-
var import_seeds_partner_logos2 = require("@sproutsocial/seeds-partner-logos");
|
|
146
|
-
var PartnerNames = import_seeds_partner_logos2.LogoNamesWithoutVariants;
|
|
147
|
-
var PartnerLogoSizes = {
|
|
148
|
-
mini: "12px",
|
|
149
|
-
small: "16px",
|
|
150
|
-
medium: "24px",
|
|
151
|
-
large: "32px",
|
|
152
|
-
jumbo: "64px"
|
|
153
|
-
};
|
|
154
|
-
var PartnerLogoTypes = ["symbol", "wordmark", "lockup"];
|
|
155
|
-
|
|
156
153
|
// src/index.ts
|
|
157
154
|
var src_default = PartnerLogo_default;
|
|
158
155
|
// Annotate the CommonJS export names for ESM import in node:
|
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 { 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];\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 { TypePartnerLogoProps
|
|
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;AA6DlB;AA3DR,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,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;AAAA,MACV,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;;;ADzEf,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.2.0",
|
|
4
4
|
"description": "Seeds React Partner Logo component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -26,8 +26,9 @@
|
|
|
26
26
|
"@sproutsocial/seeds-partner-logos": "*",
|
|
27
27
|
"react": "^18.0.0",
|
|
28
28
|
"styled-components": "^5.2.3",
|
|
29
|
-
"typescript": "^5.
|
|
30
|
-
"tsup": "^8.0.2"
|
|
29
|
+
"typescript": "^5.6.2",
|
|
30
|
+
"tsup": "^8.0.2",
|
|
31
|
+
"@sproutsocial/seeds-tsconfig": "*"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"@sproutsocial/seeds-partner-logos": ">=1.5.0",
|