@justeattakeaway/pie-form-label 0.13.5 → 0.14.0

package/README.md

@@ -29,11 +29,9 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-form-label` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-form-label
+npm i @justeattakeaway/pie-form-label
 
-# yarn
-$ yarn add @justeattakeaway/pie-form-label
+yarn add @justeattakeaway/pie-form-label
 ```
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
@@ -82,12 +80,12 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 ```html
 <!-- Native HTML -->
 <pie-form-label for="username">Label</pie-form-label>
-<pie-input id="username" name="username" type="text"></pie-input>
+<pie-text-input id="username" name="username" type="text"></pie-text-input>
 
 
 <!-- JSX -->
 <PieFormLabel for="username">Label</PieFormLabel>
-<PieInput id="username" name="username" type="text"></PieInput>
+<PieTextInput id="username" name="username" type="text"></PieTextInput>
 ```
 
 Note that the `for` prop should match the `id` of the input element you want to associate the label with.

package/dist/index.js

@@ -1,19 +1,19 @@
-import { LitElement as g, html as c, nothing as i, unsafeCSS as m } from "lit";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { RtlMixin as d, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
+import { LitElement as d, html as c, nothing as a, unsafeCSS as g } from "lit";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { RtlMixin as b, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
 import { property as f } from "lit/decorators.js";
 const u = `*,*:after,*:before{box-sizing:inherit}.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 v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (a, e, t, l) => {
-  for (var r = l > 1 ? void 0 : l ? L(e, t) : e, n = a.length - 1, s; n >= 0; n--)
-    (s = a[n]) && (r = (l ? s(e, t, r) : s(r)) || r);
+var v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (i, e, t, l) => {
+  for (var r = l > 1 ? void 0 : l ? L(e, t) : e, n = i.length - 1, s; n >= 0; n--)
+    (s = i[n]) && (r = (l ? s(e, t, r) : s(r)) || r);
   return l && r && v(e, t, r), r;
 };
 const y = "pie-form-label";
-class o extends d(g) {
+class o extends b(d) {
   _renderOptionalLabel() {
     const { optional: e } = this;
-    return e ? c`<span class="c-formLabel-optional">${e}</span>` : i;
+    return e ? c`<span class="c-formLabel-optional">${e}</span>` : a;
   }
   handleClick() {
     if (this.for) {
@@ -33,17 +33,17 @@ class o extends d(g) {
                 @click=${this.handleClick}
                 data-test-id="pie-form-label"
                 class="c-formLabel"
-                for=${b(this.for)}>
+                for=${m(this.for)}>
                     <div>
-                        ${t ? this._renderOptionalLabel() : i}
-                        <span class="c-formLabel-leading"><slot></slot></span>
-                        ${t ? i : this._renderOptionalLabel()}
+                        ${t ? this._renderOptionalLabel() : a}
+                        <span class="c-formLabel-leading" data-test-id="pie-form-label-leading"><slot></slot></span>
+                        ${t ? a : this._renderOptionalLabel()}
                     </div>
-                    ${e ? c`<span class="c-formLabel-trailing">${e}</span>` : i}
+                    ${e ? c`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${e}</span>` : a}
             </label>`;
   }
 }
-o.styles = m(u);
+o.styles = g(u);
 p([
   f({ type: String, reflect: !0 })
 ], o.prototype, "for", 2);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.13.5",
+  "version": "0.14.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-input": "^0.19.1",
-    "@justeattakeaway/pie-switch": "^0.29.5",
-    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "@justeattakeaway/pie-switch": "0.29.11",
+    "@justeattakeaway/pie-text-input": "0.23.2",
+    "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -60,10 +60,10 @@ export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps
                 for=${ifDefined(this.for)}>
                     <div>
                         ${isRTL ? this._renderOptionalLabel() : nothing}
-                        <span class="c-formLabel-leading"><slot></slot></span>
+                        <span class="c-formLabel-leading" data-test-id="pie-form-label-leading"><slot></slot></span>
                         ${!isRTL ? this._renderOptionalLabel() : nothing}
                     </div>
-                    ${trailing ? html`<span class="c-formLabel-trailing">${trailing}</span>` : nothing}
+                    ${trailing ? html`<span class="c-formLabel-trailing" data-test-id="pie-form-label-trailing">${trailing}</span>` : nothing}
             </label>`;
     }