diff --git a/README.md b/README.md index d4ec663e7..1e77f3732 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,40 @@ -[![Build Status](https://travis-ci.org/microservices-demo/carts.svg?branch=master)](https://travis-ci.org/microservices-demo/carts) [![Coverage Status](https://coveralls.io/repos/github/microservices-demo/carts/badge.svg?branch=master)](https://coveralls.io/github/microservices-demo/carts?branch=master) -[![](https://images.microbadger.com/badges/image/weaveworksdemos/cart.svg)](http://microbadger.com/images/weaveworksdemos/cart "Get your own image badge on microbadger.com") -# cart -A microservices-demo service that provides shopping carts for users. +# Getting started -This build is built, tested and released by travis. +## Welcome ! -# API Spec +{% hint style="info" %} +**Good to know:** A design system is a product, and similar best practices to product docs apply when documenting a design system. Offering succinct ways to get started is a great way to introduce the concepts of your design system, while empowering folks to use it for their needs. +{% endhint %} -Checkout the API Spec [here](http://microservices-demo.github.io/api/index?url=https://raw.githubusercontent.com/microservices-demo/carts/master/api-spec/cart.json) +## Installing -# Build +Our design system is written in React, and can be installed into your project via NPM or Yarn. -## Java +{% tabs %} +{% tab title="npm" %} +`npm install --save @my-product/my-design-system` +{% endtab %} -`mvn -DskipTests package` +{% tab title="yarn" %} +`yarn add -S my-design-system` +{% endtab %} +{% endtabs %} -## Docker +## Usage -`GROUP=weaveworksdemos COMMIT=test ./scripts/build.sh` +Import the components you need: -# Test +`import {Button, ActionBar} from @my-product/my-design-system` -`./test/test.sh < python testing file >`. For example: `./test/test.sh unit.py` +Then use them in your app or components: -# Run - -`mvn spring-boot:run` - -# Check - -`curl http://localhost:8081/health` - -# Use - -`curl http://localhost:8081` - -# Push - -`GROUP=weaveworksdemos COMMIT=test ./scripts/push.sh` +```javascript +const header = () => ( +
+ +
+) +``` diff --git a/SUMMARY.md b/SUMMARY.md new file mode 100644 index 000000000..d212de8bf --- /dev/null +++ b/SUMMARY.md @@ -0,0 +1,19 @@ +# Table of contents + +* [Getting started](README.md) + +## Basics + +* [Styles](basics/styles/README.md) + * [Colors](basics/styles/colors.md) + * [Typography](basics/styles/typography.md) +* [Icons](basics/icons.md) +* [Components](basics/components/README.md) + * [AvatarStack](basics/components/avatarstack.md) + * [Button](basics/components/button.md) + +## Basics + +*** + +* [設計書](she-ji-shu.md) diff --git a/basics/components/README.md b/basics/components/README.md new file mode 100644 index 000000000..37cc45aa8 --- /dev/null +++ b/basics/components/README.md @@ -0,0 +1,5 @@ +# Components + +{% hint style="info" %} +**Good to know:** Components are the building blocks of your UI and one of the most important aspects of a design system. +{% endhint %} diff --git a/basics/components/avatarstack.md b/basics/components/avatarstack.md new file mode 100644 index 000000000..f3751e623 --- /dev/null +++ b/basics/components/avatarstack.md @@ -0,0 +1,20 @@ +# AvatarStack + +Avatar Stacks show a bunch of users in a condensed space. + +## Default + +{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=avatarlist--basic&args=size:large&viewMode=story" %} + +{% hint style="info" %} +**Good to know:** you can embed a Storybook canvas by simple pasting the canvas link and hitting enter. +{% endhint %} + +```javascript + +``` + +_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._ diff --git a/basics/components/button.md b/basics/components/button.md new file mode 100644 index 000000000..0e906f404 --- /dev/null +++ b/basics/components/button.md @@ -0,0 +1,48 @@ +# Button + +Buttons are used to perform actions in the product. + +## Default + +{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false&viewMode=story" %} + +{% hint style="info" %} +**Good to know:** you can embed a Storybook canvas by simple pasting the canvas link and hitting enter. +{% endhint %} + +```javascript +