feat(storiesNav): deep theming for stories nav panel

storybookjs · Mar 15, 2019 · 0ec9773 · 0ec9773
1 parent 58d90e6
commit 0ec9773
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 8 deletions.
diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md
@@ -88,6 +88,29 @@ export default create({
   inputTextColor: 'black',
   inputBorderRadius: 4,
 
+  // Deep theming stories nav
+  storiesNav: {
+    backgroundColor: '#128CED'
+  },
+  navHeading: {
+    alignItems: 'center'
+  },
+  treeSubHeading: {
+    color: '#F8D71C'
+  },
+  treeItemHeader: {
+    fontWeight: 500
+  },
+  activeMenuLink: {
+    fontWeight: 600
+  },
+  treeExpander: {
+    borderLeft: '3.5px solid white'
+  },
+  treeIcons: {
+    color: 'white'
+  },
+
   brandTitle: 'My custom storybook',
   brandUrl: 'https://example.com',
   brandImage: 'https://placehold.it/350x150',

diff --git a/lib/theming/src/base.ts b/lib/theming/src/base.ts
@@ -126,6 +126,15 @@ export interface ThemeVars {
   inputTextColor?: string;
   inputBorderRadius?: number;
 
+  // Deep theming stories nav
+  storiesNav?: object;
+  navHeading?: object;
+  treeSubHeading?: object;
+  treeItemHeader?: object;
+  activeMenuLink?: object;
+  treeExpander?: object;
+  treeIcons?: object;
+
   brandTitle?: string;
   brandUrl?: string;
   brandImage?: string;

diff --git a/lib/theming/src/themes/dark.ts b/lib/theming/src/themes/dark.ts
@@ -31,6 +31,15 @@ const theme: ThemeVars = {
   inputBorder: 'rgba(0,0,0,.3)',
   inputTextColor: color.lightest,
   inputBorderRadius: 4,
+
+  // Deep theming stories nav
+  storiesNav: {},
+  navHeading: {},
+  treeSubHeading: {},
+  treeItemHeader: {},
+  activeMenuLink: {},
+  treeExpander: {},
+  treeIcons: {},
 };
 
 export default theme;
diff --git a/lib/theming/src/themes/light.ts b/lib/theming/src/themes/light.ts
@@ -31,6 +31,15 @@ const theme: ThemeVars = {
   inputBorder: color.border,
   inputTextColor: color.darkest,
   inputBorderRadius: 4,
+
+  // Deep theming stories nav
+  storiesNav: {},
+  navHeading: {},
+  treeSubHeading: {},
+  treeItemHeader: {},
+  activeMenuLink: {},
+  treeExpander: {},
+  treeIcons: {},
 };
 
 export default theme;
diff --git a/lib/ui/src/components/sidebar/Sidebar.js b/lib/ui/src/components/sidebar/Sidebar.js
@@ -7,13 +7,14 @@ import { ScrollArea } from '@storybook/components';
 import SidebarHeading from './SidebarHeading';
 import SidebarStories from './SidebarStories';
 
-const Heading = styled(SidebarHeading)({
+const Heading = styled(SidebarHeading)(props => ({
   padding: '20px 20px 12px',
-});
+  ...props.theme.navHeading,
+}));
 
 const Stories = styled(SidebarStories)(({ loading }) => (loading ? { marginTop: 8 } : {}));
 
-const Container = styled.nav({
+const Container = styled.nav(({ theme: { storiesNav } }) => ({
   position: 'absolute',
   zIndex: 1,
   left: 0,
@@ -22,7 +23,8 @@ const Container = styled.nav({
   right: 0,
   width: '100%',
   height: '100%',
-});
+  ...storiesNav,
+}));
 
 const CustomScrollArea = styled(ScrollArea)({
   '.simplebar-track.simplebar-vertical': {

diff --git a/lib/ui/src/components/sidebar/SidebarHeading.js b/lib/ui/src/components/sidebar/SidebarHeading.js
@@ -81,9 +81,7 @@ const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', im
   }
   if (image === null && url) {
     return (
-      <LogoLink href={url} target={targetValue}>
-        {title}
-      </LogoLink>
+      <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />
     );
   }
   if (image && url === null) {

diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -15,6 +15,7 @@ const Expander = styled.span(
     borderBottom: '3.5px solid transparent',
     borderLeft: `3.5px solid ${opacify(0.2, theme.appBorderColor)}`,
     transition: 'transform .1s ease-out',
+    ...theme.treeExpander,
   }),
 
   ({ isExpandable }) => (!isExpandable ? { borderLeftColor: 'transparent' } : {}),
@@ -34,6 +35,9 @@ const Icon = styled(Icons)(
     height: 10,
     marginRight: 6,
   },
+  ({ theme: { treeIcons } }) => ({
+    ...treeIcons,
+  }),
   ({ icon }) => {
     if (icon === 'folder') {
       return { color: '#774dd7' };
@@ -61,8 +65,9 @@ export const Item = styled.div(
     flex: 1,
     background: 'transparent',
   },
-  ({ depth }) => ({
+  ({ theme, depth }) => ({
     paddingLeft: depth * 15 + 9,
+    ...theme.treeItemHeader,
   }),
   ({ theme, isSelected, loading }) =>
     !loading &&
@@ -72,6 +77,7 @@ export const Item = styled.div(
           background: theme.color.secondary,
           color: theme.color.lightest,
           fontWeight: theme.typography.weight.bold,
+          ...theme.activeMenuLink,
         }
       : {
           cursor: 'pointer',

diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.js b/lib/ui/src/components/sidebar/SidebarSubheading.js
@@ -9,6 +9,7 @@ const Heading = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   lineHeight: '24px',
   color: transparentize(0.5, theme.color.defaultText),
+  ...theme.treeSubHeading,
 }));
 
 const Subheading = props => <Heading {...props} />;