feat: docs improved

coingaming · Nov 13, 2020 · 6fcc808 · 6fcc808
1 parent f12dca3
commit 6fcc808
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 53 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -1,6 +1,6 @@
 {
-  "siteTitle": "Sportsbet.io",
-  "author": "Sportsbet.io",
+  "siteTitle": "Moon Design",
+  "author": "Coingaming",
   "description": "Everything you need to know about the Moon Design System",
   "packages": [
     "assets",

diff --git a/docs/src/components/nav/index.tsx b/docs/src/components/nav/index.tsx
@@ -7,7 +7,7 @@ import { PagesData } from '../../types';
 
 import { transformSections } from './transform';
 import { Logo } from './logo';
-import { Menu, MenuList, MenuItem } from './menu';
+import { Menu, MenuList } from './menu';
 
 const sidebar = graphql`
   query {
@@ -32,21 +32,31 @@ const sidebar = graphql`
   }
 `;
 
-const NavContainer = styled.nav(({ theme: { space } }) => ({
-  padding: rem(space.default),
+const NavContainer = styled.nav(({ theme: { space, color } }) => ({
+  paddingTop: rem(24),
+  paddingBottom: rem(24),
+  paddingLeft: rem(32),
+  paddingRight: rem(32),
+  backgroundColor: color.gohan[100],
+  minWidth: rem(272),
 }));
 
+const NavContainerWrapper = styled.div({
+  padding: rem(32),
+});
+
 export const Nav = () => (
   <StaticQuery
     query={sidebar}
     render={(data: PagesData) => (
       <NavContainer>
-        <Logo />
-        <MenuList>
-          <MenuItem route="/" name="Introduction" section />
-          {/* TODO: Investigate IDE type issue highlighting */}
-          <Menu items={transformSections(data)} />
-        </MenuList>
+        <NavContainerWrapper>
+          <Logo />
+          <MenuList>
+            {/* TODO: Investigate IDE type issue highlighting */}
+            <Menu items={transformSections(data)} />
+          </MenuList>
+        </NavContainerWrapper>
       </NavContainer>
     )}
   />

diff --git a/docs/src/components/nav/logo.tsx b/docs/src/components/nav/logo.tsx
@@ -26,17 +26,18 @@ const LogoContainer = styled.div(({ theme: { breakpoint, color, space } }) => ({
   height: rem(40),
   width: rem(240),
   alignItems: 'center',
-  justifyContent: 'space-between',
+  marginBottom: rem(32),
+  maxHeight: rem(20),
   /* The logo */
   'svg:first-child': {
     width: 'auto',
     height: '100%',
   },
   [`${IconChevronDown}`]: {
-    fontSize: rem(18),
+    fontSize: rem(12),
     marginLeft: rem(space.default),
     flexShrink: 0,
-    color: color.trunks[100],
+    color: color.goten[100],
   },
   [mq(breakpoint.medium)]: {
     width: '100%',
@@ -57,6 +58,7 @@ const BrandSelect = styled.select({
   '&:hover': {
     cursor: 'pointer',
   },
+  outline: 'none',
 });
 
 export const Logo = () => {
@@ -65,7 +67,9 @@ export const Logo = () => {
 
   return (
     <LogoContainer>
-      {brand === 'MoonDesign' && <LogoMoonDesign height="100%" width="auto" />}
+      {brand === 'MoonDesign' && (
+        <LogoMoonDesign height="auto" width={rem(90)} color="goten.100" />
+      )}
       {brand === 'Sportsbet.io' && (
         <LogoSportsbetFull height="100%" width="auto" />
       )}

diff --git a/docs/src/components/nav/menu.tsx b/docs/src/components/nav/menu.tsx
@@ -32,14 +32,13 @@ const MenuListItem = styled.li<{ section?: boolean }>(
     section && {
       fontSize: '1.2rem',
       fontWeight: fontWeight.semibold,
-      color: color.trunks[100],
+      color: color.goten[100],
     },
   ]
 );
 
 const Link = styled(GatsbyLink)(({ theme: { color, fontWeight } }) => ({
-  // @ts-ignore: &[aria-current=page]
-  color: color.bulma[100],
+  color: color.trunks[100],
   textDecoration: 'none',
   '&[aria-current=page]': {
     fontWeight: fontWeight.semibold,
@@ -52,31 +51,41 @@ const Link = styled(GatsbyLink)(({ theme: { color, fontWeight } }) => ({
 /**
  * Components: Private
  */
-const SubMenu = ({ items, title }: MenuListProps & MenuProps) => (
-  <MenuListItem>
-    {title && (
-      <MenuListItem as="span" section>
-        {title}
-      </MenuListItem>
-    )}
-    <MenuList nested>
-      {items.map(item => (
-        <MenuItem key={item.name} route={item.route} name={item.name} />
-      ))}
-    </MenuList>
-  </MenuListItem>
-);
+const SubMenuWrapper = styled.div({
+  marginBottom: rem(32),
+});
+
+const SubMenu = ({ items, title }: MenuListProps & MenuProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <MenuListItem
+      onClick={() => {
+        setIsOpen(!isOpen);
+      }}
+    >
+      {title && (
+        <MenuListItem as="span" section>
+          {title}
+        </MenuListItem>
+      )}
+      {isOpen && (
+        <MenuList>
+          {items.map(item => (
+            <MenuItem key={item.name} route={item.route} name={item.name} />
+          ))}
+        </MenuList>
+      )}
+    </MenuListItem>
+  );
+};
 
 /**
  * Components: Exported
  */
-export const MenuList = styled.ul<{ nested?: boolean & MenuListProps }>(
-  ({ theme: { space }, nested }) => ({
-    margin: 0,
-    marginLeft: nested ? rem(space.default) : 0,
-    listStyleType: 'none',
-  })
-);
+export const MenuList = styled.ul({
+  margin: 0,
+  listStyleType: 'none',
+});
 
 export const MenuItem = ({ route, name, section }: MenuItemProps) => (
   <MenuListItem section={section}>
@@ -87,8 +96,12 @@ export const MenuItem = ({ route, name, section }: MenuItemProps) => (
 export const Menu = ({ items }: MenuProps) =>
   items.map(item =>
     item.pages ? (
-      <SubMenu key={item.name} title={item.name} items={item.pages} />
+      <SubMenuWrapper>
+        <SubMenu key={item.name} title={item.name} items={item.pages} />
+      </SubMenuWrapper>
     ) : (
-      <MenuItem key={item.name} route={item.route} name={item.name} section />
+      <SubMenuWrapper>
+        <MenuItem key={item.name} route={item.route} name={item.name} section />
+      </SubMenuWrapper>
     )
   );
diff --git a/docs/src/provider.tsx b/docs/src/provider.tsx
@@ -102,29 +102,17 @@ export const DocsThemeProvider: React.FC<{ children: React.ReactChild }> = ({
     colorMode: 'light',
   });
 
-  const consoleInfoTheme = () =>
-    process.env.NODE_ENV !== 'production' &&
-    /* eslint-disable-next-line no-console */
-    console.info(
-      '🎨 Theme: ',
-      themeState,
-      themes[themeState.brand][themeState.colorMode]
-    );
-
   /**
    * Toggle between themes 'dark' and 'light' states
    */
   const toggleColorScheme = () => {
-    consoleInfoTheme();
-
     setThemeState({
       brand: themeState.brand,
       colorMode: themeState.colorMode === 'dark' ? 'light' : 'dark',
     });
   };
 
   const setBrand = (themeKey: DocsBrands) => {
-    consoleInfoTheme();
     setThemeState({ brand: themeKey, colorMode: themeState.colorMode });
   };