@justeattakeaway/pie-link 1.4.0 → 1.5.0

package/README.md

@@ -46,7 +46,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `isStandalone` | `true`, `false` | If true, sets the link as a block element. | `false` |
 | `hasVisited` | `true`, `false` | If true, the link will apply the styles for the visited state. Only takes effect if `tag` is `"a"`. | `false` |
 | `iconPlacement` | `"leading"`, `"trailing"` | Sets the position of the icon relative to the text. Leading comes before the text and trailing comes after, taking writing direction into account. To use this, you must pass an icon into the [icon slot](#slots). **Will have no effect if `isStandalone` is false.** | `undefined` |
-| `aria` | `{ label?: string }` | Aria properties for the link to help with making it accessible. | `undefined` |
+| `aria` | `{ label?: string, expanded?: boolean }` | Aria properties for the link to help with making it accessible. | `undefined` |
 
 
 ### Slots

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
     label?: string;
+    expanded?: boolean;
 };
 
 export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
@@ -17,7 +18,7 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
 
 export declare interface LinkProps {
     /**
-     * The ARIA labels used for the link.
+     * ARIA properties used for the link.
      */
     aria?: AriaProps;
     /**

package/dist/index.js

@@ -1,15 +1,15 @@
-import { LitElement as b, unsafeCSS as x, nothing as y, html as d } from "lit";
+import { LitElement as b, unsafeCSS as x, nothing as y, html as p } from "lit";
 import { property as e } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
-import { validPropertyValues as s, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
-const p = class p extends b {
+import { validPropertyValues as c, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
+const h = class h extends b {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", p.v);
+    this.getAttribute("v") || this.setAttribute("v", h.v);
   }
 };
-p.v = "1.4.0";
-let g = p;
+h.v = "1.5.0";
+let g = h;
 const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-body-l-link-weight);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-body-l-link-text-decoration)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-body-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-l-link-line-height) * 1px);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link:hover,.c-link:active{--link-text-decoration: none}.c-link ::slotted(.c-pieIcon){pointer-events:none}.c-link.c-link--high-visibility{--link-text-color: var(--dt-color-content-link-distinct)}.c-link.c-link--inverse{--link-text-color: var(--dt-color-content-link-inverse)}.c-link.c-link--inverse-light{--link-text-color: var(--dt-color-content-link-light)}.c-link.c-link--xsmall{--link-font-size: calc(var(--dt-font-caption-link-size) * 1px);--link-line-height: calc(var(--dt-font-caption-link-line-height) * 1px);--link-font-weight: var(--dt-font-caption-link-weight);--link-text-decoration: var(--dt-font-caption-link-text-decoration);--link-icon-offset-top: 0}.c-link.c-link--small{--link-font-size: calc(var(--dt-font-body-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-s-link-weight);--link-text-decoration: var(--dt-font-body-s-link-text-decoration);--link-icon-offset-top: 2px}.c-link.c-link--underline-reversed.c-link--standalone{--link-text-decoration: none}.c-link.c-link--underline-reversed.c-link--standalone:hover,.c-link.c-link--underline-reversed.c-link--standalone:active{--link-text-decoration: var(--dt-font-body-l-link-text-decoration)}.c-link.c-link--bold{--link-font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-l-link-weight)}.c-link.c-link--bold.c-link--small{--link-font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-s-link-weight)}.c-link.c-link--bold.c-link--xsmall{--link-font-size: calc(var(--dt-font-caption-strong-link-size) * 1px);--link-line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);--link-font-weight: var(--dt-font-caption-strong-link-weight)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.has-visited:visited{color:var(--dt-color-content-link-visited)}.c-link.has-visited:visited.c-link--inverse{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}button.c-link{outline:none;border:none;-webkit-user-select:none;user-select:none;background:transparent;padding:0}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}", w = ["default", "high-visibility", "inverse", "inverse-light"], S = ["xsmall", "small", "medium"], $ = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], C = ["default", "reversed"], n = {
   tag: "a",
   variant: "default",
@@ -21,12 +21,12 @@ const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--li
   iconPlacement: "leading",
   type: "submit"
 };
-var V = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (l, o, h, k) => {
-  for (var r = k > 1 ? void 0 : k ? O(o, h) : o, f = l.length - 1, v; f >= 0; f--)
-    (v = l[f]) && (r = (k ? v(o, h, r) : v(r)) || r);
-  return k && r && V(o, h, r), r;
+var V = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (l, o, r, k) => {
+  for (var s = k > 1 ? void 0 : k ? O(o, r) : o, f = l.length - 1, v; f >= 0; f--)
+    (v = l[f]) && (s = (k ? v(o, r, s) : v(s)) || s);
+  return k && s && V(o, r, s), s;
 };
-const c = "pie-link";
+const d = "pie-link";
 let t = class extends g {
   constructor() {
     super(...arguments), this.tag = n.tag, this.variant = n.variant, this.size = n.size, this.underline = n.underline, this.iconPlacement = n.iconPlacement, this.isBold = n.isBold, this.isStandalone = n.isStandalone, this.hasVisited = n.hasVisited, this.type = n.type;
@@ -38,11 +38,11 @@ let t = class extends g {
    */
   renderContent() {
     const { iconPlacement: l, isStandalone: o } = this;
-    return d`
+    return p`
             <span class="c-link-content">
-                ${o && l === "leading" ? d`<slot name="icon"></slot>` : y}
+                ${o && l === "leading" ? p`<slot name="icon"></slot>` : y}
                 <slot></slot>
-                ${o && l === "trailing" ? d`<slot name="icon"></slot>` : y}
+                ${o && l === "trailing" ? p`<slot name="icon"></slot>` : y}
             </span>`;
   }
   /**
@@ -51,13 +51,14 @@ let t = class extends g {
    * @private
    */
   renderButton(l) {
-    var o;
-    return d`
+    var o, r;
+    return p`
             <button
                 data-test-id="pie-link-button"
                 class="${u(l)}"
                 type=${this.type}
                 aria-label=${a((o = this.aria) == null ? void 0 : o.label)}
+                aria-expanded=${a((r = this.aria) == null ? void 0 : r.expanded)}
                 part="base">
                 ${this.renderContent()}
             </button>`;
@@ -68,8 +69,8 @@ let t = class extends g {
    * @private
    */
   renderAnchor(l) {
-    var o;
-    return d`
+    var o, r;
+    return p`
             <a
                 data-test-id="pie-link-anchor"
                 class="${u(l)}"
@@ -78,6 +79,7 @@ let t = class extends g {
                 rel=${a(this.rel)}
                 download="${a(this.download)}"
                 aria-label=${a((o = this.aria) == null ? void 0 : o.label)}
+                aria-expanded=${a((r = this.aria) == null ? void 0 : r.expanded)}
                 part="base">
                 ${this.renderContent()}
             </a>`;
@@ -98,23 +100,23 @@ let t = class extends g {
 t.styles = x(z);
 i([
   e({ type: String }),
-  s(c, P, n.tag)
+  c(d, P, n.tag)
 ], t.prototype, "tag", 2);
 i([
   e({ type: String }),
-  s(c, w, n.variant)
+  c(d, w, n.variant)
 ], t.prototype, "variant", 2);
 i([
   e({ type: String }),
-  s(c, S, n.size)
+  c(d, S, n.size)
 ], t.prototype, "size", 2);
 i([
   e({ type: String }),
-  s(c, C, n.underline)
+  c(d, C, n.underline)
 ], t.prototype, "underline", 2);
 i([
   e({ type: String }),
-  s(c, $, n.iconPlacement)
+  c(d, $, n.iconPlacement)
 ], t.prototype, "iconPlacement", 2);
 i([
   e({ type: String, reflect: !0 })
@@ -139,7 +141,7 @@ i([
 ], t.prototype, "hasVisited", 2);
 i([
   e({ type: String }),
-  s(c, B, n.type)
+  c(d, B, n.type)
 ], t.prototype, "type", 2);
 i([
   e({ type: Object })

package/dist/react.d.ts

@@ -6,6 +6,7 @@ import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
     label?: string;
+    expanded?: boolean;
 };
 
 export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
@@ -18,7 +19,7 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
 
 export declare interface LinkProps {
     /**
-     * The ARIA labels used for the link.
+     * ARIA properties used for the link.
      */
     aria?: AriaProps;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,13 +44,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.2",
+    "@justeattakeaway/pie-css": "1.4.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.8",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.27.1",
-    "@justeattakeaway/pie-webc-core": "16.1.0"
+    "@justeattakeaway/pie-icons-webc": "1.27.3",
+    "@justeattakeaway/pie-webc-core": "17.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -9,11 +9,12 @@ export const underlineTypes = ['default', 'reversed'] as const;
 
 type AriaProps = {
     label?: string;
+    expanded?: boolean;
 };
 
 export interface LinkProps {
     /**
-     * The ARIA labels used for the link.
+     * ARIA properties used for the link.
      */
     aria?: AriaProps;
     /**

package/src/index.ts

@@ -106,6 +106,7 @@ export class PieLink extends PieElement implements LinkProps {
                 class="${classMap(classes)}"
                 type=${this.type}
                 aria-label=${ifDefined(this.aria?.label)}
+                aria-expanded=${ifDefined(this.aria?.expanded)}
                 part="base">
                 ${this.renderContent()}
             </button>`;
@@ -126,6 +127,7 @@ export class PieLink extends PieElement implements LinkProps {
                 rel=${ifDefined(this.rel)}
                 download="${ifDefined(this.download)}"
                 aria-label=${ifDefined(this.aria?.label)}
+                aria-expanded=${ifDefined(this.aria?.expanded)}
                 part="base">
                 ${this.renderContent()}
             </a>`;