docs(Menu): adding active state #77

rmwc · Jan 10, 2018 · b4d63ab · b4d63ab
1 parent 03c8eec
commit b4d63ab
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 36 deletions.
diff --git a/src/Card/index.js b/src/Card/index.js
@@ -8,6 +8,9 @@ import Button from '../Button';
 import { simpleTag } from '../Base';
 import type { SimpleTagPropsT } from '../Base';
 
+/****************************************************************
+ * Public
+ ****************************************************************/
 /**
  * Primary card content
  */

diff --git a/src/List/index.js b/src/List/index.js
@@ -115,25 +115,29 @@ type ListPropsT = {
   /** Gives more space for dual lined list items. */
   twoLine?: boolean,
   /** Makes the list start detail circular for avatars. */
-  avatarList?: boolean
+  avatarList?: boolean,
+  /** Makes the list non interactive */
+  nonInteractive?: boolean
 } & SimpleTagPropsT;
 
 export class List extends simpleTag({
   displayName: 'List',
   defaultProps: {
     dense: undefined,
     twoLine: undefined,
-    avatarList: undefined
+    avatarList: undefined,
+    nonInteractive: undefined
   },
   classNames: props => [
     'mdc-list',
     {
       'mdc-list--dense': props.dense,
       'mdc-list--two-line': props.twoLine,
-      'mdc-list--avatar-list': props.avatarList
+      'mdc-list--avatar-list': props.avatarList,
+      'mdc-list--non-interactive': props.nonInteractive
     }
   ],
-  consumeProps: ['dense', 'twoLine', 'avatarList']
+  consumeProps: ['dense', 'twoLine', 'avatarList', 'nonInteractive']
 })<ListPropsT> {
   render() {
     return super.render();

diff --git a/src/docs/App.js b/src/docs/App.js
@@ -24,7 +24,11 @@ import Home from './Home';
 
 const MenuItem = ({ url, label }) => {
   return (
-    <ListItem>
+    <ListItem
+      activated={
+        window.location.pathname.split('/').pop() === url.split('/').pop()
+      }
+    >
       <Link to={url}>
         <ListItemText>{label}</ListItemText>
       </Link>

diff --git a/src/docs/docgen.json b/src/docs/docgen.json
@@ -1655,6 +1655,13 @@
           },
           "required": false,
           "description": "Makes the list start detail circular for avatars."
+        },
+        "nonInteractive": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": false,
+          "description": "Makes the list non interactive"
         }
       }
     },

diff --git a/src/docs/index.js b/src/docs/index.js
@@ -14,7 +14,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 const renderApp = Component => {
   ReactDOM.render(
     <AppContainer>
-      <Router>
+      <Router basename={process.env.PUBLIC_URL}>
         <Component location={window.location.href} />
       </Router>
     </AppContainer>,

diff --git a/src/docs/menuContent.js b/src/docs/menuContent.js
@@ -35,17 +35,17 @@ export const menuContent = [
     options: [
       {
         label: 'Installation',
-        url: `${process.env.PUBLIC_URL}/installation`,
+        url: `/installation`,
         component: InstallationDocs
       },
       {
         label: 'Usage and Styling',
-        url: `${process.env.PUBLIC_URL}/usage`,
+        url: `/usage`,
         component: UsageDocs
       },
       {
         label: 'Project Methodology',
-        url: `${process.env.PUBLIC_URL}/methodology`,
+        url: `/methodology`,
         component: MethodologyDocs
       }
     ]
@@ -55,144 +55,144 @@ export const menuContent = [
     options: [
       {
         label: 'Buttons',
-        url: `${process.env.PUBLIC_URL}/buttons`,
+        url: `/buttons`,
         component: ButtonDocs
       },
       {
         label: 'Fabs',
-        url: `${process.env.PUBLIC_URL}/fabs`,
+        url: `/fabs`,
         component: FabDocs
       },
       {
         label: 'Icon Toggles',
-        url: `${process.env.PUBLIC_URL}/icon-toggles`,
+        url: `/icon-toggles`,
         component: IconToggleDocs
       }
     ]
   },
   {
     label: 'Cards',
-    url: `${process.env.PUBLIC_URL}/cards`,
+    url: `/cards`,
     component: CardDocs
   },
   {
     label: 'Dialogs',
-    url: `${process.env.PUBLIC_URL}/dialogs`,
+    url: `/dialogs`,
     component: DialogDocs
   },
   {
     label: 'Drawers',
-    url: `${process.env.PUBLIC_URL}/drawers`,
+    url: `/drawers`,
     component: DrawerDocs
   },
   {
     label: 'Elevation',
-    url: `${process.env.PUBLIC_URL}/elevation`,
+    url: `/elevation`,
     component: ElevationDocs
   },
   {
     label: 'Grid Lists',
-    url: `${process.env.PUBLIC_URL}/grid-lists`,
+    url: `/grid-lists`,
     component: GridListDocs
   },
   {
     label: 'Inputs and Controls',
     options: [
       {
         label: 'Checkboxes',
-        url: `${process.env.PUBLIC_URL}/checkboxes`,
+        url: `/checkboxes`,
         component: CheckboxDocs
       },
       {
         label: 'FormFields',
-        url: `${process.env.PUBLIC_URL}/form-fields`,
+        url: `/form-fields`,
         component: FormFieldDocs
       },
       {
         label: 'Radio Buttons',
-        url: `${process.env.PUBLIC_URL}/radio-buttons`,
+        url: `/radio-buttons`,
         component: RadioDocs
       },
       {
         label: 'Select Menus',
-        url: `${process.env.PUBLIC_URL}/select-menus`,
+        url: `/select-menus`,
         component: SelectDocs
       },
       {
         label: 'Sliders',
-        url: `${process.env.PUBLIC_URL}/sliders`,
+        url: `/sliders`,
         component: SliderDocs
       },
       {
         label: 'Switches',
-        url: `${process.env.PUBLIC_URL}/switches`,
+        url: `/switches`,
         component: SwitchDocs
       },
       {
         label: 'Text Fields',
-        url: `${process.env.PUBLIC_URL}/text-fields`,
+        url: `/text-fields`,
         component: TextFieldDocs
       }
     ]
   },
   {
     label: 'Layout Grid',
-    url: `${process.env.PUBLIC_URL}/layout-grid`,
+    url: `/layout-grid`,
     component: GridDocs
   },
   {
     label: 'Linear Progress',
-    url: `${process.env.PUBLIC_URL}/linear-progress`,
+    url: `/linear-progress`,
     component: LinearProgressDocs
   },
   {
     label: 'Lists',
-    url: `${process.env.PUBLIC_URL}/lists`,
+    url: `/lists`,
     component: ListDocs
   },
   {
     label: 'Menus',
-    url: `${process.env.PUBLIC_URL}/menus`,
+    url: `/menus`,
     component: MenuDocs
   },
   {
     label: 'Ripples',
-    url: `${process.env.PUBLIC_URL}/ripples`,
+    url: `/ripples`,
     component: RippleDocs
   },
   {
     label: 'Snackbars',
-    url: `${process.env.PUBLIC_URL}/snackbars`,
+    url: `/snackbars`,
     component: SnackbarDocs
   },
   {
     label: 'Tabs',
-    url: `${process.env.PUBLIC_URL}/tabs`,
+    url: `/tabs`,
     component: TabDocs
   },
   {
     label: 'Theme',
-    url: `${process.env.PUBLIC_URL}/theme`,
+    url: `/theme`,
     component: ThemeDocs
   },
   {
     label: 'Toolbars',
-    url: `${process.env.PUBLIC_URL}/toolbars`,
+    url: `/toolbars`,
     component: ToolbarDocs
   },
   {
     label: 'Typography',
-    url: `${process.env.PUBLIC_URL}/typography`,
+    url: `/typography`,
     component: TypographyDocs
   },
   {
     label: 'Icons',
-    url: `${process.env.PUBLIC_URL}/icons`,
+    url: `/icons`,
     component: IconDocs
   },
   {
     label: 'Provider',
-    url: `${process.env.PUBLIC_URL}/provider`,
+    url: `/provider`,
     component: ProviderDocs
   }
 ];