chore(release): 4.2.2 [skip ci]

## [4.2.2](v4.2.1...v4.2.2) (2025-01-27) ### Bug Fixes * update oneworld example file names [#52](#52) ([571647e](571647e))
AlaskaAirlines · Jan 27, 2025 · d2daaa9 · d2daaa9
1 parent 571647e
commit d2daaa9
Show file tree

Hide file tree

Showing 5 changed files with 362 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+## [4.2.2](https://github.com/AlaskaAirlines/auro-lockup/compare/v4.2.1...v4.2.2) (2025-01-27)
+
+
+### Bug Fixes
+
+* update oneworld example file names [#52](https://github.com/AlaskaAirlines/auro-lockup/issues/52) ([571647e](https://github.com/AlaskaAirlines/auro-lockup/commit/571647e1b9f7c19736d786e83204dcbd89e255c2))
+
 ## [4.2.1](https://github.com/AlaskaAirlines/auro-lockup/compare/v4.2.0...v4.2.1) (2025-01-24)
 
 

diff --git a/README.md b/README.md
@@ -99,7 +99,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].1/dist/auro-lockup__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].2/dist/auro-lockup__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/demo/api.md b/demo/api.md
@@ -0,0 +1,186 @@
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
+<!-- The below content is automatically added from ../docs/api.md -->
+
+# auro-lockup
+
+The auro-lockup element is a standardized custom element for the use in headers of Alaska Airlines extended experiences.
+
+## Attributes
+
+| Attribute | Type      | Description       |
+|-----------|-----------|-------------------|
+| [onDark](#onDark)  | `Boolean` | Toggle onDark UI. |
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| [oneworld](#oneworld) | `oneworld` | `boolean` | false   | (DEPRECATED) Replaces product name and tag line with Oneworld logo. |
+| [path](#path)     | `path`     | `string`  | "/"     | URL path for lockup link.                        |
+| [standard](#standard) | `standard` | `boolean` | false   | Uses the standard Alaska logo in place of the official logo, requires use of `oneWorld` attribute. |
+| [variant](#variant)  | `variant`  | `string`  |         | Sets lockup variant option. Only possible value is `oneworld`. |
+
+## Slots
+
+| Name       | Description              |
+|------------|--------------------------|
+| [subtitle](#subtitle) | Set sub-title for lockup |
+| [title](#title)    | Set title for lockup     |
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Examples
+
+See the following examples for use-case illustrations of API options.
+
+### Attribute Examples
+
+#### <a name="onDark"></a>`onDark`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `onDark` attribute for the proper presentation on a darker background.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDarkExample.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDarkExample.html -->
+  <auro-lockup onDark></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDarkExample.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDarkExample.html -->
+
+```html
+<auro-lockup onDark></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Property Examples
+
+#### <a name="oneWorld"></a>`oneWorld`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `oneWorld` property to replace the product name and tag line with one**World** logo.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/oneworld.html) -->
+  <!-- The below content is automatically added from ../apiExamples/oneworld.html -->
+  <auro-lockup variant="oneworld"></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/oneworld.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/oneworld.html -->
+
+```html
+<auro-lockup variant="oneworld"></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### <a name="path"></a>`path`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `path` property to add a custom URL reference to the clickable lockup. A `/` is set by default.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/path.html) -->
+  <!-- The below content is automatically added from ../apiExamples/path.html -->
+  <auro-lockup path="https://www.alaskaair.com"></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/path.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/path.html -->
+
+```html
+<auro-lockup path="https://www.alaskaair.com"></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### <a name="standard"></a>`standard`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `standard` property to use the standard Alaska logo in place of the official logo. Restricted to use with the one**World** logo.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/standard.html) -->
+  <!-- The below content is automatically added from ../apiExamples/standard.html -->
+  <auro-lockup standard oneWorld></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/standard.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/standard.html -->
+
+```html
+<auro-lockup standard oneWorld></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Slot Examples
+
+#### <a name="title"></a>`title`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `title` slot to add lockup content.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/title.html) -->
+  <!-- The below content is automatically added from ../apiExamples/title.html -->
+  <auro-lockup>
+    <span slot="title">Product Name</span>
+  </auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/title.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/title.html -->
+
+```html
+<auro-lockup>
+  <span slot="title">Product Name</span>
+</auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### <a name="subtitle"></a>`subtitle`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
+Use the `subtitle` slot to add lockup content.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/subtitle.html) -->
+  <!-- The below content is automatically added from ../apiExamples/subtitle.html -->
+  <auro-lockup>
+    <span slot="subtitle">Powered by Partner Name</span>
+  </auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/subtitle.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/subtitle.html -->
+
+```html
+<auro-lockup>
+  <span slot="subtitle">Powered by Partner Name</span>
+</auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-lockup-alaska-logo-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+  --ds-auro-lockup-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-lockup-subtitle-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-lockup-title-color: var(--ds-color-text-info-default, #{$ds-color-text-info-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/demo/index.md b/demo/index.md
@@ -0,0 +1,167 @@
+<!--
+The index.md file is a compiled document. No edits should be made directly to this file.
+README.md is created by running `npm run build:docs`.
+This file is generated based on a template fetched from `../docs/partials/index.md`
+-->
+
+# Lockup
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
+<!-- The below content is automatically added from ../docs/partials/description.md -->
+The `auro-lockup` HTML custom element is a standardized use case element for authorized Alaska Airlines extended experiences.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-lockup use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ../docs/partials/useCases.md -->
+The `auro-lockup` use cases include:
+
+* Product lines
+* Partner services
+* Auxiliary sites
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-lockup default use
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ../apiExamples/basic.html -->
+  <auro-lockup>
+    <span slot="title">Place title text here</span>
+    <span slot="subtitle">Place subtitle text here</span>
+  </auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
+
+```html
+<auro-lockup>
+  <span slot="title">Place title text here</span>
+  <span slot="subtitle">Place subtitle text here</span>
+</auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## auro-lockup with Oneworld logo
+
+The following examples illustrate the standard and official versions of the Alaska logo. By default, the official version of the Alaska logo is used. Use the `standard` attribute to display the Alaska logo sans the tagline.
+
+The `standard` property is only supported with the `oneworld` option.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/oneworldStandard.html) -->
+  <!-- The below content is automatically added from ../apiExamples/oneworldStandard.html -->
+  <auro-lockup standard variant="oneworld"></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/oneworldStandard.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/oneworldStandard.html -->
+
+```html
+<auro-lockup standard variant="oneworld"></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## auro-lockup onDark
+
+For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDark.html -->
+  <auro-lockup onDark>
+    <span slot="title">Product Name</span>
+    <span slot="subtitle">Powered by Partner Name</span>
+  </auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDark.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDark.html -->
+
+```html
+<auro-lockup onDark>
+  <span slot="title">Product Name</span>
+  <span slot="subtitle">Powered by Partner Name</span>
+</auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDark-2.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDark-2.html -->
+  <auro-lockup onDark variant="oneworld"></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDark-2.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDark-2.html -->
+
+```html
+<auro-lockup onDark variant="oneworld"></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDark-3.html) -->
+  <!-- The below content is automatically added from ../apiExamples/onDark-3.html -->
+  <auro-lockup onDark standard variant="oneworld"></auro-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDark-3.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/onDark-3.html -->
+
+```html
+<auro-lockup onDark standard variant="oneworld"></auro-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-lockup` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroLockup.register(name)` method and pass in a unique name.
+
+```js
+import { AuroLockup } from './src/auro-lockup.js';
+
+AuroLockup.register('custom-lockup');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` element.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ../apiExamples/custom.html -->
+  <custom-lockup>
+    <span slot="title">Place title text here</span>
+    <span slot="subtitle">Place subtitle text here</span>
+  </custom-lockup>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
+
+```html
+<custom-lockup>
+  <span slot="title">Place title text here</span>
+  <span slot="subtitle">Place subtitle text here</span>
+</custom-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-lockup",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "auro-lockup HTML custom element",
   "repository": {
     "type": "git",