feat(thumbnail): add whcm for layer variants (#2254)

* feat(thumbnail): add whcm for layer variants

* feat(thumbnail): add isFocused on storybook

* chore(thumbnail): format css

* Revert "chore(thumbnail): format css"

This reverts commit 1520d6a.

* chore(thumbnail): cleans up css

* fix(thumbnail): resolve storybook rendering errors

---------

Co-authored-by: Patrick Fulton <[email protected]>

Author: jenndiaz

components/thumbnail/index.css

@@ -207,7 +207,18 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Thumbnail-layer {
-  border: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)) solid var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer));
+	border-style: solid;
+	border-width: var(
+		--mod-thumbnail-layer-border-width-outer,
+		var(--spectrum-thumbnail-layer-border-width-outer)
+	);
+	border-color: var(
+		--highcontrast-thumbnail-layer-border-color-outer,
+		var(
+			--mod-thumbnail-layer-border-color-outer,
+			var(--spectrum-thumbnail-layer-border-color-outer)
+		)
+	);
   box-sizing: border-box;
 
   display: flex;
@@ -274,8 +285,11 @@ governing permissions and limitations under the License.
 	);
 	outline-style: solid;
 	outline-color: var(
-		--mod-thumbnail-layer-border-color-inner,
-		var(--spectrum-thumbnail-layer-border-color-inner)
+		--highcontrast-thumbnail-layer-border-color-inner,
+		var(
+			--mod-thumbnail-layer-border-color-inner,
+			var(--spectrum-thumbnail-layer-border-color-inner)
+		)
 	);
 	outline-width: calc(
 		var(
@@ -329,17 +343,14 @@ governing permissions and limitations under the License.
 }
 
 /* Windows High Contrast Mode */
-/* stylelint-disable declaration-property-value-no-unknown */
 @media (forced-colors: active) {
   .spectrum-Thumbnail {
     /* Allow checkerboard pattern to be visible. */
     forced-color-adjust: none;
-
-		--highcontrast-thumbnail-border-color-selected: SelectedItem;
+		--highcontrast-thumbnail-border-color-selected: Highlight;
 		--highcontrast-thumbnail-focus-indicator-color: Highlight;
 		--highcontrast-thumbnail-border-color: CanvasText;
-		background-color: Canvas;
-		color: CanvasText;
+		--highcontrast-thumbnail-layer-border-color-inner: Canvas;
+		--highcontrast-thumbnail-layer-border-color-outer: CanvasText;
 	}
 }
-/* stylelint-enable declaration-property-value-no-unknown */

components/thumbnail/stories/template.js

@@ -27,6 +27,72 @@ export const Template = ({
 
 	const image = imageURL ? html`<img class="${rootClass}-image" src=${imageURL} alt=${ifDefined(altText)}/>` : svg ? html`${svg}` : "";
 
+  const checkerboardContent = html`
+			<div class="${rootClass}-image-wrapper">
+			${imageURL
+				? html`<img
+						class="${rootClass}-image"
+						src=${imageURL}
+						alt=${altText}
+					/>`
+				: ""}
+			${svg ? html`${svg}` : ""}
+		</div>
+	`;
+	
+  if (isLayer)
+		return html`
+			<div
+				class=${classMap({
+					[rootClass]: true,
+					[`${rootClass}--cover`]: isCover,
+					[`${rootClass}-layer`]: isLayer,
+					[`is-selected`]: isSelected,
+					[`is-disabled`]: isDisabled,
+					[`is-focused`]: isFocused,
+					[`${rootClass}--size${size}`]: typeof size !== "undefined",
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
+				id=${ifDefined(id)}
+				@click=${onclick}
+			>
+				${OpacityCheckerboard({
+					componentOnly: true,
+					customClasses: [`${rootClass}-layer-inner`],
+					content: checkerboardContent,
+				})}
+			</div>
+		`;
+
+	if (backgroundColor)
+		return html`
+			<div
+				class=${classMap({
+					[rootClass]: true,
+					[`${rootClass}--cover`]: isCover,
+					[`${rootClass}-layer`]: isLayer,
+					[`is-selected`]: isSelected,
+					[`is-disabled`]: isDisabled,
+					[`is-focused`]: isFocused,
+					[`${rootClass}--size${size}`]: typeof size !== "undefined",
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
+				id=${ifDefined(id)}
+				@click=${onclick}
+			>
+				<div class="${rootClass}-background" style=${styleMap({backgroundColor})}></div>
+				<div class="${rootClass}-image-wrapper">
+					${imageURL
+						? html`<img
+								class="${rootClass}-image"
+								src=${imageURL}
+								alt=${altText}
+						  />`
+						: ""}
+				</div>
+			</div>
+		`;
+
 	return html`
 		<div
 			class=${classMap({

components/thumbnail/stories/thumbnail.stories.js

@@ -101,6 +101,15 @@ export default {
 			control: "boolean",
 			if: { arg: "isLayer" },
 		},
+		isFocused: {
+			name: "Focused",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
 	},
 	args: {
 		rootClass: "spectrum-Thumbnail",
@@ -109,6 +118,7 @@ export default {
 		isLayer: false,
 		isDisabled: false,
 		isSelected: false,
+		isFocused: false,
 		imageURL: "example-card-landscape.png",
 		altText: "Landscape with mountains and lake",
 	},