🚚 Create guidelines folder and stories styles

.storybook/preview-head.html

@@ -1,24 +1,2 @@
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900" rel="stylesheet" />
 <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
-
-<style>
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.sb-show-main { /* Storybook class */
-  padding: 8px;
-}
-
-/* Override MDX fonts */
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Source Sans Pro", sans-serif !important;
-}
-
-@media only percy {
-  .hide-in-percy {
-    display: none;
-  }
-}
-</style>

.storybook/preview.js

@@ -1,6 +1,10 @@
 import Vue from 'vue';
 import '@storybook/addon-console';
 import 'homeday-blocks/src/styles/main.scss';
+
+// These styles are used only to style the documentation examples.
+import 'homeday-blocks/src/stories/styles/stories.scss';
+
 import HdTheme from './themes/HdTheme';
 import HdTooltipInstaller from 'homeday-blocks/src/components/tooltip/HdTooltipInstaller';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@@ -12,7 +16,15 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Introduction', 'Welcome', 'Guidelines', 'Components', 'Directives', 'Services'],
+      order: [
+        'Introduction',
+        'Welcome',
+        'Guidelines',
+        ['Colors', 'Elevation', 'Spacing', 'Typography', 'Icons & Illustrations'],
+        'Components',
+        'Directives',
+        'Services',
+      ],
     },
     showPanel: true,
     isToolshown: true,