@sproutsocial/seeds-react-chart-legend 1.0.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.
Files changed (23) hide show
  1. package/.eslintignore +6 -0
  2. package/.eslintrc.js +4 -0
  3. package/.turbo/turbo-build.log +21 -0
  4. package/CHANGELOG.md +7 -0
  5. package/dist/esm/index.js +131 -0
  6. package/dist/esm/index.js.map +1 -0
  7. package/dist/index.d.mts +25 -0
  8. package/dist/index.d.ts +25 -0
  9. package/dist/index.js +168 -0
  10. package/dist/index.js.map +1 -0
  11. package/jest.config.js +9 -0
  12. package/package.json +45 -0
  13. package/src/ChartLegend.stories.tsx +174 -0
  14. package/src/ChartLegend.tsx +22 -0
  15. package/src/ChartLegendTypes.ts +32 -0
  16. package/src/__tests__/ChartLegend.typetest.tsx +37 -0
  17. package/src/__tests__/features.test.tsx +100 -0
  18. package/src/index.ts +5 -0
  19. package/src/styled.d.ts +7 -0
  20. package/src/styles.ts +52 -0
  21. package/src/useChartLabels.tsx +95 -0
  22. package/tsconfig.json +9 -0
  23. package/tsup.config.ts +12 -0
package/.eslintignore ADDED
@@ -0,0 +1,6 @@
1
+ # Node modules
2
+ node_modules/
3
+
4
+ # Build output
5
+ dist/
6
+ coverage/
package/.eslintrc.js ADDED
@@ -0,0 +1,4 @@
1
+ module.exports = {
2
+ root: true,
3
+ extends: ["eslint-config-seeds/racine"],
4
+ };
package/.turbo/turbo-build.log ADDED
@@ -0,0 +1,21 @@
1
+ yarn run v1.22.22
2
+ $ tsup --dts
3
+ CLI Building entry: src/index.ts
4
+ CLI Using tsconfig: tsconfig.json
5
+ CLI tsup v8.0.2
6
+ CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-chart-legend/tsup.config.ts
7
+ CLI Target: es2022
8
+ CLI Cleaning output folder
9
+ CJS Build start
10
+ ESM Build start
11
+ ESM dist/esm/index.js 4.03 KB
12
+ ESM dist/esm/index.js.map 9.13 KB
13
+ ESM ⚡️ Build success in 149ms
14
+ CJS dist/index.js 6.08 KB
15
+ CJS dist/index.js.map 9.25 KB
16
+ CJS ⚡️ Build success in 150ms
17
+ DTS Build start
18
+ DTS ⚡️ Build success in 24117ms
19
+ DTS dist/index.d.ts 1.39 KB
20
+ DTS dist/index.d.mts 1.39 KB
21
+ Done in 27.86s.
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # @sproutsocial/seeds-react-chart-legend
2
+
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 8d0ffcf: Migrated Chart Legend from Racine to seeds-react-chart-legend
package/dist/esm/index.js ADDED
@@ -0,0 +1,131 @@
1
+ // src/ChartLegend.tsx
2
+ import "react";
3
+
4
+ // src/styles.ts
5
+ import styled, { css } from "styled-components";
6
+ import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
7
+ var Label = styled.span`
8
+ display: flex;
9
+ align-items: center;
10
+ color: ${(props) => props.theme.colors.text.subtext};
11
+ white-space: nowrap;
12
+ text-transform: capitalize;
13
+ `;
14
+ var Swatch = styled.span`
15
+ margin-right: ${(props) => props.theme.space[300]};
16
+ width: ${(props) => props.theme.space[350]};
17
+ height: ${(props) => props.theme.space[350]};
18
+ border-radius: 4px;
19
+
20
+ ${COMMON}
21
+ `;
22
+ var Container = styled.div`
23
+ ${(props) => props.inline && css`
24
+ display: flex;
25
+ justify-content: center;
26
+
27
+ ${Label} + ${Label} {
28
+ margin-left: ${(props2) => props2.theme.space[450]};
29
+ }
30
+ `}
31
+
32
+ ${COMMON}
33
+ ${LAYOUT}
34
+ `;
35
+ Label.displayName = "ChartLegendLabel";
36
+ Swatch.displayName = "ChartLegendSwatch";
37
+ var styles_default = Container;
38
+
39
+ // src/useChartLabels.tsx
40
+ import "react";
41
+ import { useTheme } from "styled-components";
42
+ import { Text } from "@sproutsocial/seeds-react-text";
43
+ import { jsx, jsxs } from "react/jsx-runtime";
44
+ var getSwatchColor = (theme, index, RacineThemeColors) => {
45
+ const COMPARE_THEME = [
46
+ RacineThemeColors.dataviz.map["1"],
47
+ RacineThemeColors.dataviz.map["10"],
48
+ RacineThemeColors.dataviz.map["11"],
49
+ RacineThemeColors.dataviz.map["2"]
50
+ ];
51
+ const CONTRAST_THEME = [
52
+ RacineThemeColors.dataviz.map["1"],
53
+ RacineThemeColors.dataviz.map["2"],
54
+ RacineThemeColors.dataviz.map["3"],
55
+ RacineThemeColors.dataviz.map["4"],
56
+ RacineThemeColors.dataviz.map["5"],
57
+ RacineThemeColors.dataviz.map["6"],
58
+ RacineThemeColors.dataviz.map["4"],
59
+ RacineThemeColors.dataviz.map["5"],
60
+ RacineThemeColors.dataviz.map["6"],
61
+ RacineThemeColors.dataviz.map["7"],
62
+ RacineThemeColors.dataviz.map["8"],
63
+ RacineThemeColors.dataviz.map["9"],
64
+ RacineThemeColors.dataviz.map["10"]
65
+ ];
66
+ const EXTENDED_THEME = [
67
+ RacineThemeColors.dataviz.map["7"],
68
+ RacineThemeColors.dataviz.map["1"],
69
+ RacineThemeColors.dataviz.map["5"],
70
+ RacineThemeColors.dataviz.map["11"],
71
+ RacineThemeColors.dataviz.map["6"],
72
+ RacineThemeColors.dataviz.map["3"],
73
+ RacineThemeColors.dataviz.map["18"],
74
+ RacineThemeColors.dataviz.map["8"],
75
+ RacineThemeColors.dataviz.map["4"],
76
+ RacineThemeColors.dataviz.map["13"],
77
+ RacineThemeColors.dataviz.map["16"],
78
+ RacineThemeColors.dataviz.map["10"],
79
+ RacineThemeColors.dataviz.map["14"],
80
+ RacineThemeColors.dataviz.map["2"],
81
+ RacineThemeColors.dataviz.map["15"],
82
+ RacineThemeColors.dataviz.map["12"],
83
+ RacineThemeColors.dataviz.map["9"],
84
+ RacineThemeColors.dataviz.map["17"],
85
+ RacineThemeColors.dataviz.map["20"],
86
+ RacineThemeColors.dataviz.map["19"]
87
+ ];
88
+ const THEME_MAP = {
89
+ COMPARE: COMPARE_THEME,
90
+ CONTRAST: CONTRAST_THEME,
91
+ EXTENDED: EXTENDED_THEME,
92
+ DATAVIZROTATION: RacineThemeColors.dataviz.list
93
+ };
94
+ return THEME_MAP[theme.toUpperCase()][index];
95
+ };
96
+ var useChartLabels = (legendLabels, theme) => {
97
+ const racineTheme = useTheme();
98
+ const colors = racineTheme.colors;
99
+ return legendLabels.map((label, i) => {
100
+ const labelColor = label.color ? label.color : getSwatchColor(theme, i, colors);
101
+ return /* @__PURE__ */ jsxs(Label, { children: [
102
+ /* @__PURE__ */ jsx(Swatch, { bg: labelColor, "data-qa-swatch": "" }),
103
+ /* @__PURE__ */ jsx(Text, { as: "div", fontSize: 200, breakWord: true, children: label.name })
104
+ ] }, `chart-legend-label-${i}`);
105
+ });
106
+ };
107
+
108
+ // src/ChartLegend.tsx
109
+ import { jsx as jsx2 } from "react/jsx-runtime";
110
+ var ChartLegend = ({
111
+ legendLabels,
112
+ stacked,
113
+ theme = "datavizRotation",
114
+ qa,
115
+ ...rest
116
+ }) => {
117
+ const chartLabels = useChartLabels(legendLabels, theme);
118
+ return /* @__PURE__ */ jsx2(styles_default, { inline: !stacked, "data-qa-chartlegend": "", qa, ...rest, children: chartLabels });
119
+ };
120
+ var ChartLegend_default = ChartLegend;
121
+
122
+ // src/ChartLegendTypes.ts
123
+ import "react";
124
+
125
+ // src/index.ts
126
+ var src_default = ChartLegend_default;
127
+ export {
128
+ ChartLegend_default as ChartLegend,
129
+ src_default as default
130
+ };
131
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/ChartLegend.tsx","../../src/styles.ts","../../src/useChartLabels.tsx","../../src/ChartLegendTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeChartLegendProps } from \"./ChartLegendTypes\";\nimport { useChartLabels } from \"./useChartLabels\";\n\nconst ChartLegend = ({\n legendLabels,\n stacked,\n theme = \"datavizRotation\",\n qa,\n ...rest\n}: TypeChartLegendProps) => {\n const chartLabels = useChartLabels(legendLabels, theme);\n\n return (\n <Container inline={!stacked} data-qa-chartlegend=\"\" qa={qa} {...rest}>\n {chartLabels}\n </Container>\n );\n};\n\nexport default ChartLegend;\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChartLegendProps } from \"./ChartLegendTypes\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport const Label = styled.span`\n display: flex;\n align-items: center;\n color: ${(props) => props.theme.colors.text.subtext};\n white-space: nowrap;\n text-transform: capitalize;\n`;\n\nexport const Swatch = styled.span<TypeSystemCommonProps>`\n margin-right: ${(props) => props.theme.space[300]};\n width: ${(props) => props.theme.space[350]};\n height: ${(props) => props.theme.space[350]};\n border-radius: 4px;\n\n ${COMMON}\n`;\n\nexport interface ChartLegendContainerTypes\n extends Omit<TypeChartLegendProps, \"stacked\" | \"legendLabels\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps {\n inline: boolean;\n}\n\nconst Container = styled.div<ChartLegendContainerTypes>`\n ${(props) =>\n props.inline &&\n css`\n display: flex;\n justify-content: center;\n\n ${Label} + ${Label} {\n margin-left: ${(props) => props.theme.space[450]};\n }\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nLabel.displayName = \"ChartLegendLabel\";\nSwatch.displayName = \"ChartLegendSwatch\";\n\nexport default Container;\n","import React from \"react\";\nimport type {\n TypeChartLegendTheme,\n TypeLegendLabels,\n} from \"./ChartLegendTypes\";\nimport type { TypeColor } from \"@sproutsocial/seeds-react-theme\";\nimport { useTheme } from \"styled-components\";\nimport { Label, Swatch } from \"./styles\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\nconst getSwatchColor = (\n theme: TypeChartLegendTheme,\n index: number,\n RacineThemeColors: TypeColor\n) => {\n const COMPARE_THEME = [\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"10\"],\n RacineThemeColors.dataviz.map[\"11\"],\n RacineThemeColors.dataviz.map[\"2\"],\n ];\n\n const CONTRAST_THEME = [\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"2\"],\n RacineThemeColors.dataviz.map[\"3\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"7\"],\n RacineThemeColors.dataviz.map[\"8\"],\n RacineThemeColors.dataviz.map[\"9\"],\n RacineThemeColors.dataviz.map[\"10\"],\n ];\n\n const EXTENDED_THEME = [\n RacineThemeColors.dataviz.map[\"7\"],\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"11\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"3\"],\n RacineThemeColors.dataviz.map[\"18\"],\n RacineThemeColors.dataviz.map[\"8\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"13\"],\n RacineThemeColors.dataviz.map[\"16\"],\n RacineThemeColors.dataviz.map[\"10\"],\n RacineThemeColors.dataviz.map[\"14\"],\n RacineThemeColors.dataviz.map[\"2\"],\n RacineThemeColors.dataviz.map[\"15\"],\n RacineThemeColors.dataviz.map[\"12\"],\n RacineThemeColors.dataviz.map[\"9\"],\n RacineThemeColors.dataviz.map[\"17\"],\n RacineThemeColors.dataviz.map[\"20\"],\n RacineThemeColors.dataviz.map[\"19\"],\n ];\n\n type ThemeKeys = \"COMPARE\" | \"CONTRAST\" | \"EXTENDED\" | \"DATAVIZROTATION\";\n\n const THEME_MAP: Record<ThemeKeys, any> = {\n COMPARE: COMPARE_THEME,\n CONTRAST: CONTRAST_THEME,\n EXTENDED: EXTENDED_THEME,\n DATAVIZROTATION: RacineThemeColors.dataviz.list,\n };\n\n return THEME_MAP[theme.toUpperCase() as ThemeKeys][index];\n};\n\nexport const useChartLabels = (\n legendLabels: TypeLegendLabels[],\n theme: TypeChartLegendTheme\n) => {\n const racineTheme = useTheme();\n const colors = racineTheme.colors;\n\n return legendLabels.map((label, i) => {\n const labelColor = label.color\n ? label.color\n : getSwatchColor(theme, i, colors);\n\n return (\n <Label key={`chart-legend-label-${i}`}>\n <Swatch bg={labelColor} data-qa-swatch=\"\" />\n <Text as=\"div\" fontSize={200} breakWord>\n {label.name}\n </Text>\n </Label>\n );\n });\n};\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */\nexport type TypeChartLegendTheme =\n | \"compare\"\n | \"contrast\"\n | \"extended\"\n | \"datavizRotation\";\nexport interface TypeLegendLabels {\n name: React.ReactNode;\n color?: string;\n}\nexport interface TypeChartLegendProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n /** Inline or stacked y plots */\n stacked?: boolean;\n /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */\n theme?: TypeChartLegendTheme;\n /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */\n legendLabels: TypeLegendLabels[];\n /** Orientation of the legend */\n orientation?: string;\n qa?: object;\n}\n","import ChartLegend from \"./ChartLegend\";\n\nexport default ChartLegend;\nexport { ChartLegend };\nexport * from \"./ChartLegendTypes\";\n"],"mappings":"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","names":["props","jsx"]}
package/dist/index.d.mts ADDED
@@ -0,0 +1,25 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
4
+
5
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
6
+ type TypeChartLegendTheme = "compare" | "contrast" | "extended" | "datavizRotation";
7
+ interface TypeLegendLabels {
8
+ name: React.ReactNode;
9
+ color?: string;
10
+ }
11
+ interface TypeChartLegendProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
12
+ /** Inline or stacked y plots */
13
+ stacked?: boolean;
14
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
15
+ theme?: TypeChartLegendTheme;
16
+ /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
17
+ legendLabels: TypeLegendLabels[];
18
+ /** Orientation of the legend */
19
+ orientation?: string;
20
+ qa?: object;
21
+ }
22
+
23
+ declare const ChartLegend: ({ legendLabels, stacked, theme, qa, ...rest }: TypeChartLegendProps) => react_jsx_runtime.JSX.Element;
24
+
25
+ export { ChartLegend, type TypeChartLegendProps, type TypeChartLegendTheme, type TypeLegendLabels, ChartLegend as default };
package/dist/index.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
4
+
5
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
6
+ type TypeChartLegendTheme = "compare" | "contrast" | "extended" | "datavizRotation";
7
+ interface TypeLegendLabels {
8
+ name: React.ReactNode;
9
+ color?: string;
10
+ }
11
+ interface TypeChartLegendProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
12
+ /** Inline or stacked y plots */
13
+ stacked?: boolean;
14
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
15
+ theme?: TypeChartLegendTheme;
16
+ /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
17
+ legendLabels: TypeLegendLabels[];
18
+ /** Orientation of the legend */
19
+ orientation?: string;
20
+ qa?: object;
21
+ }
22
+
23
+ declare const ChartLegend: ({ legendLabels, stacked, theme, qa, ...rest }: TypeChartLegendProps) => react_jsx_runtime.JSX.Element;
24
+
25
+ export { ChartLegend, type TypeChartLegendProps, type TypeChartLegendTheme, type TypeLegendLabels, ChartLegend as default };
package/dist/index.js ADDED
@@ -0,0 +1,168 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.ts
31
+ var src_exports = {};
32
+ __export(src_exports, {
33
+ ChartLegend: () => ChartLegend_default,
34
+ default: () => src_default
35
+ });
36
+ module.exports = __toCommonJS(src_exports);
37
+
38
+ // src/ChartLegend.tsx
39
+ var React2 = require("react");
40
+
41
+ // src/styles.ts
42
+ var import_styled_components = __toESM(require("styled-components"));
43
+ var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
44
+ var Label = import_styled_components.default.span`
45
+ display: flex;
46
+ align-items: center;
47
+ color: ${(props) => props.theme.colors.text.subtext};
48
+ white-space: nowrap;
49
+ text-transform: capitalize;
50
+ `;
51
+ var Swatch = import_styled_components.default.span`
52
+ margin-right: ${(props) => props.theme.space[300]};
53
+ width: ${(props) => props.theme.space[350]};
54
+ height: ${(props) => props.theme.space[350]};
55
+ border-radius: 4px;
56
+
57
+ ${import_seeds_react_system_props.COMMON}
58
+ `;
59
+ var Container = import_styled_components.default.div`
60
+ ${(props) => props.inline && import_styled_components.css`
61
+ display: flex;
62
+ justify-content: center;
63
+
64
+ ${Label} + ${Label} {
65
+ margin-left: ${(props2) => props2.theme.space[450]};
66
+ }
67
+ `}
68
+
69
+ ${import_seeds_react_system_props.COMMON}
70
+ ${import_seeds_react_system_props.LAYOUT}
71
+ `;
72
+ Label.displayName = "ChartLegendLabel";
73
+ Swatch.displayName = "ChartLegendSwatch";
74
+ var styles_default = Container;
75
+
76
+ // src/useChartLabels.tsx
77
+ var import_react = require("react");
78
+ var import_styled_components2 = require("styled-components");
79
+ var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
80
+ var import_jsx_runtime = require("react/jsx-runtime");
81
+ var getSwatchColor = (theme, index, RacineThemeColors) => {
82
+ const COMPARE_THEME = [
83
+ RacineThemeColors.dataviz.map["1"],
84
+ RacineThemeColors.dataviz.map["10"],
85
+ RacineThemeColors.dataviz.map["11"],
86
+ RacineThemeColors.dataviz.map["2"]
87
+ ];
88
+ const CONTRAST_THEME = [
89
+ RacineThemeColors.dataviz.map["1"],
90
+ RacineThemeColors.dataviz.map["2"],
91
+ RacineThemeColors.dataviz.map["3"],
92
+ RacineThemeColors.dataviz.map["4"],
93
+ RacineThemeColors.dataviz.map["5"],
94
+ RacineThemeColors.dataviz.map["6"],
95
+ RacineThemeColors.dataviz.map["4"],
96
+ RacineThemeColors.dataviz.map["5"],
97
+ RacineThemeColors.dataviz.map["6"],
98
+ RacineThemeColors.dataviz.map["7"],
99
+ RacineThemeColors.dataviz.map["8"],
100
+ RacineThemeColors.dataviz.map["9"],
101
+ RacineThemeColors.dataviz.map["10"]
102
+ ];
103
+ const EXTENDED_THEME = [
104
+ RacineThemeColors.dataviz.map["7"],
105
+ RacineThemeColors.dataviz.map["1"],
106
+ RacineThemeColors.dataviz.map["5"],
107
+ RacineThemeColors.dataviz.map["11"],
108
+ RacineThemeColors.dataviz.map["6"],
109
+ RacineThemeColors.dataviz.map["3"],
110
+ RacineThemeColors.dataviz.map["18"],
111
+ RacineThemeColors.dataviz.map["8"],
112
+ RacineThemeColors.dataviz.map["4"],
113
+ RacineThemeColors.dataviz.map["13"],
114
+ RacineThemeColors.dataviz.map["16"],
115
+ RacineThemeColors.dataviz.map["10"],
116
+ RacineThemeColors.dataviz.map["14"],
117
+ RacineThemeColors.dataviz.map["2"],
118
+ RacineThemeColors.dataviz.map["15"],
119
+ RacineThemeColors.dataviz.map["12"],
120
+ RacineThemeColors.dataviz.map["9"],
121
+ RacineThemeColors.dataviz.map["17"],
122
+ RacineThemeColors.dataviz.map["20"],
123
+ RacineThemeColors.dataviz.map["19"]
124
+ ];
125
+ const THEME_MAP = {
126
+ COMPARE: COMPARE_THEME,
127
+ CONTRAST: CONTRAST_THEME,
128
+ EXTENDED: EXTENDED_THEME,
129
+ DATAVIZROTATION: RacineThemeColors.dataviz.list
130
+ };
131
+ return THEME_MAP[theme.toUpperCase()][index];
132
+ };
133
+ var useChartLabels = (legendLabels, theme) => {
134
+ const racineTheme = (0, import_styled_components2.useTheme)();
135
+ const colors = racineTheme.colors;
136
+ return legendLabels.map((label, i) => {
137
+ const labelColor = label.color ? label.color : getSwatchColor(theme, i, colors);
138
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { children: [
139
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Swatch, { bg: labelColor, "data-qa-swatch": "" }),
140
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text, { as: "div", fontSize: 200, breakWord: true, children: label.name })
141
+ ] }, `chart-legend-label-${i}`);
142
+ });
143
+ };
144
+
145
+ // src/ChartLegend.tsx
146
+ var import_jsx_runtime2 = require("react/jsx-runtime");
147
+ var ChartLegend = ({
148
+ legendLabels,
149
+ stacked,
150
+ theme = "datavizRotation",
151
+ qa,
152
+ ...rest
153
+ }) => {
154
+ const chartLabels = useChartLabels(legendLabels, theme);
155
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { inline: !stacked, "data-qa-chartlegend": "", qa, ...rest, children: chartLabels });
156
+ };
157
+ var ChartLegend_default = ChartLegend;
158
+
159
+ // src/ChartLegendTypes.ts
160
+ var React3 = require("react");
161
+
162
+ // src/index.ts
163
+ var src_default = ChartLegend_default;
164
+ // Annotate the CommonJS export names for ESM import in node:
165
+ 0 && (module.exports = {
166
+ ChartLegend
167
+ });
168
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/ChartLegend.tsx","../src/styles.ts","../src/useChartLabels.tsx","../src/ChartLegendTypes.ts"],"sourcesContent":["import ChartLegend from \"./ChartLegend\";\n\nexport default ChartLegend;\nexport { ChartLegend };\nexport * from \"./ChartLegendTypes\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeChartLegendProps } from \"./ChartLegendTypes\";\nimport { useChartLabels } from \"./useChartLabels\";\n\nconst ChartLegend = ({\n legendLabels,\n stacked,\n theme = \"datavizRotation\",\n qa,\n ...rest\n}: TypeChartLegendProps) => {\n const chartLabels = useChartLabels(legendLabels, theme);\n\n return (\n <Container inline={!stacked} data-qa-chartlegend=\"\" qa={qa} {...rest}>\n {chartLabels}\n </Container>\n );\n};\n\nexport default ChartLegend;\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChartLegendProps } from \"./ChartLegendTypes\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport const Label = styled.span`\n display: flex;\n align-items: center;\n color: ${(props) => props.theme.colors.text.subtext};\n white-space: nowrap;\n text-transform: capitalize;\n`;\n\nexport const Swatch = styled.span<TypeSystemCommonProps>`\n margin-right: ${(props) => props.theme.space[300]};\n width: ${(props) => props.theme.space[350]};\n height: ${(props) => props.theme.space[350]};\n border-radius: 4px;\n\n ${COMMON}\n`;\n\nexport interface ChartLegendContainerTypes\n extends Omit<TypeChartLegendProps, \"stacked\" | \"legendLabels\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps {\n inline: boolean;\n}\n\nconst Container = styled.div<ChartLegendContainerTypes>`\n ${(props) =>\n props.inline &&\n css`\n display: flex;\n justify-content: center;\n\n ${Label} + ${Label} {\n margin-left: ${(props) => props.theme.space[450]};\n }\n `}\n\n ${COMMON}\n ${LAYOUT}\n`;\n\nLabel.displayName = \"ChartLegendLabel\";\nSwatch.displayName = \"ChartLegendSwatch\";\n\nexport default Container;\n","import React from \"react\";\nimport type {\n TypeChartLegendTheme,\n TypeLegendLabels,\n} from \"./ChartLegendTypes\";\nimport type { TypeColor } from \"@sproutsocial/seeds-react-theme\";\nimport { useTheme } from \"styled-components\";\nimport { Label, Swatch } from \"./styles\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\nconst getSwatchColor = (\n theme: TypeChartLegendTheme,\n index: number,\n RacineThemeColors: TypeColor\n) => {\n const COMPARE_THEME = [\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"10\"],\n RacineThemeColors.dataviz.map[\"11\"],\n RacineThemeColors.dataviz.map[\"2\"],\n ];\n\n const CONTRAST_THEME = [\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"2\"],\n RacineThemeColors.dataviz.map[\"3\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"7\"],\n RacineThemeColors.dataviz.map[\"8\"],\n RacineThemeColors.dataviz.map[\"9\"],\n RacineThemeColors.dataviz.map[\"10\"],\n ];\n\n const EXTENDED_THEME = [\n RacineThemeColors.dataviz.map[\"7\"],\n RacineThemeColors.dataviz.map[\"1\"],\n RacineThemeColors.dataviz.map[\"5\"],\n RacineThemeColors.dataviz.map[\"11\"],\n RacineThemeColors.dataviz.map[\"6\"],\n RacineThemeColors.dataviz.map[\"3\"],\n RacineThemeColors.dataviz.map[\"18\"],\n RacineThemeColors.dataviz.map[\"8\"],\n RacineThemeColors.dataviz.map[\"4\"],\n RacineThemeColors.dataviz.map[\"13\"],\n RacineThemeColors.dataviz.map[\"16\"],\n RacineThemeColors.dataviz.map[\"10\"],\n RacineThemeColors.dataviz.map[\"14\"],\n RacineThemeColors.dataviz.map[\"2\"],\n RacineThemeColors.dataviz.map[\"15\"],\n RacineThemeColors.dataviz.map[\"12\"],\n RacineThemeColors.dataviz.map[\"9\"],\n RacineThemeColors.dataviz.map[\"17\"],\n RacineThemeColors.dataviz.map[\"20\"],\n RacineThemeColors.dataviz.map[\"19\"],\n ];\n\n type ThemeKeys = \"COMPARE\" | \"CONTRAST\" | \"EXTENDED\" | \"DATAVIZROTATION\";\n\n const THEME_MAP: Record<ThemeKeys, any> = {\n COMPARE: COMPARE_THEME,\n CONTRAST: CONTRAST_THEME,\n EXTENDED: EXTENDED_THEME,\n DATAVIZROTATION: RacineThemeColors.dataviz.list,\n };\n\n return THEME_MAP[theme.toUpperCase() as ThemeKeys][index];\n};\n\nexport const useChartLabels = (\n legendLabels: TypeLegendLabels[],\n theme: TypeChartLegendTheme\n) => {\n const racineTheme = useTheme();\n const colors = racineTheme.colors;\n\n return legendLabels.map((label, i) => {\n const labelColor = label.color\n ? label.color\n : getSwatchColor(theme, i, colors);\n\n return (\n <Label key={`chart-legend-label-${i}`}>\n <Swatch bg={labelColor} data-qa-swatch=\"\" />\n <Text as=\"div\" fontSize={200} breakWord>\n {label.name}\n </Text>\n </Label>\n );\n });\n};\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\n/** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */\nexport type TypeChartLegendTheme =\n | \"compare\"\n | \"contrast\"\n | \"extended\"\n | \"datavizRotation\";\nexport interface TypeLegendLabels {\n name: React.ReactNode;\n color?: string;\n}\nexport interface TypeChartLegendProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n /** Inline or stacked y plots */\n stacked?: boolean;\n /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */\n theme?: TypeChartLegendTheme;\n /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */\n legendLabels: TypeLegendLabels[];\n /** Orientation of the legend */\n orientation?: string;\n qa?: object;\n}\n"],"mappings":"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","names":["React","styled","props","import_styled_components","import_jsx_runtime","React"]}
package/jest.config.js ADDED
@@ -0,0 +1,9 @@
1
+ const baseConfig = require("@sproutsocial/seeds-testing");
2
+
3
+ /** * @type {import('jest').Config} */
4
+ const config = {
5
+ ...baseConfig,
6
+ displayName: "seeds-react-chart-legend",
7
+ };
8
+
9
+ module.exports = config;
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@sproutsocial/seeds-react-chart-legend",
3
+ "version": "1.0.0",
4
+ "description": "Seeds React ChartLegend",
5
+ "author": "Sprout Social, Inc.",
6
+ "license": "MIT",
7
+ "main": "dist/index.js",
8
+ "module": "dist/esm/index.js",
9
+ "types": "dist/index.d.ts",
10
+ "scripts": {
11
+ "build": "tsup --dts",
12
+ "build:debug": "tsup --dts --metafile",
13
+ "dev": "tsup --watch --dts",
14
+ "clean": "rm -rf .turbo dist",
15
+ "clean:modules": "rm -rf node_modules",
16
+ "typecheck": "tsc --noEmit",
17
+ "test": "jest",
18
+ "test:watch": "jest --watch --coverage=false"
19
+ },
20
+ "dependencies": {
21
+ "@sproutsocial/seeds-react-theme": "^*",
22
+ "@sproutsocial/seeds-react-system-props": "^*",
23
+ "@sproutsocial/seeds-react-box": "*",
24
+ "@sproutsocial/seeds-react-icon": "*",
25
+ "@sproutsocial/seeds-react-text": "*"
26
+ },
27
+ "devDependencies": {
28
+ "@types/react": "^18.0.0",
29
+ "@types/styled-components": "^5.1.26",
30
+ "@sproutsocial/eslint-config-seeds": "*",
31
+ "react": "^18.0.0",
32
+ "styled-components": "^5.2.3",
33
+ "tsup": "^8.0.2",
34
+ "typescript": "^5.6.2",
35
+ "@sproutsocial/seeds-tsconfig": "*",
36
+ "@sproutsocial/seeds-testing": "*",
37
+ "@sproutsocial/seeds-react-testing-library": "*"
38
+ },
39
+ "peerDependencies": {
40
+ "styled-components": "^5.2.3"
41
+ },
42
+ "engines": {
43
+ "node": ">=18"
44
+ }
45
+ }
package/src/ChartLegend.stories.tsx ADDED
@@ -0,0 +1,174 @@
1
+ import React from "react";
2
+ import { Box } from "@sproutsocial/seeds-react-box";
3
+ import { ChartLegend } from ".";
4
+ import { Icon } from "@sproutsocial/seeds-react-icon";
5
+ import { theme } from "@sproutsocial/seeds-react-theme";
6
+ import type { Meta, StoryObj } from "@storybook/react";
7
+
8
+ const meta: Meta<typeof ChartLegend> = {
9
+ title: "Components/ChartLegend",
10
+ component: ChartLegend,
11
+ };
12
+
13
+ export default meta;
14
+
15
+ type Story = StoryObj<typeof ChartLegend>;
16
+
17
+ export const DefaultInlineLegend: Story = {
18
+ args: {
19
+ legendLabels: [
20
+ { name: "Likes" },
21
+ { name: "Replies" },
22
+ { name: "Comments" },
23
+ { name: "Link Clicks" },
24
+ { name: "Sentiment" },
25
+ { name: "Sent messages" },
26
+ { name: "Retweets" },
27
+ { name: "Shares" },
28
+ ],
29
+ },
30
+ };
31
+
32
+ export const ContrastColorsTheme: Story = {
33
+ args: {
34
+ theme: "contrast",
35
+ legendLabels: [
36
+ { name: "Likes" },
37
+ { name: "Replies" },
38
+ { name: "Comments" },
39
+ { name: "Link Clicks" },
40
+ ],
41
+ },
42
+ };
43
+ ContrastColorsTheme.storyName = "DEPRECATED: Contrast color theme";
44
+
45
+ export const CompareColorTheme: Story = {
46
+ args: {
47
+ theme: "compare",
48
+ legendLabels: [
49
+ { name: "Likes" },
50
+ { name: "Replies" },
51
+ { name: "Comments" },
52
+ { name: "Link Clicks" },
53
+ ],
54
+ },
55
+ };
56
+ CompareColorTheme.storyName = "DEPRECATED: Compare color theme";
57
+
58
+ export const ExtendedColorTheme: Story = {
59
+ args: {
60
+ theme: "extended",
61
+ legendLabels: [
62
+ { name: "Likes" },
63
+ { name: "Replies" },
64
+ { name: "Comments" },
65
+ { name: "Link Clicks" },
66
+ ],
67
+ },
68
+ };
69
+ ExtendedColorTheme.storyName = "DEPRECATED: Extended color theme";
70
+
71
+ export const StackedLegendWithCustomColors: Story = {
72
+ args: {
73
+ stacked: true,
74
+ legendLabels: [
75
+ { name: "Likes", color: theme.colors.red[600] },
76
+ { name: "Replies", color: theme.colors.blue[500] },
77
+ { name: "Comments", color: theme.colors.green[700] },
78
+ { name: "Link Clicks", color: theme.colors.purple[600] },
79
+ ],
80
+ },
81
+ };
82
+
83
+ export const LegendWithIcons: Story = {
84
+ args: {
85
+ legendLabels: [
86
+ {
87
+ name: (
88
+ <Box display="flex" alignItems="center">
89
+ <Icon name="facebook" size="mini" mr={300} />
90
+ Facebook
91
+ </Box>
92
+ ),
93
+ },
94
+ {
95
+ name: (
96
+ <Box display="flex" alignItems="center">
97
+ <Icon name="instagram" size="mini" mr={300} />
98
+ Instagram
99
+ </Box>
100
+ ),
101
+ },
102
+ {
103
+ name: (
104
+ <Box display="flex" alignItems="center">
105
+ <Icon name="twitter" size="mini" mr={300} />X
106
+ </Box>
107
+ ),
108
+ },
109
+ {
110
+ name: (
111
+ <Box display="flex" alignItems="center">
112
+ <Icon name="threads" size="mini" mr={300} />
113
+ Threads
114
+ </Box>
115
+ ),
116
+ },
117
+ {
118
+ name: (
119
+ <Box display="flex" alignItems="center">
120
+ <Icon name="linkedin" size="mini" mr={300} />
121
+ LinkedIn
122
+ </Box>
123
+ ),
124
+ },
125
+ ],
126
+ },
127
+ };
128
+
129
+ export const StackedLegendWithIcons: Story = {
130
+ args: {
131
+ stacked: true,
132
+ legendLabels: [
133
+ {
134
+ name: (
135
+ <Box display="flex" alignItems="center">
136
+ <Icon name="facebook" size="mini" mr={300} />
137
+ Facebook
138
+ </Box>
139
+ ),
140
+ },
141
+ {
142
+ name: (
143
+ <Box display="flex" alignItems="center">
144
+ <Icon name="instagram" size="mini" mr={300} />
145
+ Instagram
146
+ </Box>
147
+ ),
148
+ },
149
+ {
150
+ name: (
151
+ <Box display="flex" alignItems="center">
152
+ <Icon name="twitter" size="mini" mr={300} />X
153
+ </Box>
154
+ ),
155
+ },
156
+ {
157
+ name: (
158
+ <Box display="flex" alignItems="center">
159
+ <Icon name="threads" size="mini" mr={300} />
160
+ Threads
161
+ </Box>
162
+ ),
163
+ },
164
+ {
165
+ name: (
166
+ <Box display="flex" alignItems="center">
167
+ <Icon name="linkedin" size="mini" mr={300} />
168
+ LinkedIn
169
+ </Box>
170
+ ),
171
+ },
172
+ ],
173
+ },
174
+ };
package/src/ChartLegend.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import * as React from "react";
2
+ import Container from "./styles";
3
+ import type { TypeChartLegendProps } from "./ChartLegendTypes";
4
+ import { useChartLabels } from "./useChartLabels";
5
+
6
+ const ChartLegend = ({
7
+ legendLabels,
8
+ stacked,
9
+ theme = "datavizRotation",
10
+ qa,
11
+ ...rest
12
+ }: TypeChartLegendProps) => {
13
+ const chartLabels = useChartLabels(legendLabels, theme);
14
+
15
+ return (
16
+ <Container inline={!stacked} data-qa-chartlegend="" qa={qa} {...rest}>
17
+ {chartLabels}
18
+ </Container>
19
+ );
20
+ };
21
+
22
+ export default ChartLegend;
package/src/ChartLegendTypes.ts ADDED
@@ -0,0 +1,32 @@
1
+ import * as React from "react";
2
+ import type {
3
+ TypeStyledComponentsCommonProps,
4
+ TypeSystemCommonProps,
5
+ TypeSystemLayoutProps,
6
+ } from "@sproutsocial/seeds-react-system-props";
7
+
8
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
9
+ export type TypeChartLegendTheme =
10
+ | "compare"
11
+ | "contrast"
12
+ | "extended"
13
+ | "datavizRotation";
14
+ export interface TypeLegendLabels {
15
+ name: React.ReactNode;
16
+ color?: string;
17
+ }
18
+ export interface TypeChartLegendProps
19
+ extends TypeStyledComponentsCommonProps,
20
+ TypeSystemCommonProps,
21
+ TypeSystemLayoutProps,
22
+ Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
23
+ /** Inline or stacked y plots */
24
+ stacked?: boolean;
25
+ /** @deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version */
26
+ theme?: TypeChartLegendTheme;
27
+ /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
28
+ legendLabels: TypeLegendLabels[];
29
+ /** Orientation of the legend */
30
+ orientation?: string;
31
+ qa?: object;
32
+ }
package/src/__tests__/ChartLegend.typetest.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import * as React from "react";
2
+ import ChartLegend from "../ChartLegend";
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
+ function ChartLegendTypes() {
6
+ return (
7
+ <>
8
+ <ChartLegend legendLabels={[{ name: "dataColor", color: "#000" }]} />
9
+ <ChartLegend
10
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
11
+ orientation="horizontal"
12
+ />
13
+ <ChartLegend
14
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
15
+ orientation="vertical"
16
+ />
17
+ <ChartLegend
18
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
19
+ maxWidth="200px"
20
+ />
21
+ <ChartLegend
22
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
23
+ display={["flex", "block", "contents"]}
24
+ />
25
+ {/* @ts-expect-error - test that invalid type is rejected */}
26
+ <ChartLegend legendLabels="invalid" />
27
+ <ChartLegend
28
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
29
+ orientation="diagonal"
30
+ />
31
+ <ChartLegend
32
+ legendLabels={[{ name: "dataColor", color: "#000" }]}
33
+ maxWidth={400}
34
+ />
35
+ </>
36
+ );
37
+ }
package/src/__tests__/features.test.tsx ADDED
@@ -0,0 +1,100 @@
1
+ import React from "react";
2
+ import { render, screen } from "@sproutsocial/seeds-react-testing-library";
3
+ import Box from "@sproutsocial/seeds-react-box";
4
+ import ChartLegend from "../ChartLegend";
5
+ import Icon from "@sproutsocial/seeds-react-icon";
6
+ import { theme } from "@sproutsocial/seeds-react-theme";
7
+
8
+ describe("ChartLegend", () => {
9
+ const legendLabelsArray = [
10
+ {
11
+ name: "Label One",
12
+ },
13
+ {
14
+ name: "Label Two",
15
+ },
16
+ ];
17
+
18
+ const reactNodeLegendLabelsArray = [
19
+ {
20
+ name: (
21
+ <Box display="flex" alignItems="center">
22
+ <Icon name="facebook" size="mini" mr={300} />
23
+ Facebook
24
+ </Box>
25
+ ),
26
+ },
27
+ {
28
+ name: (
29
+ <Box display="flex" alignItems="center">
30
+ <Icon name="instagram" size="mini" mr={300} />
31
+ Instagram
32
+ </Box>
33
+ ),
34
+ },
35
+ ];
36
+
37
+ it("should render labels", () => {
38
+ render(<ChartLegend legendLabels={legendLabelsArray} />);
39
+
40
+ expect(
41
+ screen.getAllByDataQaLabel({
42
+ chartlegend: "",
43
+ }).length
44
+ ).toEqual(1);
45
+ expect(screen.getByText("Label One")).toBeInTheDocument();
46
+ expect(screen.getByText("Label Two")).toBeInTheDocument();
47
+ });
48
+
49
+ it("should render react node labels", () => {
50
+ render(<ChartLegend legendLabels={reactNodeLegendLabelsArray} />);
51
+
52
+ expect(
53
+ screen.getAllByDataQaLabel({
54
+ chartlegend: "",
55
+ }).length
56
+ ).toEqual(1);
57
+ expect(screen.getByText("Facebook")).toBeInTheDocument();
58
+ expect(screen.getByText("Instagram")).toBeInTheDocument();
59
+ });
60
+
61
+ it("should render the correct theme", () => {
62
+ render(<ChartLegend legendLabels={legendLabelsArray} theme="contrast" />);
63
+ expect(
64
+ screen.getAllByDataQaLabel({
65
+ swatch: "",
66
+ })[0]
67
+ // find the corresponding color in useChartLabels.tsx until deprecated
68
+ ).toHaveStyleRule("background-color", theme.colors.dataviz.map["1"]);
69
+ expect(
70
+ screen.getAllByDataQaLabel({
71
+ swatch: "",
72
+ })[1]
73
+ ).toHaveStyleRule("background-color", theme.colors.dataviz.map["2"]);
74
+ });
75
+
76
+ it("should display a custom color", () => {
77
+ const newLegendLabelsArray = [
78
+ {
79
+ name: "Label One",
80
+ color: "#000",
81
+ },
82
+ {
83
+ name: "Label Two",
84
+ },
85
+ ];
86
+
87
+ render(<ChartLegend legendLabels={newLegendLabelsArray} />);
88
+
89
+ expect(
90
+ screen.getAllByDataQaLabel({
91
+ swatch: "",
92
+ })[0]
93
+ ).toHaveStyleRule("background-color", "#000");
94
+ expect(
95
+ screen.getAllByDataQaLabel({
96
+ swatch: "",
97
+ })[1]
98
+ ).toHaveStyleRule("background-color", theme.colors.dataviz.map["2"]);
99
+ });
100
+ });
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ import ChartLegend from "./ChartLegend";
2
+
3
+ export default ChartLegend;
4
+ export { ChartLegend };
5
+ export * from "./ChartLegendTypes";
package/src/styled.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import "styled-components";
2
+ import { TypeTheme } from "@sproutsocial/seeds-react-theme";
3
+
4
+ declare module "styled-components" {
5
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
6
+ export interface DefaultTheme extends TypeTheme {}
7
+ }
package/src/styles.ts ADDED
@@ -0,0 +1,52 @@
1
+ import styled, { css } from "styled-components";
2
+ import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
3
+ import type { TypeChartLegendProps } from "./ChartLegendTypes";
4
+ import type {
5
+ TypeSystemCommonProps,
6
+ TypeSystemLayoutProps,
7
+ } from "@sproutsocial/seeds-react-system-props";
8
+
9
+ export const Label = styled.span`
10
+ display: flex;
11
+ align-items: center;
12
+ color: ${(props) => props.theme.colors.text.subtext};
13
+ white-space: nowrap;
14
+ text-transform: capitalize;
15
+ `;
16
+
17
+ export const Swatch = styled.span<TypeSystemCommonProps>`
18
+ margin-right: ${(props) => props.theme.space[300]};
19
+ width: ${(props) => props.theme.space[350]};
20
+ height: ${(props) => props.theme.space[350]};
21
+ border-radius: 4px;
22
+
23
+ ${COMMON}
24
+ `;
25
+
26
+ export interface ChartLegendContainerTypes
27
+ extends Omit<TypeChartLegendProps, "stacked" | "legendLabels">,
28
+ TypeSystemCommonProps,
29
+ TypeSystemLayoutProps {
30
+ inline: boolean;
31
+ }
32
+
33
+ const Container = styled.div<ChartLegendContainerTypes>`
34
+ ${(props) =>
35
+ props.inline &&
36
+ css`
37
+ display: flex;
38
+ justify-content: center;
39
+
40
+ ${Label} + ${Label} {
41
+ margin-left: ${(props) => props.theme.space[450]};
42
+ }
43
+ `}
44
+
45
+ ${COMMON}
46
+ ${LAYOUT}
47
+ `;
48
+
49
+ Label.displayName = "ChartLegendLabel";
50
+ Swatch.displayName = "ChartLegendSwatch";
51
+
52
+ export default Container;
package/src/useChartLabels.tsx ADDED
@@ -0,0 +1,95 @@
1
+ import React from "react";
2
+ import type {
3
+ TypeChartLegendTheme,
4
+ TypeLegendLabels,
5
+ } from "./ChartLegendTypes";
6
+ import type { TypeColor } from "@sproutsocial/seeds-react-theme";
7
+ import { useTheme } from "styled-components";
8
+ import { Label, Swatch } from "./styles";
9
+ import { Text } from "@sproutsocial/seeds-react-text";
10
+
11
+ const getSwatchColor = (
12
+ theme: TypeChartLegendTheme,
13
+ index: number,
14
+ RacineThemeColors: TypeColor
15
+ ) => {
16
+ const COMPARE_THEME = [
17
+ RacineThemeColors.dataviz.map["1"],
18
+ RacineThemeColors.dataviz.map["10"],
19
+ RacineThemeColors.dataviz.map["11"],
20
+ RacineThemeColors.dataviz.map["2"],
21
+ ];
22
+
23
+ const CONTRAST_THEME = [
24
+ RacineThemeColors.dataviz.map["1"],
25
+ RacineThemeColors.dataviz.map["2"],
26
+ RacineThemeColors.dataviz.map["3"],
27
+ RacineThemeColors.dataviz.map["4"],
28
+ RacineThemeColors.dataviz.map["5"],
29
+ RacineThemeColors.dataviz.map["6"],
30
+ RacineThemeColors.dataviz.map["4"],
31
+ RacineThemeColors.dataviz.map["5"],
32
+ RacineThemeColors.dataviz.map["6"],
33
+ RacineThemeColors.dataviz.map["7"],
34
+ RacineThemeColors.dataviz.map["8"],
35
+ RacineThemeColors.dataviz.map["9"],
36
+ RacineThemeColors.dataviz.map["10"],
37
+ ];
38
+
39
+ const EXTENDED_THEME = [
40
+ RacineThemeColors.dataviz.map["7"],
41
+ RacineThemeColors.dataviz.map["1"],
42
+ RacineThemeColors.dataviz.map["5"],
43
+ RacineThemeColors.dataviz.map["11"],
44
+ RacineThemeColors.dataviz.map["6"],
45
+ RacineThemeColors.dataviz.map["3"],
46
+ RacineThemeColors.dataviz.map["18"],
47
+ RacineThemeColors.dataviz.map["8"],
48
+ RacineThemeColors.dataviz.map["4"],
49
+ RacineThemeColors.dataviz.map["13"],
50
+ RacineThemeColors.dataviz.map["16"],
51
+ RacineThemeColors.dataviz.map["10"],
52
+ RacineThemeColors.dataviz.map["14"],
53
+ RacineThemeColors.dataviz.map["2"],
54
+ RacineThemeColors.dataviz.map["15"],
55
+ RacineThemeColors.dataviz.map["12"],
56
+ RacineThemeColors.dataviz.map["9"],
57
+ RacineThemeColors.dataviz.map["17"],
58
+ RacineThemeColors.dataviz.map["20"],
59
+ RacineThemeColors.dataviz.map["19"],
60
+ ];
61
+
62
+ type ThemeKeys = "COMPARE" | "CONTRAST" | "EXTENDED" | "DATAVIZROTATION";
63
+
64
+ const THEME_MAP: Record<ThemeKeys, any> = {
65
+ COMPARE: COMPARE_THEME,
66
+ CONTRAST: CONTRAST_THEME,
67
+ EXTENDED: EXTENDED_THEME,
68
+ DATAVIZROTATION: RacineThemeColors.dataviz.list,
69
+ };
70
+
71
+ return THEME_MAP[theme.toUpperCase() as ThemeKeys][index];
72
+ };
73
+
74
+ export const useChartLabels = (
75
+ legendLabels: TypeLegendLabels[],
76
+ theme: TypeChartLegendTheme
77
+ ) => {
78
+ const racineTheme = useTheme();
79
+ const colors = racineTheme.colors;
80
+
81
+ return legendLabels.map((label, i) => {
82
+ const labelColor = label.color
83
+ ? label.color
84
+ : getSwatchColor(theme, i, colors);
85
+
86
+ return (
87
+ <Label key={`chart-legend-label-${i}`}>
88
+ <Swatch bg={labelColor} data-qa-swatch="" />
89
+ <Text as="div" fontSize={200} breakWord>
90
+ {label.name}
91
+ </Text>
92
+ </Label>
93
+ );
94
+ });
95
+ };
package/tsconfig.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
3
+ "compilerOptions": {
4
+ "jsx": "react-jsx",
5
+ "module": "esnext"
6
+ },
7
+ "include": ["src/**/*"],
8
+ "exclude": ["node_modules", "dist", "coverage"]
9
+ }
package/tsup.config.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { defineConfig } from "tsup";
2
+
3
+ export default defineConfig((options) => ({
4
+ entry: ["src/index.ts"],
5
+ format: ["cjs", "esm"],
6
+ clean: true,
7
+ legacyOutput: true,
8
+ dts: options.dts,
9
+ external: ["react"],
10
+ sourcemap: true,
11
+ metafile: options.metafile,
12
+ }));