@justeattakeaway/pie-assistive-text 0.4.0 → 0.5.0
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 +6 -57
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -30,71 +30,20 @@ This component can be easily integrated into various frontend frameworks and cus
|
|
|
30
30
|
To install `pie-assistive-text` in your application, run the following on your command line:
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
|
-
|
|
34
|
-
$ npm i @justeattakeaway/pie-assistive-text
|
|
33
|
+
npm i @justeattakeaway/pie-assistive-text
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
$ yarn add @justeattakeaway/pie-assistive-text
|
|
35
|
+
yarn add @justeattakeaway/pie-assistive-text
|
|
38
36
|
```
|
|
39
37
|
|
|
40
38
|
For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
|
|
41
39
|
|
|
40
|
+
## Documentation
|
|
42
41
|
|
|
43
|
-
|
|
42
|
+
Visit [Assistive Text | PIE Design System](https://pie.design/components/assistive-text/code) to view more information on this component.
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
48
|
-
import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text';
|
|
44
|
+
## Questions
|
|
49
45
|
|
|
50
|
-
|
|
51
|
-
// import the module which registers the component as a custom element.
|
|
52
|
-
import '@justeattakeaway/pie-assistive-text';
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
#### React
|
|
56
|
-
```js
|
|
57
|
-
// React
|
|
58
|
-
// For React, you will need to import our React-specific component build
|
|
59
|
-
// which wraps the web component using @lit/react
|
|
60
|
-
import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react';
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
> [!NOTE]
|
|
64
|
-
> When using the React version of the component, please make sure to also
|
|
65
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
66
|
-
|
|
67
|
-
## Peer Dependencies
|
|
68
|
-
|
|
69
|
-
> [!IMPORTANT]
|
|
70
|
-
> When using `pie-assistive-text`, 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.
|
|
71
|
-
## Props
|
|
72
|
-
|
|
73
|
-
| Property | Type | Default | Description |
|
|
74
|
-
|---|---|---|---|
|
|
75
|
-
| `variant` | `string` | `default` | Sets the type of message displayed to one of three potential options: `error`, `success` or `default`. `error` and `success` include an icon and are used for validation messages. `default` provides users with extra context and guidance. |
|
|
76
|
-
|
|
77
|
-
## Slots
|
|
78
|
-
|
|
79
|
-
| Property | Description |
|
|
80
|
-
|---|---|
|
|
81
|
-
| `default` | The default, unnamed slot is used to pass in text to the component. |
|
|
82
|
-
|
|
83
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-assistive-text` component:
|
|
84
|
-
|
|
85
|
-
```html
|
|
86
|
-
<!-- Native HTML -->
|
|
87
|
-
<pie-assistive-text
|
|
88
|
-
variant="success">
|
|
89
|
-
Your request has been submitted.
|
|
90
|
-
</pie-assistive-text>
|
|
91
|
-
|
|
92
|
-
<!-- JSX -->
|
|
93
|
-
<PieAssistiveText
|
|
94
|
-
variant="error">
|
|
95
|
-
Password contains too few characters.
|
|
96
|
-
</PieAssistiveText>
|
|
97
|
-
```
|
|
46
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
98
47
|
|
|
99
48
|
## Contributing
|
|
100
49
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-assistive-text",
|
|
3
3
|
"description": "PIE Design System Assistive Text built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.5.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"**/*.d.ts"
|
|
14
14
|
],
|
|
15
15
|
"pieMetadata": {
|
|
16
|
-
"componentStatus": "
|
|
16
|
+
"componentStatus": "beta"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "run -T vite build",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-icons-webc": "0.24.
|
|
43
|
+
"@justeattakeaway/pie-icons-webc": "0.24.1",
|
|
44
44
|
"@justeattakeaway/pie-webc-core": "0.23.0"
|
|
45
45
|
},
|
|
46
46
|
"volta": {
|