spectrum-css/.storybook/blocks/ColorPalette.jsx at 81cdcfa735fb1ce6a8dbe4e6887166a382570187 · adobe/spectrum-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { ResetWrapper } from "@storybook/components";
import { capitalize } from "lodash-es";
import React from "react";
import { List } from "./Layouts.jsx";
import {
	Swatch,
	SwatchColors,
	SwatchGroup,
	SwatchGroupLabel,
	SwatchSet,
} from "./Swatches.jsx";
import { ThemeContainer } from "./ThemeContainer.jsx";
import { Body, Heading } from "./Typography.jsx";
import { fetchToken, fetchTokenSet, sortAlphaNumerically } from "./utilities.js";

import styles from "@spectrum-css/bundle/dist/index.module.css";

/**
 * A single color row your styleguide showing title, subtitle and one or more colors, used
 * as a child of `ColorPalette`.
 */
export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard = false, skipTitle = false, ...props }) => {
	if (!color) return;

	// Attempt to fetch values from the token data
	if (!values.length) {
		const sets = fetchTokenSet(new RegExp(`^${color}-\\d+$`));
		values = Object.keys(sets)?.sort(sortAlphaNumerically).map((key) => key.replace(`${color}-`, ""));
	}

	if (!values.length) {
		return (
			<>
				{!skipTitle && <SwatchGroupLabel className="swatch-group-label">
					<Heading size="s">{title ?? capitalize(color)}</Heading>
				</SwatchGroupLabel>}
				<Body>No values provided for color {color}</Body>
			</>
		);
	}

	return (
		<>
			{!skipTitle && <SwatchGroupLabel className="swatch-group-label">
				<Heading size="s">{title ?? capitalize(color)}</Heading>
			</SwatchGroupLabel>}
			<SwatchGroup className={styles._spectrum_swatchgroup} {...props}>
				<SwatchColors className="swatch-colors" size={size}>
					{values.map((value) => {
						const resolved = fetchToken(`${color}-${value}`, value ?? color);
						return (
							<SwatchSet
								className="swatch-set"
								key={`${color}-${value}`}
								style={{ "--spectrum-swatch-size": `${size}px` }}
							>
								<Body className="swatch-label" size="s">
									{value}
								</Body>
								<Swatch
									title={`--spectrum-${color}-${value} / ${resolved}`}
									color={resolved}
									size={size}
									noCheckerboard={noCheckerboard}
									onClick={() => navigator.clipboard.writeText(`--spectrum-${color}-${value}`)}
								/>
							</SwatchSet>
						);
					})}
				</SwatchColors>
			</SwatchGroup>
		</>
	);
};

/**
 * Styleguide documentation for colors, including names, captions, and color swatches,
 * all specified as `ColorItem` children of this wrapper component.
 */
export const ColorPalette = ({ color, children, ...props }) => {
	return (
		<ResetWrapper>
			<ThemeContainer color={color} {...props}>
				<List className="docblock-colorpalette sb-unstyled">
					{children}
				</List>
			</ThemeContainer>
		</ResetWrapper>
	);
};

export default ColorPalette;