weightmans-ui-vue

Weightmans UI Components for Vue.js

Docs • Example

Component library for Weightmans web apps created with Vue.js. Compatible with Vue >3.5

This library is meant to be for internal use only.

📦 Repo contents

• Weightmans UI library
• WUI's Storybook
• WUI's Vitepress
• WUI's Vite module
• WUI's Nuxt module

🙌 Contribute

This library is open for contributions. Should you ever feel like you need something from the library but it's missing, feel free to open a pull request 🙂

Development status

Component	Vue 3	Figma	Notes
Accordion	✅	✅
Accordion Group	✅	✅
Application Logo	✅	✅
Autocomplete	✅	✅
Avatar	✅	✅
Badge	✅	✅
Breadcrumbs	✅	✅
Button	✅	✅
Card	✅	✅
Checkbox	✅	✅
Chip	✅	✅
Collection Widget	✅	✅
Content Field	✅
Date Box	✅
Date Field	✅
DateTime	✅
DevTools	✅
Dropdown	✅	✅
Dropdown Item	✅	✅
Environment Badge	✅
Feedback Card	✅
Featured Items		✅
Filters	✅
Footer	✅
Icon	✅
InfoBox	✅
Input Field	✅
Line Chart	✅
Loading Skeleton	✅
Loading Spinner	✅	✅
Logo	✅	✅
Modal	✅	✅
Navigation Bar	✅	✅
Navigation Bar Item	✅	✅
Navigation Bar Tab	✅
Notification	✅	✅
Number Box	✅
Pagination	✅
Scroller	✅
Search	✅	✅
See The Possibility	✅	✅
Select Box	✅
Select Field	✅	✅
Sidebar		✅
Sidebar Item		✅
Stepper		✅
Slider	✅
Sort chip	✅
Sort heading	✅
Strands	✅	✅
Switch	✅	✅
Switch Box	✅
Table	✅	✅
Text Field	✅	✅
Tooltip	✅	✅
Upload	✅

Installation

pnpm i

Development

This will open Storybook on port 6006 to develop or test UI components.

pnpm dev

Build

pnpm build

Test

After making changes, or adding new features, make sure to write new stories, or edit them.

pnpm storybook

Then create a pull request and make sure all tests pass. If your pull request has visual changes, tests will fail. You will need to approve each change in Chromatic and then after re-running the tests, they should pass.

© 2023 Weightmans LLP