@justeattakeaway/pie-assistive-text
Advanced tools
@justeattakeaway/pie-assistive-text - npm Package Compare versions
Comparing version 0.0.0-snapshot-release-20240531152027 to 0.0.0-snapshot-release-20240709100447
@@ -29,3 +29,3 @@ { | ||
| }, | ||
| "default": "{\r\n variant: 'default',\r\n}" | ||
| "default": "{\n variant: 'default',\n}" | ||
| } | ||
@@ -32,0 +32,0 @@ ], |
@@ -1,2 +0,2 @@ | ||
| import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; | ||
| import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; | ||
| import type { CSSResult } from 'lit'; | ||
@@ -13,3 +13,3 @@ import type { LitElement } from 'lit'; | ||
| export declare type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>; | ||
| export declare type DefaultProps = ComponentDefaultProps<AssistiveTextProps>; | ||
@@ -16,0 +16,0 @@ export declare const defaultProps: DefaultProps; |
@@ -1,2 +0,2 @@ | ||
| import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; | ||
| import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; | ||
| import type { CSSResult } from 'lit'; | ||
@@ -14,3 +14,3 @@ import type { LitElement } from 'lit'; | ||
| export declare type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>; | ||
| export declare type DefaultProps = ComponentDefaultProps<AssistiveTextProps>; | ||
@@ -17,0 +17,0 @@ export declare const defaultProps: DefaultProps; |
| { | ||
| "name": "@justeattakeaway/pie-assistive-text", | ||
| "description": "PIE Design System Assistive Text built using Web Components", | ||
| "version": "0.0.0-snapshot-release-20240531152027", | ||
| "version": "0.0.0-snapshot-release-20240709100447", | ||
| "type": "module", | ||
@@ -16,3 +16,3 @@ "main": "dist/index.js", | ||
| "pieMetadata": { | ||
| "componentStatus": "alpha" | ||
| "componentStatus": "beta" | ||
| }, | ||
@@ -44,4 +44,4 @@ "scripts": { | ||
| "dependencies": { | ||
| "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20240531152027", | ||
| "@justeattakeaway/pie-webc-core": "0.23.0" | ||
| "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20240709100447", | ||
| "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240709100447" | ||
| }, | ||
@@ -48,0 +48,0 @@ "volta": { |
@@ -33,7 +33,5 @@ <p align="center"> | ||
| ```bash | ||
| # npm | ||
| $ npm i @justeattakeaway/pie-assistive-text | ||
| npm i @justeattakeaway/pie-assistive-text | ||
| # yarn | ||
| $ yarn add @justeattakeaway/pie-assistive-text | ||
| yarn add @justeattakeaway/pie-assistive-text | ||
| ``` | ||
@@ -43,61 +41,12 @@ | ||
| ## Documentation | ||
| ### Importing the component | ||
| Visit [Assistive Text | PIE Design System](https://pie.design/components/assistive-text/code) to view more information on this component. | ||
| #### JavaScript | ||
| ```js | ||
| // Default – for Native JS Applications, Vue, Angular, Svelte, etc. | ||
| import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text'; | ||
| ## Questions | ||
| // If you don't need to reference the imported object, you can simply | ||
| // import the module which registers the component as a custom element. | ||
| import '@justeattakeaway/pie-assistive-text'; | ||
| ``` | ||
| Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. | ||
| #### React | ||
| ```js | ||
| // React | ||
| // For React, you will need to import our React-specific component build | ||
| // which wraps the web component using @lit/react | ||
| import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react'; | ||
| ``` | ||
| > [!NOTE] | ||
| > When using the React version of the component, please make sure to also | ||
| > include React as a [peer dependency](#peer-dependencies) in your project. | ||
| ## Peer Dependencies | ||
| > [!IMPORTANT] | ||
| > 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. | ||
| ## Props | ||
| | Property | Type | Default | Description | | ||
| |---|---|---|---| | ||
| | `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. | | ||
| ## Slots | ||
| | Property | Description | | ||
| |---|---| | ||
| | `default` | The default, unnamed slot is used to pass in text to the component. | | ||
| In your markup or JSX, you can then use these to set the properties for the `pie-assistive-text` component: | ||
| ```html | ||
| <!-- Native HTML --> | ||
| <pie-assistive-text | ||
| variant="success"> | ||
| Your request has been submitted. | ||
| </pie-assistive-text> | ||
| <!-- JSX --> | ||
| <PieAssistiveText | ||
| variant="error"> | ||
| Password contains too few characters. | ||
| </PieAssistiveText> | ||
| ``` | ||
| ## Contributing | ||
| Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). |
@@ -1,2 +0,2 @@ | ||
| import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; | ||
| import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; | ||
@@ -12,3 +12,3 @@ export const variants = ['default', 'error', 'success'] as const; | ||
| export type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>; | ||
| export type DefaultProps = ComponentDefaultProps<AssistiveTextProps>; | ||
@@ -15,0 +15,0 @@ export const defaultProps: DefaultProps = { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-9.53%
16755
- Number of lines in readme file
- decreased by-50%
51
Dependency changes
+ Added@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240709100447(transitive)
+ Added@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240709100447(transitive)
- Removed@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240531152027(transitive)
- Removed@justeattakeaway/pie-webc-core@0.23.0(transitive)
Updated@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240709100447
Updated@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240709100447