Merge branch 'templates'

tleunen · Jan 31, 2016 · c04dca9 · c04dca9
2 parents 25438c5 + b1e85b3
commit c04dca9
Show file tree

Hide file tree

Showing 17 changed files with 766 additions and 58 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -18,6 +18,22 @@
             top: 10px;
             right: 10px;
         }
+
+        .mdl-layout__drawer .mdl-layout-title {
+            position: relative;
+            background: #3f51b5;
+            height: 160px;
+        }
+
+        .mdl-layout__drawer .drawer-separator {
+            height: 1px;
+            background-color: #dcdcdc;
+            margin: 8px 0;
+        }
+
+        .mdl-layout__drawer .mdl-navigation span.mdl-navigation__link {
+            color: #3f51b5;
+        }
     </style>
 </head>
 <body>

diff --git a/docs/pages/buttons.md b/docs/pages/buttons.md
@@ -98,6 +98,7 @@
 |:---------|:----------|:-------------|:-------------|
 | accent   | Boolean   | Applies "accent" colors  | Optional |
 | colored  | Boolean   | Applies "colored" colors | Optional |
+| component| String || Element || Function   | Specify the custom component to use to render the element | Optional. Default 'div' |
 | mini     | Boolean   | Set the button as "mini" | Optional, works only with "FABButton" |
 | name     | String    | Set the icon name" | Optional, works only with "IconButton" |
 | primary  | Boolean   | Applies "primary" colors | Optional |

diff --git a/docs/pages/layout.md b/docs/pages/layout.md
@@ -224,6 +224,7 @@
 | Header    | transparent  | Boolean   | Makes header transparent | Optional |
 | Header    | waterfall    | Boolean   | Allows a "waterfall" effect with multiple header lines | Optional |
 | HeaderRow | title        | Any       | Set the layout title | Optional |
+| Content   | component    | String || Element || Function   | Specify the custom component to use to render the element | Optional. Default 'div' |
 
 ### Grid
 
@@ -281,11 +282,19 @@
 
 | Element   | Prop         | Type      | Effect       | Remarks      |
 |:----------|:-------------|:----------|:-------------|:-------------|
+| Grid      | component    | String || Element || Function   | Specify the custom component to use to render the grid | Optional. Default 'div' |
 | Grid      | noSpacing    | Boolean    | Removes the margins between the cells. | Optional |
+| Grid      | shadow       | Number    | Defines the shadow depth | Optional, Default 0. Must be between 0 and 6 |
 | Cell      | align        | String[top, middle, bottom, stretch]    | Set the cell alignment | Optional |
 | Cell      | col          | Number[1..12]    | Set the column size | Required |
+| Cell      | component    | String || Element || Function   | Specify the custom component to use to render the cell | Optional. Default 'div' |
+| Cell      | hideDesktop  | Boolean    | Hide the cell in desktop mode | Optional |
+| Cell      | hidePhone    | Boolean    | Hide the cell in phone mode | Optional |
+| Cell      | hideTablet   | Boolean    | Hide the cell in tablet mode | Optional |
 | Cell      | phone        | Number[1..12]    | Set the column size in phone mode | Optional |
 | Cell      | tablet       | Number[1..12]    | Set the column size in tablet mode | Optional |
+| Cell      | shadow       | Number    | Defines the shadow depth | Optional, Default 0. Must be between 0 and 6 |
+
 
 ### Tabs
 

diff --git a/docs/src/DocApp.js b/docs/src/DocApp.js
@@ -1,18 +1,24 @@
 import React from 'react';
 import { Link } from 'react-router';
-import Pages from '../pages/html';
+import * as Pages from '../pages/html';
+import * as Templates from './templates';
 import {
     Layout, Header, Drawer, Content, Navigation,
-    Icon, Grid, Cell
+    Icon, Grid, Cell, Spacer
 } from '../../src/';
 
+const componentSections = Object.keys(Pages).filter(e => e !== 'home').map(page => ({
+    id: page,
+    label: page[0].toUpperCase() + page.slice(1)
+}));
+
+const templateSections = Object.keys(Templates).map(template => ({
+    id: 'templates/' + template.toLowerCase(),
+    label: template
+}));
+
 class DocApp extends React.Component {
     render() {
-        const componentSections = Object.keys(Pages).filter(e => e !== 'home').map(page => ({
-            id: page,
-            label: page[0].toUpperCase() + page.slice(1)
-        }));
-
         return (
             <Layout fixedHeader fixedDrawer>
                 <Header title="React-MDL">
@@ -23,9 +29,13 @@ class DocApp extends React.Component {
                         </a>
                     </Navigation>
                 </Header>
-                <Drawer title="Components">
+                <Drawer>
                     <Navigation>
+                        <span>Components</span>
                         {componentSections.map(e => <Link to={e.id} key={e.id}>{e.label}</Link>)}
+                        <Spacer className="drawer-separator" />
+                        <span>Templates</span>
+                        {templateSections.map(e => <Link to={e.id} key={e.id}>{e.label}</Link>)}
                     </Navigation>
                 </Drawer>
                 <Content className="mdl-color-text--grey-600">

diff --git a/docs/src/app.js b/docs/src/app.js
@@ -4,8 +4,9 @@ import { Router, Route, IndexRoute } from 'react-router';
 import { createHashHistory, useBasename } from 'history';
 
 import DocApp from './DocApp';
-import Pages from '../pages/html';
+import * as Pages from '../pages/html';
 import pageComponentHelper from './PageComponentHelper';
+import * as Templates from './templates';
 
 // export all ReactMDL into global so we can generate demos
 import * as ReactMDL from '../../src/';
@@ -15,25 +16,22 @@ for(const component in ReactMDL) {
     }
 }
 
-const home = !!Pages.home
-    ? (
-        <IndexRoute component={pageComponentHelper(Pages.home)} />
-    )
-    : null;
-
-const routes = Object.keys(Pages).filter(e => e !== 'home').map(page => {
-    return <Route key={page} path={page} component={pageComponentHelper(Pages[page])} />;
-});
-
 const history = useBasename(createHashHistory)({
     queryKey: false
 });
 
 render((
     <Router history={history}>
         <Route path="/" component={DocApp}>
-            {home}
-            {routes}
+            {Pages.home && <IndexRoute component={pageComponentHelper(Pages.home)} />}
+            {Object.keys(Pages).filter(e => e !== 'home').map(page => {
+                return <Route key={page} path={page} component={pageComponentHelper(Pages[page])} />;
+            })}
+        </Route>
+        <Route path="templates">
+            {Object.keys(Templates).map(template => {
+                return <Route key={template} path={template.toLowerCase()} component={Templates[template]} />;
+            })}
         </Route>
     </Router>
 ), document.getElementById('app'));
diff --git a/docs/src/templates/Article.js b/docs/src/templates/Article.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import classNames from 'classnames';
+import makeTemplate from './TemplateHelper';
+import { Layout, Header, Textfield, Content, Grid, Cell,
+    Footer, FooterSection, FooterLinkList } from '../../../src/';
+import { getColorClass, getTextColorClass } from '../../../src/utils/palette';
+
+class Article extends React.Component {
+    render() {
+        return (
+            <Layout className={classNames('demo-layout', getColorClass('grey', 100))} fixedHeader>
+                <Header className={classNames('demo-header', getColorClass('grey', 100), getTextColorClass('grey', 800))} title="Material Design Lite" scroll>
+                <Textfield
+                    value=""
+                    label="Search"
+                    expandable
+                    expandableIcon="search"
+                />
+                </Header>
+                <div className="demo-ribbon" />
+                <Content className="demo-main">
+                    <Grid className="demo-container">
+                        <Cell col={2} hidePhone hideTablet />
+                        <Cell col={8} shadow={2} className={classNames('demo-content', getColorClass('white'), getTextColorClass('grey', 800))}>
+                            <div className={classNames('demo-crumbs', getTextColorClass('grey', 500))}>
+                                Google &gt; Material Design Lite &gt; How to install MDL
+                            </div>
+                            <h3>How to install MDL</h3>
+                            <p>Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.</p>
+                            <p>Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.</p>
+                            <p>Tempor tempor aliqua in commodo cillum Lorem magna dolore proident Lorem. Esse ad consequat est excepteur irure eu irure quis aliqua qui. Do mollit esse veniam excepteur ut veniam anim minim dolore sit commodo consequat duis commodo. Sunt dolor reprehenderit ipsum minim eiusmod eu consectetur anim excepteur eiusmod. Duis excepteur anim dolor sit enim veniam deserunt anim adipisicing Lorem elit. Cillum sunt do consequat elit laboris nisi consectetur.</p>
+                            <h3>Basic MDL Usage</h3>
+                            <p>Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.</p>
+                            <p>Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.</p>
+                            <p>Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.</p>
+                            <p>Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.</p>
+                            <p>Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.</p>
+                            <p>Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.</p>
+                            <p>Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.</p>
+                            <p>Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.</p>
+                        </Cell>
+                    </Grid>
+                    <Footer size="mini" className="demo-footer">
+                        <FooterSection type="left">
+                            <FooterLinkList>
+                                <a href="#">Help</a>
+                                <a href="#">Privacy and Terms</a>
+                                <a href="#">User Agreement</a>
+                            </FooterLinkList>
+                        </FooterSection>
+                    </Footer>
+                </Content>
+            </Layout>
+        );
+    }
+}
+
+export default makeTemplate(Article, `
+.demo-ribbon {
+  width: 100%;
+  height: 40vh;
+  background-color: #3F51B5;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.demo-main {
+  margin-top: -35vh;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+
+.demo-header .mdl-layout__header-row {
+  padding-left: 40px;
+}
+
+.demo-container {
+  max-width: 1600px;
+  width: calc(100% - 16px);
+  margin: 0 auto;
+}
+
+.demo-content {
+  border-radius: 2px;
+  padding: 80px 56px;
+  margin-bottom: 80px;
+}
+
+.demo-layout.is-small-screen .demo-content {
+  padding: 40px 28px;
+}
+
+.demo-content h3 {
+  margin-top: 48px;
+}
+
+.demo-footer {
+  padding-left: 40px;
+}
+
+.demo-footer .mdl-mini-footer--link-list a {
+  font-size: 13px;
+}
+`);
diff --git a/docs/src/templates/TemplateHelper.js b/docs/src/templates/TemplateHelper.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+let customStyleId = 0;
+
+export default (Component, css) => {
+    return class Template extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = {
+                styleId: customStyleId++
+            };
+        }
+
+        componentDidMount() {
+            const styleNode = document.createElement('style');
+            styleNode.type = 'text/css';
+            styleNode.id = 'template-style-' + this.state.styleId;
+            styleNode.innerHTML = css;
+            document.getElementsByTagName('head')[0].appendChild(styleNode);
+        }
+
+        componentWillUnmount() {
+            const styleNode = document.getElementById('template-style-' + this.state.styleId);
+            styleNode.parentNode.removeChild(styleNode);
+        }
+
+        render() {
+            return <Component />;
+        }
+    };
+};