Skip to content

Latest commit

 

History

History
59 lines (37 loc) · 3.2 KB

CONTRIBUTING.md

File metadata and controls

59 lines (37 loc) · 3.2 KB
Raw

Contributing

Welcome to our contributing guide!

Our Documentation site is in the folder ./docs. This component library takes patterns from Github's @primer/components and Shopify's @shopify/polaris.

Component Guide

Tools we use

Component Patterns

  • use styled components whenever possible
  • appropriate prop-types should be set with default props set in Component.defaultProps
  • component styling should be determined by the theme, defaulting to our theme (our styles).

System and Styling Props

  • components should have access to the appropriate system and styling props (e.g. width, onClick, m)
  • every component should have access to COMMON (exported in src/utils/constants.js)
  • for more common/system props, look at styled-system API

Theme

⚠️ Make sure to always set the default theme prop to our theme (/src/theme.js)! This will allow access to the default theme, which refers to the hack4impact design guidelines.

For component specific styling, create a specific key:Object in the theme (ex: button in ./src/theme.js)

If using the color variants/state colors (primary, secondary, success, warning, error, white), use lodashGet in /src/utils/utils.js to fallback to the default color value. We do this in button in /src/theme.js.. Here the default values are based on the color palette given - (a function with parameter: colorPalette). You can then override the default specific values for a specific state by explicitly stating it afterwards.

Prop Passing to styled components Be careful with the props you pass to a styled component, especially when using it with styled-system. Specific props you pass will cause unexpected behavior if you don't watch out. If you are trying to use @styled-system/color with a styled-component, do not override the props that map to it color, bg, backgroundColor, opacity or use it for other logic.

Code Style

We use eslint for linting with the Airbnb javascript style. Rule exceptions are in .eslintrc

Linting will catch common issues that may exist in your code. You can check the status of your code styling by running yarn lint.

Testing

We test our components with Jest and react-test-renderer and react-testing-library. We use react-test-render for snapshot testing and react-testing-library with jest-dom to test exact styles. See src/__tests__/Button.js for an example.

To run tests:

yarn test

Building Package

We use rollup to bundle up our package. It packages up all the imported css files to styles.css, which a user will import. In addition, rollup will include HKGrotesk Font files (src/static/fonts)

To build package:

yarn build

The bundle will be created in ./dist