diff --git a/.storybook/assets/manager.css b/.storybook/assets/manager.css new file mode 100644 index 0000000..7dbdda3 --- /dev/null +++ b/.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; +} diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 0000000..f229bb6 --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1,10 @@ + + + + diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 89b33d6..b61e013 100644 --- a/.storybook/preview.tsx +++ b/.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 = { diff --git a/docs/components/Badge/Badge.stories.ts b/docs/components/Badge/Badge.stories.ts index a27fbf4..39ff2f5 100644 --- a/docs/components/Badge/Badge.stories.ts +++ b/docs/components/Badge/Badge.stories.ts @@ -16,8 +16,8 @@ export const Sizes = { export const Icon = { render: () => ` - - + + `, };