@justeattakeaway/pie-form-label 0.5.0 → 0.7.0

package/README.md

@@ -16,7 +16,7 @@
 4. [Local Development](#local-development)
 5. [Peer Dependencies](#peer-dependencies)
 6. [Props](#props)
-7. [Testing](#testing)
+7. [Contributing](#contributing)
 
 ## pie-form-label
 
@@ -56,31 +56,6 @@ import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
 > [!IMPORTANT]
 > When using `pie-form-label`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
 
-
-## Local development
-
-Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
-
-```bash
-yarn
-```
-
-To build the `pie-form-label` package, run the following command:
-
-```bash
-yarn build --filter=pie-form-label
-```
-
-If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
-
-```bash
-yarn watch --filter=pie-form-label
-
-# in a separate terminal tab, run
-yarn dev --filter=pie-storybook
-```
-
-
 ## Props
 
 | Property | Type | Default | Description |
@@ -99,36 +74,6 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 <PieFormLabel>Label</PieFormLabel>
 ```
 
-## Testing
-
-### Browser tests
-
-To run the browser tests, run the following command from the root of the monorepo:
+## Contributing
 
-```bash
-yarn test:browsers --filter=pie-form-label
-```
-
-### Visual tests
-
-To run the visual regression tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:visual --filter=pie-form-label
-```
-
-Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
-
-#### Setup via bash
-
-```bash
-export PERCY_TOKEN_PIE_FORM_LABEL=abcde
-```
-
-#### Setup via package.json
-
-Under scripts `test:visual` replace the environment variable with the below:
-
-```bash
-PERCY_TOKEN_PIE_FORM_LABEL=abcde
-```
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface FormLabelProps {
     /**
@@ -20,12 +20,17 @@ export declare interface FormLabelProps {
 /**
  * @tagname pie-form-label
  */
-export declare class PieFormLabel extends LitElement implements FormLabelProps {
+export declare class PieFormLabel extends PieFormLabel_base implements FormLabelProps {
     for?: string;
     optional?: string;
     trailing?: string;
+    private _renderOptionalLabel;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare const PieFormLabel_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
 export { }

package/dist/index.js

@@ -1,46 +1,68 @@
-import { unsafeCSS as m, LitElement as b, html as s, nothing as p } from "lit";
-import { property as f } from "lit/decorators.js";
-function d(t, e) {
+import { isServer as d, unsafeCSS as m, html as f, nothing as i, LitElement as b } from "lit";
+import { property as c } from "lit/decorators.js";
+const g = (t) => {
+  class e extends t {
+    /**
+     * A getter to determine whether the text direction is right-to-left (RTL).
+     * If the `dir` property is present on the component, it will be used to determine the text direction.
+     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
+     * from the document's root element. This inference is not available during SSR.
+     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
+     *
+     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
+     */
+    get isRTL() {
+      return this.dir ? this.dir === "rtl" : !d && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+    }
+  }
+  return e;
+};
+function h(t, e) {
   customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
 }
-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)}
+const u = `.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;align-items:flex-end;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-leading{margin-inline-end:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}
 `;
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (t, e, n, l) => {
-  for (var o = l > 1 ? void 0 : l ? v(e, n) : e, a = t.length - 1, i; a >= 0; a--)
-    (i = t[a]) && (o = (l ? i(e, n, o) : i(o)) || o);
-  return l && o && h(e, n, o), o;
+var v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (t, e, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? L(e, n) : e, a = t.length - 1, s; a >= 0; a--)
+    (s = t[a]) && (r = (o ? s(e, n, r) : s(r)) || r);
+  return o && r && v(e, n, r), r;
 };
-const u = "pie-form-label";
-class r extends b {
+const y = "pie-form-label";
+class l extends g(b) {
+  _renderOptionalLabel() {
+    const { optional: e } = this;
+    return e ? f`<span class="c-formLabel-optional">${e}</span>` : i;
+  }
   render() {
     const {
-      optional: e,
-      trailing: n
+      trailing: e,
+      isRTL: n
     } = this;
-    return s`
+    return f`
             <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}
+                        ${n ? this._renderOptionalLabel() : i}
+                        <span class="c-formLabel-leading"><slot></slot></span>
+                        ${n ? i : this._renderOptionalLabel()}
                     </div>
-                    ${n ? s`<span class="c-formLabel-trailing">${n}</span>` : p}
+                    ${e ? f`<span class="c-formLabel-trailing">${e}</span>` : i}
             </label>`;
   }
 }
-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);
-d(u, r);
+l.styles = m(u);
+p([
+  c({ type: String, reflect: !0 })
+], l.prototype, "for", 2);
+p([
+  c({ type: String })
+], l.prototype, "optional", 2);
+p([
+  c({ type: String })
+], l.prototype, "trailing", 2);
+h(y, l);
 export {
-  r as PieFormLabel
+  l as PieFormLabel
 };

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface FormLabelProps {
     /**
@@ -23,12 +23,17 @@ export declare const PieFormLabel: ReactWebComponent<PieFormLabel_2, {}>;
 /**
  * @tagname pie-form-label
  */
-declare class PieFormLabel_2 extends LitElement implements FormLabelProps {
+declare class PieFormLabel_2 extends PieFormLabel_base implements FormLabelProps {
     for?: string;
     optional?: string;
     trailing?: string;
+    private _renderOptionalLabel;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare const PieFormLabel_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
 export { }

package/package.json

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

package/src/form-label.scss

@@ -8,6 +8,7 @@
 
     display: flex;
     justify-content: space-between;
+    align-items: flex-end;
     gap: var(--dt-spacing-d);
     color: var(--form-label-color);
     font-size: var(--form-label-font-size);
@@ -22,8 +23,8 @@
     font-weight: var(--dt-font-weight-regular);
 }
 
-.c-formLabel-optional {
-    margin-inline-start: var(--dt-spacing-b);
+.c-formLabel-leading {
+    margin-inline-end: var(--dt-spacing-b);
 }
 
 .c-formLabel-trailing {

package/src/index.ts

@@ -1,7 +1,7 @@
 import {
-    LitElement, html, nothing, unsafeCSS,
+    LitElement, TemplateResult, html, nothing, unsafeCSS,
 } from 'lit';
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
 import { FormLabelProps } from './defs';
@@ -14,7 +14,7 @@ const componentSelector = 'pie-form-label';
 /**
  * @tagname pie-form-label
  */
-export class PieFormLabel extends LitElement implements FormLabelProps {
+export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps {
     @property({ type: String, reflect: true })
     public for?: string;
 
@@ -24,10 +24,16 @@ export class PieFormLabel extends LitElement implements FormLabelProps {
     @property({ type: String })
     public trailing?: string;
 
+    private _renderOptionalLabel (): TemplateResult | typeof nothing {
+        const { optional } = this;
+
+        return optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing;
+    }
+
     render () {
         const {
-            optional,
             trailing,
+            isRTL,
         } = this;
 
         return html`
@@ -36,8 +42,9 @@ export class PieFormLabel extends LitElement implements FormLabelProps {
                 class="c-formLabel"
                 for=${this.for}>
                     <div>
-                        <slot></slot>
-                        ${optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing}
+                        ${isRTL ? this._renderOptionalLabel() : nothing}
+                        <span class="c-formLabel-leading"><slot></slot></span>
+                        ${!isRTL ? this._renderOptionalLabel() : nothing}
                     </div>
                     ${trailing ? html`<span class="c-formLabel-trailing">${trailing}</span>` : nothing}
             </label>`;