`
- : html`
- `;
-
- return html`
- ({ ...a, [c]: true }), {}),
- })}
- >
- ${OpacityCheckerboard({
- ...globals,
- componentOnly: true,
- customClasses: [`${rootClass}-checkerboard`],
- content: checkerboardContent,
- role: 'presentation',
- })}
- ${ColorHandle({
- ...globals,
- isDisabled,
- isFocused,
- customClasses: [`${rootClass}-handle`],
- colorHandleStyle,
- })}
-
-
- `;
-};
+}) => html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${OpacityCheckerboard({
+ ...globals,
+ customClasses: [`${rootClass}-checkerboard`],
+ content: [
+ when(gradientType === "image",
+ () => html``,
+ () => html`
`;
diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
index cb4a5371d9..381c1b27ba 100644
--- a/components/colorwheel/stories/template.js
+++ b/components/colorwheel/stories/template.js
@@ -1,6 +1,6 @@
+import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
-import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
import "../index.css";
@@ -35,11 +35,11 @@ export const Template = ({
${ColorHandle({
- ...globals,
- isDisabled,
- customClasses: [`${rootClass}-handle`],
- colorHandleStyle,
- })}
+ ...globals,
+ isDisabled,
+ customClasses: [`${rootClass}-handle`],
+ customStyles: colorHandleStyle,
+ })}
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index fbc7799d7f..e0e4a8828d 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -1,3 +1,7 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+
import { Template } from "./template";
export default {
@@ -6,23 +10,6 @@ export default {
"Opacity checkerboard is used with other components to highlight opacity.",
component: "OpacityCheckerboard",
argTypes: {
- hasColorOverlay: {
- name: "Has Color Overlay",
- type: { name: "boolean" },
- table: {
- category: "Component",
- },
- control: "boolean",
- },
- overlayColor: {
- name: "Overlay Color",
- type: { name: "string" },
- table: {
- category: "Component",
- },
- control: "text",
- if: { arg: "hasColorOverlay", truthy: true },
- },
backgroundPosition: {
name: "Position",
type: { name: "string" },
@@ -32,21 +19,10 @@ export default {
control: "text",
description: "Value for `,
+ () => html` styleMap({
+ background: `linear-gradient(to ${vertical ? "bottom" : "right"}, ${gradientStops.join(', ')})`,
+ }))}
+ >
`
+ )
+ ],
+ role: 'presentation',
+ })}
+ ${ColorHandle({
+ ...globals,
+ isDisabled,
+ isFocused,
+ customClasses: [`${rootClass}-handle`],
+ customStyles: colorHandleStyle,
+ })}
+
+ --mod-opacity-checkerboard-position. Accepts any valid CSS background-position property value.",
},
- componentOnly: {
- name: "Use Component Markup Only",
- type: { name: "boolean" },
- table: {
- disable: true,
- },
- },
},
args: {
rootClass: "spectrum-OpacityCheckerboard",
- hasColorOverlay: false,
- overlayColor: "rgba(255, 0, 0, 0.5)",
- backgroundPosition: "top left",
- componentOnly: false,
- content: '',
+ backgroundPosition: "top left"
},
parameters: {
actions: {
@@ -58,6 +34,9 @@ export default {
: undefined,
},
},
+ decorators: [
+ (Story, context) => html`${Story(context)}
`
+ ],
};
export const Default = Template.bind({});
Default.args = {};
@@ -73,4 +52,4 @@ CheckerboardPosition.parameters = {
"An example of using the --mod-opacity-checkerboard-position custom property to adjust the position of the checkerboard pattern.",
},
},
-};
\ No newline at end of file
+};
diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js
index a05780267c..79893482d1 100644
--- a/components/opacitycheckerboard/stories/template.js
+++ b/components/opacitycheckerboard/stories/template.js
@@ -2,61 +2,31 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
import "../index.css";
export const Template = ({
rootClass = "spectrum-OpacityCheckerboard",
- hasColorOverlay,
- overlayColor,
- backgroundPosition,
+ backgroundPosition = "top left",
customClasses = [],
- containerStyles = {
- "inline-size": "100px",
- "block-size": "100px",
- },
- checkerBoardStyles = {
- "--mod-opacity-checkerboard-position": backgroundPosition,
- },
- colorStyles = {
- "background-color": overlayColor,
- "inline-size": "100%",
- "block-size": "100%",
- position: "relative",
- "inset-block": "-100%",
- },
- componentOnly,
- content,
+ customStyles = {},
+ id,
+ content = [],
role,
}) => {
- // Just the component markup. For use by other component's stories.
- if (componentOnly){
- return html`
- ({ ...a, [c]: true }), {}),
- [rootClass]: true,
- })}
- style=${styleMap(checkerBoardStyles)}
- role=${ifDefined(role)}
- >${content}
`;
- }
-
- // Component with wrapper for Storybook display, and a testing overlay.
return html`
-
-
`;
};
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index 063031c263..ab3a7c8da6 100644
--- a/components/swatch/stories/swatch.stories.js
+++ b/components/swatch/stories/swatch.stories.js
@@ -1,10 +1,9 @@
-// Import the component markup template
import { Template } from "./template";
export default {
title: "Components/Swatch",
description:
- "A swatch shows a small sample of a fill—such as a color, gradient, texture, or material—that is intended to be applied to an object.",
+ "A swatch shows a small sample of a fill&emdash;such as a color, gradient, texture, or material&emdash;that is intended to be applied to an object.",
component: "Swatch",
argTypes: {
size: {
@@ -17,20 +16,62 @@ export default {
options: ["xs", "s", "m", "l",],
control: "select",
},
- },
- args: {
- rootClass: "spectrum-Swatch",
- },
- parameters: {
- actions: {
- handles: [],
+ swatchColor: {
+ name: "Color",
+ type: { name: "string", required: true },
+ table: {
+ type: { summary: "string" },
+ category: "Component",
+ },
+ control: "color",
},
- status: {
- type: process.env.MIGRATED_PACKAGES.includes("swatch")
- ? "migrated"
- : undefined,
+ rounding: {
+ name: "Rounding",
+ type: { name: "string" },
+ table: {
+ type: { summary: "string", required: true },
+ category: "Component",
+ },
+ options: ["none", "regular", "full"],
+ control: "select",
+ },
+ isDisabled: {
+ name: "Disabled",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "State",
+ },
+ control: "boolean",
+ },
+ isSelected: {
+ name: "Selected",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "State",
+ },
+ control: "boolean",
},
- },
+ },
+ args: {
+ rootClass: "spectrum-Swatch",
+ size: "m",
+ isSelected: false,
+ isDisabled: false,
+ rounding: "regular",
+ swatchColor: "rgb(174, 216, 230)"
+ },
+ parameters: {
+ actions: {
+ handles: [],
+ },
+ status: {
+ type: process.env.MIGRATED_PACKAGES.includes("swatch")
+ ? "migrated"
+ : "legacy",
+ },
+ },
};
export const Default = Template.bind({});
@@ -38,5 +79,5 @@ Default.args = {};
export const Transparent = Template.bind({});
Transparent.args = {
- customStyles: {"--spectrum-picked-color": "rgba(174, 216, 230, 0.3)"},
+ swatchColor: "rgba(174, 216, 230, 0.3)",
};
diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js
index 074854a487..acf8227ba1 100644
--- a/components/swatch/stories/template.js
+++ b/components/swatch/stories/template.js
@@ -1,19 +1,29 @@
-import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
+import { capitalize, lowerCase } from "lodash-es";
+
+import { useArgs } from '@storybook/client-api';
+
+import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
+
import "../index.css";
export const Template = ({
rootClass = "spectrum-Swatch",
size = "m",
+ isSelected = false,
+ isDisabled = false,
+ rounding = "regular",
customClasses = [],
- customStyles = {"--spectrum-picked-color": "rgb(174, 216, 230)"},
+ swatchColor = "rgb(174, 216, 230)",
+ customStyles = {},
id,
...globals
}) => {
const { express } = globals;
+ const [_, updateArgs] = useArgs();
try {
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
@@ -28,17 +38,32 @@ export const Template = ({
[rootClass]: true,
[`${rootClass}--size${size?.toUpperCase()}`]:
typeof size !== "undefined",
+ [`${rootClass}--rounding${capitalize(
+ lowerCase(rounding)
+ )}`]: typeof rounding !== "undefined" && rounding !== "regular",
+ 'is-selected': !isDisabled && isSelected,
+ 'is-disabled': isDisabled,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
+ ?disabled=${isDisabled}
id=${ifDefined(id)}
- style=${ifDefined(styleMap(customStyles))}
+ style=${ifDefined(styleMap({
+ "--spectrum-picked-color": swatchColor,
+ ...customStyles,
+ }))}
tabindex="0"
+ @click=${() => {
+ updateArgs({ isSelected: !isSelected });
+ }}
+ @focusout=${() => updateArgs({ isSelected: false })}
+ @keypress=${(e) => {
+ if (e.key !== 'Enter' && e.key !== ' ') return;
+ updateArgs({ isSelected: !isSelected });
+ }}
>
- ${OpacityCheckerboard({
- ...globals,
- componentOnly: true,
- customClasses: [`${rootClass}-fill`],
- })}
+ ${OpacityCheckerboard({
+ customClasses: [`${rootClass}-fill`],
+ })}
`;
};
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 8e42298fa5..f0b382967b 100644
--- a/components/swatchgroup/stories/swatchgroup.stories.js
+++ b/components/swatchgroup/stories/swatchgroup.stories.js
@@ -1,21 +1,14 @@
// Import the component markup template
import { Template } from "./template";
+import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js";
+
export default {
title: "Components/Swatch group",
- description: "The Swatch group component is...",
+ description: "The Swatch group component is a collection of swatches.",
component: "Swatchgroup",
argTypes: {
- size: {
- name: "Size",
- type: { name: "string", required: true },
- table: {
- type: { summary: "string" },
- category: "Component",
- },
- options: ["s", "m", "l", "xl"],
- control: "select",
- },
+ ...Swatch.argTypes,
density: {
name: "Density",
type: { name: "string" },
@@ -26,17 +19,8 @@ export default {
options: ["regular", "compact", "spacious"],
control: "select",
},
- rounding: {
- name: "Rounding",
- type: { name: "string" },
- table: {
- type: { summary: "string", required: true },
- category: "Component",
- },
- options: ["none", "regular", "full"],
- control: "select",
- },
- swatches: {
+ swatchColor: { table: { disable: true } },
+ items: {
name: "Swatches",
table: { disable: true },
},
@@ -50,103 +34,33 @@ export default {
size: "m",
density: "regular",
rounding: "none",
- swatches: [
- {
- r: "22",
- g: "135",
- b: "140",
- },
- {
- r: "33",
- g: "132",
- b: "113",
- },
- {
- r: "254",
- g: "132",
- b: "152",
- },
- {
- r: "255",
- g: "127",
- b: "96",
- },
- {
- r: "255",
- g: "209",
- b: "24",
- },
- {
- r: "120",
- g: "91",
- b: "199",
- },
- {
- r: "225",
- g: "234",
- b: "119",
- },
- {
- r: "0",
- g: "225",
- b: "171",
- },
- {
- r: "248",
- g: "239",
- b: "187",
- },
- {
- r: "254",
- g: "205",
- b: "215",
- },
- {
- r: "212",
- g: "182",
- b: "237",
- },
- {
- r: "153",
- g: "219",
- b: "244",
- },
- {
- r: "171",
- g: "238",
- b: "221",
- },
- {
- r: "187",
- g: "182",
- b: "175",
- },
- {
- r: "238",
- g: "211",
- b: "190",
- },
- {
- r: "0",
- g: "143",
- b: "242",
- },
- {
- r: "60",
- g: "49",
- b: "199",
- },
- {
- r: "254",
- g: "71",
- b: "144",
- },
+ items: [
+ {swatchColor: "rgb(22, 135, 140)",},
+ {swatchColor: "rgb(33, 132, 113)",},
+ {swatchColor: "rgb(33, 132, 113)",},
+ {swatchColor: "rgb(254, 132, 152)",},
+ {swatchColor: "rgb(255, 127, 96)",},
+ {swatchColor: "rgb(255, 209, 24)",},
+ {swatchColor: "rgb(120, 91, 199)",},
+ {swatchColor: "rgb(225, 234, 119)",},
+ {swatchColor: "rgb(0, 225, 171)",},
+ {swatchColor: "rgb(248, 239, 187)",},
+ {swatchColor: "rgb(254, 205, 215)",},
+ {swatchColor: "rgb(212, 182, 237)",},
+ {swatchColor: "rgb(153, 219, 244)",},
+ {swatchColor: "rgb(171, 238, 221)",},
+ {swatchColor: "rgb(187, 182, 175)",},
+ {swatchColor: "rgb(238, 211, 190)",},
+ {swatchColor: "rgb(0, 143, 242)",},
+ {swatchColor: "rgb(60, 49, 199)",},
+ {swatchColor: "rgb(254, 71, 144)",},
],
- containerWidth: "250px",
},
parameters: {
actions: {
- handles: [],
+ handles: [
+ ...Swatch.parameters?.actions?.handles ?? [],
+ ],
},
status: {
type: process.env.MIGRATED_PACKAGES.includes("swatchgroup")
diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js
index bd4c8fcaa0..9ca3975b55 100644
--- a/components/swatchgroup/stories/template.js
+++ b/components/swatchgroup/stories/template.js
@@ -1,8 +1,9 @@
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
-// import { ifDefined } from 'lit/directives/if-defined.js';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
-import { lowerCase, capitalize } from "lodash-es";
+import { Template as Swatch } from "@spectrum-css/swatch/stories/template.js";
import "../index.css";
@@ -12,57 +13,27 @@ export const Template = ({
size = "m",
density = "regular",
rounding = "regular",
- swatches = [],
- containerWidth = "250px",
- ...globals
-}) => {
- const { express } = globals;
-
- try {
- if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
- else import(/* webpackPrefetch: true */ "../themes/express.css");
- } catch (e) {
- console.warn(e);
- }
-
- const swatchRootClass = "spectrum-Swatch";
-
- const limitedSwatches = swatches.slice(0, 6);
- const swatchesToDisplay =
- typeof rounding !== "undefined" && rounding !== "none"
- ? limitedSwatches
- : swatches;
-
- return html`
- ({ ...a, [c]: true }), {}),
- [rootClass]: true,
- })}
- style=${styleMap(checkerBoardStyles)}
- role=${ifDefined(role)}
- >${content}
- ${when(hasColorOverlay, () => {
- return html` `;
+ ({ ...a, [c]: true }), {}),
})}
-
- `;
+ style=${ifDefined(styleMap({
+ "--mod-opacity-checkerboard-position": backgroundPosition,
+ ...customStyles,
+ }))}
+ role=${ifDefined(role)}
+ id=${ifDefined(id)}
+ >
+ ${content}
+
-
- `;
-};
+ items = [],
+ customStyles = {},
+ id,
+}) => html`
+ ({ ...a, [c]: true }), {}),
- })}
- >
- ${swatchesToDisplay.map((swatch, index) => {
- return html`
-
-
-
-
- `;
- })}
- ({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap({
+ ...customStyles,
+ size: `calc(${items.length} / 10 * 32px)`,
+ })}
+ id=${ifDefined(id)}
+ >
+ ${items.map((swatch) => Swatch({
+ size,
+ rounding,
+ ...swatch,
+ }))}
+
+`;
diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js
index aa10de0432..e75eebba7c 100644
--- a/components/thumbnail/stories/template.js
+++ b/components/thumbnail/stories/template.js
@@ -48,7 +48,6 @@ export const Template = ({
${when(backgroundColor, () => html``)}
${OpacityCheckerboard({
rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined,
- componentOnly: true,
customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [],
content: image ? [image] : [],
})}
diff --git a/tools/preview/decorators/contextsWrapper.js b/tools/preview/decorators/contextsWrapper.js
index 7a198b4810..524ec5b57b 100644
--- a/tools/preview/decorators/contextsWrapper.js
+++ b/tools/preview/decorators/contextsWrapper.js
@@ -1,4 +1,5 @@
import { makeDecorator, useEffect } from "@storybook/preview-api";
+import isChromatic from "chromatic/isChromatic";
/**
* @type import('@storybook/csf').DecoratorFunction