https://github.com/khan/wonder-blocks

React components for Wonder Blocks design system.
https://github.com/khan/wonder-blocks

design-system react ui-components

Last synced: about 2 hours ago
JSON representation

React components for Wonder Blocks design system.

• Host: GitHub
• URL: https://github.com/khan/wonder-blocks
• Owner: Khan
• License: mit
• Created: 2018-02-27T22:50:41.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-10-30T02:25:23.000Z (18 days ago)
• Last Synced: 2024-10-30T05:00:07.750Z (18 days ago)
• Topics: design-system, react, ui-components
• Language: TypeScript
• Homepage: https://khan.github.io/wonder-blocks
• Size: 34.3 MB
• Stars: 149
• Watchers: 58
• Forks: 10
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  Wonder Blocks

![Release](https://github.com/Khan/wonder-blocks/actions/workflows/release.yml/badge.svg) [![codecov](https://codecov.io/gh/Khan/wonder-blocks/branch/main/graph/badge.svg)](https://codecov.io/gh/Khan/wonder-blocks)

The Khan Academy Wonder Blocks design system. This is work-in-progress and a lot

of things are still in motion.

More information: https://khan.github.io/wonder-blocks/

## Getting started

### Prerequisites

- [Node.JS v16.x](https://nodejs.org/download/release/v16.16.0/)

- [Yarn](https://yarnpkg.com/lang/en/docs/install/)

### Installation

To install Wonder Blocks, you need to run the following commands:

#### `yarn install`

Installs project dependencies

#### `yarn start`

Runs the docs in dev mode

Now you can open http://localhost:6061 to view the docs. This page will

automatically update as you make changes to components.

## Contributing

**Note for external contributors:** We are not accepting external contributions

at this time. We are working to make this happen in the future, and we will let

you know when this is possible!

For a more detailed explanation about how to develop Wonder Blocks components,

please refer to the [internal documentation](https://khanacademy.atlassian.net/wiki/spaces/FRONTEND/pages/100827261/Developing+wonder-blocks)

Please note – before contributing ensure that any design changes you are wanting

to make are reflected in the [Wonder Blocks project in

Figma](https://www.figma.com/file/VbVu3h2BpBhH80niq101MHHE/Wonder-Blocks).

## Thanks



Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that helps us catch unexpected changes on time.