@justeattakeaway/pie-notification 0.14.1 → 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/dist/index.js +1 -1
- package/package.json +1 -1
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/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