Investigate PrimeVue

[rvanoord]

• [x] Set up a "hello world" Vue project
• [x] Add BCC Component Library (for reference)
• [x] Setup PrimeVue (tailwind version - tailwind.primevue.org?)
• [x] Experiment with adjusting tokens and/or CSS presets to make components similar to styling in BCC Component Library

Objective: get a feeling / understanding of how easy it is to customize PrimeVue according to our needs, and the quality of the product.

• [x] Test styling in styled mode (adjusting preset) - e.g. stepper
• [x] Test tailwind integration in styled mode
• [x] Test applying a theme in unstyled mode
• [x] Test making own preset/theme in unstyled mode - and applying variables
• [x] Test using material icons (i.e. the same icons as currently used)
• [x] Test wrapping an unstyled component - e.g. data table
• [x] Finally document pros and cons of each approach (basis for decision)

---

• [ ] Wrapping of PrimeVue?
• [x] Applying Designtokens to Bcc Components?

[ldvtz]

List of Bcc Components and their "PrimeVue-equivalent" if existing

#	Bcc Component Name	PrimeVue Component Name	Fundamental differences?
1	BccButton	Button	No
2	BccCheckbox	Checkbox	No
3	BccFormLabel	- (only Floating - FloatLabel)	-
4	BccFormMessage	Message	No
5	BccInput	InputText	No
6	BccRadio	RadioButton	No
7	BccSelect	Select	No
8	BccToggle	ToggleSwitch	No
9	BccAlert	Toast	No
10	BccBadge	-	-
11	BccModal	ConfirmDialog / ConfirmPopup / Dialog	No
12	BccProgress	ProgressBar	Yes
13	BccTable	DataTable	No
14	BccTabs	Tabs	No
15	BccGraphic	Image	No
16	BccHeader	-
17	BccInfo	Tag?	Yes
18	BccItemTile	Card	Yes
19	BccLinkItem	-	-
20	BccAccordion	Accordion	No
21	BccAvatar	Avatar	No
22	BccBanner	-	-
23	BccCapacityIndicator	-	-
24	BccCookieBanner	ConfirmPopup?	Yes
25	BccPagination	Paginator	No
26	BccPin	Badge	No
27	BccSpinner	ProgressSpinner	No
28	BccStatusIndicator	-	-
29	BccStepper	Stepper	Yes
30	BccTooltip	Tooltip	No
31	BccNpsResult	-	-
32	BccNpsScore	Rating	Yes
33	BccReact	-	-