Load the pattern page from hash

client/App.tsx

@@ -3,10 +3,9 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 
 import './index.css';
 
-import Pattern from './constants/Pattern';
 import Explore from './Explore';
 import Home from './Home';
-import DetailsLoader from './loaders/DetailsLoader';
+import PatternPage from './PatternPage';
 
 const App = () => {
     return (
@@ -15,74 +14,10 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/patterns'><Explore /></Route>
 
-                <Route exact={true} path='/patterns/badge'>
+                <Route
-                    <DetailsLoader pattern={Pattern.Badge} />
+                    path='/patterns/:pattern'
-                </Route>
+                    render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
-                <Route exact={true} path='/patterns/breadcrumb'>
+                />
-                    <DetailsLoader pattern={Pattern.Breadcrumb} />
-                </Route>
-                <Route exact={true} path='/patterns/button-with-icon'>
-                    <DetailsLoader pattern={Pattern.ButtonWithIcon} />
-                </Route>
-                <Route exact={true} path='/patterns/card'>
-                    <DetailsLoader pattern={Pattern.Card} />
-                </Route>
-                <Route exact={true} path='/patterns/centering'>
-                    <DetailsLoader pattern={Pattern.Centering} />
-                </Route>
-                <Route exact={true} path='/patterns/docked-at-corner'>
-                    <DetailsLoader pattern={Pattern.DockedAtCorner} />
-                </Route>
-                <Route exact={true} path='/patterns/dot-leader'>
-                    <DetailsLoader pattern={Pattern.DotLeader} />
-                </Route>
-                <Route exact={true} path='/patterns/dot-navigation'>
-                    <DetailsLoader pattern={Pattern.DotNavigation} />
-                </Route>
-                <Route exact={true} path='/patterns/drop-area'>
-                    <DetailsLoader pattern={Pattern.DropArea} />
-                </Route>
-                <Route exact={true} path='/patterns/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
-                <Route exact={true} path='/patterns/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
-                <Route exact={true} path='/patterns/floating-label'><DetailsLoader pattern={Pattern.FloatingLabel} /></Route>
-                <Route exact={true} path='/patterns/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
-                <Route exact={true} path='/patterns/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
-                <Route exact={true} path='/patterns/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
-                <Route exact={true} path='/patterns/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
-                <Route exact={true} path='/patterns/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
-                <Route exact={true} path='/patterns/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
-                <Route exact={true} path='/patterns/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
-                <Route exact={true} path='/patterns/previous-next-buttons'>
-                    <DetailsLoader pattern={Pattern.PreviousNextButtons} />
-                </Route>
-                <Route exact={true} path='/patterns/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
-                <Route exact={true} path='/patterns/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
-                <Route exact={true} path='/patterns/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
-                <Route exact={true} path='/patterns/questions-and-answers'>
-                    <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
-                </Route>
-                <Route exact={true} path='/patterns/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
-                <Route exact={true} path='/patterns/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
-                <Route exact={true} path='/patterns/same-height-columns'>
-                    <DetailsLoader pattern={Pattern.SameHeightColumns} />
-                </Route>
-                <Route exact={true} path='/patterns/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
-                <Route exact={true} path='/patterns/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
-                <Route exact={true} path='/patterns/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
-                <Route exact={true} path='/patterns/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
-                <Route exact={true} path='/patterns/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
-                <Route exact={true} path='/patterns/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
-                <Route exact={true} path='/patterns/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
-                <Route exact={true} path='/patterns/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
-                <Route exact={true} path='/patterns/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
-                <Route exact={true} path='/patterns/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
-                <Route exact={true} path='/patterns/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
-                <Route exact={true} path='/patterns/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
-                <Route exact={true} path='/patterns/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
-                <Route exact={true} path='/patterns/toggle-password-visibility'>
-                    <DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
-                </Route>
-                <Route exact={true} path='/patterns/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
             </RouteSwitch>
         </Router>
     );

client/PatternPage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Pattern from './constants/Pattern';
+import DetailsLoader from './loaders/DetailsLoader';
+
+interface PatternPageProps {
+    pattern: string;
+}
+
+const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
+
+const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
+    const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
+    const patterns = Object.keys(Pattern);
+
+    return (
+        patterns.indexOf(name) === -1
+            // TODO: Render 404
+            ? <div>404</div>
+            : <DetailsLoader pattern={pattern} />
+    );
+};
+
+export default PatternPage;

client/constants/Pattern.ts

@@ -12,7 +12,7 @@ enum Pattern {
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
     HolyGrail = 'Holy grail',
-    InputAddOn = 'Input add-on',
+    InputAddOn = 'Input addon',
     MediaObject = 'Media object',
     Menu = 'Menu',
     Modal = 'Modal',

client/loaders/DetailsLoader.tsx

@@ -3,10 +3,8 @@ import React from 'react';
 
 import './spinner.css';
 
-import Pattern from '../constants/Pattern';
-
 interface DetailsLoaderProps {
-    pattern: Pattern;
+    pattern: string;
 }
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');