GitBook: No commit message

docs/README.md

@@ -0,0 +1,9 @@
+# 🖌️ Getting started
+
+## Welcome !
+
+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.
+
+{% hint style="info" %}
+Use this template to introduce the concept of your design system. Outlining basic principles and ways of working to get every team on the same page.
+{% endhint %}

docs/SUMMARY.md

@@ -0,0 +1,23 @@
+# Table of contents
+
+* [🖌️ Getting started](README.md)
+
+## INTRODUCTION
+
+* [Design Principles](introduction/design-principles.md)
+* [Brand Guidelines](introduction/brand-guidelines.md)
+* [How updates work](introduction/how-updates-work.md)
+* [Accessibility](introduction/accessibility.md)
+
+## identity
+
+* [Logos](identity/logos.md)
+* [Colors](identity/colors.md)
+* [Typography](identity/typography.md)
+* [Imagery](identity/imagery.md)
+
+## Components
+
+* [Icons](components/icons.md)
+* [Buttons](components/buttons.md)
+* [Inputs](components/inputs.md)

docs/components/buttons.md

@@ -0,0 +1,48 @@
+# Buttons
+
+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)_._

docs/components/icons.md

@@ -0,0 +1,14 @@
+# Icons
+
+{% hint style="info" %}
+**Good to know:** you can embed a Storybook canvas by simple pasting the canvas link and hitting enter.
+{% endhint %}
+
+An Icon is a piece of visual element, but we must ensure its accessibility while using it. It can have **2 purposes**:
+
+* _**decorative only**_: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting aria-hidden attribute (ex: `<Icon icon="check" aria-hidden />`)
+* _**non-decorative**_: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex:`<Icon icon="print" aria-label="Print this document" />`)
+
+{% 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).
+{% endembed %}

docs/components/inputs.md

@@ -0,0 +1,27 @@
+# Inputs
+
+{% hint style="info" %}
+**Good to know:** you can embed a Storybook canvas by simple pasting the canvas link and hitting enter.
+{% endhint %}
+
+## Default
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/forms-input--template" %}
+These examples are taken from the excellent [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=forms-input--template\&args=).
+{% endembed %}
+
+```javascript
+<Styled(Input)
+    appearance="pill"
+    id="Basic"
+    label="label"
+    orientation="horizontal"
+    value="value"
+/>
+```
+
+## Stacked
+
+{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/forms-input--stacked" %}
+These examples are taken from the excellent [Storybook Example Design System](https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/?path=/story/forms-input--stacked).
+{% endembed %}

docs/identity/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)_._

docs/identity/imagery.md

@@ -0,0 +1,11 @@
+# Imagery
+
+## Our approach
+
+Our approach to imagery present commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.
+
+### Abstract Examples
+
+![](https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?crop=entropy\&cs=tinysrgb\&fm=jpg\&ixid=MnwxOTcwMjR8MHwxfHNlYXJjaHwxMHx8aWxsdXN0cmF0aW9ufGVufDB8fHx8MTY2MDU3Mjk5Ng\&ixlib=rb-1.2.1\&q=80)
+
+![](https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?crop=entropy\&cs=tinysrgb\&fm=jpg\&ixid=MnwxOTcwMjR8MHwxfHNlYXJjaHw1fHxhYnN0cmFjdHxlbnwwfHx8fDE2NjA1NzI4NTc\&ixlib=rb-1.2.1\&q=80)

docs/identity/logos.md

@@ -0,0 +1,7 @@
+# Logos
+
+{% 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 %}
+
+![Design byJoanne Macon Dribbble](https://dribbble.com/shots/9515799-Personal-Brand-Logo?utm\_source=Clipboard\_Shot\&utm\_campaign=jmvc\&utm\_content=Personal%20Brand%20Logo\&utm\_medium=Social\_Share\&utm\_source=Clipboard\_Shot\&utm\_campaign=jmvc\&utm\_content=Personal%20Brand%20Logo\&utm\_medium=Social\_Share)

docs/identity/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)_._

docs/introduction/accessibility.md

@@ -0,0 +1,15 @@
+# Accessibility
+
+{% hint style="info" %}
+**Good to know:** Accessible design lets people of all abilities interact with, understand, and navigate our products.
+{% endhint %}
+
+{% tabs %}
+{% tab title="Introduction" %}
+Accessibility means that people can do what they need to do in a similar amount of time and effort as someone fully abled. It means that people are empowered, can be independent, and will not be frustrated by something that is poorly designed or implemented.
+{% endtab %}
+
+{% tab title="Our Approach to Accessibility" %}
+Here at our product we comply to all levels of accessibility sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus.
+{% endtab %}
+{% endtabs %}

docs/introduction/brand-guidelines.md

@@ -0,0 +1,9 @@
+# Brand Guidelines
+
+## 🧱 Foundations
+
+Our brand foundation is inextricably linked to the emotional and functional sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+
+## 🛠 How we build
+
+We build with the justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

docs/introduction/design-principles.md

@@ -0,0 +1,13 @@
+# Design Principles
+
+### 🤝Trust
+
+Trust the process Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
+
+### 🛳 Ship 
+
+With thoughtful and consistent interfaces, praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+### 🙇‍♀️ Align
+
+Our single source of truth is integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

docs/introduction/how-updates-work.md

@@ -0,0 +1,11 @@
+# How updates work
+
+{% hint style="info" %}
+**Good to know:** Outlining how updates work will help everyone know how they collaborate with the system, having a robust approach to updating your design system is super important – afterall a design system is never complete!
+{% endhint %}
+
+Here's a few walkthroughs on how our different tools align and work with one another Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.
+
+## Example Tool Walkthrough
+
+{% embed url="https://www.youtube.com/watch?v=Bf1cLeFgMQ4" %}