@justeattakeaway/pie-assistive-text v0.10.5
@justeattakeaway/pie-assistive-text
Source Code | Design Documentation | NPM
@justeattakeaway/pie-assistive-text is a Web Component built using the Lit library. It offers a simple and accessible assistive-text component for web applications to use in forms.
Table of Contents
Installation
To install any of our web components in your application, we would suggest following the getting started guide to set up your project.
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.
Documentation
Properties
| Prop | Options | Description | Default |
|---|---|---|---|
variant | "default", "error", "success" | 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. | default |
isVisuallyHidden | true, false | If true, hides the component visually but leaves it accessible for screen readers. | false |
Slots
| Slot | Description |
|---|---|
default | The default, unnamed slot is used to pass in text to the component. |
CSS Variables
This component does not expose any CSS variables for style overrides.
Events
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
Usage Examples
For HTML:
// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/assistive-text.js'<pie-assistive-text variant="success">
Your request has been submitted.
</pie-assistive-text>
<script type="module" src="/main.js"></script>For Native JS Applications, Vue, Angular, Svelte etc.:
// import as module into a js file that will be loaded on the page where the component is used.
import '@justeattakeaway/pie-webc/components/assistive-text.js';<pie-assistive-text variant="success">
Your request has been submitted.
</pie-assistive-text>For React Applications:
import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text.js';
<PieAssistiveText variant="success">
Your request has been submitted.
</PieAssistiveText>Questions and Support
If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.
Contributing
Check out our contributing guide for more information on local development and how to run specific component tests.
5 months ago
7 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
6 months ago
7 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
11 months ago
12 months ago
8 months ago
9 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
8 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
12 months ago
7 months ago
7 months ago
6 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago