Trunk Components

Based on my work on the quote journey, I created a developer friendly component library for our form and page layouts, allowing developers to add new functionality without getting bogged down by styles and brand considerations.

To allow these components to be easily shared across projects, I created a private npm repo on Github to host it as a package. During this process, I used Storybook to test individual components before including them in a new project.

For the first project to include the new components, we wanted something simple. So this new vender W9 upload form was the perfect place to work out the kinks. Everything here, except the text and W9 graphic, is from the components package: form elements, the validations, button states, general layout, etc.

After proving that the base components worked well, we included them in the account login project. This is a much more branded experience with a customized layout, but using the components made this a cinch to put together.

View the login page live

Working in Figma, I am currently working on updating the components to bring more flair from Elephant's new branding elements into the Design System itself, while maintaining accessibility considerations.