chore(Storybook): New UI for Storybook

.storybook/manager-head.html

@@ -0,0 +1,107 @@
+<style type="text/css">
+    /* styles for the storybook sidebar */
+    .search-result-item {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .search-result-item--label span {
+        margin-top: 4px;
+    }
+    .sidebar-item,
+    .search-result-item {
+        padding-top: 0.875em !important;
+        padding-bottom: 0.875em !important;
+        font-size: 14px !important;
+        font-weight: 400 !important;
+        line-height: normal;
+        display: flex;
+        align-items: center !important;
+    }
+    .sidebar-item:first-of-type {
+        border-bottom: none;
+    }
+
+    /* let flex and align-items control alignment */
+    .sidebar-item > span,
+    .sidebar-item > svg {
+        margin-top: 0;
+        margin-right: 5px;
+    }
+
+    /* icon size */
+    .sidebar-svg-icon,
+    .sidebar-item svg,
+    .search-result-item svg {
+        color: inherit;
+        display: none; /* hide sidebar icons */
+    }
+
+    /* www should be in lowercase */
+    .sidebar-item#www {
+        text-transform: lowercase;
+    }
+
+    /* create illusion of hrs between sidebar sections */
+    .sidebar-item#www,
+    .sidebar-item#appendix {
+        border-top: 2px solid rgba(0, 0, 0, 0.1);
+        margin-top: 0.5rem;
+        padding-top: 1rem;
+    }
+
+    /* logo placement tweaks */
+    .sidebar-header > div {
+        margin-right: 0;
+    }
+    .sidebar-header a {
+        margin: 6px 0;
+    }
+    .sidebar-header img {
+        width: 104px;
+    }
+    .sidebar-subheading {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .sidebar-subheading button span:first-of-type {
+        margin-right: 5px;
+    }
+
+    .sidebar-subheading:last-child {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding-bottom: 16px;
+    }
+    .sidebar-subheading button,
+    .search-result-recentlyOpened {
+        letter-spacing: normal !important;
+        margin-top: 16px;
+    }
+    .sidebar-subheading span {
+        margin-right: 5px;
+    }
+
+    /* Search input */
+    .search-field input {
+        height: 40px;
+        padding-left: 32px;
+    }
+    .search-field svg:nth-child(1) {
+        top: 14px;
+        left: 14px;
+    }
+    .search-field svg:nth-child(4) {
+        top: 12px;
+        right: 13px;
+    }
+    .search-field code {
+        top: 12px;
+        right: 13px;
+    }
+
+    /* Main block */
+    [role='main'] > div {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 0;
+        box-shadow: none;
+        box-sizing: content-box;
+    }
+</style>

.storybook/manager.js

@@ -6,4 +6,7 @@ import {createStorybookTheme} from './storybook-manager-theme';
 addons.setConfig({
     panelPosition: 'right',
     theme: createStorybookTheme('Movistar'),
+    toolbar: {
+        title: {hidden: true},
+    },
 });

.storybook/storybook-manager-theme.js

@@ -11,7 +11,7 @@ export const createStorybookTheme = (skinName) => {
     return create({
         base: 'light',
 
-        brandTitle: 'Mistica',
+        brandTitle: 'Mística',
         brandUrl: 'https://github.com/Telefonica/mistica',
         brandImage: logo,
 
@@ -28,5 +28,9 @@ export const createStorybookTheme = (skinName) => {
         // Toolbar default and active colors
         barTextColor: colors.textSecondary,
         barSelectedColor: colors.primary,
+
+        // UI
+        appBg: '#ffffff',
+        appContentBg: '#ffffff',
     });
 };