Skip to content

Commit b6ab87c

Browse files
castastrophecastastrophe
committed
feat(backgroundlayers): class based implementation [CSS-1268]
1 parent 743253c commit b6ab87c

File tree

6 files changed

+230
-3
lines changed

6 files changed

+230
-3
lines changed

‎.storybook/foundations/backgroundlayers/backgroundlayers.stories.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { html } from "lit";
2+
import { Template } from "./template";
3+
4+
/**
5+
* The Spectrum CSS background layers is a set of utility classes used to apply Spectrum 2 app framing. Consult [design documentation](https://s2.spectrum.corp.adobe.com/page/background-layers/) for further usage and infomation.
6+
* Make note of the context when determing the correct class to use.
7+
*
8+
* To use these classes:
9+
*
10+
* - add background layers as a dependency
11+
* - Use appropriate class on the element which should display the background layer
12+
*/
13+
export default {
14+
title: "Background layers",
15+
description: "The background layers is a series of classes used to style background layers.",
16+
component: "BackgroundLayers",
17+
argTypes: {
18+
environment: {
19+
name: "Context",
20+
description: "The context of the background layer",
21+
control: "select",
22+
options: ["edit", "browse"],
23+
},
24+
layer: {
25+
name: "Layer",
26+
description: "The layer of the background layer",
27+
control: "select",
28+
options: ["elevated", "layer1", "layer2", "pasteboard"],
29+
if: {
30+
arg: "environment",
31+
equals: "browse",
32+
options: ["elevated", "layer1", "base"],
33+
},
34+
},
35+
},
36+
args: {
37+
rootClass: "spectrum-BackgroundLayers",
38+
environment: "edit",
39+
layer: "layer1",
40+
},
41+
parameters: {
42+
design: {
43+
type: "figma",
44+
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551",
45+
},
46+
status: {
47+
type: "migrated",
48+
},
49+
},
50+
tags: ["migrated", "!dev"]
51+
};
52+
53+
/**
54+
* Editing context classes:
55+
*
56+
* - `spectrum-BackgroundLayers-edit-elevated`
57+
* - `spectrum-BackgroundLayers-edit-layer2`
58+
* - `spectrum-BackgroundLayers-edit-layer1`
59+
* - `spectrum-BackgroundLayers-edit-pasteboard`
60+
*/
61+
export const EditingContext = (args = {}, context = {}) => {
62+
const spacing = 28;
63+
const size = 120;
64+
const minSize = size + spacing * 2;
65+
return html`
66+
<div style=${`position: relative; min-block-size: ${minSize}px; min-inline-size: ${minSize}px;`}>
67+
${Template({
68+
...args,
69+
customStyles: { zIndex: 4 },
70+
layer: "elevated",
71+
}, context)}
72+
${Template({
73+
...args,
74+
customStyles: { zIndex: 3, insetInlineStart: `${spacing}px`, insetBlockStart: `${spacing}px` },
75+
layer: "layer2",
76+
}, context)}
77+
${Template({
78+
...args,
79+
customStyles: { zIndex: 2, insetInlineStart: `${spacing * 2}px`, insetBlockStart: `${spacing * 2}px` },
80+
layer: "layer1",
81+
}, context)}
82+
${Template({
83+
...args,
84+
customStyles: { zIndex: 1, insetInlineStart: `${spacing * 3}px`, insetBlockStart: `${spacing * 3}px` },
85+
layer: "pasteboard",
86+
}, context)}
87+
</div>
88+
`;
89+
};
90+
EditingContext.args = {
91+
environment: "edit",
92+
};
93+
94+
/**
95+
* Browsing context classes:
96+
*
97+
* - `spectrum-BackgroundLayers-browse-elevated`
98+
* - `spectrum-BackgroundLayers-browse-layer1`
99+
* - `spectrum-BackgroundLayers-browse-base`
100+
*/
101+
export const BrowsingContext = (args = {}, context = {}) => {
102+
const spacing = 28;
103+
const size = 120;
104+
const minSize = size + spacing * 2;
105+
return html`
106+
<div style=${`position: relative; min-block-size: ${minSize}px; min-inline-size: ${minSize}px;`}>
107+
${Template({
108+
...args,
109+
customStyles: { zIndex: 3 },
110+
layer: "elevated",
111+
}, context)}
112+
${Template({
113+
...args,
114+
customStyles: { zIndex: 2, insetInlineStart: `${spacing}px`, insetBlockStart: `${spacing}px` },
115+
layer: "layer1",
116+
}, context)}
117+
${Template({
118+
...args,
119+
customStyles: { zIndex: 1, insetInlineStart: `${spacing * 2}px`, insetBlockStart: `${spacing * 2}px` },
120+
layer: "base",
121+
}, context)}
122+
</div>
123+
`;
124+
};
125+
BrowsingContext.args = {
126+
environment: "browse",
127+
};

‎.storybook/foundations/backgroundlayers/index.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*!
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
/* for use only in editing contexts */
15+
.spectrum-BackgroundLayers-edit-elevated {
16+
--spectrum-backgroundlayers-shadow-horizontal: 0;
17+
--spectrum-backgroundlayers-shadow-vertical: 0;
18+
--spectrum-backgroundlayers-shadow-blur: 5px;
19+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
20+
21+
background-color: var(--spectrum-background-elevated-color);
22+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
23+
}
24+
25+
.spectrum-BackgroundLayers-edit-layer2 {
26+
background-color: var(--spectrum-background-layer-2-color);
27+
border: 2px solid rgb(180 180 180 / 25%);
28+
}
29+
30+
.spectrum-BackgroundLayers-edit-layer1 {
31+
background-color: var(--spectrum-background-layer-1-color);
32+
}
33+
34+
.spectrum-BackgroundLayers-edit-pasteboard {
35+
background-color: var(--spectrum-background-pasteboard-color);
36+
}
37+
38+
/* only used in browsing contexts */
39+
.spectrum-BackgroundLayers-browse-elevated {
40+
--spectrum-backgroundlayers-shadow-horizontal: 0;
41+
--spectrum-backgroundlayers-shadow-vertical: 0;
42+
--spectrum-backgroundlayers-shadow-blur: 5px;
43+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
44+
45+
background-color: var(--spectrum-background-elevated-color);
46+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
47+
}
48+
49+
.spectrum-BackgroundLayers-browse-layer1 {
50+
background-color: var(--spectrum-background-layer-1-color);
51+
}
52+
53+
.spectrum-BackgroundLayers-browse-base {
54+
border: 2px solid rgb(180 180 180 / 25%);
55+
background-color: var(--spectrum-background-base-color);
56+
}

‎.storybook/foundations/backgroundlayers/template.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { getRandomId } from "@spectrum-css/preview/decorators";
2+
import { html } from "lit";
3+
import { classMap } from "lit/directives/class-map.js";
4+
import { ifDefined } from "lit/directives/if-defined.js";
5+
import { styleMap } from "lit/directives/style-map.js";
6+
7+
import "./index.css";
8+
9+
export const Template = ({
10+
rootClass = "spectrum-BackgroundLayers",
11+
environment = "edit",
12+
layer = "layer1",
13+
size = 120,
14+
customStyles = {},
15+
customClasses = [],
16+
id = getRandomId("background-layers"),
17+
}) => {
18+
let previousZIndex = 0;
19+
20+
return html`
21+
<div class=${classMap({
22+
[rootClass]: true,
23+
[`${rootClass}-${environment}-${layer}`]: true,
24+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
25+
})}
26+
id=${ifDefined(id)}
27+
style=${styleMap({
28+
inlineSize: `${size}px`,
29+
blockSize: `${size}px`,
30+
borderRadius: "10px",
31+
position: "absolute",
32+
...customStyles,
33+
display: "grid",
34+
placeItems: "center",
35+
})} @mouseover=${(event) => {
36+
previousZIndex = event.target.style.zIndex;
37+
event.target.style.zIndex = "100";
38+
}} @mouseout=${(event) => {
39+
event.target.style.zIndex = previousZIndex;
40+
}}>
41+
<span>${layer}</span>
42+
</div>
43+
`;
44+
};

‎.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414
handles: ["click .spectrum-ActionButton:not([disabled])"],
1515
},
1616
},
17-
tags: ['!dev'],
17+
tags: ['!dev', 'migrated'],
1818
};
1919

2020
const ActionButton = (args, context) => html`

‎.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default {
1515
handles: ['click input[type="checkbox"]'],
1616
},
1717
},
18-
tags: ['!dev'],
18+
tags: ['!dev', 'migrated'],
1919
};
2020

2121
const Checkbox = (args = {}, context = {}) => html`

‎.storybook/foundations/corner-rounding/corner-rounding.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
args: {
1111
rootClass: "spectrum-Foundations-Example-CornerRounding",
1212
},
13-
tags: ["!dev"],
13+
tags: ["!dev", "migrated"],
1414
};
1515

1616
const CornerRadiusGroup = (args = {}, context = {}) => html`

0 commit comments

Comments
 (0)