mdn · mtdowner · Jan 12, 2023 · Feb 18, 2023 · Feb 23, 2023 · Feb 23, 2023
@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -23,37 +23,39 @@
         left: 10px;
         color: white;
       }
-
     </style>
   </head>
   <body>
-    <div class="div1"><p>transition-timing-function: frames(10)<p></div>
-    <div class="div2"><p>transition-timing-function: steps(10);<p></div>
-    <div class="div3"><p>transition-timing-function: ease-in;<p></div>
+    <div class="div1">
+      <p>transition-timing-function: steps(5)</p>
+      <p></p>
+    </div>
+    <div class="div2">
+      <p>transition-timing-function: steps(10);</p>
+      <p></p>
+    </div>
+    <div class="div3">
+      <p>transition-timing-function: ease-in;</p>
+      <p></p>
+    </div>
 
     <script>
-
-      var easingFunctions = [
-        'frames(10)',
-        'steps(10)',
-        'ease-in'
-      ]
+      var easingFunctions = ["steps(5)", "steps(10)", "ease-in"];
 
       var keyFrames = [
-        { width: '0%', background : 'red'},
-        { width: '100%', background : 'blue'},
-      ]
+        { width: "0%", background: "red" },
+        { width: "100%", background: "blue" },
+      ];
 
-      var divs = document.querySelectorAll('div');
+      var divs = document.querySelectorAll("div");
 
-      for(var i = 0; i < divs.length; i++) {
+      for (var i = 0; i < divs.length; i++) {
         divs[i].animate(keyFrames, {
-          easing : easingFunctions[i],
-          duration : 5000,
-          iterations: Infinity
+          easing: easingFunctions[i],
+          duration: 5000,
+          iterations: Infinity,
         });
       }
-
     </script>
   </body>
 </html>
@@ -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 %}
@@ -0,0 +1,24 @@
+# Table of contents
+
+* [🖌 Getting started](README.md)
+
+## INTRODUCTION
+
+* [Page 1](introduction/page-1.md)
+* [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)
@@ -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)_._
@@ -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 %}
@@ -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 %}
@@ -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)_._
@@ -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)
@@ -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)
@@ -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)_._
@@ -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 %}