@justeattakeaway/pie-form-label 0.3.0 → 0.5.0

package/README.md

@@ -11,17 +11,52 @@
 # Table of Contents
 
 1. [Introduction](#pie-form-label)
-2. [Local Development](#local-development)
+2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
-4. [Props](#props)
-5. [Testing](#testing)
+4. [Local Development](#local-development)
+5. [Peer Dependencies](#peer-dependencies)
+6. [Props](#props)
+7. [Testing](#testing)
 
-# pie-form-label
+## pie-form-label
 
 `pie-form-label` is a Web Component built using the Lit library.
 
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
+
+## Installation
+
+To install `pie-form-label` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-form-label
+
+# yarn
+$ 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).
+
+
+### Importing the component
+
+```js
+// default
+import { PieFormLabel } from '@justeattakeaway/pie-form-label';
+
+// react
+import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!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**:
@@ -45,15 +80,6 @@ yarn watch --filter=pie-form-label
 yarn dev --filter=pie-storybook
 ```
 
-### Importing the component
-
-```js
-// default
-import { PieFormLabel } from '@justeattakeaway/pie-form-label';
-
-// react
-import { PieFormLabel } from '@justeattakeaway/pie-form-label/dist/react';
-```
 
 ## Props
 
@@ -105,4 +131,4 @@ Under scripts `test:visual` replace the environment variable with the below:
 
 ```bash
 PERCY_TOKEN_PIE_FORM_LABEL=abcde
-```
+```

package/dist/index.d.ts

@@ -17,6 +17,9 @@ export declare interface FormLabelProps {
     trailing?: string;
 }
 
+/**
+ * @tagname pie-form-label
+ */
 export declare class PieFormLabel extends LitElement implements FormLabelProps {
     for?: string;
     optional?: string;

package/dist/index.js

@@ -1,18 +1,21 @@
 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) {
+  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)}
 `;
-var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (a, e, o, l) => {
-  for (var t = l > 1 ? void 0 : l ? v(e, o) : e, n = a.length - 1, i; n >= 0; n--)
-    (i = a[n]) && (t = (l ? i(e, o, t) : i(t)) || t);
-  return l && t && d(e, o, t), t;
+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;
 };
-const h = "pie-form-label";
+const u = "pie-form-label";
 class r extends b {
   render() {
     const {
       optional: e,
-      trailing: o
+      trailing: n
     } = this;
     return s`
             <label
@@ -23,7 +26,7 @@ class r extends b {
                         <slot></slot>
                         ${e ? s`<span class="c-formLabel-optional">${e}</span>` : p}
                     </div>
-                    ${o ? s`<span class="c-formLabel-trailing">${o}</span>` : p}
+                    ${n ? s`<span class="c-formLabel-trailing">${n}</span>` : p}
             </label>`;
   }
 }
@@ -37,7 +40,7 @@ c([
 c([
   f({ type: String })
 ], r.prototype, "trailing", 2);
-customElements.define(h, r);
+d(u, r);
 export {
   r as PieFormLabel
 };

package/dist/react.d.ts

@@ -20,6 +20,9 @@ export declare interface FormLabelProps {
 
 export declare const PieFormLabel: ReactWebComponent<PieFormLabel_2, {}>;
 
+/**
+ * @tagname pie-form-label
+ */
 declare class PieFormLabel_2 extends LitElement implements FormLabelProps {
     for?: string;
     optional?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.9.1"
+    "@justeattakeaway/pie-webc-core": "0.11.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,7 @@
 import {
     LitElement, html, nothing, unsafeCSS,
 } from 'lit';
+import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
 import { FormLabelProps } from './defs';
@@ -10,6 +11,9 @@ export * from './defs';
 
 const componentSelector = 'pie-form-label';
 
+/**
+ * @tagname pie-form-label
+ */
 export class PieFormLabel extends LitElement implements FormLabelProps {
     @property({ type: String, reflect: true })
     public for?: string;
@@ -43,7 +47,7 @@ export class PieFormLabel extends LitElement implements FormLabelProps {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define(componentSelector, PieFormLabel);
+defineCustomElement(componentSelector, PieFormLabel);
 
 declare global {
     interface HTMLElementTagNameMap {

package/LICENSE

@@ -1,17 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-Copyright (c) Just Eat Takeaway.com
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.