@justeattakeaway/pie-notification 0.14.0 → 0.14.2
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.
- package/README.md +96 -16
- package/custom-elements.json +7 -7
- package/dist/index.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,37 +1,117 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-notification
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-notification) | [Design Documentation](https://pie.design/components/notification) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-notification)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-notification">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-notification.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-notification` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-notification` is a Web Component built using the Lit library. It offers a simple and accessible interactive notification component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
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)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
26
|
+
> 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.
|
|
27
|
+
|
|
28
|
+
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.
|
|
29
|
+
|
|
30
|
+
## Documentation
|
|
31
|
+
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|--------------------|-------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
|
|
35
|
+
| `variant` | `"neutral"`, `"neutral-alternative"`, `"info"`, `"success"`, `"warning"`, `"error"` | Sets the variant of the notification. | `"neutral"` |
|
|
36
|
+
| `position` | `"inline-content"`, `"full-width"` | Defines the proper styles, whether the component appears within the content or at the top of the interface. | `"inline-content"` |
|
|
37
|
+
| `heading` | — | The heading text of the notification. | `undefined` |
|
|
38
|
+
| `headingLevel` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the notification's heading. | `h2` |
|
|
39
|
+
| `isDismissible` | `true`, `false` | When true, allows dismissing the notification by clicking on the close button. | `false` |
|
|
40
|
+
| `isCompact` | `true`, `false` | When true, aligns the footer with the header and icons, making the component compact. | `false` |
|
|
41
|
+
| `isOpen` | `true`, `false` | When true, the notification is set to be open and visible. | `true` |
|
|
42
|
+
| `hideIcon` | `true`, `false` | When true, the icon will be hidden. | `false` |
|
|
43
|
+
| `hasStackedActions`| `true`, `false` | When true, action buttons will stack on narrow screens. | `false` |
|
|
44
|
+
| `leadingAction` | `{ text: string, ariaLabel?: string }` | An object representing the leading action of the notification. | `undefined` |
|
|
45
|
+
| `supportingAction` | `{ text: string, ariaLabel?: string }` | An object representing the supporting action of the notification. <br> The action will only render if `leadingAction` is passed. | `undefined` |
|
|
46
|
+
| `aria` | `{ close?: string, label?: string }` | The ARIA labels used for various parts of the notification. Only pass `label` if there is no heading to ensure the region is announced with a title. | `undefined` |
|
|
47
|
+
|
|
48
|
+
### Slots
|
|
49
|
+
| Slot | Description |
|
|
50
|
+
|-----------|-------------------------------------------------------------------------|
|
|
51
|
+
| `default` | The default slot is used to pass text into the notification component. |
|
|
52
|
+
| `icon` | Used to pass in an icon to the notification component. |
|
|
53
|
+
|
|
54
|
+
### CSS Variables
|
|
55
|
+
This component does not expose any CSS variables for style overrides.
|
|
56
|
+
|
|
57
|
+
### Events
|
|
58
|
+
| Event | Type | Description |
|
|
59
|
+
|------------------------------------------------|---------------|------------------------------------------------------------|
|
|
60
|
+
| `pie-notification-leading-action-click` | `CustomEvent` | Triggered when the user clicks on the leading action. |
|
|
61
|
+
| `pie-notification-supporting-action-click` | `CustomEvent` | Triggered when the user clicks on the supporting action. |
|
|
62
|
+
| `pie-notification-close` | `CustomEvent` | Triggered when the user closes the notification. |
|
|
63
|
+
| `pie-notification-open` | `CustomEvent` | Triggered when the user opens the notification. |
|
|
64
|
+
|
|
65
|
+
## Usage Examples
|
|
66
|
+
|
|
67
|
+
> When using icons, we recommend using [@justeattakeaway/pie-icons-webc](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc) to ensure consistency with the rest of the design system.
|
|
21
68
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-notification
|
|
69
|
+
**For HTML:**
|
|
24
70
|
|
|
25
|
-
|
|
71
|
+
```js
|
|
72
|
+
// import as module into a js file e.g. main.js
|
|
73
|
+
import '@justeattakeaway/pie-webc/components/notification.js'
|
|
74
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
26
75
|
```
|
|
27
76
|
|
|
28
|
-
|
|
77
|
+
```html
|
|
78
|
+
<!-- pass js file into <script> tag -->
|
|
79
|
+
<pie-notification title="Heading">
|
|
80
|
+
<icon-placeholder slot="icon"></icon-placeholder>
|
|
81
|
+
Content
|
|
82
|
+
</pie-notification>
|
|
83
|
+
<script type="module" src="/main.js"></script>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
87
|
+
|
|
88
|
+
```js
|
|
89
|
+
// Vue templates (using Nuxt 3)
|
|
90
|
+
import '@justeattakeaway/pie-webc/components/notification.js';
|
|
91
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
92
|
+
|
|
93
|
+
<pie-notification title="Heading">
|
|
94
|
+
<icon-placeholder slot="icon"></icon-placeholder>
|
|
95
|
+
Content
|
|
96
|
+
</pie-notification>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**For React Applications:**
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js';
|
|
103
|
+
import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/IconPlaceholder.js';
|
|
29
104
|
|
|
30
|
-
Visit [Notification | PIE Design System](https://pie.design/components/notification) to view more information on this component.
|
|
31
105
|
|
|
32
|
-
|
|
106
|
+
<PieNotification title="Heading">
|
|
107
|
+
<IconPlaceholder slot="icon"></IconPlaceholder>
|
|
108
|
+
Content
|
|
109
|
+
</PieNotification>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Questions and Support
|
|
33
113
|
|
|
34
|
-
|
|
114
|
+
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).
|
|
35
115
|
|
|
36
116
|
## Contributing
|
|
37
117
|
|
package/custom-elements.json
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"type": {
|
|
83
83
|
"text": "DefaultProps"
|
|
84
84
|
},
|
|
85
|
-
"default": "{\n variant: 'neutral',\n position: 'inline-content',\n isDismissible: false,\n isCompact: false,\n headingLevel: 'h2',\n hideIcon: false,\n isOpen: true,\n hasStackedActions: false,\n}"
|
|
85
|
+
"default": "{\r\n variant: 'neutral',\r\n position: 'inline-content',\r\n isDismissible: false,\r\n isCompact: false,\r\n headingLevel: 'h2',\r\n hideIcon: false,\r\n isOpen: true,\r\n hasStackedActions: false,\r\n}"
|
|
86
86
|
}
|
|
87
87
|
],
|
|
88
88
|
"exports": [
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
"kind": "method",
|
|
283
283
|
"name": "renderFooter",
|
|
284
284
|
"privacy": "private",
|
|
285
|
-
"description": "Template for the footer area\nCalled within the main render function."
|
|
285
|
+
"description": "Template for the footer area\r\nCalled within the main render function."
|
|
286
286
|
},
|
|
287
287
|
{
|
|
288
288
|
"kind": "method",
|
|
@@ -293,7 +293,7 @@
|
|
|
293
293
|
"text": "TemplateResult"
|
|
294
294
|
}
|
|
295
295
|
},
|
|
296
|
-
"description": "Template for the header area\nCalled within the main render function."
|
|
296
|
+
"description": "Template for the header area\r\nCalled within the main render function."
|
|
297
297
|
},
|
|
298
298
|
{
|
|
299
299
|
"kind": "method",
|
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
"text": "TemplateResult | typeof nothing"
|
|
311
311
|
}
|
|
312
312
|
},
|
|
313
|
-
"description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\nCalled within the main render function."
|
|
313
|
+
"description": "Template for the heading icon area.\r\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\r\nCalled within the main render function."
|
|
314
314
|
},
|
|
315
315
|
{
|
|
316
316
|
"kind": "method",
|
|
@@ -321,13 +321,13 @@
|
|
|
321
321
|
"text": "TemplateResult"
|
|
322
322
|
}
|
|
323
323
|
},
|
|
324
|
-
"description": "Template for the close button element. Called within the\nmain render function."
|
|
324
|
+
"description": "Template for the close button element. Called within the\r\nmain render function."
|
|
325
325
|
},
|
|
326
326
|
{
|
|
327
327
|
"kind": "method",
|
|
328
328
|
"name": "handleCloseButton",
|
|
329
329
|
"privacy": "private",
|
|
330
|
-
"description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
|
|
330
|
+
"description": "It handles the action when user clicks in the close button.\r\nAlso triggers an event when is executed."
|
|
331
331
|
},
|
|
332
332
|
{
|
|
333
333
|
"kind": "method",
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
}
|
|
342
342
|
}
|
|
343
343
|
],
|
|
344
|
-
"description": "It handles the action button action.\nAlso triggers an event according to its `actionType`."
|
|
344
|
+
"description": "It handles the action button action.\r\nAlso triggers an event according to its `actionType`."
|
|
345
345
|
},
|
|
346
346
|
{
|
|
347
347
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -16,7 +16,7 @@ const u = class u extends A {
|
|
|
16
16
|
this.getAttribute("v") || this.setAttribute("v", u.v);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
u.v = "0.14.
|
|
19
|
+
u.v = "0.14.2";
|
|
20
20
|
let $ = u;
|
|
21
21
|
const S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], E = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], t = "pie-notification", l = "c-notification", B = `${t}-close`, L = `${t}-open`, D = `${t}-leading-action-click`, V = `${t}-supporting-action-click`, d = {
|
|
22
22
|
variant: "neutral",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-notification",
|
|
3
3
|
"description": "PIE Design System Notification built using Web Components",
|
|
4
|
-
"version": "0.14.
|
|
4
|
+
"version": "0.14.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-icon-button": "1.5.
|
|
50
|
-
"@justeattakeaway/pie-icons-webc": "1.10.
|
|
51
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "1.5.1",
|
|
50
|
+
"@justeattakeaway/pie-icons-webc": "1.10.1",
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
52
52
|
},
|
|
53
53
|
"volta": {
|
|
54
54
|
"extends": "../../../package.json"
|