@paprika/overlay v1.0.21
Getting Started
Environment
- Node v10.0.0+
- Yarn v1.12.3+
Paprika has a peerDependency
on styled-components
and most packages also have a peerDependency
on @paprika/l10n
(for localization).
You will need to include them as dependencies in your project.
$ yarn add styled-components
$ yarn add @paprika/l10n
More details about using the L10n component.
Installing a Component
For example, to install the <Button>
component:
$ yarn add @paprika/button
Then, to use the component in your project:
import React from "react";
import Button from "@paprika/button";
export default () => <Button>Hello</Button>;
Contributing
Before contributing, please read our Code of Conduct Contributors are welcome to submit a bug report, make a feature request, or open a pull request. If you're just getting started, check out the Help Wanted or Good First Issues.
For more information please check out our Contributing Guidelines. You may want to start with the Getting Started Guide
Components
Paprika components are individually versioned and distributed packages in a Lerna monorepo. To browse a list of components, open the Storybook, view the source code, visit the NPM registry, or refer to the AirTable summary.
NPM Packages
Testing
There are a few layers to the testing pyramid in Paprika.
- Static analysis – ESLint (with several plugins, namely airbnb)
- Unit testing – Jest
- Component testing – React Testing Library
- End-to-end testing – Cypress
- Visual regresstion testing – Screener
Accessibility
Paprika components are built with accessibility in mind from design through implementation. Compliance with WCAG 2.0 level AA by following WAI-ARIA Authoring Practices is a priority.
In practice this ensures the usability of Paprika components:
- with keyboard, mouse or touch inputs
- at various zoom levels up to 200% on a variety of screen sizes
- with sufficent colour contrast for all essential elements
- with meaningful and semantic markup
- with support for assistive technology (screen readers like VoiceOver, NVDA, and Jaws)
For more information about how these goals are achieved, please read our guidelines for developers.
Support
Have a question for the development team? Ask us.
License
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago