Skip to content

Commit a0cf37b

Browse files
jenndiazjenndiaz
authored
refactor(assetcard)!: token migration (#2229)
BREAKING CHANGE: migrate asset card to updated token system
1 parent 7dc00b8 commit a0cf37b

20 files changed

+339
-155
lines changed

‎components/assetcard/gulpfile.js

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

‎components/assetcard/index.css

Lines changed: 166 additions & 127 deletions
Large diffs are not rendered by default.

‎components/assetcard/metadata/assetcard.yml

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ examples:
1313
markup: |
1414
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
1515
<div class="spectrum-AssetCard-assetContainer">
16-
<img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
16+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
1717
<div class="spectrum-AssetCard-selectionOverlay"></div>
1818
</div>
1919
<div class="spectrum-AssetCard-header">
20-
<div class="spectrum-AssetCard-title">Card Title</div>
20+
<div class="spectrum-AssetCard-title" id="card-title-1">Card Title</div>
2121
<div class="spectrum-AssetCard-headerContent"></div>
2222
</div>
2323
<div class="spectrum-AssetCard-content">
2424
Image
2525
</div>
2626
<div class="spectrum-AssetCard-selectionIndicator">
2727
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
28-
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
28+
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-1">
2929
<span class="spectrum-Checkbox-box">
3030
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
3131
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -43,19 +43,19 @@ examples:
4343
markup: |
4444
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
4545
<div class="spectrum-AssetCard-assetContainer">
46-
<img class="spectrum-AssetCard-asset" src="img/example-card-landscape.jpeg" />
46+
<img class="spectrum-AssetCard-asset" alt="assetcard example image in landscape" src="img/example-card-landscape.jpeg" />
4747
<div class="spectrum-AssetCard-selectionOverlay"></div>
4848
</div>
4949
<div class="spectrum-AssetCard-header">
50-
<div class="spectrum-AssetCard-title">Card Title</div>
50+
<div class="spectrum-AssetCard-title" id="card-title-2">Card Title</div>
5151
<div class="spectrum-AssetCard-headerContent"></div>
5252
</div>
5353
<div class="spectrum-AssetCard-content">
5454
Image
5555
</div>
5656
<div class="spectrum-AssetCard-selectionIndicator">
5757
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
58-
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
58+
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-2">
5959
<span class="spectrum-Checkbox-box">
6060
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
6161
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -73,19 +73,19 @@ examples:
7373
markup: |
7474
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
7575
<div class="spectrum-AssetCard-assetContainer">
76-
<img class="spectrum-AssetCard-asset" src="img/example-card-square.png" />
76+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
7777
<div class="spectrum-AssetCard-selectionOverlay"></div>
7878
</div>
7979
<div class="spectrum-AssetCard-header">
80-
<div class="spectrum-AssetCard-title">Card Title</div>
80+
<div class="spectrum-AssetCard-title" id="card-title-3">Card Title</div>
8181
<div class="spectrum-AssetCard-headerContent"></div>
8282
</div>
8383
<div class="spectrum-AssetCard-content">
8484
Image
8585
</div>
8686
<div class="spectrum-AssetCard-selectionIndicator">
8787
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
88-
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
88+
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-3">
8989
<span class="spectrum-Checkbox-box">
9090
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
9191
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -105,16 +105,16 @@ examples:
105105
markup: |
106106
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
107107
<div class="spectrum-AssetCard-assetContainer">
108-
<img class="spectrum-AssetCard-asset" src="img/example-card-square.png" />
108+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
109109
<div class="spectrum-AssetCard-selectionOverlay"></div>
110110
</div>
111111
<div class="spectrum-AssetCard-header">
112-
<div class="spectrum-AssetCard-title">MVI_0123.mp4</div>
112+
<div class="spectrum-AssetCard-title" id="card-title-4">MVI_0123.mp4</div>
113113
<div class="spectrum-AssetCard-headerContent">39:02</div>
114114
</div>
115115
<div class="spectrum-AssetCard-selectionIndicator">
116116
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
117-
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
117+
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-4">
118118
<span class="spectrum-Checkbox-box">
119119
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
120120
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -132,7 +132,7 @@ examples:
132132
markup: |
133133
<div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-selected" tabindex="0" role="figure">
134134
<div class="spectrum-AssetCard-assetContainer">
135-
<img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
135+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
136136
<div class="spectrum-AssetCard-selectionOverlay"></div>
137137
</div>
138138
<div class="spectrum-AssetCard-header">
@@ -149,19 +149,19 @@ examples:
149149
markup: |
150150
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection is-selected" tabindex="0" role="figure">
151151
<div class="spectrum-AssetCard-assetContainer">
152-
<img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
152+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
153153
<div class="spectrum-AssetCard-selectionOverlay"></div>
154154
</div>
155155
<div class="spectrum-AssetCard-header">
156-
<div class="spectrum-AssetCard-title">Card Title</div>
156+
<div class="spectrum-AssetCard-title" id="card-title-5">Card Title</div>
157157
<div class="spectrum-AssetCard-headerContent"></div>
158158
</div>
159159
<div class="spectrum-AssetCard-content">
160160
Image
161161
</div>
162162
<div class="spectrum-AssetCard-selectionIndicator">
163163
<div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
164-
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" checked>
164+
<input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-5" checked>
165165
<span class="spectrum-Checkbox-box">
166166
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
167167
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -179,7 +179,7 @@ examples:
179179
markup: |
180180
<div class="spectrum-AssetCard spectrum-AssetCard--orderedSelection is-selected" tabindex="0" role="figure">
181181
<div class="spectrum-AssetCard-assetContainer">
182-
<img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
182+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
183183
<div class="spectrum-AssetCard-selectionOverlay"></div>
184184
</div>
185185
<div class="spectrum-AssetCard-header">
@@ -199,7 +199,7 @@ examples:
199199
markup: |
200200
<div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-drop-target" tabindex="0" role="figure">
201201
<div class="spectrum-AssetCard-assetContainer">
202-
<img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
202+
<img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
203203
<div class="spectrum-AssetCard-selectionOverlay"></div>
204204
</div>
205205
<div class="spectrum-AssetCard-header">

‎components/assetcard/metadata/mods.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------------------------- |
3+
| `--mod-assectcard-border-color-selected-down` |
4+
| `--mod-assectcard-focus-indicator-color` |
5+
| `--mod-assetcard-asset-animation-duration` |
6+
| `--mod-assetcard-asset-container-border-size` |
7+
| `--mod-assetcard-asset-size` |
8+
| `--mod-assetcard-background-color` |
9+
| `--mod-assetcard-border-color` |
10+
| `--mod-assetcard-border-color-down` |
11+
| `--mod-assetcard-border-color-hover` |
12+
| `--mod-assetcard-border-color-selected` |
13+
| `--mod-assetcard-border-color-selected-hover` |
14+
| `--mod-assetcard-border-radius` |
15+
| `--mod-assetcard-content-font-family` |
16+
| `--mod-assetcard-content-font-size` |
17+
| `--mod-assetcard-content-font-style` |
18+
| `--mod-assetcard-content-font-weight` |
19+
| `--mod-assetcard-content-letter-spacing` |
20+
| `--mod-assetcard-content-line-height` |
21+
| `--mod-assetcard-content-margin-block-start` |
22+
| `--mod-assetcard-content-text-color` |
23+
| `--mod-assetcard-focus-indicator-thickness` |
24+
| `--mod-assetcard-focus-ring-border-radius` |
25+
| `--mod-assetcard-focus-ring-gap` |
26+
| `--mod-assetcard-header-content-font-family` |
27+
| `--mod-assetcard-header-content-font-size` |
28+
| `--mod-assetcard-header-content-font-stlye` |
29+
| `--mod-assetcard-header-content-font-weight` |
30+
| `--mod-assetcard-header-content-letter-spacing` |
31+
| `--mod-assetcard-header-content-line-height` |
32+
| `--mod-assetcard-header-content-text-color` |
33+
| `--mod-assetcard-header-margin-block-start` |
34+
| `--mod-assetcard-overlay-background-color` |
35+
| `--mod-assetcard-selectionindicator-background-color-default` |
36+
| `--mod-assetcard-selectionindicator-background-color-ordered` |
37+
| `--mod-assetcard-selectionindicator-border-radius` |
38+
| `--mod-assetcard-selectionindicator-color` |
39+
| `--mod-assetcard-selectionindicator-font-size` |
40+
| `--mod-assetcard-selectionindicator-font-weight` |
41+
| `--mod-assetcard-selectionindicator-margin` |
42+
| `--mod-assetcard-selectionindicator-size` |
43+
| `--mod-assetcard-title-font-family` |
44+
| `--mod-assetcard-title-font-size` |
45+
| `--mod-assetcard-title-font-style` |
46+
| `--mod-assetcard-title-font-weight` |
47+
| `--mod-assetcard-title-letter-spacing` |
48+
| `--mod-assetcard-title-line-height` |
49+
| `--mod-assetcard-title-text-color` |

‎components/assetcard/package.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,13 @@
2020
"peerDependencies": {
2121
"@spectrum-css/checkbox": ">=7",
2222
"@spectrum-css/icon": ">=3",
23-
"@spectrum-css/typography": ">=4 <=5",
24-
"@spectrum-css/vars": ">=9"
23+
"@spectrum-css/tokens": ">=12"
2524
},
2625
"devDependencies": {
2726
"@spectrum-css/checkbox": "^7.0.16",
28-
"@spectrum-css/component-builder": "^4.0.14",
27+
"@spectrum-css/component-builder-simple": "^2.0.17",
2928
"@spectrum-css/icon": "^4.0.3",
30-
"@spectrum-css/typography": "^5.0.45",
31-
"@spectrum-css/vars": "^9.0.8",
29+
"@spectrum-css/tokens": "^12.0.0",
3230
"gulp": "^4.0.0"
3331
},
3432
"publishConfig": {

‎components/assetcard/stories/assetcard.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ export default {
5858
},
5959
options: ["checkbox", "highlight", "ordered"],
6060
control: "select",
61-
if: { arg: "isDropTarget", truthy: false },
6261
},
6362
isSelected: {
6463
name: "Selected",
@@ -158,6 +157,7 @@ OrderedSelection.args = {
158157
export const DropTarget = Template.bind({});
159158
DropTarget.args = {
160159
title: "Drop target",
160+
selection: "highlight",
161161
isDropTarget: true,
162-
exampleImage: "square",
162+
isSelected: true,
163163
};

‎components/assetcard/stories/template.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
44
import { when } from "lit/directives/when.js";
55

66
import { useArgs } from "@storybook/client-api";
7+
import { camelCase } from "lodash-es";
78

89
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
910

@@ -25,6 +26,14 @@ export const Template = ({
2526
...globals
2627
}) => {
2728
const [_, updateArgs] = useArgs();
29+
const { express } = globals;
30+
31+
try {
32+
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
33+
else import(/* webpackPrefetch: true */ "../themes/express.css");
34+
} catch (e) {
35+
console.warn(e);
36+
}
2837

2938
if (!image && !exampleImage) {
3039
console.warn("AssetCard: image is required");
@@ -52,15 +61,15 @@ export const Template = ({
5261
role="figure"
5362
>
5463
<div class="${rootClass}-assetContainer">
55-
<img class="${rootClass}-asset" src="${image ?? exampleImage}" />
64+
<img class="${rootClass}-asset" alt="assetcard example image" src="${image ?? exampleImage}" />
5665
<div class="${rootClass}-selectionOverlay"></div>
5766
</div>
5867
${when(
5968
title,
6069
() => html`<div class="${rootClass}-header">
6170
${when(
6271
title,
63-
() => html`<div class="${rootClass}-title">${title}</div>`
72+
() => html`<div class="${rootClass}-title" id=${camelCase(title)}>${title}</div>`
6473
)}
6574
${when(
6675
headerContent,
@@ -84,6 +93,7 @@ export const Template = ({
8493
size: "m",
8594
isEmphasized: true,
8695
isChecked: isSelected,
96+
ariaLabelledby: camelCase(title),
8797
customClasses: [`${rootClass}-checkbox`],
8898
}),
8999
() => html`<div class="${rootClass}-selectionOrder">1</div>`

‎components/assetcard/themes/express.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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) {
14+
.spectrum-AssetCard {
15+
--spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 0.2)
16+
}
17+
}

‎components/assetcard/themes/spectrum.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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) {
14+
.spectrum-AssetCard {
15+
--spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 0.1);
16+
}
17+
}

‎components/checkbox/stories/template.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const Template = ({
2020
title,
2121
value,
2222
id,
23+
ariaLabelledby,
2324
customClasses = [],
2425
...globals
2526
}) => {
@@ -65,6 +66,7 @@ export const Template = ({
6566
<input
6667
type="checkbox"
6768
class="${rootClass}-input"
69+
aria-labelledby=${ariaLabelledby}
6870
?checked=${isChecked}
6971
?disabled=${isDisabled}
7072
title=${ifDefined(label || title)}

0 commit comments

Comments
 (0)