@justeattakeaway/pie-form-label 0.0.0 → 0.1.0

package/README.md

@@ -59,16 +59,18 @@ import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| for | `String` | `undefined` | Native html `for` attribute |
+| optional | `String` | `undefined` | Sets an optional text to be placed next to the main label |
+| trailing | `String` | `undefined` | Sets a trailing text at the end of the label component  |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-form-label` component:
 
 ```html
 <!-- Native HTML -->
-<pie-form-label></pie-form-label>
+<pie-form-label>Label</pie-form-label>
 
 <!-- JSX -->
-<PieFormLabel></PieFormLabel>
+<PieFormLabel>Label</PieFormLabel>
 ```
 
 ## Testing

package/dist/index.d.ts

@@ -3,9 +3,24 @@ import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface FormLabelProps {
+    /**
+     * The native for HTML attribute.
+     */
+    for?: string;
+    /**
+     * Optional text to be placed next to the main label.
+     */
+    optional?: string;
+    /**
+     * What the trailing text of the label component should be.
+     */
+    trailing?: string;
 }
 
 export declare class PieFormLabel extends LitElement implements FormLabelProps {
+    for?: string;
+    optional?: string;
+    trailing?: string;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/index.js

@@ -1,12 +1,43 @@
-import { unsafeCSS as t, LitElement as l, html as o } from "lit";
-const s = "", r = "pie-form-label";
-class e extends l {
+import { unsafeCSS as m, LitElement as b, html as s, nothing as p } from "lit";
+import { property as f } from "lit/decorators.js";
+const g = `.c-formLabel{--form-label-font-size: calc(var(--dt-font-size-14) * 1px);--form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--form-label-font-weight: var(--dt-font-weight-bold);--form-label-color: var(--dt-color-content-default);display:flex;justify-content:space-between;gap:var(--dt-spacing-d);color:var(--form-label-color);font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight);margin-block-end:var(--dt-spacing-a)}.c-formLabel-optional,.c-formLabel-trailing{color:var(--dt-color-content-subdued);font-weight:var(--dt-font-weight-regular)}.c-formLabel-optional{margin-inline-start:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}
+`;
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (a, e, o, l) => {
+  for (var t = l > 1 ? void 0 : l ? v(e, o) : e, n = a.length - 1, i; n >= 0; n--)
+    (i = a[n]) && (t = (l ? i(e, o, t) : i(t)) || t);
+  return l && t && d(e, o, t), t;
+};
+const h = "pie-form-label";
+class r extends b {
   render() {
-    return o`<h1 data-test-id="pie-form-label">Hello world!</h1>`;
+    const {
+      optional: e,
+      trailing: o
+    } = this;
+    return s`
+            <label
+                data-test-id="pie-form-label"
+                class="c-formLabel"
+                for=${this.for}>
+                    <div>
+                        <slot></slot>
+                        ${e ? s`<span class="c-formLabel-optional">${e}</span>` : p}
+                    </div>
+                    ${o ? s`<span class="c-formLabel-trailing">${o}</span>` : p}
+            </label>`;
   }
 }
-e.styles = t(s);
-customElements.define(r, e);
+r.styles = m(g);
+c([
+  f({ type: String, reflect: !0 })
+], r.prototype, "for", 2);
+c([
+  f({ type: String })
+], r.prototype, "optional", 2);
+c([
+  f({ type: String })
+], r.prototype, "trailing", 2);
+customElements.define(h, r);
 export {
-  e as PieFormLabel
+  r as PieFormLabel
 };

package/dist/react.d.ts

@@ -4,11 +4,26 @@ import type { ReactWebComponent } from '@lit-labs/react';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface FormLabelProps {
+    /**
+     * The native for HTML attribute.
+     */
+    for?: string;
+    /**
+     * Optional text to be placed next to the main label.
+     */
+    optional?: string;
+    /**
+     * What the trailing text of the label component should be.
+     */
+    trailing?: string;
 }
 
 export declare const PieFormLabel: ReactWebComponent<PieFormLabel_2, {}>;
 
 declare class PieFormLabel_2 extends LitElement implements FormLabelProps {
+    for?: string;
+    optional?: string;
+    trailing?: string;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/react.js

@@ -1,28 +1,29 @@
 import * as L from "react";
 import { PieFormLabel as E } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const g = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), F = (m, a, d, p, h) => {
-  const s = h == null ? void 0 : h[a];
-  s === void 0 || d === p ? d == null && a in HTMLElement.prototype ? m.removeAttribute(a) : m[a] = d : ((n, t, u) => {
-    let o = w.get(n);
-    o === void 0 && w.set(n, o = /* @__PURE__ */ new Map());
-    let l = o.get(t);
-    u !== void 0 ? l === void 0 ? (o.set(t, l = { handleEvent: u }), n.addEventListener(t, l)) : l.handleEvent = u : l !== void 0 && (o.delete(t), n.removeEventListener(t, l));
-  })(m, s, d);
+  const o = h == null ? void 0 : h[a];
+  o === void 0 || d === p ? d == null && a in HTMLElement.prototype ? m.removeAttribute(a) : m[a] = d : ((s, t, u) => {
+    let n = w.get(s);
+    n === void 0 && w.set(s, n = /* @__PURE__ */ new Map());
+    let l = n.get(t);
+    u !== void 0 ? l === void 0 ? (n.set(t, l = { handleEvent: u }), s.addEventListener(t, l)) : l.handleEvent = u : l !== void 0 && (n.delete(t), s.removeEventListener(t, l));
+  })(m, o, d);
 };
 function M(m = window.React, a, d, p, h) {
-  let s, n, t;
+  let o, s, t;
   if (a === void 0) {
     const r = m;
-    ({ tagName: n, elementClass: t, events: p, displayName: h } = r), s = r.react;
+    ({ tagName: s, elementClass: t, events: p, displayName: h } = r), o = r.react;
   } else
-    s = m, t = d, n = a;
-  const u = s.Component, o = s.createElement, l = new Set(Object.keys(p ?? {}));
+    o = m, t = d, s = a;
+  const u = o.Component, n = o.createElement, l = new Set(Object.keys(p ?? {}));
   class f extends u {
     constructor() {
       super(...arguments), this.o = null;
@@ -48,14 +49,14 @@ function M(m = window.React, a, d, p, h) {
       const y = { ref: this.u };
       for (const [i, c] of Object.entries(v))
         g.has(i) ? y[i === "className" ? "class" : i] = c : l.has(i) || i in t.prototype ? this.i[i] = c : y[i] = c;
-      return o(n, y);
+      return n(s, y);
     }
   }
   f.displayName = h ?? t.name;
-  const N = s.forwardRef((r, e) => o(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
+  const N = o.forwardRef((r, e) => n(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
   return N.displayName = f.displayName, N;
 }
-const R = M({
+const $ = M({
   displayName: "PieFormLabel",
   elementClass: E,
   react: L,
@@ -63,5 +64,5 @@ const R = M({
   events: {}
 });
 export {
-  R as PieFormLabel
+  $ as PieFormLabel
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,3 +1,14 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface FormLabelProps {}
+export interface FormLabelProps {
+    /**
+    * The native for HTML attribute.
+    */
+    for?: string;
+    /**
+    * Optional text to be placed next to the main label.
+    */
+    optional?: string;
+    /**
+    * What the trailing text of the label component should be.
+    */
+    trailing?: string;
+}

package/src/form-label.scss

@@ -1 +1,32 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-formLabel {
+    --form-label-font-size: #{p.font-size(--dt-font-size-14)};
+    --form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
+    --form-label-font-weight: var(--dt-font-weight-bold);
+    --form-label-color: var(--dt-color-content-default);
+
+    display: flex;
+    justify-content: space-between;
+    gap: var(--dt-spacing-d);
+    color: var(--form-label-color);
+    font-size: var(--form-label-font-size);
+    line-height: var(--form-label-line-height);
+    font-weight: var(--form-label-font-weight);
+    margin-block-end: var(--dt-spacing-a);
+}
+
+.c-formLabel-optional,
+.c-formLabel-trailing {
+    color: var(--dt-color-content-subdued);
+    font-weight: var(--dt-font-weight-regular);
+}
+
+.c-formLabel-optional {
+    margin-inline-start: var(--dt-spacing-b);
+}
+
+.c-formLabel-trailing {
+    flex-shrink: 0;
+    white-space: var(--dt-spacing-d);
+}

package/src/index.ts

@@ -1,5 +1,7 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-
+import {
+    LitElement, html, nothing, unsafeCSS,
+} from 'lit';
+import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
 import { FormLabelProps } from './defs';
 
@@ -9,8 +11,32 @@ export * from './defs';
 const componentSelector = 'pie-form-label';
 
 export class PieFormLabel extends LitElement implements FormLabelProps {
+    @property({ type: String, reflect: true })
+    public for?: string;
+
+    @property({ type: String })
+    public optional?: string;
+
+    @property({ type: String })
+    public trailing?: string;
+
     render () {
-        return html`<h1 data-test-id="pie-form-label">Hello world!</h1>`;
+        const {
+            optional,
+            trailing,
+        } = this;
+
+        return html`
+            <label
+                data-test-id="pie-form-label"
+                class="c-formLabel"
+                for=${this.for}>
+                    <div>
+                        <slot></slot>
+                        ${optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing}
+                    </div>
+                    ${trailing ? html`<span class="c-formLabel-trailing">${trailing}</span>` : nothing}
+            </label>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite