@justeattakeaway/pie-divider 0.8.0 → 0.9.1

package/README.md

@@ -13,10 +13,9 @@
 1. [Introduction](#pie-divider)
 2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
-4. [Local Development](#local-development)
-5. [Peer Dependencies](#peer-dependencies)
-6. [Props](#props)
-7. [Testing](#testing)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
 
 
 ## pie-divider
@@ -43,45 +42,34 @@ For full information on using PIE components as part of an application, check ou
 
 ### Importing the component
 
+#### JavaScript
 ```js
-// default
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
 import { PieDivider } from '@justeattakeaway/pie-divider';
 
-// react
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-divider';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using @lit-labs/react
 import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
 ```
 
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
 
 ## 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**:
-
-```bash
-yarn
-```
-
-To build the `pie-divider` package, run the following command:
-
-```bash
-yarn build --filter=pie-divider
-```
-
-If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
-
-```bash
-yarn watch --filter=pie-divider
-
-# in a separate terminal tab, run
-yarn dev --filter=pie-storybook
-```
-
-
 ## Props
 
 | Property | Type | Default | Description |
@@ -99,36 +87,6 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 <PieDivider />
 ```
 
-## Testing
+## Contributing
 
-### Browser tests
-
-To run the browser tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:browsers --filter=pie-divider
-```
-
-### Visual tests
-
-To run the visual regression tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:visual --filter=pie-divider
-```
-
-Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
-
-#### Setup via bash
-
-```bash
-export PERCY_TOKEN_PIE_DIVIDER=abcde
-```
-
-#### Setup via package.json
-
-Under scripts `test:visual` replace the environment variable with the below:
-
-```bash
-PERCY_TOKEN_PIE_DIVIDER=abcde
-```
+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/dist/react.js

@@ -1,6 +1,6 @@
-import * as E from "react";
-import { PieDivider as g } from "./index.js";
-import { orientations as k, variants as G } from "./index.js";
+import * as g from "react";
+import { PieDivider as D } from "./index.js";
+import { orientations as k, variants as A } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 /**
@@ -8,64 +8,65 @@ import "lit/decorators.js";
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const M = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), D = /* @__PURE__ */ new WeakMap(), P = (c, a, m, p, h) => {
-  const n = h == null ? void 0 : h[a];
-  n === void 0 || m === p ? m == null && a in HTMLElement.prototype ? c.removeAttribute(a) : c[a] = m : ((s, t, v) => {
-    let o = D.get(s);
-    o === void 0 && D.set(s, o = /* @__PURE__ */ new Map());
-    let r = o.get(t);
-    v !== void 0 ? r === void 0 ? (o.set(t, r = { handleEvent: v }), s.addEventListener(t, r)) : r.handleEvent = v : r !== void 0 && (o.delete(t), s.removeEventListener(t, r));
-  })(c, n, m);
+const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), b = (t, i, c, m, p) => {
+  const s = p == null ? void 0 : p[i];
+  s === void 0 || c === m ? c == null && i in HTMLElement.prototype ? t.removeAttribute(i) : t[i] = c : ((r, n, v) => {
+    let a = w.get(r);
+    a === void 0 && w.set(r, a = /* @__PURE__ */ new Map());
+    let l = a.get(n);
+    v !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: v }), r.addEventListener(n, l)) : l.handleEvent = v : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
+  })(t, s, c);
+}, M = (t, i) => {
+  typeof t == "function" ? t(i) : t.current = i;
 };
-function b(c = window.React, a, m, p, h) {
-  let n, s, t;
-  if (a === void 0) {
-    const l = c;
-    ({ tagName: s, elementClass: t, events: p, displayName: h } = l), n = l.react;
+function P(t = window.React, i, c, m, p) {
+  let s, r, n;
+  if (i === void 0) {
+    const d = t;
+    ({ tagName: r, elementClass: n, events: m, displayName: p } = d), s = d.react;
   } else
-    n = c, t = m, s = a;
-  const v = n.Component, o = n.createElement, r = new Set(Object.keys(p ?? {}));
+    s = t, n = c, r = i;
+  const v = s.Component, a = s.createElement, l = new Set(Object.keys(m ?? {}));
   class f extends v {
     constructor() {
       super(...arguments), this.o = null;
     }
     t(e) {
       if (this.o !== null)
-        for (const u in this.i)
-          P(this.o, u, this.props[u], e ? e[u] : void 0, p);
+        for (const h in this.i)
+          b(this.o, h, this.props[h], e ? e[h] : void 0, m);
     }
     componentDidMount() {
-      this.t();
+      var e;
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
     }
     componentDidUpdate(e) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...u } = this.props;
-      this.h !== e && (this.u = (i) => {
-        e !== null && ((d, w) => {
-          typeof d == "function" ? d(w) : d.current = w;
-        })(e, i), this.o = i, this.h = e;
+      const { _$Gl: e, ...h } = this.props;
+      this.h !== e && (this.u = (o) => {
+        e !== null && M(e, o), this.o = o, this.h = e;
       }), this.i = {};
-      const y = { ref: this.u };
-      for (const [i, d] of Object.entries(u))
-        M.has(i) ? y[i === "className" ? "class" : i] = d : r.has(i) || i in t.prototype ? this.i[i] = d : y[i] = d;
-      return o(s, y);
+      const u = { ref: this.u };
+      for (const [o, y] of Object.entries(h))
+        E.has(o) ? u[o === "className" ? "class" : o] = y : l.has(o) || o in n.prototype ? this.i[o] = y : u[o] = y;
+      return u.suppressHydrationWarning = !0, a(r, u);
     }
   }
-  f.displayName = h ?? t.name;
-  const N = n.forwardRef((l, e) => o(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
+  f.displayName = p ?? n.name;
+  const N = s.forwardRef((d, e) => a(f, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
   return N.displayName = f.displayName, N;
 }
-const R = b({
+const R = P({
   displayName: "PieDivider",
-  elementClass: g,
-  react: E,
+  elementClass: D,
+  react: g,
   tagName: "pie-divider",
   events: {}
 });
 export {
   R as PieDivider,
   k as orientations,
-  G as variants
+  A as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",