Skip to content

Commit aad298b

Browse files
jenndiazjenndiaz
committed
feat(backgroundlayers): add as component
1 parent b34fd8f commit aad298b

File tree

10 files changed

+189
-0
lines changed

10 files changed

+189
-0
lines changed

‎components/backgroundlayers/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# @spectrum-css/backgroundlayers
2+
3+
> The Spectrum CSS background layers component
4+
5+
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
6+
7+
See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/backgroundlayers).

‎components/backgroundlayers/gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/backgroundlayers/index.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
.spectrum-BackgroundLayers {
14+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
15+
}
16+
17+
.spectrum-BackgroundLayers--elevated {
18+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
19+
}
20+
.spectrum-BackgroundLayers--layer2 {
21+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
22+
}
23+
.spectrum-BackgroundLayers--layer1 {
24+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
25+
}
26+
.spectrum-BackgroundLayers--pasteboard {
27+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-100);
28+
}
29+
.spectrum-BackgroundLayers--base {
30+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
31+
border: 2px solid gray;
32+
}
33+
34+
.spectrum-BackgroundLayers {
35+
background-color: var(--spectum-backgroundlayers-background-color);
36+
}

‎components/backgroundlayers/metadata/backgroundlayers.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Background layers
2+
status: Verified
3+
SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/
4+
examples:
5+
- id: backgroundlayers-browsing
6+
name: Browsing Contexts
7+
markup: |
8+
<div class="spectrum-Examples">
9+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px;">
10+
</div>
11+
</div>
12+
- id: backgroundlayers-editting
13+
name: Editting Contexts
14+
markup: |
15+
<div class="spectrum-Examples">
16+
<div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--base" style="inline-size: 100px; block-size: 100px; border-radius: 10px;">
17+
</div>
18+
</div>

‎components/backgroundlayers/metadata/mods.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------- |
3+
| `--mod-backgroundlayers-content-color-default` |

‎components/backgroundlayers/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@spectrum-css/backgroundlayers",
3+
"version": "1.0.0-alpha.0",
4+
"description": "The Spectrum CSS backgroundlayers component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/backgroundlayers"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"main": "dist/index-vars.css",
17+
"scripts": {
18+
"build": "gulp",
19+
"clean": "rimraf dist",
20+
"test": "nx test:scope @spectrum-css/preview backgroundlayers"
21+
},
22+
"peerDependencies": {
23+
"@spectrum-css/tokens": ">=12"
24+
},
25+
"devDependencies": {
26+
"@spectrum-css/component-builder-simple": "^2.0.17",
27+
"@spectrum-css/tokens": "^12.0.0",
28+
"gulp": "^4.0.0",
29+
"nx": "^17.0.3",
30+
"rimraf": "^5.0.1"
31+
},
32+
"publishConfig": {
33+
"access": "public"
34+
}
35+
}

‎components/backgroundlayers/stories/backgroundlayers.stories.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Import the component markup template
2+
import { Template } from "./template";
3+
4+
// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
5+
export default {
6+
title: "Components/background layers",
7+
description: "The background layers component is...",
8+
component: "BackgroundLayers",
9+
argTypes: {
10+
size: {
11+
name: "Size",
12+
type: { name: "string", required: true },
13+
defaultValue: "m",
14+
table: {
15+
type: { summary: "string" },
16+
category: "Component",
17+
defaultValue: { summary: "m" }
18+
},
19+
options: ["s", "m", "l", "xl"],
20+
control: "select"
21+
},
22+
},
23+
// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
24+
args: {
25+
rootClass: "spectrum-BackgroundLayers",
26+
size: "m",
27+
},
28+
parameters: {
29+
actions: {
30+
handles: []
31+
},
32+
status: {
33+
type: process.env.MIGRATED_PACKAGES.includes('backgroundlayers') ? 'migrated' : undefined
34+
}
35+
}
36+
};
37+
38+
export const Default = Template.bind({});
39+
Default.args = {};

‎components/backgroundlayers/stories/template.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { html } from 'lit';
2+
import { classMap } from 'lit/directives/class-map.js';
3+
import { ifDefined } from 'lit/directives/if-defined.js';
4+
5+
import "../index.css";
6+
7+
// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
8+
export const Template = ({
9+
rootClass = "spectrum-BackgroundLayers",
10+
size,
11+
id,
12+
customClasses = [],
13+
...globals
14+
}) => {
15+
return html`
16+
<div class=${classMap({
17+
[rootClass]: true,
18+
[`${rootClass}--size${size.toUpperCase()}`]: true,
19+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
20+
})} id=${ifDefined(id)}>
21+
<!-- Component mark-up goes here -->
22+
</div>
23+
`;
24+
}

‎components/backgroundlayers/themes/express.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
@container (--system: express) {}

‎components/backgroundlayers/themes/spectrum.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
@container (--system: spectrum) {}

0 commit comments

Comments
 (0)