ci: add workflow to update design-tokens version

.github/workflows/update-design-tokens.yml

@@ -0,0 +1,46 @@
+name: Update design-tokens version
+on:
+  workflow_dispatch:
+    inputs:
+      ticket-number:
+        description: 'The ADO ticket number to associate this change with'
+        required: true
+        type: number
+      change-type:
+        description: |
+          The type of change being made:
+
+          • feat: new tokens
+          • fix: corrections to existing tokens
+        required: true
+        type: choice
+        options:
+          - feat
+          - fix
+
+jobs:
+  update-design-tokens:
+    runs-on: ubuntu-latest
+    permissions:
+      # Need to be able to create new branches and commits
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+      - name: Clone repo
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        run: npm ci
+      - name: Update design-tokens to latest version
+        run: npx npm-check-updates -f "@aurodesignsystem/design-tokens" -u --install always 
+      - name: Build project
+        run: npm run build
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: '${{ inputs.change-type }}: update tokens from auro AB#${{ inputs.ticket-number }}'
+          title: Update latest from auro design-tokens
+          body: 'Update latest from auro design-tokens from file: https://www.figma.com/file/${{ secrets.FIGMA_FILE_KEY }}'
+          branch: update-tokens
+          branch-suffix: timestamp

.gitignore

@@ -5,7 +5,6 @@ build
 test
 results
 coverage/
-dist
 example/temp
 example/prodBuild/
 example/tokensBuild/

dist/auroElement/README.md

@@ -0,0 +1,86 @@
+# What is auroElement?
+
+The concept of auroElement is that it is an extension of the base litElement class. When your component imports auroElement you are inheriting new base functionality.
+
+## Accessibility
+
+When building a component with the auroElement base class you will inherit a simple API for accessibility support.
+
+| Property         | Attribute        | Type      | Description                                      |
+|------------------|------------------|-----------|--------------------------------------------------|
+| `hidden`         | `hidden`         | `Boolean` | If present, the component will be hidden both visually and from screen readers |
+| `hiddenAudible`  | `hiddenAudible`  | `Boolean` | If present, the component will be hidden from screen readers, but seen visually |
+| `hiddenVisually` | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers |
+
+### Install
+
+The auroElement.js is already included with the base setup of a web component within the WCSS package. Installing requires a few modifications to the structure of the component.
+
+Find the following
+
+```js
+import { LitElement, html, css } from "lit";
+```
+
+Update to the following
+
+```js
+import { html, css } from "lit";
+import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs';
+```
+
+**Note:** The legacy `/auroElement.js` is deprecated and will no longer be supported. Any reference to this file should be updated to point to `/auroElement.mjs`.
+
+### Add supporting styles
+
+To complete the install, be sure to add the following to the `./src/styles.scss` file
+
+```scss
+@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+```
+
+### Update class
+
+In the component's JS file, find the following
+
+```js
+class [Namespace][Name] extends LitElement { ... }
+```
+
+Update to
+
+```js
+class [Namespace][Name] extends AuroElement { ... }
+```
+
+### Update properties
+
+In the component's class, find the following
+
+```js
+static get properties() {
+  return {
+
+  };
+}
+```
+
+And update to include the `super` keyword is used to access and call functions on an object's parent.
+
+```js
+static get properties() {
+  return {
+    ...super.properties,
+  };
+}
+```
+
+### Update HTML template
+
+Within the auroElement will be the `hideAudible()` method. In order to make full use of auroElement's accessibility features, be sure to add the following to the HTML element(s) you wish to hide from screen readers.
+
+```html
+aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+```
+
+This completes the install of auroElement and all its supported features.

dist/auroElement/_auroElement.scss

@@ -0,0 +1,45 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../../src/utilityClasses/displayProperties';
+
+/// Component a11y support for `:host` </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host {
+  @extend .util_displayBlock;
+}
+
+/// Component a11y support for `:host` selector with `hidden` attribute </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host([hidden]:not(:focus):not(:active)) {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host([hidden]:not(:focus):not(:active)) {
+  @extend .util_displayHidden;
+}
+
+/// Component a11y support for `:host` selector with `hiddenVisually` attribute </br>
+/// For use with auroElement.js base class and web component development
+///
+/// @group Component-support
+/// @example scss - Default selector
+///   :host([hiddenVisually]:not(:focus):not(:active)) {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
+:host([hiddenVisually]:not(:focus):not(:active)) {
+  @extend .util_displayHiddenVisually;
+}

dist/auroElement/auroElement.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement } from "lit";
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+export default class AuroElement extends LitElement {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}

dist/auroElement/auroElement.mjs

@@ -0,0 +1,38 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement } from "lit";
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+export default class AuroElement extends LitElement {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}

dist/bundled/legacy/auro-classic+fv.global.css

@@ -0,0 +1,117 @@
+/*
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+*/
+/* --------------------------------------------------------------------- */
+/*
+  This file is reserved for CDN consumption of web components using the Auro Classic theme
+  with Focus Visible (fv) and not intended to be used with standard dynamic projects.
+
+  This theme is DEPRECATED and will be removed in the future.
+
+  Provided for backwards compatibility.
+*/
+*:focus-visible {
+  outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
+}
+
+/*
+  Essentials for Auro Classic theme
+*/
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body,
+.baseType {
+  margin: 0;
+  color: var(--ds-color-text-primary-default, #2a2a2a);
+  font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
+  font-variant-ligatures: no-common-ligatures;
+  font-size: var(--ds-text-body-size-default, 1rem);
+  font-weight: var(--ds-text-body-default-weight, 500);
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+
+.baseParagraph {
+  margin: 0 0 1rem;
+  line-height: var(--ds-text-body-height-default, 1.5rem);
+}
+.baseParagraph .hyperlink {
+  text-decoration: underline;
+}
+
+.hyperlink {
+  text-decoration: underline;
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink:visited {
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
+}
+.hyperlink--nav {
+  display: block;
+  text-decoration: none;
+}
+.hyperlink--nav:not(.is-touching):hover {
+  text-decoration: underline !important;
+}
+.hyperlink--ondark {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink--ondark:not(.is-touching):hover {
+  color: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
+}
+.hyperlink--ondark:visited {
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
+}
+.hyperlink:not(.is-touching):hover {
+  text-decoration: none;
+  color: var(--ds-color-text-ui-hover-default, #193d73);
+}
+
+img {
+  max-width: 100%;
+}
+
+small,
+.type--small {
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+}
+
+/* stylelint-disable-line scss/dollar-variable-first-in-block */
+.fineprint {
+  font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-text-body-height-xs, 1rem);
+  color: var(--ds-color-text-secondary-default, #525252);
+}
+
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-display-weight, 100);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-heading-medium-weight, 300);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
+}
+@font-face {
+  font-family: "AS Circular";
+  font-weight: var(--ds-text-body-default-weight, 500);
+  font-style: normal;
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff");
+}