UI - ConnectNuxt: Create alert message common component.
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
With there being several instances this is icon + alert text is required, a common component in the [base layer](https://github.com/bcgov/connect-nuxt/tree/main/packages/layers/base) will help with consistency throughout projects.
Component name: ConnectAlertMessage
Should be able to copy [this component](https://github.com/bcgov/business-ui/blob/main/packages/layers/base/app/components/Form/Alert/Message.vue) over.
**CHANGES:**
- make id and message prop optional
- add variant prop and default to 'error'
- create variant map for configurable icon and class - only error variant required for now
-
variant map eg:
```
const variantMap: Record = {
'error': { icon: 'i-mdi-alert', class: 'text-error' },
// ... future variants can be added here
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by comparing the existing component at packages/layers/base/app/components/Form/Alert/Message.vue with the base layer in ConnectNuxt. Create ConnectAlertMessage there, making id and message optional and adding the error variant with its mapped icon and class. Done means the component is available in the base layer with the requested default and configurable variant structure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nuxt
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100