EBTH Design System

EBTH's React-based UI Component library using Atomic Design

View Demo · Report Bug or Request Feature

Built With

Table of contents

• Table of contents
• Introduction
• Quick Start
  • Adding Icons
• Quick Publish
• Index

Introduction

The structure of EBTH's Design System follows Atomic Design principles and methodologies and is built with Storybook, an open source tool for developing UI components in isolation. Storybook is a visual, interactive Single Source of Truth for the entire EBTH Component library, including use cases and available properties for each Component.

Quick Start

1. git clone [e-mail]:ebth/design-system.git && cd design-system
2. nodenv install
3. yarn install
4. yarn test (just to generate a test result JSON file)
5. yarn dev or yarn dev:no-test

Adding Icons

1. yarn icons:watch
2. Put new svg files into src/icons/svg
3. That's it!

Quick Publish

1. git checkout origin/master
2. yarn publish
   1. Use the version from the changelog/package.json
3. Create release in GitHub using same changelog info

Index

• Explanation
  • Methodology
  • Testing
• How-To Guides
  • Getting Started
• Tutorials
  • Creating Components
  • Consuming design-system