jordanthomas/design-system

Design system library

EBTH's Design System

UI Component library and style helper mixins for SCSS.

Usage

1. Install library

   yarn add @ebth/design-system

2. Import components

   import * as React from 'react';
   import { Button } from '@ebth/design-system';
   
   type Props = {
       label: string;
   }
   
   export const MyButton: React.FC<Props> = ({ label }) => (
       <Button>{label}</Button>
   );

3. Import shared utility classes (optional)

   @import '@ebth/design-system/dist/utility';

Creating your own components

1. Define your styles

   // import base utility mixins and variables (if needed)
   @import '@ebth/design-system/dist/base';
   
   .my-button {
       background-color: $green-300;
       color: $text-color;
   }

2. Create your component

   import * as React from 'react';
   import { Button } from '@ebth/design-system';
   
   type Props = {
       label: string;
   }
   
   export const MyButton: React.FC<Props> = ({ label }) => (
       <Button className="my-button">{label}</Button>
   );

Contributing

Please see documentation for contributing here.

License

MIT License.