@justeattakeaway/pie-divider 0.6.0 → 0.8.0

package/README.md

@@ -11,17 +11,53 @@
 # Table of Contents
 
 1. [Introduction](#pie-divider)
-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-divider
+
+## pie-divider
 
 `pie-divider` 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-divider` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-divider
+
+# yarn
+$ yarn add @justeattakeaway/pie-divider
+```
+
+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 { PieDivider } from '@justeattakeaway/pie-divider';
+
+// react
+import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-divider`, 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 +81,6 @@ yarn watch --filter=pie-divider
 yarn dev --filter=pie-storybook
 ```
 
-### Importing the component
-
-```js
-// default
-import { PieDivider } from '@justeattakeaway/pie-divider';
-
-// react
-import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
-```
 
 ## Props
 
@@ -104,4 +131,4 @@ Under scripts `test:visual` replace the environment variable with the below:
 
 ```bash
 PERCY_TOKEN_PIE_DIVIDER=abcde
-```
+```

package/dist/index.d.ts

@@ -15,6 +15,9 @@ export declare interface DividerProps {
 
 export declare const orientations: readonly ["horizontal", "vertical"];
 
+/**
+ * @tagname pie-divider
+ */
 export declare class PieDivider extends LitElement implements DividerProps {
     variant: DividerProps['variant'];
     orientation: DividerProps['orientation'];

package/dist/index.js

@@ -1,26 +1,30 @@
 import { unsafeCSS as u, LitElement as f, html as g } from "lit";
 import { property as c } from "lit/decorators.js";
-const l = (n, i, r) => function(e, t) {
-  const o = `#${t}`;
-  Object.defineProperty(e, t, {
+const l = (i, e, r) => function(t, o) {
+  const n = `#${o}`;
+  Object.defineProperty(t, o, {
     get() {
-      return this[o];
+      return this[n];
     },
     set(s) {
-      const p = this[o];
-      i.includes(s) ? this[o] = s : (console.error(
-        `<${n}> Invalid value "${s}" provided for property "${t}".`,
-        `Must be one of: ${i.join(" | ")}.`,
+      const p = this[n];
+      e.includes(s) ? this[n] = s : (console.error(
+        `<${i}> Invalid value "${s}" provided for property "${o}".`,
+        `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${r}"`
-      ), this[o] = r), this.requestUpdate(t, p);
+      ), this[n] = r), this.requestUpdate(o, p);
     }
   });
-}, m = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
-`, b = ["default", "inverse"], P = ["horizontal", "vertical"];
-var $ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (n, i, r, d) => {
-  for (var e = d > 1 ? void 0 : d ? y(i, r) : i, t = n.length - 1, o; t >= 0; t--)
-    (o = n[t]) && (e = (d ? o(i, r, e) : o(e)) || e);
-  return d && e && $(i, r, e), e;
+};
+function m(i, e) {
+  customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, e);
+}
+const b = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
+`, P = ["default", "inverse"], y = ["horizontal", "vertical"];
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (i, e, r, d) => {
+  for (var t = d > 1 ? void 0 : d ? w(e, r) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (t = (d ? n(e, r, t) : n(t)) || t);
+  return d && t && $(e, r, t), t;
 };
 const v = "pie-divider";
 class a extends f {
@@ -28,29 +32,29 @@ class a extends f {
     super(...arguments), this.variant = "default", this.orientation = "horizontal";
   }
   render() {
-    const { variant: i, orientation: r } = this;
+    const { variant: e, orientation: r } = this;
     return g`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
                 class="c-divider"
-                variant=${i}
+                variant=${e}
                 orientation=${r}
             />`;
   }
 }
-a.styles = u(m);
+a.styles = u(b);
 h([
   c({ type: String }),
-  l(v, b, "default")
+  l(v, P, "default")
 ], a.prototype, "variant", 2);
 h([
   c({ type: String }),
-  l(v, P, "horizontal")
+  l(v, y, "horizontal")
 ], a.prototype, "orientation", 2);
-customElements.define(v, a);
+m(v, a);
 export {
   a as PieDivider,
-  P as orientations,
-  b as variants
+  y as orientations,
+  P as variants
 };

package/dist/react.d.ts

@@ -18,6 +18,9 @@ export declare const orientations: readonly ["horizontal", "vertical"];
 
 export declare const PieDivider: ReactWebComponent<PieDivider_2, {}>;
 
+/**
+ * @tagname pie-divider
+ */
 declare class PieDivider_2 extends LitElement implements DividerProps {
     variant: DividerProps['variant'];
     orientation: DividerProps['orientation'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.6.0",
+  "version": "0.8.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,6 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
 import { DividerProps, variants, orientations } from './defs';
 
@@ -9,6 +9,9 @@ export * from './defs';
 
 const componentSelector = 'pie-divider';
 
+/**
+ * @tagname pie-divider
+ */
 export class PieDivider extends LitElement implements DividerProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, 'default')
@@ -35,7 +38,7 @@ export class PieDivider extends LitElement implements DividerProps {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define(componentSelector, PieDivider);
+defineCustomElement(componentSelector, PieDivider);
 
 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.