Riverty Design System: Web Components

Riverty, your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.

Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.

→ designsystem.riverty.com

Contributing

We welcome contributions to the Web Components package! Here's how to get started:

Development Setup

cd packages/components
npm install
npm run develop  # Starts watch mode

Creating Components

1. Generate a new component:

   npx stencil generate component-name

2. Follow the component checklist:

   • [ ] TypeScript definitions with JSDoc comments
   • [ ] Sass styles following BEM methodology
   • [ ] Responsive design
   • [ ] Dark mode support (via CSS variables)
   • [ ] Storybook story in packages/storybook/stories/
   • [ ] Unit tests (Jest)
   • [ ] Accessibility (ARIA labels, keyboard navigation)
   • [ ] Documentation

Component Structure

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'r-component',
  styleUrl: 'component.scss',
  shadow: true,
})
export class RComponent {
  /** Description of prop */
  @Prop() myProp: string;

  render() {
    return <div>{this.myProp}</div>;
  }
}

Testing

# Run unit tests
npm run test

# Run in watch mode
npm run test -- --watch

Best Practices

• Use web component standards
• Follow StencilJS conventions
• Ensure accessibility (WCAG 2.1/2.2 AA)
• Support keyboard navigation
• Test with screen readers
• Include all component variants in Storybook
• Write meaningful JSDoc comments

Useful Commands

• npm run build - Build the component library
• npm run develop - Watch mode for development
• npm run test - Run unit tests
• npm run generate - Generate new component

For complete contribution guidelines, see CONTRIBUTING.md in the repository root.