@justeattakeaway/pie-form-label 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +9 -4
  2. package/custom-elements.json +5 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +36 -27
  5. package/dist/react.d.ts +1 -0
  6. package/package.json +5 -3
  7. package/src/index.ts +17 -1
package/README.md CHANGED
@@ -73,7 +73,7 @@ import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
73
73
 
74
74
  | Property | Type | Default | Description |
75
75
  |---|---|---|---|
76
- | for | `String` | `undefined` | Native html `for` attribute |
76
+ | for | `String` | `undefined` | Analog to the native html `for` attribute, it defines the association of the PIE Form Label with another PIE Web Component |
77
77
  | optional | `String` | `undefined` | Sets an optional text to be placed next to the main label |
78
78
  | trailing | `String` | `undefined` | Sets a trailing text at the end of the label component |
79
79
 
@@ -81,12 +81,17 @@ In your markup or JSX, you can then use these to set the properties for the `pie
81
81
 
82
82
  ```html
83
83
  <!-- Native HTML -->
84
- <pie-form-label>Label</pie-form-label>
84
+ <pie-form-label for="username">Label</pie-form-label>
85
+ <pie-input id="username" name="username" type="text"></pie-input>
86
+
85
87
 
86
88
  <!-- JSX -->
87
- <PieFormLabel>Label</PieFormLabel>
89
+ <PieFormLabel for="username">Label</PieFormLabel>
90
+ <PieInput id="username" name="username" type="text"></PieInput>
88
91
  ```
89
92
 
93
+ Note that the `for` prop should match the `id` of the input element you want to associate the label with.
94
+
90
95
  ## Contributing
91
96
 
92
- 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).
97
+ 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/custom-elements.json CHANGED
@@ -60,6 +60,11 @@
60
60
  "text": "TemplateResult | typeof nothing"
61
61
  }
62
62
  }
63
+ },
64
+ {
65
+ "kind": "method",
66
+ "name": "handleClick",
67
+ "privacy": "private"
63
68
  }
64
69
  ],
65
70
  "attributes": [
package/dist/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export declare class PieFormLabel extends PieFormLabel_base implements FormLabel
27
27
  optional?: string;
28
28
  trailing?: string;
29
29
  private _renderOptionalLabel;
30
+ private handleClick;
30
31
  render(): TemplateResult<1>;
31
32
  static styles: CSSResult;
32
33
  }
package/dist/index.js CHANGED
@@ -1,50 +1,59 @@
1
- import { LitElement as m, html as f, nothing as a, unsafeCSS as b } from "lit";
1
+ import { LitElement as m, html as c, nothing as a, unsafeCSS as g } from "lit";
2
2
  import { ifDefined as d } from "lit/directives/if-defined.js";
3
- import { RtlMixin as g, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
4
- import { property as p } from "lit/decorators.js";
5
- const v = `.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)}
3
+ import { RtlMixin as b, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
4
+ import { property as f } from "lit/decorators.js";
5
+ 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)}
6
6
  `;
7
- var L = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (n, e, r, o) => {
8
- for (var t = o > 1 ? void 0 : o ? u(e, r) : e, i = n.length - 1, s; i >= 0; i--)
9
- (s = n[i]) && (t = (o ? s(e, r, t) : s(t)) || t);
10
- return o && t && L(e, r, t), t;
7
+ var v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (i, e, t, l) => {
8
+ for (var o = l > 1 ? void 0 : l ? L(e, t) : e, n = i.length - 1, s; n >= 0; n--)
9
+ (s = i[n]) && (o = (l ? s(e, t, o) : s(o)) || o);
10
+ return l && o && v(e, t, o), o;
11
11
  };
12
12
  const y = "pie-form-label";
13
- class l extends g(m) {
13
+ class r extends b(m) {
14
14
  _renderOptionalLabel() {
15
15
  const { optional: e } = this;
16
- return e ? f`<span class="c-formLabel-optional">${e}</span>` : a;
16
+ return e ? c`<span class="c-formLabel-optional">${e}</span>` : a;
17
+ }
18
+ handleClick() {
19
+ if (this.for) {
20
+ const e = document.querySelector(`#${this.for}`);
21
+ if (!(e && e.focusTarget && "focus" in e.focusTarget && "click" in e.focusTarget))
22
+ return;
23
+ e.focusTarget.focus(), e.focusTarget.click();
24
+ }
17
25
  }
18
26
  render() {
19
27
  const {
20
28
  trailing: e,
21
- isRTL: r
29
+ isRTL: t
22
30
  } = this;
23
- return f`
31
+ return c`
24
32
  <label
33
+ @click=${this.handleClick}
25
34
  data-test-id="pie-form-label"
26
35
  class="c-formLabel"
27
36
  for=${d(this.for)}>
28
37
  <div>
29
- ${r ? this._renderOptionalLabel() : a}
38
+ ${t ? this._renderOptionalLabel() : a}
30
39
  <span class="c-formLabel-leading"><slot></slot></span>
31
- ${r ? a : this._renderOptionalLabel()}
40
+ ${t ? a : this._renderOptionalLabel()}
32
41
  </div>
33
- ${e ? f`<span class="c-formLabel-trailing">${e}</span>` : a}
42
+ ${e ? c`<span class="c-formLabel-trailing">${e}</span>` : a}
34
43
  </label>`;
35
44
  }
36
45
  }
37
- l.styles = b(v);
38
- c([
39
- p({ type: String, reflect: !0 })
40
- ], l.prototype, "for", 2);
41
- c([
42
- p({ type: String })
43
- ], l.prototype, "optional", 2);
44
- c([
45
- p({ type: String })
46
- ], l.prototype, "trailing", 2);
47
- h(y, l);
46
+ r.styles = g(u);
47
+ p([
48
+ f({ type: String, reflect: !0 })
49
+ ], r.prototype, "for", 2);
50
+ p([
51
+ f({ type: String })
52
+ ], r.prototype, "optional", 2);
53
+ p([
54
+ f({ type: String })
55
+ ], r.prototype, "trailing", 2);
56
+ h(y, r);
48
57
  export {
49
- l as PieFormLabel
58
+ r as PieFormLabel
50
59
  };
package/dist/react.d.ts CHANGED
@@ -30,6 +30,7 @@ declare class PieFormLabel_2 extends PieFormLabel_base implements FormLabelProps
30
30
  optional?: string;
31
31
  trailing?: string;
32
32
  private _renderOptionalLabel;
33
+ private handleClick;
33
34
  render(): TemplateResult<1>;
34
35
  static styles: CSSResult;
35
36
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-form-label",
3
3
  "description": "PIE Design System Form Label built using Web Components",
4
- "version": "0.11.0",
4
+ "version": "0.12.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -32,12 +32,14 @@
32
32
  "license": "Apache-2.0",
33
33
  "devDependencies": {
34
34
  "@custom-elements-manifest/analyzer": "0.9.0",
35
- "@justeattakeaway/pie-components-config": "0.9.0",
35
+ "@justeattakeaway/pie-components-config": "0.11.0",
36
+ "@justeattakeaway/pie-input": "^0.12.0",
37
+ "@justeattakeaway/pie-switch": "^0.27.0",
36
38
  "@justeattakeaway/pie-wrapper-react": "0.14.0",
37
39
  "cem-plugin-module-file-extensions": "0.0.5"
38
40
  },
39
41
  "dependencies": {
40
- "@justeattakeaway/pie-webc-core": "0.17.1"
42
+ "@justeattakeaway/pie-webc-core": "0.18.0"
41
43
  },
42
44
  "volta": {
43
45
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  LitElement, TemplateResult, html, nothing, unsafeCSS,
3
3
  } from 'lit';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
5
+ import { RtlMixin, defineCustomElement, PIEInputElement } from '@justeattakeaway/pie-webc-core';
6
6
  import { property } from 'lit/decorators.js';
7
7
  import styles from './form-label.scss?inline';
8
8
  import { FormLabelProps } from './defs';
@@ -31,6 +31,21 @@ export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps
31
31
  return optional ? html`<span class="c-formLabel-optional">${optional}</span>` : nothing;
32
32
  }
33
33
 
34
+ private handleClick () {
35
+ if (this.for) {
36
+ const target = document.querySelector(`#${this.for}`) as unknown as PIEInputElement;
37
+
38
+ const canReceiveFocus = target && target.focusTarget &&
39
+ 'focus' in target.focusTarget &&
40
+ 'click' in target.focusTarget;
41
+
42
+ if (!canReceiveFocus) return;
43
+
44
+ target.focusTarget.focus();
45
+ target.focusTarget.click();
46
+ }
47
+ }
48
+
34
49
  render () {
35
50
  const {
36
51
  trailing,
@@ -39,6 +54,7 @@ export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps
39
54
 
40
55
  return html`
41
56
  <label
57
+ @click=${this.handleClick}
42
58
  data-test-id="pie-form-label"
43
59
  class="c-formLabel"
44
60
  for=${ifDefined(this.for)}>