fix: change outline prop to variants

Author: chrisfalaska

README.md

@@ -104,7 +104,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
   <auro-tail tail="AS"></auro-tail>
   <auro-tail tail="HA"></auro-tail>
 </auro-tail-group>
-<auro-tail tail="PR" size="xl" outline style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>
+<auro-tail tail="PR" size="xl" variant="outline" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

apiExamples/basic.html

@@ -12,4 +12,4 @@
   <auro-tail tail="HA"></auro-tail>
 </auro-tail-group>
 
-<auro-tail tail="PR" size="xl" outline style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>
+<auro-tail tail="PR" size="xl" variant="outline" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>

apiExamples/outline.html

@@ -1,2 +1,4 @@
-<auro-tail tail="S7" outline></auro-tail>
-<auro-tail tail="KE" outline></auro-tail>
+<auro-tail tail="S7" variant="outline"></auro-tail>
+<auro-tail tail="KE" variant="outline"></auro-tail>
+<auro-tail tail="AS" variant="outline"></auro-tail>
+<auro-tail tail="HA" variant="outline"></auro-tail>

docs/api.md

@@ -8,9 +8,9 @@ The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphi
 | ---------- | ---------- | --------- | ------------------- | --------- | ----------------------------------------------------------------------------------------- |
 | badge      | badge      |           | string \| undefined | undefined | Sets the badge type to display (e.g., `oneworld`).                                        |
 | href       | href       |           | string \| undefined | undefined | Sets the href for the tail.                                                               |
-| outline    | outline    |           | boolean             | false     | Renders the tail with an outline style.                                                   |
 | size       | size       |           | string              | 'lg'      | Sets the size of the tail. Valid values: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`              |
 | tail       | tail       |           | string              | 'AS'      | Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`). |
+| variant    | variant    |           | string \| undefined | undefined | Sets the visual variant of the tail. Valid values: `outline`                              |
 
 ### Methods
 

docs/partials/api.md

@@ -99,13 +99,15 @@ Example:
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Outline
+## Variant
 
-Set the `outline` boolean prop to add an outline around the tail graphic.
+Set the `variant` attribute to change the visual style of the tail.
 
-- Outlines apply only to partner (OA) tails
-  - AAG tails (AS & HA) never feature outlines
-- Width & color are predefined and not customizable
+### Available variants:
+- `outline` - Adds an outline around the tail graphic
+  - Outlines apply only to partner (OA) tails
+    - AAG tails (AS & HA) never feature outlines
+  - Width & color are predefined and not customizable
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/outline.html) -->

src/auro-tail.js

@@ -54,7 +54,7 @@ export class AuroTail extends LitElement {
       tail: { type: String },
       badge: { type: String },
       size: { type: String, reflect: true },
-      outline: { type: Boolean, reflect: true },
+      variant: { type: String, reflect: true },
       href: { type: String, attribute: 'href' }
     };
   }
@@ -89,23 +89,23 @@ export class AuroTail extends LitElement {
      */
     this.size = 'lg';
     /**
-     * Renders the tail with an outline style.
-     * @type {boolean}
+     * Sets the visual variant of the tail. Valid values: `outline`
+     * @type {string | undefined}
      */
-    this.outline = false;
+    this.variant = undefined;
     /**
      * Sets the href for the tail.
      * @type {string | undefined}
      */
     this.href = undefined;
 
     /**
-     * Determines the carrier variant based on tail code. Valid values: `aag`, `oa`
+     * Determines the carrier type based on tail code. Valid values: `aag`, `oa`
      * Used internally for styling.
      * @private
      * @type {string}
      */
-    this._variant = 'oa';
+    this._carrierType = 'oa';
 
     /**
      * Optional internal callback invoked on hyperlink click before the custom
@@ -165,11 +165,11 @@ export class AuroTail extends LitElement {
   }
 
   /**
-   * Gets the carrier variant based on the current tail code. Returns `aag` or `oa`
+   * Gets the carrier type based on the current tail code. Returns `aag` or `oa`
    * @private
-   * @returns {string} The carrier variant
+   * @returns {string} The carrier type
    */
-  get variant() {
+  get carrierType() {
     // Carrier mappings
     const carriers = {
       'aag': ['as', 'ha'],
@@ -284,11 +284,11 @@ export class AuroTail extends LitElement {
    * @param {Map<string, any>} changedProperties - Changed properties
    */
   updated(changedProperties) {
-    // Update internal variant when tail changes
+    // Update internal carrier type when tail changes
     if (changedProperties.has('tail')) {
-      this._variant = this.variant;
-      // Set variant as data attribute for CSS targeting.
-      this.dataset.variant = this.variant;
+      this._carrierType = this.carrierType;
+      // Set carrier type as data attribute for CSS targeting.
+      this.dataset.carrierType = this.carrierType;
     }
     super.updated(changedProperties);
   }

src/styles/auro-tail.scss

@@ -91,13 +91,16 @@
 }
 
 /* drop-shadow: apply to AAG carriers */
-:host([data-variant="aag"]) [auro-icon] {
+:host([data-carrier-type="aag"]) [auro-icon] {
   filter: var(--ds-auro-tail-tail-drop-shadow);
 }
 
-/* outline: apply to OA carriers only when outline prop is present */
+/* outline: apply to OA carriers only when variant="outline" prop is present */
 /* Use multiple sharp drop-shadows to create crisp outline & trace SVG curves */
-:host([data-variant="oa"][outline]) [auro-icon] {
+/* Margin offset accounts for stacked drop-shadows (1px per drop-shadow line) to shift layout within container */
+:host([data-carrier-type="oa"][variant="outline"]) [auro-icon] {
+  margin-left: calc(-1 * var(--ds-auro-tail-tail-outline-width) * 2);
+  margin-top: calc(var(--ds-auro-tail-tail-outline-width) * 2);
   filter:
     drop-shadow(var(--ds-auro-tail-tail-outline-width) 0 0 var(--ds-auro-tail-tail-outline-color))
     drop-shadow(calc(-1 * var(--ds-auro-tail-tail-outline-width)) 0 0 var(--ds-auro-tail-tail-outline-color))

test/auro-tail.test.js

@@ -20,19 +20,19 @@ describe("auro-tail", () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail></auro-tail>`));
     expect(el.tail).to.equal("AS");
     expect(el.size).to.equal("lg");
-    expect(el.outline).to.be.false;
+    expect(el.variant).to.equal(undefined);
     expect(el.href).to.equal(undefined);
   });
 
-  it("sets data-variant based on tail code and updates when tail changes", async () => {
+  it("sets data-carrier-type based on tail code and updates when tail changes", async () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail tail="AS"></auro-tail>`));
-    expect(el.dataset.variant).to.equal("aag");
+    expect(el.dataset.carrierType).to.equal("aag");
     el.tail = "OA";
     await el.updateComplete;
-    expect(el.dataset.variant).to.equal("oa");
+    expect(el.dataset.carrierType).to.equal("oa");
     el.tail = "PR";
     await el.updateComplete;
-    expect(el.dataset.variant).to.equal("oa");
+    expect(el.dataset.carrierType).to.equal("oa");
   });
 
   it("computes labelTypeClass per size map", async () => {
@@ -166,12 +166,12 @@ describe("auro-tail", () => {
     expect(calls).to.equal(1);
   });
 
-  it("updates variant after tail change inside same instance", async () => {
+  it("updates carrierType after tail change inside same instance", async () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail tail="HA"></auro-tail>`));
-    expect(el.dataset.variant).to.equal("aag");
+    expect(el.dataset.carrierType).to.equal("aag");
     el.tail = "OA";
     await el.updateComplete;
-    expect(el.dataset.variant).to.equal("oa");
+    expect(el.dataset.carrierType).to.equal("oa");
   });
 
   it("shouldShowLink false when size not in LINKS_SIZES", async () => {
@@ -199,27 +199,27 @@ describe("auro-tail", () => {
     expect(el.shadowRoot.querySelector(".badge")).to.be.null;
   });
 
-  it("applies outline attribute", async () => {
-    const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail outline></auro-tail>`));
-    expect(el.outline).to.be.true;
-    expect(el.hasAttribute("outline")).to.be.true;
+  it("applies variant attribute", async () => {
+    const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail variant="outline"></auro-tail>`));
+    expect(el.variant).to.equal("outline");
+    expect(el.getAttribute("variant")).to.equal("outline");
   });
 
   it("returns default labelTypeClass for unmapped size", async () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail size="xs"></auro-tail>`));
     expect(el.labelTypeClass).to.equal("body-sm");
   });
 
-  it("maps Hawaiian (HA) to aag variant", async () => {
+  it("maps Hawaiian (HA) to aag carrierType", async () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail tail="HA"></auro-tail>`));
-    expect(el.variant).to.equal("aag");
-    expect(el.dataset.variant).to.equal("aag");
+    expect(el.carrierType).to.equal("aag");
+    expect(el.dataset.carrierType).to.equal("aag");
   });
 
-  it("maps unknown carrier codes to oa variant", async () => {
+  it("maps unknown carrier codes to oa carrierType", async () => {
     const el = /** @type {AuroTail} */ (await fixture(html`<auro-tail tail="XX"></auro-tail>`));
-    expect(el.variant).to.equal("oa");
-    expect(el.dataset.variant).to.equal("oa");
+    expect(el.carrierType).to.equal("oa");
+    expect(el.dataset.carrierType).to.equal("oa");
   });
 
   it("renders slot content as label in hyperlink", async () => {