@justeattakeaway/pie-form-label 0.16.0 → 0.16.1

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 (4) hide show
  1. package/README.md +63 -58
  2. package/custom-elements.json +0 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -1,94 +1,99 @@
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.
59
51
 
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.
52
+ ### Events
63
53
 
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.
64
55
 
65
- ## Peer Dependencies
56
+ ## Usage Examples
66
57
 
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.
58
+ **For HTML:**
69
59
 
70
- ## Props
60
+ ```js
61
+ // import as module into a js file e.g. main.js
62
+ import '@justeattakeaway/pie-webc/components/form-label.js';
63
+ ```
71
64
 
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 |
65
+ ```html
66
+ <html>
67
+ <body>
68
+ <pie-form-label for="username" trailing="X of X">Label</pie-form-label>
69
+ <pie-text-input id="username" name="username" type="text"></pie-text-input>
70
+ <script type="module" src="/main.js"></script>
71
+ </body>
72
+ </html>
73
+ ```
77
74
 
78
- In your markup or JSX, you can then use these to set the properties for the `pie-form-label` component:
75
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
79
76
 
80
- ```html
81
- <!-- Native HTML -->
82
- <pie-form-label for="username">Label</pie-form-label>
77
+ ```js
78
+ // Vue templates (using Nuxt 3)
79
+ import '@justeattakeaway/pie-webc/components/form-label.js';
80
+
81
+ <pie-form-label for="username" trailing="X of X">Label</pie-form-label>
83
82
  <pie-text-input id="username" name="username" type="text"></pie-text-input>
83
+ ```
84
84
 
85
+ **For React Applications:**
85
86
 
86
- <!-- JSX -->
87
- <PieFormLabel for="username">Label</PieFormLabel>
88
- <PieTextInput id="username" name="username" type="text"></PieTextInput>
87
+ ```jsx
88
+ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
89
+
90
+ <PieFormLabel for="username" trailing="X of X">Label</PieFormLabel>
91
+ <PieTextInput id="username" name="username" type="text" />
89
92
  ```
90
93
 
91
- Note that the `for` prop should match the `id` of the input element you want to associate the label with.
94
+ ## Questions and Support
95
+
96
+ 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
97
 
93
98
  ## Contributing
94
99
 
package/custom-elements.json CHANGED
File without changes
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.1";
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.1",
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.1",
46
+ "@justeattakeaway/pie-text-input": "0.28.2",
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"