@justeattakeaway/pie-divider 0.13.9 → 0.14.1

package/custom-elements.json

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'default',\n    orientation: 'horizontal',\n}"
+          "default": "{\n    variant: 'default',\n    orientation: 'horizontal',\n    label: '',\n}"
         }
       ],
       "exports": [
@@ -84,6 +84,12 @@
               "name": "orientation",
               "privacy": "public",
               "attribute": "orientation"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "privacy": "public",
+              "attribute": "label"
             }
           ],
           "attributes": [
@@ -94,6 +100,10 @@
             {
               "name": "orientation",
               "fieldName": "orientation"
+            },
+            {
+              "name": "label",
+              "fieldName": "label"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -16,6 +16,10 @@ export declare interface DividerProps {
      * What orientation the divider should be such as horizontal or vertical.
      */
     orientation?: typeof orientations[number];
+    /**
+     * The label text for the divider.
+     */
+    label?: string;
 }
 
 export declare const orientations: readonly ["horizontal", "vertical"];
@@ -26,6 +30,7 @@ export declare const orientations: readonly ["horizontal", "vertical"];
 export declare class PieDivider extends LitElement implements DividerProps {
     variant: "default" | "inverse";
     orientation: "horizontal" | "vertical";
+    label: string;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/index.js

@@ -1,48 +1,63 @@
-import { unsafeCSS as h, LitElement as f, html as u } from "lit";
-import { property as c } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { validPropertyValues as l, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
-const b = `*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}
-`, y = ["default", "inverse"], P = ["horizontal", "vertical"], o = {
+import { LitElement as m, html as n, unsafeCSS as f } from "lit";
+import { property as v } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { validPropertyValues as g, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
+const w = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent}.c-divider.c-divider--labelled .c-divider-label{max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", x = ["default", "inverse"], y = ["horizontal", "vertical"], a = {
   variant: "default",
-  orientation: "horizontal"
+  orientation: "horizontal",
+  label: ""
 };
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (n, r, e, t) => {
-  for (var i = t > 1 ? void 0 : t ? _(r, e) : r, a = n.length - 1, v; a >= 0; a--)
-    (v = n[a]) && (i = (t ? v(r, e, i) : v(i)) || i);
-  return t && i && w(r, e, i), i;
+var $ = Object.defineProperty, c = (h, l, t, o) => {
+  for (var i = void 0, r = h.length - 1, p; r >= 0; r--)
+    (p = h[r]) && (i = p(l, t, i) || i);
+  return i && $(l, t, i), i;
 };
-const s = "pie-divider";
-class d extends f {
+const e = "pie-divider", s = class s extends m {
   constructor() {
-    super(...arguments), this.variant = o.variant, this.orientation = o.orientation;
+    super(...arguments), this.variant = a.variant, this.orientation = a.orientation, this.label = a.label;
   }
   render() {
-    const { variant: r, orientation: e } = this;
-    return u`
-            <hr
-                data-test-id="pie-divider"
-                aria-hidden="true"
-                class="${m({
+    const { variant: l, orientation: t, label: o } = this, i = o.length > 0 && t === "horizontal", r = {
       "c-divider": !0,
-      "c-divider--inverse": r === "inverse",
-      "c-divider--vertical": e === "vertical"
-    })}" />`;
+      "c-divider--inverse": l === "inverse",
+      "c-divider--vertical": t === "vertical",
+      "c-divider--labelled": i
+    };
+    return n`
+            ${i ? n`
+                <div
+                    id="${e}"
+                    data-test-id="${e}"
+                    class="${b(r)}"
+                    aria-labelledby="${e}-label">
+                        <hr aria-hidden="true"/>
+                        <span id="${e}-label" class="c-divider-label">${o}</span>
+                        <hr aria-hidden="true"/>
+                </div>` : n`
+                <hr id="${e}"
+                    data-test-id="${e}"
+                    class="${b(r)}"
+                    aria-hidden="true"
+                />`}`;
   }
-}
-d.styles = h(b);
-p([
-  c({ type: String }),
-  l(s, y, o.variant)
-], d.prototype, "variant", 2);
-p([
-  c({ type: String }),
-  l(s, P, o.orientation)
-], d.prototype, "orientation", 2);
-g(s, d);
+};
+s.styles = f(w);
+let d = s;
+c([
+  v({ type: String }),
+  g(e, x, a.variant)
+], d.prototype, "variant");
+c([
+  v({ type: String }),
+  g(e, y, a.orientation)
+], d.prototype, "orientation");
+c([
+  v({ type: String })
+], d.prototype, "label");
+u(e, d);
 export {
   d as PieDivider,
-  o as defaultProps,
-  P as orientations,
-  y as variants
+  a as defaultProps,
+  y as orientations,
+  x as variants
 };

package/dist/react.d.ts

@@ -17,6 +17,10 @@ export declare interface DividerProps {
      * What orientation the divider should be such as horizontal or vertical.
      */
     orientation?: typeof orientations[number];
+    /**
+     * The label text for the divider.
+     */
+    label?: string;
 }
 
 export declare const orientations: readonly ["horizontal", "vertical"];
@@ -29,6 +33,7 @@ export declare const PieDivider: React_2.ForwardRefExoticComponent<DividerProps
 declare class PieDivider_2 extends LitElement implements DividerProps {
     variant: "default" | "inverse";
     orientation: "horizontal" | "vertical";
+    label: string;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/react.js

@@ -1,21 +1,17 @@
 import * as e from "react";
 import { createComponent as i } from "@lit/react";
 import { PieDivider as r } from "./index.js";
-import { defaultProps as P, orientations as f, variants as D } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "@justeattakeaway/pie-webc-core";
+import { defaultProps as n, orientations as p, variants as v } from "./index.js";
 const t = i({
   displayName: "PieDivider",
   elementClass: r,
   react: e,
   tagName: "pie-divider",
   events: {}
-}), n = t;
+}), m = t;
 export {
-  n as PieDivider,
-  P as defaultProps,
-  f as orientations,
-  D as variants
+  m as PieDivider,
+  n as defaultProps,
+  p as orientations,
+  v as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.13.9",
+  "version": "0.14.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,13 +36,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.17.0",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -12,6 +12,10 @@ export interface DividerProps {
      * What orientation the divider should be such as horizontal or vertical.
      */
    orientation?: typeof orientations[number];
+    /**
+     * The label text for the divider.
+     */
+    label?: string;
 }
 
 export type DefaultProps = ComponentDefaultProps<DividerProps>;
@@ -19,4 +23,5 @@ export type DefaultProps = ComponentDefaultProps<DividerProps>;
 export const defaultProps: DefaultProps = {
     variant: 'default',
     orientation: 'horizontal',
+    label: '',
 };

package/src/divider.scss

@@ -1,22 +1,54 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-divider {
-    --divider-bg-color: var(--dt-color-divider-default);
-    --divider-width: 100%;
-    --divider-height: 1px;
+  --divider-bg-color: var(--dt-color-divider-default);
+  --divider-width: 100%;
+  --divider-min-width: 16px;
+  --divider-height: 1px;
+  --divider-label-max-width: 90%;
 
+  width: var(--divider-width);
+
+  &,
+  hr {
     margin: 0;
     border: 0;
-    width: var(--divider-width);
-    height: var(--divider-height);
     background-color: var(--divider-bg-color);
+  }
 
-    &.c-divider--inverse {
-        --divider-bg-color: var(--dt-color-divider-inverse);
+  &:not(.c-divider--labelled) {
+    height: var(--divider-height);
+  }
+
+  &.c-divider--labelled {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    gap: var(--dt-spacing-b);
+    background-color: transparent;
+
+    .c-divider-label {
+      max-width: var(--divider-label-max-width);
+      word-wrap: break-word;
     }
 
-    &.c-divider--vertical {
-        --divider-width: 1px;
-        --divider-height: 100%;
+    hr {
+      flex-grow: 1;
+      height: var(--divider-height);
+      min-width: var(--divider-min-width);
     }
+
+    &.c-divider--inverse {
+      color: var(--dt-color-content-inverse);
+    }
+  }
+
+  &.c-divider--inverse {
+    --divider-bg-color: var(--dt-color-divider-inverse);
+  }
+
+  &.c-divider--vertical {
+    --divider-width: 1px;
+    --divider-height: 100%;
+  }
 }

package/src/index.ts

@@ -1,4 +1,6 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    html, LitElement, unsafeCSS,
+} from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
@@ -24,20 +26,38 @@ export class PieDivider extends LitElement implements DividerProps {
     @validPropertyValues(componentSelector, orientations, defaultProps.orientation)
     public orientation = defaultProps.orientation;
 
+    @property({ type: String })
+    public label = defaultProps.label;
+
     render () {
-        const { variant, orientation } = this;
+        const { variant, orientation, label } = this;
 
+        const showLabel = label.length > 0 && orientation === 'horizontal';
         const classes = {
             'c-divider': true,
             'c-divider--inverse': variant === 'inverse',
             'c-divider--vertical': orientation === 'vertical',
+            'c-divider--labelled': showLabel,
         };
 
         return html`
-            <hr
-                data-test-id="pie-divider"
-                aria-hidden="true"
-                class="${classMap(classes)}" />`;
+            ${showLabel ? html`
+                <div
+                    id="${componentSelector}"
+                    data-test-id="${componentSelector}"
+                    class="${classMap(classes)}"
+                    aria-labelledby="${componentSelector}-label">
+                        <hr aria-hidden="true"/>
+                        <span id="${componentSelector}-label" class="c-divider-label">${label}</span>
+                        <hr aria-hidden="true"/>
+                </div>`
+            : html`
+                <hr id="${componentSelector}"
+                    data-test-id="${componentSelector}"
+                    class="${classMap(classes)}"
+                    aria-hidden="true"
+                />`
+            }`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite