Visa Product Design System - Nova React

• About
• Security
• Background
• Install
• Usage
• Why Nova React?
• Testing
• Maintainers
• Thanks
• Contributing
• License

About Nova React

Accessible Visa Product Design System components built for React

Nova React is a comprehensive library of accessible components designed to align with the Visa Product Design System. It provides developers with a set of reusable UI elements that can be easily integrated into React applications. With Nova React, developers can quickly build visually consistent and user-friendly interfaces that adhere to accessibility best practices.

Key Features

• Wide range of components: Includes buttons, form elements, navigation menus, and more.
• Customizable: Built on Nova Styles CSS, allowing for extensive theming and customization.
• Accessibility: Adheres to accessibility best practices to ensure inclusive user experiences.
• Flexible state management: Supports bring-your-own state, enabling custom services and classes.

Whether you are building a small project or a large-scale application, Nova React offers a robust foundation for creating visually appealing and accessible user interfaces.

This library is built on our Nova Styles CSS which is extremely theme-able/customizable and the React components are now bring-your-own state. That means if our examples, styles, or behaviors don't cover your use case then you just add your own services, classes, or themes and now the world is your oyster!

Security

Our package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.

Install

Available through NPM.

NPM:

1npm install @visa/nova-react

PNPM:

1pnpm install @visa/nova-react

Yarn:

1yarn add @visa/nova-react

Bun:

1bun add @visa/nova-react

Dependencies

View our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.

Usage

Step 1: Update React

Nova React supports React 18 and up. Visit React’s guide on how to upgrade to React 18 for more.

Step 2: Install the library

Reference our install guidelines.

Step 3: Set up the application

Import Nova styles

Import the Nova Styles library and your desired theme at the root level of your React project. The visa-light theme is the default.

1import React from 'react';
2import { createRoot } from 'react-dom/client';
3
4// Import the styles:
5import '@visa/nova-styles/styles.css';
6// Import your desired theme:
7import '@visa/nova-styles/themes/visa-light/index.css';
8
9const root = createRoot(document.getElementById('root'));
10
11root.render(
12  <React.StrictMode>
13    <App />
14  </React.StrictMode>
15);

Step 4: Add icons (optional)

For React, each icon has been developed as a React component, allowing you to selectively choose the icons you need. The library is designed to support deep tree shaking, ensuring that only the icons you use are bundled with your app. This optimization reduces build and load times as well as app sizes. The React library also provides native support for TypeScript, along with full support for all SVG properties and refs.

Once you’ve installed the icon library, you can use them as components inside your TSX or JSX.

1import React from 'react';
2import { GenericAccessibilityLow, GenericCalendarTiny } from '@visa/nova-icons-react';
3
4export const MyComponent: React.FC = () => (
5  <div>
6    MyComponent
7    <GenericAccessibilityLow />
8    <GenericCalendarTiny />
9  </div>
10);

Step 5: Use the components

You’re ready to use React components by copying and pasting the example code into your application. Check out below how to put our components to use with a few sample components.

1import { Button, ContentCard, ContentCardBody, ContentCardTitle, Link, Typography, Utility } from '@visa/nova-react';
2
3type YourComponentProps = { className?: string; name?: string };
4
5// Reusable component that has a name prop with a default name set to "Alex Miller",
6// and developer can add to the className prop at the top layer of the component.
7const YourComponent = ({ className, name = 'Alex Miller' }: YourComponentProps) => {
8  return (
9    <ContentCard borderBlockEnd className={className}>
10      <Utility element={<ContentCardBody />} vFlex vFlexCol vGap={4}>
11        <ContentCardTitle variant="headline-4">{name}</ContentCardTitle>
12        <Typography className="v-pt-4">Our favorite commmunity member</Typography>
13        <Utility vAlignItems="center" vFlex vFlexWrap vGap={16} vPaddingTop={12}>
14          <Button>Primary action</Button>
15          <Link href="./content-card" noUnderline>
16            Destination label
17          </Link>
18        </Utility>
19      </Utility>
20    </ContentCard>
21  );
22};
23
24export default YourComponent;

Why Nova React?

Light Weight

We've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible experience.

Building Blocks

No more waiting on feature requests. We provide the building blocks for you to easily create and customize your own components.

Built For Developers

Nova React is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps with ease. We now also support strict type safety, so now type warnings are provided inline, before building and deploying.

Testing

Our Approach

We conduct rigorous testing using Jest to ensure our components are accessible and meet our high standards. We use Axe for comprehensive accessibility testing and snapshot testing to minimize regression. Each component undergoes individual unit testing based on its API, followed by integration testing using examples to ensure seamless interaction.

Our goal is to achieve 100% test coverage for all components. Our pipeline safeguards against merging any code that fails our tests. While we have hundreds of tests providing us with full code coverage, we recognize that there is always room for improvement. We are constantly working to improve our testing suite.

Maintainers

This project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach out to us via any of our options on our support page.

Thanks

Thanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have gone into making the design system as easy to use as possible.

Contributing

SEE CONTRIBUTING.md

License

SEE LICENSE IN LICENSE