Add rough styling to Styleguide

src/components/TabNav/TabNav.css

@@ -1,3 +1,13 @@
+.root {
+  &::after {
+    content: ".";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+  }
+}
+
 .tab {
   float: left;
   margin-left: 1rem;

src/components/TabNav/TabNav.js

@@ -31,8 +31,9 @@ Tab.propTypes = {
 
 const TabNav = props => {
   const { className, tabs } = props;
+  const classes = classNames(css.root, className);
   return (
-    <nav className={className}>
+    <nav className={classes}>
       {tabs.map(tab => <Tab key={tab.text} {...tab} />)}
     </nav>
   );

src/containers/StyleguidePage/Colors.example.js

@@ -114,5 +114,6 @@ const MarketplaceColors = () => {
 
 export const Colors = {
   component: MarketplaceColors,
+  group: 'colors',
   props: {},
 };

src/containers/StyleguidePage/StyleguidePage.css

@@ -1,19 +1,64 @@
 @import '../../marketplace.css';
 
 .root {
-  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
 }
 
-.withPadding,
+.withPadding {
+  padding: calc(2 * var(--spacingUnit));
+
+  @media (min-width: 768px) {
+    padding: calc(2 * var(--spacingUnitDesktop));
+  }
+}
+
+.withMargin,
 .defaultWrapperStyles {
-  padding: 12px;
+  margin: calc(2 * var(--spacingUnit)) 0;
+
+  @media (min-width: 768px) {
+    margin: calc(2 * var(--spacingUnitDesktop)) 0;
+  }
+}
+
+.navBar {
+  flex-basis: 300px;
+  flex-shrink: 0;
+  composes: withPadding;
+  box-shadow: var(--boxShadow);
+}
+
+.main {
+  flex-grow: 1;
+  composes: withPadding;
+
+  @media (min-width: 768px) {
+    padding: 56px 0 0 16px;
+  }
+}
+
+.link {
+  color: var(--marketplaceColor);
+}
+
+.groups {
+  margin: 0 0 12px 0;
+}
+
+.group {
+  text-transform: capitalize;
 }
 
 .selectedGroup {
   font-weight: bold;
+  color: var(--marketplaceColorDark);
 }
 
-
 /* Typography.example */
 .typographyContent {}
 

src/containers/StyleguidePage/StyleguidePage.js

@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import { isEmpty } from 'lodash';
+import classNames from 'classnames';
 import { NamedLink } from '../../components';
 import * as allExamples from '../../examples';
 
 import css from './StyleguidePage.css';
+import mpCSS from '../../marketplace.css';
 
 const ALL = '*';
 const DEFAULT_GROUP = 'misc';
@@ -19,11 +21,15 @@ const Example = props => {
   } = props;
 
   const exampleWrapperClassName = useDefaultWrapperStyles ? css.defaultWrapperStyles : '';
-  const desc = description ? <p className={css.withPadding}>Description: {description}</p> : null;
+  const desc = description ? <p className={css.withMargin}>Description: {description}</p> : null;
   return (
     <li>
-      <h3 className={css.withPadding}>
-        <NamedLink name="StyleguideComponent" params={{ component: componentName }}>
+      <h3 className={css.withMargin}>
+        <NamedLink
+          name="StyleguideComponent"
+          params={{ component: componentName }}
+          className={css.link}
+        >
           {componentName}
         </NamedLink>
         /
@@ -31,14 +37,16 @@ const Example = props => {
         <NamedLink
           name="StyleguideComponentExample"
           params={{ component: componentName, example: exampleName }}
+          className={css.link}
         >
           {exampleName}
         </NamedLink>
       </h3>
-      <span className={css.withPadding}>
+      <span className={css.withMargin}>
         <NamedLink
           name="StyleguideComponentExampleRaw"
           params={{ component: componentName, example: exampleName }}
+          className={css.link}
         >
           raw
         </NamedLink>
@@ -71,27 +79,45 @@ Example.propTypes = {
 // Renders the list of component example groups as clickable filters
 const Nav = props => {
   const { groups, selectedGroup } = props;
-  const filteredGroups = groups.filter(g => g !== ALL && g !== DEFAULT_GROUP);
   const toGroupLink = group => {
     const linkProps = {
       name: group === ALL ? 'Styleguide' : 'StyleguideGroup',
       params: group === ALL ? null : { group },
     };
-    const linkContent = group === ALL ? 'all' : group;
+
+    const linkContent = group === ALL ? 'all components' : group;
     const isSelected = selectedGroup && group === selectedGroup;
+    const groupLink = classNames(css.link, { [css.selectedGroup]: isSelected });
     return (
-      <li key={group}>
-        <NamedLink {...linkProps} className={isSelected ? css.selectedGroup : null}>
+      <li key={group} className={css.group}>
+        <NamedLink {...linkProps} className={groupLink}>
           {linkContent}
         </NamedLink>
       </li>
     );
   };
+
+  const filteredGroups = groups.filter(g => g !== ALL && g !== DEFAULT_GROUP);
+  const basicStylings = ['typography', 'colors'];
+  const basicStylingGroups = filteredGroups
+    .filter(g => basicStylings.includes(g))
+    .map(toGroupLink);
+  const componentGroups = filteredGroups
+    .filter(g => !basicStylings.includes(g))
+    .map(toGroupLink);
+
   return (
-    <nav className={css.withPadding}>
+    <nav className={css.withMargin}>
       <ul>
         {toGroupLink(ALL)}
-        {filteredGroups.map(toGroupLink)}
+      </ul>
+      <h3 className={mpCSS.h5Font}>Basic styling</h3>
+      <ul className={css.groups}>
+        {basicStylingGroups}
+      </ul>
+      <h3 className={mpCSS.h5Font}>Component categories</h3>
+      <ul className={css.groups}>
+        {componentGroups}
         {toGroupLink(DEFAULT_GROUP)}
       </ul>
     </nav>
@@ -177,13 +203,17 @@ const StyleguidePage = props => {
 
   return (
     <section className={css.root}>
-      <h1 className={css.withPadding}>
-        <NamedLink name="Styleguide">Styleguide</NamedLink>
-      </h1>
-      <h2 className={css.withPadding}>Select category:</h2>
-      <Nav groups={groups} selectedGroup={selectedGroup} />
-      <h2 className={css.withPadding}>Component examples:</h2>
-      {html}
+      <div className={css.navBar}>
+        <h1 className={css.withMargin}>
+          <NamedLink name="Styleguide" className={css.link}>Styleguide</NamedLink>
+        </h1>
+        <h2 className={css.withMargin}>Select category:</h2>
+        <Nav groups={groups} selectedGroup={selectedGroup} />
+      </div>
+      <div className={css.main}>
+        <h2>Component examples:</h2>
+        {html}
+      </div>
     </section>
   );
 };

src/marketplace.css

@@ -20,6 +20,12 @@
   /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */
   --spacingUnit: 6px;
   --spacingUnitDesktop: 8px;
+
+  /* Shadows */
+  --boxShadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --boxShadowLight: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --boxShadowPopup: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
+  --boxShadowPopupLight: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
 }
 
 /* FONTS */
@@ -149,6 +155,14 @@ html,
 /* NORMALIZATIONS for other elements */
 /* TODO */
 
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 ul {
   list-style: none;
   padding: 0;