The HPE Design System is a collection of open-source UI components and templates, Figma assets, and design guidelines.
It empowers designers and developers to communicate through a shared language and accelerates the design and development of accessible UI products to support HPE’s pursuit in providing SaaS experiences.
01. Building the open-source component library
I build and enhance Grommet, a React-based open-source component library, by architecting components, enhancing features, and improving Typescript support to accelerate HPE developers' abilities to build design system compliant applications.
For all code changes, I consult WCAG best practices and work directly with screen reader users to ensure the features are accessible to all users
02. Building the documentation site
Develop and architect open-source components/templates and highly performant Next.js website for HPE Design System documentation that are used widely across HPE.
See HPE Design System documentation site
03. Writing unit and end-to-end tests
To increase confidence in our component codebase's stability, I write Jest/React Testing Library unit tests for our 50+ components. As a dev team, we have increased code coverage from 75% to above 90%.
I lead the end-to-end testing for the HPE Design System documentation site and use TestCafe to write these tests. These tests ensure critical site functionality, such as navigation and search, is maintained across desktop and mobile breakpoints.
I have also integrated Applitools, a visual difference testing tool, with the TestCafe tests to capture any changes to colors, typography, layout, spacing, etc. that may be missed by functional tests.
04. Authoring a custom ESLint accessibility plugin
To make it easier for all developers (open-source and HPE) to build accessible applications with Grommet, I authored a custom ESLint plugin that warns developers about accessibility violations (such as missing "name", "id", or "for" attribute on a form field label and input) and provides Grommet-specific guidance for how to resolve the violation.
For teams that consume the HPE Design System ESLint configuration, this plugin is built-in to that meaning dozens of HPE developers are able to write cleaner, more accessible code.
Check out eslint-plugin-grommet
05. Aligning across design + dev
To make the hand-off between design and development as seamless as possible, I work closely with UX designers to create and maintain alignment between our design tokens in Figma and the styles in our Grommet theme.
This alignment applies not only to the colors and typography styles but also any styling to Figma components to ensure pixel perfect parity between design and dev.