@justeattakeaway/pie-link 0.10.0 → 0.11.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 (3) hide show
  1. package/README.md +24 -67
  2. package/dist/react.js +42 -41
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -14,10 +14,8 @@
14
14
  2. [Installation](#installation)
15
15
  3. [Importing the component](#importing-the-component)
16
16
  4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Local Development](#local-development)
18
- 6. [Props](#props)
19
- 7. [Testing](#testing)
20
-
17
+ 5. [Props](#props)
18
+ 6. [Contributing](#contributing)
21
19
 
22
20
  ## pie-link
23
21
 
@@ -43,53 +41,42 @@ For full information on using PIE components as part of an application, check ou
43
41
 
44
42
  ### Importing the component
45
43
 
44
+ #### JavaScript
46
45
  ```js
47
- // default
46
+ // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
48
47
  import { PieLink } from '@justeattakeaway/pie-link';
49
48
 
50
- // react
49
+ // If you don't need to reference the imported object, you can simply
50
+ // import the module which registers the component as a custom element.
51
+ import '@justeattakeaway/pie-link';
52
+ ```
53
+
54
+ #### React
55
+ ```js
56
+ // React
57
+ // For React, you will need to import our React-specific component build
58
+ // which wraps the web component using @lit-labs/react
51
59
  import { PieLink } from '@justeattakeaway/pie-link/dist/react';
52
60
  ```
53
61
 
62
+ > [!NOTE]
63
+ > When using the React version of the component, please make sure to also
64
+ > include React as a [peer dependency](#peer-dependencies) in your project.
65
+
54
66
 
55
67
  ## Peer Dependencies
56
68
 
57
69
  > [!IMPORTANT]
58
70
  > When using `pie-link`, 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.
59
71
 
60
-
61
- ## Local development
62
-
63
- Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
64
-
65
- ```bash
66
- yarn
67
- ```
68
-
69
- To build the `pie-link` package, run the following command:
70
-
71
- ```bash
72
- yarn build --filter=pie-link
73
- ```
74
-
75
- 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:
76
-
77
- ```bash
78
- yarn watch --filter=pie-link
79
-
80
- # in a separate terminal tab, run
81
- yarn dev --filter=pie-storybook
82
- ```
83
-
84
-
85
72
  ## Props
86
73
 
87
- | Property | Type | Default | Description |
88
- | ------------- | ----------- | ------------- | ---------------------------------------------------------------------------------------------------- |
74
+ | Property | Type | Default | Description |
75
+ | ------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
89
76
  | tag | `String` | `a` | The rendered HTML element of the link, one of `tags` – `a`, `button` |
90
77
  | variant | `String` | `default` | Variant of the link, one of `variants` – `default`, `high-visibility`, `inverse` |
91
78
  | size | `String` | `medium` | Size of the link, one of `sizes` – `medium`, `small` |
92
- | underline | `String` | `default` | The underline behavior of the link, one of `underlineTypes` – `default`, `reversed`. The `reverse` type can only be used if `isStandalone` is set to `true` |
79
+ | underline | `String` | `default` | The underline behaviour of the link, one of `underlineTypes` – `default`, `reversed`. The `reverse` type can only be used if `isStandalone` is set to `true` |
93
80
  | href | `String` | `undefined` | Native html `href` attribute |
94
81
  | rel | `String` | `undefined` | Native html `rel` attribute |
95
82
  | target | `String` | `undefined` | Native html `target` attribute |
@@ -98,7 +85,7 @@ yarn dev --filter=pie-storybook
98
85
  | isStandalone | `Boolean` | `false` | If `true`, sets the link as a block element |
99
86
  | hasVisited | `Boolean` | `false` | If `true`, the link will apply the styles for the visited state |
100
87
  | iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`. Can only be used if `isStandalone` is `true` |
101
- | aria | `object` | `undefined` | The ARIA labels used for the link. |
88
+ | aria | `object` | `undefined` | The ARIA labels used for the link. |
102
89
 
103
90
  In your markup or JSX, you can then use these to set the properties for the `pie-link` component:
104
91
 
@@ -132,36 +119,6 @@ We recommend using `pie-icons-webc` when using the `icon` slot. Here is an examp
132
119
  </pie-link>
133
120
  ```
134
121
 
135
- ## Testing
136
-
137
- ### Browser tests
138
-
139
- To run the browser tests, run the following command from the root of the monorepo:
140
-
141
- ```bash
142
- yarn test:browsers --filter=pie-link
143
- ```
144
-
145
- ### Visual tests
146
-
147
- To run the visual regression tests, run the following command from the root of the monorepo:
148
-
149
- ```bash
150
- yarn test:visual --filter=pie-link
151
- ```
152
-
153
- 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.
154
-
155
- #### Setup via bash
156
-
157
- ```bash
158
- export PERCY_TOKEN_PIE_LINK=abcde
159
- ```
160
-
161
- #### Setup via package.json
162
-
163
- Under scripts `test:visual` replace the environment variable with the below:
122
+ ## Contributing
164
123
 
165
- ```bash
166
- PERCY_TOKEN_PIE_LINK=abcde
167
- ```
124
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
- import * as L from "react";
2
- import { PieLink as g } from "./index.js";
3
- import { buttonTypes as j, iconPlacements as D, sizes as G, tags as O, underlineTypes as S, variants as _ } from "./index.js";
1
+ import * as k from "react";
2
+ import { PieLink as w } from "./index.js";
3
+ import { buttonTypes as j, iconPlacements as A, sizes as D, tags as G, underlineTypes as H, variants as O } from "./index.js";
4
4
  import "lit";
5
5
  import "lit/decorators.js";
6
6
  /**
@@ -8,68 +8,69 @@ import "lit/decorators.js";
8
8
  * Copyright 2018 Google LLC
9
9
  * SPDX-License-Identifier: BSD-3-Clause
10
10
  */
11
- const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), P = (d, l, p, m, h) => {
12
- const n = h == null ? void 0 : h[l];
13
- n === void 0 || p === m ? p == null && l in HTMLElement.prototype ? d.removeAttribute(l) : d[l] = p : ((s, t, u) => {
14
- let o = w.get(s);
15
- o === void 0 && w.set(s, o = /* @__PURE__ */ new Map());
16
- let a = o.get(t);
17
- u !== void 0 ? a === void 0 ? (o.set(t, a = { handleEvent: u }), s.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (o.delete(t), s.removeEventListener(t, a));
18
- })(d, n, p);
11
+ const L = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), E = (t, i, p, d, m) => {
12
+ const o = m == null ? void 0 : m[i];
13
+ o === void 0 || p === d ? p == null && i in HTMLElement.prototype ? t.removeAttribute(i) : t[i] = p : ((r, n, h) => {
14
+ let a = g.get(r);
15
+ a === void 0 && g.set(r, a = /* @__PURE__ */ new Map());
16
+ let l = a.get(n);
17
+ h !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: h }), r.addEventListener(n, l)) : l.handleEvent = h : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
18
+ })(t, o, p);
19
+ }, b = (t, i) => {
20
+ typeof t == "function" ? t(i) : t.current = i;
19
21
  };
20
- function b(d = window.React, l, p, m, h) {
21
- let n, s, t;
22
- if (l === void 0) {
23
- const r = d;
24
- ({ tagName: s, elementClass: t, events: m, displayName: h } = r), n = r.react;
22
+ function P(t = window.React, i, p, d, m) {
23
+ let o, r, n;
24
+ if (i === void 0) {
25
+ const c = t;
26
+ ({ tagName: r, elementClass: n, events: d, displayName: m } = c), o = c.react;
25
27
  } else
26
- n = d, t = p, s = l;
27
- const u = n.Component, o = n.createElement, a = new Set(Object.keys(m ?? {}));
28
- class f extends u {
28
+ o = t, n = p, r = i;
29
+ const h = o.Component, a = o.createElement, l = new Set(Object.keys(d ?? {}));
30
+ class f extends h {
29
31
  constructor() {
30
32
  super(...arguments), this.o = null;
31
33
  }
32
34
  t(e) {
33
35
  if (this.o !== null)
34
- for (const v in this.i)
35
- P(this.o, v, this.props[v], e ? e[v] : void 0, m);
36
+ for (const u in this.i)
37
+ E(this.o, u, this.props[u], e ? e[u] : void 0, d);
36
38
  }
37
39
  componentDidMount() {
38
- this.t();
40
+ var e;
41
+ this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
39
42
  }
40
43
  componentDidUpdate(e) {
41
44
  this.t(e);
42
45
  }
43
46
  render() {
44
- const { _$Gl: e, ...v } = this.props;
45
- this.h !== e && (this.u = (i) => {
46
- e !== null && ((c, k) => {
47
- typeof c == "function" ? c(k) : c.current = k;
48
- })(e, i), this.o = i, this.h = e;
47
+ const { _$Gl: e, ...u } = this.props;
48
+ this.h !== e && (this.u = (s) => {
49
+ e !== null && b(e, s), this.o = s, this.h = e;
49
50
  }), this.i = {};
50
- const y = { ref: this.u };
51
- for (const [i, c] of Object.entries(v))
52
- E.has(i) ? y[i === "className" ? "class" : i] = c : a.has(i) || i in t.prototype ? this.i[i] = c : y[i] = c;
53
- return o(s, y);
51
+ const v = { ref: this.u };
52
+ for (const [s, y] of Object.entries(u))
53
+ L.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in n.prototype ? this.i[s] = y : v[s] = y;
54
+ return v.suppressHydrationWarning = !0, a(r, v);
54
55
  }
55
56
  }
56
- f.displayName = h ?? t.name;
57
- const N = n.forwardRef((r, e) => o(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
57
+ f.displayName = m ?? n.name;
58
+ const N = o.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
58
59
  return N.displayName = f.displayName, N;
59
60
  }
60
- const R = b({
61
+ const R = P({
61
62
  displayName: "PieLink",
62
- elementClass: g,
63
- react: L,
63
+ elementClass: w,
64
+ react: k,
64
65
  tagName: "pie-link",
65
66
  events: {}
66
67
  });
67
68
  export {
68
69
  R as PieLink,
69
70
  j as buttonTypes,
70
- D as iconPlacements,
71
- G as sizes,
72
- O as tags,
73
- S as underlineTypes,
74
- _ as variants
71
+ A as iconPlacements,
72
+ D as sizes,
73
+ G as tags,
74
+ H as underlineTypes,
75
+ O as variants
75
76
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-link",
3
3
  "description": "PIE Design System Link built using Web Components",
4
- "version": "0.10.0",
4
+ "version": "0.11.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",