docs: look & feel improvements

.storybook/assets/manager.css

@@ -0,0 +1,116 @@
+@font-face {
+  font-family: 'Poppins';
+  src: url(./fonts/poppins/poppins-regular.woff2) format('woff2');
+}
+
+.sidebar-container {
+  font-family: 'Poppins', sans-serif;
+  padding: 0;
+}
+
+.sidebar-container .sidebar-subheading,
+.sidebar-container .search-result-recentlyOpened {
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.1325em;
+  text-transform: uppercase;
+  color: #5b6870;
+}
+
+.sidebar-container .search-result-item > div:first-child {
+  display: none;
+}
+
+.sidebar-container .search-result-item > div:last-child > div:first-child {
+  font-weight: 600;
+}
+
+.sidebar-container .sidebar-subheading {
+  display: flex;
+  align-items: center;
+  padding-right: 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: bold;
+  text-transform: none;
+  letter-spacing: -0.01925em;
+  color: #1f282e;
+}
+
+.sidebar-container .sidebar-subheading > *:first-child {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.sidebar-container .sidebar-subheading > *:first-child span:first-of-type {
+  margin: 0 8px 0 6px;
+}
+
+.sidebar-container .sidebar-subheading-action {
+  display: none;
+}
+
+.sidebar-header {
+  margin: 8px 0 24px 0 !important;
+}
+
+.sidebar-header a img {
+  height: auto;
+  max-height: 32px;
+}
+
+.sidebar-container #storybook-explorer-tree a,
+.sidebar-container #storybook-explorer-tree button {
+  transition: background-color ease-out 0.1s;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-right: 12px;
+  line-height: 20px;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-item {
+  transition: background-color ease-out 0.1s;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-item:not([data-selected='true']):hover,
+.sidebar-container #storybook-explorer-tree .sidebar-item:focus {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.sidebar-container #storybook-explorer-tree [data-selected='true'] {
+  background: #a4c8f5;
+  color: #182b42;
+  font-weight: 600;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-item {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-subheading {
+  pointer-events: none;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-subheading > button > div {
+  display: none;
+}
+
+.sidebar-container #storybook-explorer-tree .sidebar-item > div > svg,
+.sidebar-container #storybook-explorer-tree .sidebar-item > a > div{
+  display: none;
+}
+
+.sidebar-container #storybook-explorer-tree a + a {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}

.storybook/manager-head.html

@@ -0,0 +1,10 @@
+<!--<link
+  rel="icon"
+  href="https://logtrust-static.s3.amazonaws.com/static/img/ux/favicon_coco.ico"
+  sizes="32x32"
+/>-->
+<link rel="icon" href="favicon.ico" sizes="32x32" />
+<link rel="stylesheet" type="text/css" href="manager.css" />
+<script>
+  document.title = 'Genesys Styles';
+</script>

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import { Preview } from "@storybook/html";
 import { create } from "@storybook/theming";
 
 import "@devoinc/genesys-base-styles/dist/css/styles.min.css";
+import "@devoinc/genesys-icons/dist/gi-styles.css";
 import "./preview.scss";
 
 type ComponentsMap = {

docs/components/Badge/Badge.stories.ts

@@ -16,8 +16,8 @@ export const Sizes = {
 
 export const Icon = {
   render: () => `
-<span class="badge badge--has-icon badge--sm gi-info_about_alt"></span>
-<span class="badge badge--has-icon badge--md gi-bell_solid"></span>
+<span class="badge badge--has-icon badge--sm gi-info"></span>
+<span class="badge badge--has-icon badge--md gi-bell_ringer_alarm_sound_solid"></span>
 <span class="badge badge--has-icon badge--lg gi-check_thick"></span>
   `,
 };