@justeattakeaway/pie-notification 0.12.5 → 0.12.7
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 +4 -59
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -8,15 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-notification)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
19
|
-
|
|
20
11
|
## pie-notification
|
|
21
12
|
|
|
22
13
|
`pie-notification` is a Web Component built using the Lit library.
|
|
@@ -34,59 +25,13 @@ npm i @justeattakeaway/pie-notification
|
|
|
34
25
|
yarn add @justeattakeaway/pie-notification
|
|
35
26
|
```
|
|
36
27
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
### Importing the component
|
|
41
|
-
|
|
42
|
-
#### JavaScript
|
|
43
|
-
```js
|
|
44
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
45
|
-
import { PieNotification } from '@justeattakeaway/pie-notification';
|
|
46
|
-
|
|
47
|
-
// If you don't need to reference the imported object, you can simply
|
|
48
|
-
// import the module which registers the component as a custom element.
|
|
49
|
-
import '@justeattakeaway/pie-notification';
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
#### React
|
|
53
|
-
```js
|
|
54
|
-
// React
|
|
55
|
-
// For React, you will need to import our React-specific component build
|
|
56
|
-
// which wraps the web component using @lit/react
|
|
57
|
-
import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
> [!NOTE]
|
|
61
|
-
> When using the React version of the component, please make sure to also
|
|
62
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
## Peer Dependencies
|
|
28
|
+
## Documentation
|
|
66
29
|
|
|
67
|
-
|
|
68
|
-
> When using `pie-notification`, 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.
|
|
30
|
+
Visit [Notification | PIE Design System](https://pie.design/components/notification) to view more information on this component.
|
|
69
31
|
|
|
70
|
-
##
|
|
32
|
+
## Questions
|
|
71
33
|
|
|
72
|
-
|
|
73
|
-
|---|---|---|---|
|
|
74
|
-
| isOpen | `Boolean` | true | When true, the notification is set to be open and visible |
|
|
75
|
-
| variant | `String`| neutral | Set the variant of the notification. Available variants: `neutral`, `neutral-alternative`, `info`, `success`, `warning`, `error` |
|
|
76
|
-
| compact | `Boolean` | false | When true, the footer aligns to the header and icons which makes the component compact. |
|
|
77
|
-
| heading | `String` | - | The text to display in the notification\'s heading. |
|
|
78
|
-
| headingLevel | `String` | h2 | The HTML heading tag to use for the notification\'s heading. Can from h2 to h6. The font size is kept the same for all heading levels. Available heading levels: `h2`,`h3`,`h4`,`h5`,`h6` |
|
|
79
|
-
| hideIcon | `Boolean` | false | Option to hide the icon regardless its variant or if user provided an icon. |
|
|
80
|
-
|
|
81
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-notification` component:
|
|
82
|
-
|
|
83
|
-
```html
|
|
84
|
-
<!-- Native HTML -->
|
|
85
|
-
<pie-notification></pie-notification>
|
|
86
|
-
|
|
87
|
-
<!-- JSX -->
|
|
88
|
-
<PieNotification></PieNotification>
|
|
89
|
-
```
|
|
34
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
90
35
|
|
|
91
36
|
## Contributing
|
|
92
37
|
|
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.12.
|
|
4
|
+
"version": "0.12.7",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@justeattakeaway/pie-icon-button": "
|
|
46
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
45
|
+
"@justeattakeaway/pie-icon-button": "1.1.0",
|
|
46
|
+
"@justeattakeaway/pie-icons-webc": "1.2.0",
|
|
47
47
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
48
48
|
},
|
|
49
49
|
"volta": {
|