GitBook: No commit message

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 = () => (
+    <div>
+        <ActionBar>
+            <Button kind="primary" label="Save" />
+            <Button kind="secondary" label="Cancel" />
+        </ActionBar>
+    </div>
+)
+```

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)

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 %}

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
+<AvatarStack
+    users=[userOne, userTwo, userThree]
+    size="medium"
+/>
+```
+
+_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._

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
+<Button
+    label="Label"
+    size="medium"
+    kind="default"
+    onClick={doTheThing}
+/>
+```
+
+## Primary
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:primary&viewMode=story" %}
+
+```javascript
+<Button
+    label="Label"
+    size="medium"
+    kind="primary"
+    onClick={doTheThing}
+/>
+```
+
+## Secondary
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:secondary&viewMode=story" %}
+
+```javascript
+<Button
+    label="Label"
+    size="medium"
+    kind="secondary"
+    onClick={doTheThing}
+/>
+```
+
+_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._

basics/icons.md

@@ -0,0 +1,9 @@
+# Icons
+
+{% hint style="info" %}
+**Good to know:** Storybook canvas embeds don't just work great for live components, you can also embed things like icons, or your color palette or typography tokens just as easily!
+{% endhint %}
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=icon--labels&args=&viewMode=story" %}
+
+_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._

basics/styles/README.md

@@ -0,0 +1,5 @@
+# Styles
+
+{% hint style="info" %}
+**Good to know:** Storybook canvas embeds don't just work great for live components, you can also embed things like icons, or your color palette or typography tokens just as easily!
+{% endhint %}

basics/styles/colors.md

@@ -0,0 +1,9 @@
+# Colors
+
+{% hint style="info" %}
+**Good to know:** Storybook canvas embeds don't just work great for live components, you can also embed things like icons, or your color palette or typography tokens just as easily!
+{% endhint %}
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=colors--page&args=&viewMode=story" %}
+
+_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._

basics/styles/typography.md

@@ -0,0 +1,9 @@
+# Typography
+
+{% hint style="info" %}
+**Good to know:** Storybook canvas embeds don't just work great for live components, you can also embed things like icons, or your color palette or typography tokens just as easily!
+{% endhint %}
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=typography--page&args=&viewMode=story" %}
+
+_These examples are taken from the excellent_ [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/icon--labels)_._

she-ji-shu.md

@@ -0,0 +1,17 @@
+---
+description: 説明
+---
+
+# 設計書
+
+## 1章
+
+ああああ
+
+## 2章
+
+あああ
+
+## 3章
+
+あああ