@justeattakeaway/pie-form-label 0.16.0 → 0.16.2

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 (3) hide show
  1. package/README.md +59 -58
  2. package/dist/index.js +1 -1
  3. package/package.json +4 -4
package/README.md CHANGED
@@ -1,94 +1,95 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
3
- </p>
1
+ # @justeattakeaway/pie-form-label
2
+ [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-form-label) | [Design Documentation](https://pie.design/components/form-label) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-form-label)
4
3
 
5
- <p align="center">
4
+ <p>
6
5
  <a href="https://www.npmjs.com/@justeattakeaway/pie-form-label">
7
6
  <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-form-label.svg">
8
7
  </a>
9
8
  </p>
10
9
 
11
- # Table of Contents
12
-
13
- 1. [Introduction](#pie-form-label)
14
- 2. [Installation](#installation)
15
- 3. [Importing the component](#importing-the-component)
16
- 4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Props](#props)
18
- 6. [Contributing](#contributing)
19
-
20
- ## pie-form-label
10
+ `@justeattakeaway/pie-form-label` is a Web Component built using the Lit library. It provides a flexible and accessible label component for form inputs.
21
11
 
22
- `pie-form-label` is a Web Component built using the Lit library.
12
+ ## Table of Contents
23
13
 
24
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
14
+ - [Installation](#installation)
15
+ - [Documentation](#documentation)
16
+ - [Properties](#properties)
17
+ - [Slots](#slots)
18
+ - [CSS Variables](#css-variables)
19
+ - [Events](#events)
20
+ - [Usage Examples](#usage-examples)
21
+ - [Questions and Support](#questions-and-support)
22
+ - [Contributing](#contributing)
25
23
 
24
+ ## Installation
26
25
 
27
26
  ## Installation
28
27
 
29
- To install `pie-form-label` in your application, run the following on your command line:
28
+ > To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
30
29
 
31
- ```bash
32
- npm i @justeattakeaway/pie-form-label
30
+ Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
33
31
 
34
- yarn add @justeattakeaway/pie-form-label
35
- ```
32
+ ## Documentation
36
33
 
37
- 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).
34
+ ### Properties
38
35
 
36
+ | Prop | Options | Description | Default |
37
+ |------------|---------|-----------------------------------------------------------|-------------|
38
+ | `for` | — | The native `for` HTML attribute. | `undefined` |
39
+ | `optional` | — | Optional text to be placed next to the main label. | `undefined` |
40
+ | `trailing` | — | What the trailing text of the label component should be. | `undefined` |
39
41
 
40
- ### Importing the component
42
+ ### Slots
41
43
 
42
- #### JavaScript
43
- ```js
44
- // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
45
- import { PieFormLabel } from '@justeattakeaway/pie-form-label';
44
+ | Slot | Description |
45
+ |----------|---------------------------------------------------------------------|
46
+ | `default`| The default, unnamed slot is used to pass in text to the component. |
46
47
 
47
- // If you don't need to reference the imported object, you can simply
48
- // import the module which registers the component as a custom element.
49
- import '@justeattakeaway/pie-form-label';
50
- ```
48
+ ### CSS Variables
51
49
 
52
- #### React
53
- ```js
54
- // React
55
- // For React, you will need to import our React-specific component build
56
- // which wraps the web component using ​@lit/react
57
- import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
58
- ```
50
+ This component does not expose any CSS variables for style overrides.
51
+
52
+ ### Events
59
53
 
60
- > [!NOTE]
61
- > When using the React version of the component, please make sure to also
62
- > include React as a [peer dependency](#peer-dependencies) in your project.
54
+ This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
63
55
 
56
+ ## Usage Examples
64
57
 
65
- ## Peer Dependencies
58
+ **For HTML:**
66
59
 
67
- > [!IMPORTANT]
68
- > 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.
60
+ ```js
61
+ // import as module into a js file e.g. main.js
62
+ import '@justeattakeaway/pie-webc/components/form-label.js';
63
+ ```
69
64
 
70
- ## Props
65
+ ```html
66
+ <pie-form-label for="username" trailing="X of X">Label</pie-form-label>
67
+ <pie-text-input id="username" name="username" type="text"></pie-text-input>
68
+ <script type="module" src="/main.js"></script>
69
+ ```
71
70
 
72
- | Property | Type | Default | Description |
73
- |---|---|---|---|
74
- | for | `String` | `undefined` | Analog to the native html `for` attribute, it defines the association of the PIE Form Label with another PIE Web Component |
75
- | optional | `String` | `undefined` | Sets an optional text to be placed next to the main label |
76
- | trailing | `String` | `undefined` | Sets a trailing text at the end of the label component |
71
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
77
72
 
78
- In your markup or JSX, you can then use these to set the properties for the `pie-form-label` component:
73
+ ```js
74
+ // Vue templates (using Nuxt 3)
75
+ import '@justeattakeaway/pie-webc/components/form-label.js';
79
76
 
80
- ```html
81
- <!-- Native HTML -->
82
- <pie-form-label for="username">Label</pie-form-label>
77
+ <pie-form-label for="username" trailing="X of X">Label</pie-form-label>
83
78
  <pie-text-input id="username" name="username" type="text"></pie-text-input>
79
+ ```
84
80
 
81
+ **For React Applications:**
85
82
 
86
- <!-- JSX -->
87
- <PieFormLabel for="username">Label</PieFormLabel>
88
- <PieTextInput id="username" name="username" type="text"></PieTextInput>
83
+ ```jsx
84
+ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
85
+
86
+ <PieFormLabel for="username" trailing="X of X">Label</PieFormLabel>
87
+ <PieTextInput id="username" name="username" type="text" />
89
88
  ```
90
89
 
91
- Note that the `for` prop should match the `id` of the input element you want to associate the label with.
90
+ ## Questions and Support
91
+
92
+ If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
92
93
 
93
94
  ## Contributing
94
95
 
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ const o = class o extends b {
7
7
  this.getAttribute("v") || this.setAttribute("v", o.v);
8
8
  }
9
9
  };
10
- o.v = "0.16.0";
10
+ o.v = "0.16.2";
11
11
  let d = o;
12
12
  const L = "*,*: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)}";
13
13
  var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, s, a) => {
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.16.0",
4
+ "version": "0.16.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -42,13 +42,13 @@
42
42
  "@justeattakeaway/pie-components-config": "0.20.1",
43
43
  "@justeattakeaway/pie-css": "0.16.0",
44
44
  "@justeattakeaway/pie-monorepo-utils": "0.5.1",
45
- "@justeattakeaway/pie-switch": "1.4.0",
46
- "@justeattakeaway/pie-text-input": "0.28.0",
45
+ "@justeattakeaway/pie-switch": "1.4.3",
46
+ "@justeattakeaway/pie-text-input": "0.28.4",
47
47
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
48
48
  "cem-plugin-module-file-extensions": "0.0.5"
49
49
  },
50
50
  "dependencies": {
51
- "@justeattakeaway/pie-webc-core": "0.26.0"
51
+ "@justeattakeaway/pie-webc-core": "1.0.0"
52
52
  },
53
53
  "volta": {
54
54
  "extends": "../../../package.json"