bcgov / bcgov/entity

UI - ConnectNuxt: Create alert message common component.

Open Beginner friendly
#34,175 0 comments 0 reactions 0 assignees View on GitHub
Colin Egress Nuxt Layers
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.