refactor(assetcard)!: token migration (#2229)

BREAKING CHANGE: migrate asset card to updated token system

components/assetcard/gulpfile.js

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");

components/assetcard/metadata/assetcard.yml

@@ -13,19 +13,19 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
- <div class="spectrum-AssetCard-title">Card Title</div>
+ <div class="spectrum-AssetCard-title" id="card-title-1">Card Title</div>
  <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
  Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
  <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
- <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
+ <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-1">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -43,19 +43,19 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-landscape.jpeg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image in landscape" src="img/example-card-landscape.jpeg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
- <div class="spectrum-AssetCard-title">Card Title</div>
+ <div class="spectrum-AssetCard-title" id="card-title-2">Card Title</div>
  <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
  Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
  <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
- <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
+ <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-2">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -73,19 +73,19 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-square.png" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
- <div class="spectrum-AssetCard-title">Card Title</div>
+ <div class="spectrum-AssetCard-title" id="card-title-3">Card Title</div>
  <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
  Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
  <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
- <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
+ <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-3">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -105,16 +105,16 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-square.png" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
- <div class="spectrum-AssetCard-title">MVI_0123.mp4</div>
+ <div class="spectrum-AssetCard-title" id="card-title-4">MVI_0123.mp4</div>
  <div class="spectrum-AssetCard-headerContent">39:02</div>
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
  <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
- <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
+ <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-4">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -132,7 +132,7 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
@@ -149,19 +149,19 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
- <div class="spectrum-AssetCard-title">Card Title</div>
+ <div class="spectrum-AssetCard-title" id="card-title-5">Card Title</div>
  <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
  Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
  <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
- <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" checked>
+ <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-5" checked>
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -179,7 +179,7 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--orderedSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
@@ -199,7 +199,7 @@ examples:
  markup: |
  <div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-drop-target" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
- <img class="spectrum-AssetCard-asset" src="img/example-card-portrait.jpg" />
+ <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
  <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">

components/assetcard/metadata/mods.md

@@ -0,0 +1,49 @@
+| Modifiable Custom Properties |
+| ------------------------------------------------------------- |
+| `--mod-assectcard-border-color-selected-down` |
+| `--mod-assectcard-focus-indicator-color` |
+| `--mod-assetcard-asset-animation-duration` |
+| `--mod-assetcard-asset-container-border-size` |
+| `--mod-assetcard-asset-size` |
+| `--mod-assetcard-background-color` |
+| `--mod-assetcard-border-color` |
+| `--mod-assetcard-border-color-down` |
+| `--mod-assetcard-border-color-hover` |
+| `--mod-assetcard-border-color-selected` |
+| `--mod-assetcard-border-color-selected-hover` |
+| `--mod-assetcard-border-radius` |
+| `--mod-assetcard-content-font-family` |
+| `--mod-assetcard-content-font-size` |
+| `--mod-assetcard-content-font-style` |
+| `--mod-assetcard-content-font-weight` |
+| `--mod-assetcard-content-letter-spacing` |
+| `--mod-assetcard-content-line-height` |
+| `--mod-assetcard-content-margin-block-start` |
+| `--mod-assetcard-content-text-color` |
+| `--mod-assetcard-focus-indicator-thickness` |
+| `--mod-assetcard-focus-ring-border-radius` |
+| `--mod-assetcard-focus-ring-gap` |
+| `--mod-assetcard-header-content-font-family` |
+| `--mod-assetcard-header-content-font-size` |
+| `--mod-assetcard-header-content-font-stlye` |
+| `--mod-assetcard-header-content-font-weight` |
+| `--mod-assetcard-header-content-letter-spacing` |
+| `--mod-assetcard-header-content-line-height` |
+| `--mod-assetcard-header-content-text-color` |
+| `--mod-assetcard-header-margin-block-start` |
+| `--mod-assetcard-overlay-background-color` |
+| `--mod-assetcard-selectionindicator-background-color-default` |
+| `--mod-assetcard-selectionindicator-background-color-ordered` |
+| `--mod-assetcard-selectionindicator-border-radius` |
+| `--mod-assetcard-selectionindicator-color` |
+| `--mod-assetcard-selectionindicator-font-size` |
+| `--mod-assetcard-selectionindicator-font-weight` |
+| `--mod-assetcard-selectionindicator-margin` |
+| `--mod-assetcard-selectionindicator-size` |
+| `--mod-assetcard-title-font-family` |
+| `--mod-assetcard-title-font-size` |
+| `--mod-assetcard-title-font-style` |
+| `--mod-assetcard-title-font-weight` |
+| `--mod-assetcard-title-letter-spacing` |
+| `--mod-assetcard-title-line-height` |
+| `--mod-assetcard-title-text-color` |

components/assetcard/package.json

@@ -20,15 +20,13 @@
  "peerDependencies": {
  "@spectrum-css/checkbox": ">=7",
  "@spectrum-css/icon": ">=3",
- "@spectrum-css/typography": ">=4 <=5",
- "@spectrum-css/vars": ">=9"
+ "@spectrum-css/tokens": ">=12"
  },
  "devDependencies": {
  "@spectrum-css/checkbox": "^7.0.16",
- "@spectrum-css/component-builder": "^4.0.14",
+ "@spectrum-css/component-builder-simple": "^2.0.17",
  "@spectrum-css/icon": "^4.0.3",
- "@spectrum-css/typography": "^5.0.45",
- "@spectrum-css/vars": "^9.0.8",
+ "@spectrum-css/tokens": "^12.0.0",
  "gulp": "^4.0.0"
  },
  "publishConfig": {

components/assetcard/stories/assetcard.stories.js

@@ -58,7 +58,6 @@ export default {
  },
  options: ["checkbox", "highlight", "ordered"],
  control: "select",
- if: { arg: "isDropTarget", truthy: false },
  },
  isSelected: {
  name: "Selected",
@@ -158,6 +157,7 @@ OrderedSelection.args = {
 export const DropTarget = Template.bind({});
 DropTarget.args = {
  title: "Drop target",
+ selection: "highlight",
  isDropTarget: true,
- exampleImage: "square",
+ isSelected: true,
 };

components/assetcard/stories/template.js

@@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 
 import { useArgs } from "@storybook/client-api";
+import { camelCase } from "lodash-es";
 
 import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 
@@ -25,6 +26,14 @@ export const Template = ({
  ...globals
 }) => {
  const [_, updateArgs] = useArgs();
+ const { express } = globals;
+
+ try {
+ if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+ else import(/* webpackPrefetch: true */ "../themes/express.css");
+ } catch (e) {
+ console.warn(e);
+ }
 
  if (!image && !exampleImage) {
  console.warn("AssetCard: image is required");
@@ -52,15 +61,15 @@ export const Template = ({
  role="figure"
  >
  <div class="${rootClass}-assetContainer">
- <img class="${rootClass}-asset" src="${image ?? exampleImage}" />
+ <img class="${rootClass}-asset" alt="assetcard example image" src="${image ?? exampleImage}" />
  <div class="${rootClass}-selectionOverlay"></div>
  </div>
  ${when(
  title,
  () => html`<div class="${rootClass}-header">
  ${when(
  title,
- () => html`<div class="${rootClass}-title">${title}</div>`
+ () => html`<div class="${rootClass}-title" id=${camelCase(title)}>${title}</div>`
  )}
  ${when(
  headerContent,
@@ -84,6 +93,7 @@ export const Template = ({
  size: "m",
  isEmphasized: true,
  isChecked: isSelected,
+ ariaLabelledby: camelCase(title),
  customClasses: [`${rootClass}-checkbox`],
  }),
  () => html`<div class="${rootClass}-selectionOrder">1</div>`

components/assetcard/themes/express.css

@@ -0,0 +1,17 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: express) {
+ .spectrum-AssetCard {
+ --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 0.2)
+ }
+}

components/assetcard/themes/spectrum.css

@@ -0,0 +1,17 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: spectrum) {
+ .spectrum-AssetCard {
+ --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 0.1);
+ }
+}

components/checkbox/stories/template.js

@@ -20,6 +20,7 @@ export const Template = ({
  title,
  value,
  id,
+ ariaLabelledby,
  customClasses = [],
  ...globals
 }) => {
@@ -65,6 +66,7 @@ export const Template = ({
  <input
  type="checkbox"
  class="${rootClass}-input"
+ aria-labelledby=${ariaLabelledby}
  ?checked=${isChecked}
  ?disabled=${isDisabled}
  title=${ifDefined(label || title)}

components/tokens/custom-express/custom-dark-vars.css

@@ -15,4 +15,10 @@ governing permissions and limitations under the License.
  /* Drop Zone background color rgb */
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
  --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
 }

components/tokens/custom-express/custom-darkest-vars.css

@@ -15,4 +15,10 @@ governing permissions and limitations under the License.
  /* Drop Zone background color rgb */
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/
  --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700);
 }

components/tokens/custom-express/custom-large-vars.css

@@ -19,4 +19,6 @@ governing permissions and limitations under the License.
  --spectrum-dialog-confirm-border-radius: 8px;
 
  --spectrum-dial-border-radius: 15px;
+
+ --spectrum-assetcard-focus-ring-border-radius: 12px;
 }

components/tokens/custom-express/custom-light-vars.css

@@ -16,4 +16,10 @@ governing permissions and limitations under the License.
  /* Drop Zone background color rgb */
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); /* var(--spectrum-accent-color-800);*/
  --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
+
+
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900);
 }

components/tokens/custom-express/custom-medium-vars.css

@@ -19,4 +19,6 @@ governing permissions and limitations under the License.
  --spectrum-dialog-confirm-border-radius: 6px;
 
  --spectrum-dial-border-radius: 12px;
+
+ --spectrum-assetcard-focus-ring-border-radius: 10px;
 }

components/tokens/custom-spectrum/custom-dark-vars.css

@@ -49,4 +49,10 @@ governing permissions and limitations under the License.
  --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
  --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
  --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
+
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
 }