docs: refactor jsdocs structure

demo/api.md

@@ -7,17 +7,17 @@ The auro-lockup element is a standardized custom element for the use in headers
 
 ## Attributes
 
-| Attribute | Type      | Description      |
-|-----------|-----------|------------------|
-| [onDark](#onDark)  | `Boolean` | Toggle onDark UI |
+| Attribute | Type      | Description       |
+|-----------|-----------|-------------------|
+| [onDark](#onDark)  | `Boolean` | Toggle onDark UI. |
 
 ## Properties
 
 | Property   | Attribute  | Type      | Default | Description                                      |
 |------------|------------|-----------|---------|--------------------------------------------------|
-| [oneworld](#oneworld) | `oneworld` | `boolean` | false   | 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. |
+| [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. |
 
 ## Slots
 

docs/api.md

@@ -4,17 +4,17 @@ The auro-lockup element is a standardized custom element for the use in headers
 
 ## Attributes
 
-| Attribute | Type      | Description      |
-|-----------|-----------|------------------|
-| `onDark`  | `Boolean` | Toggle onDark UI |
+| Attribute | Type      | Description       |
+|-----------|-----------|-------------------|
+| `onDark`  | `Boolean` | Toggle onDark UI. |
 
 ## Properties
 
 | Property   | Attribute  | Type      | Default | Description                                      |
 |------------|------------|-----------|---------|--------------------------------------------------|
-| `oneworld` | `oneworld` | `boolean` | false   | replaces product name and tag line with Oneworld logo |
-| `path`     | `path`     | `String`  | "/"     | URL path for lockup link                         |
-| `standard` | `standard` | `boolean` | false   | uses the standard Alaska logo in place of the official logo, requires use of `oneWorld` attribute. |
+| `oneworld` | `oneworld` | `boolean` | false   | (DEPRECATED) Replaces product name and tag line with Oneworld logo |
+| `path`     | `path`     | `string`  | "/"     | URL path for lockup link.                        |
+| `standard` | `standard` | `boolean` | false   | Uses the standard Alaska logo in place of the official logo, requires use of `oneWorld` attribute. |
 
 ## Slots
 

package.json

@@ -143,7 +143,8 @@
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",
-    "build:api": "wca analyze 'src/auro-lockup.js' --outFiles docs/api.md",
+    "build:api": "wca 'scripts/wca/*' 'src/auro-lockup.js' --outFiles docs/api.md",
+    "build:api:prepare": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateWcaComponent.mjs 'src/auro-lockup.js'",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",

scripts/wca/auro-lockup.js

@@ -0,0 +1,15 @@
+
+import { AuroLockup } from '../../src/auro-lockup.js';
+
+/**
+ * The auro-lockup element is a standardized custom element for the use in headers of Alaska Airlines extended experiences.
+ * 
+ * @attr {Boolean} onDark - Toggle onDark UI.
+ * @slot title - Set title for lockup
+ * @slot subtitle - Set sub-title for lockup
+ */
+class AuroLockupWCA extends AuroLockup {}
+
+if (!customElements.get("auro-lockup")) {
+  customElements.define("auro-lockup", AuroLockupWCA);
+}

src/auro-lockup.js

@@ -20,19 +20,6 @@ import tokensCss from "./tokens-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * The auro-lockup element is a standardized custom element for the use in headers of Alaska Airlines extended experiences.
- *
- * @attr {String} path - URL path for lockup link
- * @attr {Boolean} onDark - Toggle onDark UI
- * @slot title - Set title for lockup
- * @slot subtitle - Set sub-title for lockup
- * @attr {boolean} standard - uses the standard Alaska logo in place of the official logo, requires use of `oneWorld` attribute.
- * @attr {boolean} oneworld - replaces product name and tag line with Oneworld logo
- */
-
-// build the component class
 export class AuroLockup extends LitElement {
   constructor() {
     super();
@@ -51,15 +38,30 @@ export class AuroLockup extends LitElement {
   static get properties() {
     return {
       // ...super.properties,
+
+      /**
+       * (DEPRECATED) Replaces product name and tag line with Oneworld logo.
+       */
+      oneworld: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * URL path for lockup link.
+       */
       path: {
-        type: String
+        type: String,
+        reflect: true
       },
+
+      /**
+       * Uses the standard Alaska logo in place of the official logo, requires use of `oneWorld` attribute.
+       */
       standard: {
-        type: Boolean
+        type: Boolean,
+        reflect: true
       },
-      oneworld: {
-        type: Boolean
-      }
     };
   }