├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .jestrc ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs ├── .gatsby-context.js ├── components │ ├── Breakpoint.js │ ├── Content │ │ ├── Content.js │ │ └── index.js │ ├── Layout │ │ ├── Layout.js │ │ └── index.js │ ├── Logo │ │ ├── Logo.js │ │ ├── _logo.css │ │ ├── index.js │ │ └── logo-white-30.svg │ ├── Toolbar │ │ ├── Toolbar.js │ │ └── index.js │ └── breakpoints.css ├── config.toml ├── css │ └── main.css ├── gatsby-node.js ├── html.js ├── loaders │ └── markdown-loader │ │ └── index.js ├── package.json ├── pages │ ├── 404.md │ ├── _template.jsx │ ├── components │ │ ├── button │ │ │ ├── _Counter.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── card │ │ │ ├── _template.jsx │ │ │ ├── card_bg.jpg │ │ │ └── index.md │ │ ├── checkbox │ │ │ ├── _Default.jsx │ │ │ ├── _Indeterminate.jsx │ │ │ ├── _Labeled.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── dialog │ │ │ ├── _Scrollable.jsx │ │ │ ├── _Standard.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── drawer │ │ │ ├── _Permanent.jsx │ │ │ ├── _Temporary.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── elevation │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── fab │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── grid │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── grid_list │ │ │ ├── _Default.jsx │ │ │ ├── _IconCaption.js │ │ │ ├── _TwoLineCaption.jsx │ │ │ ├── _template.jsx │ │ │ ├── card_bg.jpg │ │ │ └── index.md │ │ ├── icon_toggle │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── linear_progress │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── list │ │ │ ├── _Default.jsx │ │ │ ├── _Detail.jsx │ │ │ ├── _Divider.jsx │ │ │ ├── _Group.jsx │ │ │ ├── _TwoLines.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── menu │ │ │ ├── _Bottom.jsx │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── radio │ │ │ ├── _Group.jsx │ │ │ ├── _Labeled.jsx │ │ │ ├── _Simple.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── slider │ │ │ ├── _Default.jsx │ │ │ ├── _Disabled.jsx │ │ │ ├── _Discrete.jsx │ │ │ ├── _DiscreteWithMarkers.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── snackbar │ │ │ ├── _Multiline.jsx │ │ │ ├── _MultilineBottomAction.jsx │ │ │ ├── _Singleline.jsx │ │ │ ├── _SinglelineAction.jsx │ │ │ ├── _SinglelineTimeout.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── switch │ │ │ ├── _Default.jsx │ │ │ ├── _Disabled.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── tabs │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── text_field │ │ │ ├── _Disabled.jsx │ │ │ ├── _FloatingLabel.jsx │ │ │ ├── _Helptext.jsx │ │ │ ├── _HelptextPersistent.jsx │ │ │ ├── _HelptextValidation.jsx │ │ │ ├── _Icons.jsx │ │ │ ├── _Required.jsx │ │ │ ├── _Textarea.jsx │ │ │ ├── _UseInvalidProp.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ ├── toolbar │ │ │ ├── _Fixed.jsx │ │ │ ├── _Flexible.jsx │ │ │ ├── _Normal.jsx │ │ │ ├── _Sections.jsx │ │ │ ├── _ToolbarBase.jsx │ │ │ ├── _ToolbarHoc.jsx │ │ │ ├── _Waterfall.jsx │ │ │ ├── _WaterfallFixedLastRowOnly.jsx │ │ │ ├── _WaterfallFlexible.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ │ └── typography │ │ │ ├── _AdjustMargin.jsx │ │ │ ├── _ChangeComponent.jsx │ │ │ ├── _Default.jsx │ │ │ ├── _template.jsx │ │ │ └── index.md │ ├── index.md │ └── theming │ │ └── index.md ├── utils │ ├── colors.js │ └── typography.js └── wrappers │ └── md.jsx ├── package-lock.json ├── package.json ├── src ├── Animation │ ├── AnimationController.js │ └── index.js ├── Button │ ├── Button.js │ └── index.js ├── Card │ ├── Card.js │ ├── CardActions.js │ ├── CardHeader.js │ ├── CardHorizontalBlock.js │ ├── CardMedia.js │ ├── CardSubtitle.js │ ├── CardText.js │ ├── CardTitle.js │ └── index.js ├── Checkbox │ ├── Checkbox.js │ ├── Input.js │ └── index.js ├── Content │ ├── Content.js │ └── index.js ├── Dialog │ ├── Dialog.js │ ├── DialogBody.js │ ├── DialogFooter.js │ ├── DialogHeader.js │ ├── DialogTitle.js │ ├── constants.js │ └── index.js ├── Drawer │ ├── Drawer.js │ ├── DrawerContent.js │ ├── DrawerHeader.js │ ├── DrawerHeaderContent.js │ ├── DrawerPane.js │ ├── DrawerShade.js │ ├── DrawerSpacer.js │ ├── Navigation.js │ ├── Permanent.js │ ├── Temporary.js │ ├── constants.js │ ├── index.js │ └── navigationItem.js ├── Elevation │ ├── Elevation.js │ └── index.js ├── Fab │ ├── Fab.js │ └── index.js ├── FormField │ ├── FormField.js │ └── index.js ├── Grid │ ├── Cell.js │ ├── Grid.js │ └── index.js ├── GridList │ ├── GridList.js │ ├── Tile.js │ ├── TileContent.js │ ├── TilePrimary.js │ ├── TileSecondary.js │ ├── TileSupportText.js │ ├── TileTitle.js │ └── index.js ├── Icon │ ├── Icon.js │ └── index.js ├── IconToggle │ ├── IconToggle.js │ └── index.js ├── LinearProgress │ ├── LinearProgress.js │ └── index.js ├── List │ ├── List.js │ ├── ListDivider.js │ ├── ListGroup.js │ ├── ListHeader.js │ ├── ListItem.js │ ├── ListItemText.js │ ├── ListItemTextSecondary.js │ ├── detail.js │ └── index.js ├── Menu │ ├── DelayedItems.js │ ├── DocumentClickHandler.js │ ├── Menu.js │ ├── MenuAnchor.js │ ├── MenuDivider.js │ ├── MenuItem.js │ ├── MenuList.js │ ├── MenuSlider.js │ ├── ScaledComponent.js │ ├── childChecker.js │ ├── constants.js │ ├── index.js │ ├── scaleCalculator.js │ └── util.js ├── Radio │ ├── Radio.js │ ├── RadioGroup.js │ └── index.js ├── Slider │ ├── Slider.js │ └── index.js ├── Snackbar │ ├── Snackbar.js │ └── index.js ├── Switch │ ├── Switch.js │ └── index.js ├── Tabs │ ├── Tab.js │ ├── Tabbar.js │ └── index.js ├── Textfield │ ├── BottomLine.js │ ├── Field.js │ ├── Helptext.js │ ├── Input.js │ ├── Label.js │ ├── Textfield.js │ └── index.js ├── Toolbar │ ├── Toolbar.js │ ├── ToolbarIcon.js │ ├── ToolbarRow.js │ ├── ToolbarSection.js │ ├── ToolbarTitle.js │ └── index.js ├── Typography │ ├── Body1.js │ ├── Body2.js │ ├── Caption.js │ ├── Display1.js │ ├── Display2.js │ ├── Display3.js │ ├── Display4.js │ ├── Headline.js │ ├── Subheading1.js │ ├── Subheading2.js │ ├── Title.js │ ├── Typography.js │ ├── TypographyElement.js │ ├── constants.js │ └── index.js ├── defaultTheme.js ├── index.js └── utils │ ├── isDefined.js │ ├── isSupportCssCustomProperties.js │ └── transformStyleProperties.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "transform-class-properties", 8 | "transform-object-rest-spread" 9 | ], 10 | "env": { 11 | "test": { 12 | "plugins": [ 13 | "__coverage__" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/Menu/util.js 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "parserOptions": { 5 | "ecmaFeatures": { 6 | "experimentalObjectRestSpread": true 7 | } 8 | }, 9 | "env": { 10 | "browser": true, 11 | "es6": true, 12 | "jest": true, 13 | }, 14 | "rules": { 15 | "import/no-extraneous-dependencies": 0, 16 | "jsx-a11y/label-has-for": 0, 17 | "jsx-a11y/no-static-element-interactions": 0, 18 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 19 | "react/no-array-index-key": 0, 20 | "react/prop-types": [2, { "ignore": ["children"] }], 21 | "react/require-default-props": 0, 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | /lib/ 3 | /out/ 4 | node_modules/ 5 | npm-debug.log 6 | /docs/public/ 7 | -------------------------------------------------------------------------------- /.jestrc: -------------------------------------------------------------------------------- 1 | { 2 | "collectCoverageFrom": [ 3 | "src/main/jsx/**/*.js" 4 | ], 5 | "moduleFileExtensions": [ 6 | "js", 7 | "json", 8 | "es6" 9 | ], 10 | "modulePaths": [ 11 | "src/main/jsx" 12 | ], 13 | "moduleNameMapper": { 14 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", 15 | "\\.(css|less|scss)$": "/__mocks__/styleMock.js" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs/ 2 | node_modules/ 3 | tmp_docs/ 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - "6" 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Andrey Yaroshenko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.gatsby-context.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* weak */ 4 | // This file is auto-written and used by Gatsby to require 5 | // files from your pages directory. 6 | module.exports = function (callback) { 7 | var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line 8 | );if (module.hot) { 9 | module.hot.accept(context.id, function () { 10 | context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line 11 | );return callback(context); 12 | }); 13 | } 14 | return callback(context); 15 | }; -------------------------------------------------------------------------------- /docs/components/Breakpoint.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React, { Component } from 'react' 3 | import './breakpoints.css' 4 | 5 | class Breakpoint extends Component { 6 | render () { 7 | const { mobile, children } = this.props 8 | 9 | if (mobile) { 10 | return ( 11 |
12 | {children} 13 |
14 | ) 15 | } 16 | 17 | return ( 18 |
19 | {children} 20 |
21 | ) 22 | } 23 | } 24 | 25 | Breakpoint.propTypes = { 26 | children: PropTypes.array, 27 | mobile: PropTypes.bool, 28 | } 29 | 30 | export default Breakpoint 31 | -------------------------------------------------------------------------------- /docs/components/Content/Content.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import classnames from 'classnames'; 4 | import Content from '../../../src/Content'; 5 | 6 | const propTypes = { 7 | children: PropTypes.node, 8 | }; 9 | 10 | const AppContent = ({ children }) => ( 11 | 19 | {children} 20 | 21 | ); 22 | AppContent.propTypes = propTypes; 23 | export default AppContent; 24 | -------------------------------------------------------------------------------- /docs/components/Content/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Content'; 2 | -------------------------------------------------------------------------------- /docs/components/Layout/Layout.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import classnames from 'classnames'; 4 | 5 | const propTypes = { 6 | children: PropTypes.node, 7 | }; 8 | 9 | const Layout = ({ children }) => ( 10 |
19 | {children} 20 |
21 | ); 22 | Layout.propTypes = propTypes; 23 | export default Layout; 24 | -------------------------------------------------------------------------------- /docs/components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import '@material/typography/dist/mdc.typography.min.css' 2 | export { default } from './Layout'; 3 | -------------------------------------------------------------------------------- /docs/components/Logo/Logo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logoUrl from './logo-white-30.svg'; 3 | 4 | const Logo = () => ( 5 | 9 | ); 10 | export default Logo; 11 | -------------------------------------------------------------------------------- /docs/components/Logo/_logo.css: -------------------------------------------------------------------------------- 1 | .toolbar-logo { 2 | height: 36px; 3 | margin-right: 16px; 4 | align-self: center; 5 | opacity: 0.94; 6 | } 7 | 8 | .toolbar-logo img{ 9 | height: auto; 10 | width: 36px; 11 | } 12 | -------------------------------------------------------------------------------- /docs/components/Logo/index.js: -------------------------------------------------------------------------------- 1 | import './_logo.css'; 2 | export { default } from './Logo'; 3 | -------------------------------------------------------------------------------- /docs/components/Toolbar/Toolbar.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import classnames from 'classnames'; 4 | import {Toolbar, ToolbarRow, ToolbarSection, ToolbarTitle} from '../../../src/Toolbar'; 5 | import { colors, activeColors } from 'utils/colors' 6 | import { Link } from 'react-router' 7 | import { prefixLink } from 'gatsby-helpers' 8 | import Logo from '../Logo'; 9 | 10 | const propTypes = { 11 | className: PropTypes.string, 12 | title: PropTypes.string, 13 | }; 14 | 15 | const AppToolbar = ({ className, title, ...otherProps }) => ( 16 | 24 | 25 | 28 | 29 | 30 | 35 | {title} 36 | 37 | 38 | 39 | 42 | 50 | Github 51 | 52 | 53 | 54 | 55 | ); 56 | AppToolbar.propTypes = propTypes; 57 | export default AppToolbar; 58 | -------------------------------------------------------------------------------- /docs/components/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Toolbar'; 2 | -------------------------------------------------------------------------------- /docs/components/breakpoints.css: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: 700px) { 2 | .breakpoint-min-width-700 { 3 | display: block; 4 | } 5 | .breakpoint-max-width-700 { 6 | display: none; 7 | } 8 | } 9 | @media only screen and (max-width: 700px) { 10 | .breakpoint-min-width-700 { 11 | display: none; 12 | } 13 | .breakpoint-max-width-700 { 14 | display: block; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/config.toml: -------------------------------------------------------------------------------- 1 | siteTitle="React-Mdc-Web" 2 | headerTitle="React-Mdc-Web: Material components for React.js" 3 | baseColor = "#3367D6" 4 | linkPrefix = "/react-mdc-web" 5 | [[components]] 6 | name = "Button" 7 | path = "/components/button/" 8 | [[components]] 9 | name = "Card" 10 | path = "/components/card/" 11 | [[components]] 12 | name = "Checkbox" 13 | path = "/components/checkbox/" 14 | [[components]] 15 | name = "Dialog" 16 | path = "/components/dialog/" 17 | [[components]] 18 | name = "Drawer" 19 | path = "/components/drawer/" 20 | [[components]] 21 | name = "Elevation" 22 | path = "/components/elevation/" 23 | [[components]] 24 | name = "FAB" 25 | path = "/components/fab/" 26 | [[components]] 27 | name = "Grid" 28 | path = "/components/grid/" 29 | [[components]] 30 | name = "Grid List" 31 | path = "/components/grid_list/" 32 | [[components]] 33 | name = "Icon Toggle" 34 | path = "/components/icon_toggle/" 35 | [[components]] 36 | name = "Linear progress" 37 | path = "/components/linear_progress/" 38 | [[components]] 39 | name = "List" 40 | path = "/components/list/" 41 | [[components]] 42 | name = "Menu" 43 | path = "/components/menu/" 44 | [[components]] 45 | name = "Radio" 46 | path = "/components/radio/" 47 | [[components]] 48 | name = "Slider" 49 | path = "/components/slider/" 50 | [[components]] 51 | name = "Snackbar" 52 | path = "/components/snackbar/" 53 | [[components]] 54 | name = "Switch" 55 | path = "/components/switch/" 56 | [[components]] 57 | name = "Tabs" 58 | path = "/components/tabs/" 59 | [[components]] 60 | name = "Text Field" 61 | path = "/components/text_field/" 62 | [[components]] 63 | name = "Toolbar" 64 | path = "/components/toolbar/" 65 | [[components]] 66 | name = "Typography" 67 | path = "/components/typography/" 68 | -------------------------------------------------------------------------------- /docs/css/main.css: -------------------------------------------------------------------------------- 1 | html, body, #react-mount { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | color: rgba(0, 0, 0, 0.8); 8 | } 9 | 10 | .site-title { 11 | text-transform: uppercase; 12 | text-decoration: none; 13 | } 14 | 15 | .site-title:hover { 16 | text-decoration: none; 17 | } 18 | 19 | .page-title { 20 | margin-top: 0; 21 | margin-left: 0; 22 | margin-right: 0; 23 | } 24 | 25 | h3, h4 { 26 | margin-bottom: 16px; 27 | } 28 | 29 | h5 { 30 | margin-top: 16px; 31 | margin-bottom: 16px; 32 | } 33 | 34 | a { 35 | color: #3367d6; 36 | text-decoration: none; 37 | } 38 | a:visited { 39 | color: #3367d6; 40 | } 41 | 42 | a:hover { 43 | /* text-decoration: underline; */ 44 | } 45 | 46 | .demo-grid-1 .mdc-layout-grid__cell { 47 | height: 100px; 48 | background-color: #DDD; 49 | color: #AAA; 50 | font-size: 1rem; 51 | line-height: 100px; 52 | padding: 0 24px; 53 | display: flex; 54 | } 55 | 56 | 57 | /* Prism.js overrides*/ 58 | pre[class*="language-"]{ 59 | background-image: none; 60 | border-radius: 0; 61 | } 62 | 63 | code[class*="language-"]{ 64 | font-family: 'Roboto Mono', monspace; 65 | font-size: 0.85rem; 66 | } 67 | 68 | /* Needed to make demo buttons pick up the primary color, since the concept of primary button is 69 | removed in mdc version 0.21 */ 70 | .mdc-button--raised { 71 | background-color: var(--mdc-theme-primary, #3f51b5) !important; 72 | color: var(--mdc-theme-text-primary-on-primary,#fff) !important; 73 | } 74 | 75 | .mdc-snackbar__action-button { 76 | color: var(--mdc-theme-accent,#ff4081) !important; 77 | background-color: unset !important; 78 | } -------------------------------------------------------------------------------- /docs/gatsby-node.js: -------------------------------------------------------------------------------- 1 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 2 | //var sm = require('sitemap'); 3 | import fs from 'fs-extra-promise'; 4 | import sitemap from 'sitemap'; 5 | 6 | export const modifyWebpackConfig = (config, stage) => { 7 | config.removeLoader('css'); 8 | if(stage === 'develop') { 9 | config.loader('css', function(cfg) { 10 | cfg.test = /\.css$/; 11 | cfg.loader = 'style!css'; 12 | return cfg; 13 | }); 14 | } else { 15 | config.loader('css', function(cfg) { 16 | cfg.test = /\.css$/; 17 | cfg.loader = ExtractTextPlugin.extract('css'); 18 | return cfg; 19 | }); 20 | } 21 | 22 | config.removePlugin('extract-text'); 23 | config.plugin( 24 | 'extract-text', 25 | ExtractTextPlugin, 26 | ["css/styles.css", { allChunks: true }] 27 | ); 28 | return config; 29 | } 30 | 31 | const pagesToSitemap = pages => { 32 | const urls = pages.map((p) => { 33 | if (p.path !== undefined) { 34 | return { 35 | url: p.path, 36 | changefreq: 'weekly', 37 | priority: 0.5, 38 | } 39 | } 40 | }) 41 | // remove undefined (template pages) 42 | return urls.filter(u => u !== undefined) 43 | } 44 | 45 | const generateSiteMap = pages => { 46 | const map = sitemap.createSitemap({ 47 | hostname: 'https://kradio3.github.io/react-mdc-web', 48 | cacheTime: '60000', 49 | urls: pagesToSitemap(pages), 50 | }) 51 | console.log('Generating sitemap.xml') 52 | fs.writeFileSync( 53 | `${__dirname}/public/sitemap.xml`, 54 | map.toString() 55 | ) 56 | } 57 | 58 | export const postBuild = (pages,callback) => { 59 | generateSiteMap(pages); 60 | callback(); 61 | } 62 | -------------------------------------------------------------------------------- /docs/loaders/markdown-loader/index.js: -------------------------------------------------------------------------------- 1 | var frontMatter = require('front-matter') 2 | var markdownIt = require('markdown-it') 3 | var objectAssign = require('object-assign') 4 | const prismjs = require('prismjs') 5 | const babel = require('babel-core'); 6 | require('prismjs/components/prism-jsx'); 7 | require('prismjs/components/prism-bash'); 8 | var ReactDOM = require('react-dom'); 9 | var ReactDOMServer = require('react-dom/server'); 10 | var React = require('react'); 11 | 12 | 13 | var highlight = function (str, lang) { 14 | const langClass = `language-${lang}`; 15 | const classes = langClass +' mdc-elevation--z1 mdc-elevation-transition'; 16 | if (lang && prismjs.languages[lang]) { 17 | try { 18 | const html = prismjs.highlight(str, prismjs.languages[lang]); 19 | return `
${html}
`; 20 | } catch (_error) { 21 | console.log(_error); 22 | return ''; 23 | } 24 | } else if(lang === 'react-snippet'){ 25 | return `
`;
26 |   }
27 |   return ''
28 | }
29 | 
30 | var md = markdownIt({
31 |   highlight,
32 |   html: true,
33 |   linkify: true,
34 |   typographer: true,
35 | });
36 | 
37 | md.renderer.rules.heading_open  = function (tokens, idx, options, env, renderer) { 
38 |   const token = tokens[idx];
39 |   const tag = token.tag;
40 |   const className = headings[tag];
41 |   return '<'+tag+' class="'+className+'">'; 
42 | };
43 | 
44 | const headings = {
45 |   'h1': 'mdc-typography--display3',
46 |   'h2': 'mdc-typography--display2',
47 |   'h3': 'mdc-typography--display1',
48 |   'h4': 'mdc-typography--headline',
49 |   'h5': 'mdc-typography--title',
50 | };
51 | 
52 | module.exports = function (content) {
53 |   this.cacheable()
54 |   const meta = frontMatter(content)
55 |   const body = md.render(meta.body)
56 |   const result = objectAssign({}, meta.attributes, {
57 |     body,
58 |   })
59 |   this.value = result
60 |   return `module.exports = ${JSON.stringify(result)}`
61 | }
62 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "chroma-js": "^0.7.2",
 5 |     "color-pairs-picker": "^1.3.5",
 6 |     "gatsby": "^0.12.28",
 7 |     "lodash": "^4.17.2",
 8 |     "react": "^15.4.2",
 9 |     "react-document-title": "^2.0.1",
10 |     "react-frame-component": "^2.0.0",
11 |     "react-motion": "^0.1.0",
12 |     "react-responsive-grid": "^0.3.3",
13 |     "react-typography": "^0.15.0",
14 |     "typography": "^0.15.0",
15 |     "typography-plugin-code": "^0.15.0",
16 |     "underscore.string": "^3.2.2"
17 |   },
18 |   "devDependencies": {
19 |     "gh-pages": "^0.12.0",
20 |     "prismjs": "^1.6.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/docs/pages/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: /404.html
3 | ---
4 | 
5 | # NOT FOUND
6 | 
7 | You just hit a route that doesn't exist... the sadness.
8 | 


--------------------------------------------------------------------------------
/docs/pages/components/button/_Counter.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Button from '../../../../src/Button/Button'
 3 | 
 4 | class Counter extends React.PureComponent {
 5 |   constructor(props){
 6 |     super(props);
 7 |     this.state={ counter: 0 };
 8 |   }
 9 | 
10 |   render () {
11 |     return (
12 |       

13 |         
23 |         {this.state.counter}
24 |       

25 |     )
26 |   }
27 | }
28 | export default Counter;
29 | 


--------------------------------------------------------------------------------
/docs/pages/components/button/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Button from '../../../../src/Button/Button'
 4 | import Counter from './_Counter';
 5 | 
 6 | class Buttons extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const flatContainer = document.getElementById("flat-buttons");
14 |     ReactDOM.render(this.renderButtons(), flatContainer);
15 |     var raisedContainer = document.getElementById("raised-buttons");
16 |     ReactDOM.render(this.renderButtons(true), raisedContainer);
17 |     var counterContainer = document.getElementById("click-button");
18 |     ReactDOM.render(, counterContainer);
19 |   } 
20 | 
21 |   renderButtons(isRaised) {
22 |     return (
23 |       

24 |         
25 |         
26 |         
27 |       

28 |     )
29 |   }
30 | 
31 |   render () {
32 |     return (
33 |       

34 |         {this.props.children}
35 |       

36 |     )
37 |   }
38 | }
39 | export default Buttons;
40 | 


--------------------------------------------------------------------------------
/docs/pages/components/button/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Button"
 3 | ---
 4 | 
 5 | ### Flat buttons
 6 | ```react-snippet
 7 | flat-buttons
 8 | ```
 9 | 
10 | ```jsx
11 | 
12 | 
13 | 
14 | ```
15 | ### Raised buttons
16 | ```react-snippet
17 | raised-buttons
18 | ```
19 | ```jsx
20 | 
21 | 
22 | 
23 | ```
24 | 
25 | ### Handle click
26 | ```react-snippet
27 | click-button
28 | ```
29 | ```jsx
30 | 
40 | 


--------------------------------------------------------------------------------
/docs/pages/components/card/card_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kradio3/react-mdc-web/b205e97ae7d805cc3a7527a2326a1311e35670c4/docs/pages/components/card/card_bg.jpg


--------------------------------------------------------------------------------
/docs/pages/components/card/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Card"
 3 | ---
 4 | 
 5 | ### Simple card
 6 | ```react-snippet
 7 | text-card
 8 | ```
 9 | ```jsx
10 | 
11 |   
12 |     Title goes here
13 |     Subtitle
14 |   
15 |   
16 |     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
17 |   
18 |   
19 |     
20 |     
21 |   
22 | 
23 | ```
24 | ### Media card
25 | ```react-snippet
26 | media-card
27 | ```
28 | ```jsx
29 | 
30 |   
31 |     Title goes here
32 |   
33 |   
40 |   
41 |     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
42 |   
43 |   
44 |     
45 |     
46 |   
47 | 
48 | ```
49 | 


--------------------------------------------------------------------------------
/docs/pages/components/checkbox/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Checkbox from '../../../../src/Checkbox/Checkbox'
 3 | 
 4 | class Default extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |     this.state={ checked: false };
 9 |   }
10 | 
11 |   render () {
12 |     return (
13 |       {
16 |           this.setState({checked})
17 |         }}
18 |         checked={this.state.checked}
19 |       />
20 | 
21 |     )
22 |   }
23 | }
24 | export default Default;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/checkbox/_Indeterminate.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Checkbox from '../../../../src/Checkbox/Checkbox'
 3 | import Button from '../../../../src/Button/Button'
 4 | 
 5 | class Indeterminate extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={indeterminate: true, checked: false};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       

15 |         {
18 |             this.setState({checked, indeterminate:false})
19 |           }}
20 |           checked={this.state.checked}
21 |           indeterminate={this.state.indeterminate}
22 |         />
23 |         
33 |       

34 | 
35 |     )
36 |   }
37 | }
38 | export default Indeterminate;
39 | 


--------------------------------------------------------------------------------
/docs/pages/components/checkbox/_Labeled.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Checkbox from '../../../../src/Checkbox/Checkbox'
 3 | import FormField from '../../../../src/FormField/FormField'
 4 | 
 5 | class Labeled extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={ checked: false };
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         {
17 |             this.setState({checked})
18 |           }}
19 |           checked={this.state.checked}
20 |         />
21 |         
22 |           
23 |     )
24 |   }
25 | }
26 | export default Labeled;
27 | 


--------------------------------------------------------------------------------
/docs/pages/components/checkbox/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import Indeterminate from './_Indeterminate'
 5 | import Labeled from './_Labeled'
 6 | 
 7 | class Template extends React.PureComponent {
 8 | 
 9 |   static propTypes = {
10 |     children: PropTypes.node,
11 |   }
12 | 
13 |   componentDidMount() {
14 |     const defaultContainer = document.getElementById("default-checkbox");
15 |     ReactDOM.render(, defaultContainer);
16 | 
17 |     const indeterminateContainer = document.getElementById("indeterminate-checkbox");
18 |     ReactDOM.render(, indeterminateContainer);
19 | 
20 |     const labeledContainer = document.getElementById("labeled-checkbox");
21 |     ReactDOM.render(, labeledContainer);
22 |   } 
23 | 
24 |   render () {
25 |     return (
26 |       

27 |         {this.props.children}
28 |       

29 |     )
30 |   }
31 | }
32 | export default Template;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/checkbox/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Checkbox"
 3 | ---
 4 | 
 5 | ### Default checkbox 
 6 | ```react-snippet
 7 | default-checkbox
 8 | ```
 9 | ```jsx
10 | {
12 |     this.setState({checked})
13 |   }}
14 |   checked={this.state.checked}
15 | />
16 | ```
17 | 
18 | ### Indeterminate state 
19 | ```react-snippet
20 | indeterminate-checkbox
21 | ```
22 | ```jsx
23 | {
25 |     this.setState({checked, indeterminate:false})
26 |   }}
27 |   checked={this.state.checked}
28 |   indeterminate={this.state.indeterminate}
29 | />
30 | ```
31 | 
32 | ### Labels
33 | ```react-snippet
34 | labeled-checkbox
35 | ```
36 | ```jsx
37 | 
38 |   {
40 |       this.setState({checked})
41 |     }}
42 |     checked={this.state.checked}
43 |   />
44 |   
45 | 
46 | ```
47 | 


--------------------------------------------------------------------------------
/docs/pages/components/dialog/_Scrollable.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Dialog from '../../../../src/Dialog/Dialog'
 3 | import DialogBody from '../../../../src/Dialog/DialogBody'
 4 | import DialogTitle from '../../../../src/Dialog/DialogTitle'
 5 | import DialogHeader from '../../../../src/Dialog/DialogHeader'
 6 | import DialogFooter from '../../../../src/Dialog/DialogFooter'
 7 | import Button from '../../../../src/Button/Button'
 8 | import List from '../../../../src/List/List'
 9 | import ListItem from '../../../../src/List/ListItem'
10 | 
11 | class Standard extends React.PureComponent {
12 | 
13 |   constructor(props){
14 |     super(props);
15 |     this.state={isOpen: false};
16 |   }
17 | 
18 |   render () {
19 |     return (
20 |       

21 |         
27 |          {this.setState({isOpen:false})}}
30 |         >
31 |           
32 |             Choose a Ringtone
33 |           
34 |           
35 |             
36 |               None
37 |               Callisto
38 |               Ganymede
39 |               Luna
40 |               Marimba
41 |               Schwifty
42 |               Callisto
43 |               Ganymede
44 |               Luna
45 |               Marimba
46 |               Schwifty
47 |             
48 |           
49 |           
50 |             
51 |             
52 |           
53 |         
54 |       

55 |     )
56 |   }
57 | }
58 | export default Standard;
59 | 


--------------------------------------------------------------------------------
/docs/pages/components/dialog/_Standard.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Dialog from '../../../../src/Dialog/Dialog'
 3 | import DialogBody from '../../../../src/Dialog/DialogBody'
 4 | import DialogTitle from '../../../../src/Dialog/DialogTitle'
 5 | import DialogHeader from '../../../../src/Dialog/DialogHeader'
 6 | import DialogFooter from '../../../../src/Dialog/DialogFooter'
 7 | import Button from '../../../../src/Button/Button'
 8 | 
 9 | class Standard extends React.PureComponent {
10 | 
11 |   constructor(props){
12 |     super(props);
13 |     this.state={isOpen: false};
14 |   }
15 | 
16 |   render () {
17 |     return (
18 |       

19 |         
25 |          {this.setState({isOpen:false})}}
28 |         >
29 |           
30 |             Use Google's location service?
31 |           
32 |           
33 |             Let Google help apps determine location.
34 |           
35 |           
36 |             
37 |             
38 |           
39 |         
40 |       

41 |     )
42 |   }
43 | }
44 | export default Standard;
45 | 


--------------------------------------------------------------------------------
/docs/pages/components/dialog/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Standard from './_Standard'
 4 | import Scrollable from './_Scrollable'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const standard = document.getElementById("simple");
14 |     ReactDOM.render(, standard);
15 | 
16 |     const scrollable = document.getElementById("scrollable");
17 |     ReactDOM.render(, scrollable);
18 |   }
19 | 
20 |   render () {
21 |     return (
22 |       

23 |         {this.props.children}
24 |       

25 |     )
26 |   }
27 | }
28 | export default Template;
29 | 


--------------------------------------------------------------------------------
/docs/pages/components/dialog/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Dialog"
 3 | ---
 4 | 
 5 | ### Simple dialog
 6 | ```react-snippet
 7 | simple
 8 | ```
 9 | ```jsx
10 | 
16 |  {this.setState({isOpen:false})}}
19 | >
20 |   
21 |     Use Google's location service?
22 |   
23 |   
24 |     Let Google help apps determine location.
25 |   
26 |   
27 |     
28 |     
29 |   
30 | 
31 | ```
32 | ### Scrollable dialog
33 | ```react-snippet
34 | scrollable
35 | ```
36 | ```jsx
37 | 
43 |  {this.setState({isOpen:false})}}
46 | >
47 |   
48 |     Choose a Ringtone
49 |   
50 |   
51 |     
52 |       None
53 |       Callisto
54 |       Ganymede
55 |       Luna
56 |       Marimba
57 |       Schwifty
58 |       Callisto
59 |       Ganymede
60 |       Luna
61 |       Marimba
62 |       Schwifty
63 |     
64 |   
65 |   
66 |     
67 |     
68 |   
69 | 
70 | ```
71 | 


--------------------------------------------------------------------------------
/docs/pages/components/drawer/_Permanent.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Drawer from '../../../../src/Drawer/Drawer'
 3 | import DrawerSpacer from '../../../../src/Drawer/DrawerSpacer'
 4 | import Navigation from '../../../../src/Drawer/Navigation'
 5 | import Icon from '../../../../src/Icon/Icon'
 6 | 
 7 | class Permanent extends React.PureComponent {
 8 | 
 9 |   constructor(props){
10 |     super(props);
11 |     this.state={};
12 |   }
13 | 
14 |   render () {
15 |     return (
16 |       
17 |         
18 |           Directions
19 |         
20 |         
21 |           Bus
22 |           Railway
23 |           Bike
24 |         
25 |       
26 |     )
27 |   }
28 | }
29 | export default Permanent;
30 | 


--------------------------------------------------------------------------------
/docs/pages/components/drawer/_Temporary.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Drawer from '../../../../src/Drawer/Drawer'
 3 | import DrawerSpacer from '../../../../src/Drawer/DrawerSpacer'
 4 | import DrawerContent from '../../../../src/Drawer/DrawerContent'
 5 | import DrawerHeader from '../../../../src/Drawer/DrawerHeader'
 6 | import DrawerHeaderContent from '../../../../src/Drawer/DrawerHeaderContent'
 7 | import Navigation from '../../../../src/Drawer/Navigation'
 8 | import Icon from '../../../../src/Icon/Icon'
 9 | import Button from '../../../../src/Button/Button'
10 | 
11 | class Permanent extends React.PureComponent {
12 | 
13 |   constructor(props){
14 |     super(props);
15 |     this.state={isOpen: false};
16 |   }
17 | 
18 |   render () {
19 |     return (
20 |       

21 |         
27 |          { this.setState({isOpen: false}) }}
30 |         >
31 |           
32 |             
33 |               Directions
34 |             
35 |           
36 |           
37 |             
38 |               Bus
39 |               Railway
40 |               Bike
41 |             
42 |           
43 |         
44 |       

45 |     )
46 |   }
47 | }
48 | export default Permanent;
49 | 


--------------------------------------------------------------------------------
/docs/pages/components/drawer/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Permanent from './_Permanent'
 4 | import Temporary from './_Temporary'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const permanent = document.getElementById("permanent");
14 |     ReactDOM.render(, permanent);
15 | 
16 |     const temporary = document.getElementById("temporary");
17 |     ReactDOM.render(, temporary);
18 |   } 
19 | 
20 |   render () {
21 |     return (
22 |       

23 |         {this.props.children}
24 |       

25 |     )
26 |   }
27 | }
28 | export default Template;
29 | 


--------------------------------------------------------------------------------
/docs/pages/components/drawer/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Drawer"
 3 | ---
 4 | 
 5 | ### Permanent
 6 | ```react-snippet
 7 | permanent
 8 | ```
 9 | ```jsx
10 | 
11 |   
12 |     Directions
13 |   
14 |   
15 |     Bus
16 |     Railway
17 |     Bike
18 |   
19 | 
20 | ```
21 | ### Temporary
22 | ```react-snippet
23 | temporary
24 | ```
25 | ```jsx
26 | 
32 |  { this.setState({isOpen: false}) }}
35 | >
36 |   
37 |     
38 |       Directions
39 |     
40 |   
41 |   
42 |     
43 |       Bus
44 |       Railway
45 |       Bike
46 |     
47 |   
48 | 
49 | 
50 | ```
51 | 


--------------------------------------------------------------------------------
/docs/pages/components/elevation/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Elevation from '../../../../src/Elevation/Elevation'
 3 | import Button from '../../../../src/Button/Button'
 4 | 
 5 | class Default extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={level: 4};
10 |   }
11 | 
12 |   render () {
13 |     const { level } = this.state;
14 |     return (
15 |       

16 |         
20 |           {'lift up for 4dp'} 
21 |         
22 |         
27 |           {'transition for 4dp'} 
28 |         
29 |         

30 |           
36 |         

37 |       

38 |     )
39 |   }
40 | }
41 | export default Default;
42 | 


--------------------------------------------------------------------------------
/docs/pages/components/elevation/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | 
 5 | class Template extends React.PureComponent {
 6 | 
 7 |   static propTypes = {
 8 |     children: PropTypes.node,
 9 |   }
10 | 
11 |   componentDidMount() {
12 |     const container = document.getElementById("elevations");
13 |     ReactDOM.render(, container);
14 |   } 
15 | 
16 |   render () {
17 |     return (
18 |       

19 |         {this.props.children}
20 |       

21 |     )
22 |   }
23 | }
24 | export default Template;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/elevation/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Elevation"
 3 | ---
 4 | ```react-snippet
 5 | elevations
 6 | ```
 7 | 
 8 | Block elevated by Z axis for 0...24dp
 9 | ```jsx
10 | {/* Elevation for 4dp */}
11 | 
12 |   {'lift up for 4dp'}
13 | 
14 | ```
15 | 
16 | Transition property can be used for smooth elevation from level to level
17 | ```jsx
18 | {/* Transition elevation */}
19 | 
23 |   {'transition for 4dp'}
24 | 
25 | ```
26 | 


--------------------------------------------------------------------------------
/docs/pages/components/fab/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Fab from '../../../../src/Fab/Fab'
 4 | import Icon from '../../../../src/Icon/Icon'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const container = document.getElementById("fabs");
14 |     ReactDOM.render(this.renderFabs(), container);
15 |   } 
16 | 
17 |   renderFabs() {
18 |     return(
19 |       

20 |         
21 |         
22 |       

23 |     )
24 |   }
25 | 
26 |   render () {
27 |     return (
28 |       

29 |         {this.props.children}
30 |       

31 |     )
32 |   }
33 | }
34 | export default Template;
35 | 


--------------------------------------------------------------------------------
/docs/pages/components/fab/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Floating action button"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | fabs
 7 | ```
 8 | ```jsx
 9 | {/* Default */}
10 | 
11 | 
12 | {/* Mini */}
13 | 
14 | ```
15 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Grid from '../../../../src/Grid/Grid'
 4 | import Cell from '../../../../src/Grid/Cell'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const desktopContainer = document.getElementById("desktop-grid");
14 |     ReactDOM.render(this.renderDesktop(), desktopContainer);
15 |   } 
16 | 
17 |   renderDesktop() {
18 |     return(
19 |       

20 |         
21 |            1 
22 |            1 
23 |            1 
24 |            1 
25 |            1 
26 |            1 
27 |            1 
28 |            1 
29 |            1 
30 |            1 
31 |            1 
32 |            1 
33 |         
34 |         
35 |            3 
36 |            3 
37 |            3 
38 |            3 
39 |         
40 |         
41 |            6 (tablet 8) 
42 |            4 (tablet 6) 
43 |            2 (phone 4) 
44 |         
45 |       

46 |     )
47 |   }
48 | 
49 |   render () {
50 |     return (
51 |       

52 |         {this.props.children}
53 |       

54 |     )
55 |   }
56 | }
57 | export default Template;
58 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Grid"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | desktop-grid
 7 | ```
 8 | ```jsx
 9 | 
10 |    1 
11 |    1 
12 |    1 
13 |    1 
14 |    1 
15 |    1 
16 |    1 
17 |    1 
18 |    1 
19 |    1 
20 |    1 
21 |    1 
22 | 
23 | 
24 |    3 
25 |    3 
26 |    3 
27 |    3 
28 | 
29 | 
30 |    6 (tablet 8) 
31 |    4 (tablet 6) 
32 |    2 (phone 4) 
33 | 
34 | ```
35 | 
36 | ### Desktop mode
37 | In default desktop mode Grid has 12 columns
38 | 
39 | ```jsx
40 | 
41 |   4
42 |   4
43 |   4
44 | 
45 | ```
46 | 
47 | ### Tablet mode
48 | In tablet mode Grid has 8 columns
49 | ```jsx
50 | 
51 |   4
52 |   4
53 | 
54 | ```
55 | 
56 | ### Phone mode
57 | In phone mode Grid has 4 columns
58 | ```jsx
59 | 
60 |   2
61 |   2
62 | 
63 | ```
64 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {GridList, Tile, TileTitle, TileContent, TileSecondary, TilePrimary }from '../../../../src/GridList'
 3 | import cardBg from './card_bg.jpg'
 4 | 
 5 | class Default extends React.PureComponent {
 6 | 
 7 |   renderTile(key) {
 8 |     const tile = (
 9 |       
10 |         
11 |           
12 |         
13 |         
14 |           Tile title
15 |         
16 |       
17 |     );
18 |     return tile;
19 |   }
20 | 
21 |   renderTiles(){
22 |     let result = [];
23 |     for(let i = 0; i< 14; i++) {
24 |       result.push(this.renderTile(i));
25 |     }
26 |     return result;
27 |   }
28 | 
29 |   render () {
30 |     return (
31 |       
32 |         {this.renderTiles()}
33 |       
34 |     )
35 |   }
36 | }
37 | export default Default;
38 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/_IconCaption.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import {
 4 |   GridList, 
 5 |   Tile, 
 6 |   TileTitle, 
 7 |   TileContent, 
 8 |   TileSecondary, 
 9 |   TilePrimary, 
10 |   TileSupportText,
11 | }from '../../../../src/GridList'
12 | import Icon from '../../../../src/Icon'
13 | import cardBg from './card_bg.jpg'
14 | 
15 | class IconCaption extends React.PureComponent {
16 | 
17 |   renderTile(key){
18 |     const tile = (
19 |       
20 |         
21 |           
22 |         
23 |         
24 |           
25 |           Tile title
26 |           Tile description
27 |         
28 |       
29 |     );
30 |     return tile;
31 |   }
32 | 
33 |   renderTiles(){
34 | 
35 |     let result = [];
36 |     for(let i = 0; i< 3; i++) {
37 |       result.push(this.renderTile(i));
38 |     }
39 |     return result;
40 |   }
41 | 
42 |   render () {
43 |     return (
44 |       
45 |         {this.renderTiles()}
46 |       
47 |     )
48 |   }
49 | }
50 | export default IconCaption;
51 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/_TwoLineCaption.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {
 3 |   GridList, 
 4 |   Tile, 
 5 |   TileTitle, 
 6 |   TileContent, 
 7 |   TileSecondary, 
 8 |   TilePrimary, 
 9 |   TileSupportText,
10 | }from '../../../../src/GridList'
11 | import cardBg from './card_bg.jpg'
12 | 
13 | class TwoLineCaption extends React.PureComponent {
14 | 
15 |   renderTile(key) {
16 |     const tile = (
17 |       
18 |         
19 |           
20 |         
21 |         
22 |           Tile title
23 |           Tile description
24 |         
25 |       
26 |     );
27 |     return tile;
28 |   }
29 | 
30 |   renderTiles(){
31 |     let result = [];
32 |     for(let i = 0; i< 3; i++) {
33 |       result.push(this.renderTile(i));
34 |     }
35 |     return result;
36 |   }
37 | 
38 |   render () {
39 |     return (
40 |       
41 |         {this.renderTiles()}
42 |       
43 |     )
44 |   }
45 | }
46 | export default TwoLineCaption;
47 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import TwoLineCaption from './_TwoLineCaption'
 5 | import IconCaption from './_IconCaption'
 6 | 
 7 | class Template extends React.PureComponent {
 8 | 
 9 |   static propTypes = {
10 |     children: PropTypes.node,
11 |   }
12 | 
13 |   componentDidMount() {
14 |     const defaultContainer = document.getElementById("default-grid-list");
15 |     ReactDOM.render(, defaultContainer);
16 | 
17 |     const compactContainer = document.getElementById("grid-list-compact");
18 |     ReactDOM.render(, compactContainer);
19 | 
20 |     const ratioContainer = document.getElementById("grid-list-ratio");
21 |     ReactDOM.render(, ratioContainer);
22 | 
23 |     const twoLineContainer = document.getElementById("grid-list-support-text");
24 |     ReactDOM.render(, twoLineContainer);
25 | 
26 |     const headerCaptionContainer = document.getElementById("grid-list-header-caption");
27 |     ReactDOM.render(, headerCaptionContainer);
28 | 
29 |     const iconCaptionContainer = document.getElementById("grid-list-icon-caption");
30 |     ReactDOM.render(, iconCaptionContainer);
31 |   } 
32 | 
33 |   render () {
34 |     return (
35 |       

36 |         {this.props.children}
37 |       

38 |     )
39 |   }
40 | }
41 | export default Template;
42 | 


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/card_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kradio3/react-mdc-web/b205e97ae7d805cc3a7527a2326a1311e35670c4/docs/pages/components/grid_list/card_bg.jpg


--------------------------------------------------------------------------------
/docs/pages/components/grid_list/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Grid list"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | default-grid-list
 7 | ```
 8 | ```jsx
 9 | 
10 |   
11 |     
12 |       
13 |     
14 |     
15 |       Tile title
16 |     
17 |   
18 |   {/* ... */}
19 | 
20 | ```
21 | 
22 | ### Compact
23 | ```react-snippet
24 | grid-list-compact
25 | ```
26 | ```jsx
27 | 
28 |   {/*...*/}
29 | 
30 | ```
31 | 
32 | ### Tile ratio
33 | ```react-snippet
34 | grid-list-ratio
35 | ```
36 | 
37 | You can use one of recommended aspect ratio. See [ratio keylines](https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-ratio-keylines)
38 | 
39 | ```jsx
40 | {/* 1x1, 16x9, 2x3, 3x2, 4x3, 3x4*/}
41 | 
42 | ```
43 | 
44 | ### Support text
45 | ```react-snippet
46 | grid-list-support-text
47 | ```
48 | ```jsx
49 | 
50 |   
51 |     
52 |       
53 |     
54 |     
55 |       Tile title
56 |       Tile description
57 |     
58 |   
59 |   {/* ... */}
60 | 
61 | ```
62 | ### Caption on header
63 | ```react-snippet
64 | grid-list-header-caption
65 | ```
66 | ```jsx
67 | 
68 |   {/* ... */}
69 | 
70 | ```
71 | 
72 | ### Caption with icon
73 | ```react-snippet
74 | grid-list-icon-caption
75 | ```
76 | ```jsx
77 | 
78 |   
79 |     
80 |       
81 |     
82 |     
83 |       
84 |       Tile title
85 |       Tile description
86 |     
87 |   
88 |   {/* ... */}
89 | 
90 | ```
91 | 


--------------------------------------------------------------------------------
/docs/pages/components/icon_toggle/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Grid from '../../../../src/Grid/Grid'
 4 | import Cell from '../../../../src/Grid/Cell'
 5 | 
 6 | class Default extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       
16 |         
17 |            {
20 |               this.setState({starred: !this.state.starred})
21 |             }}
22 |           >
23 |             {this.state.starred ? 'star' : 'star_border'}
24 |           
25 |           Default
26 |         
27 | 
28 |         
29 |            {
32 |               this.setState({starred1: !this.state.starred1})
33 |             }}
34 |             primary
35 |           >
36 |             {this.state.starred1 ? 'star' : 'star_border'}
37 |           
38 |           Primary
39 |         
40 | 
41 |         
42 |            {
45 |               this.setState({starred2: !this.state.starred2})
46 |             }}
47 |             accent
48 |           >
49 |             {this.state.starred2 ? 'star' : 'star_border'}
50 |           
51 |           Accent
52 |         
53 |         
54 |            {
57 |               this.setState({starred3: !this.state.starred3})
58 |             }}
59 |             disabled
60 |           >
61 |             {this.state.starred3 ? 'star' : 'star_border'}
62 |           
63 |           Disabled
64 |         
65 |       
66 |     )
67 |   }
68 | }
69 | export default Default;
70 | 


--------------------------------------------------------------------------------
/docs/pages/components/icon_toggle/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | 
 5 | class Template extends React.PureComponent {
 6 | 
 7 |   static propTypes = {
 8 |     children: PropTypes.node,
 9 |   }
10 | 
11 |   componentDidMount() {
12 |     const defaultContainer = document.getElementById("default-icon-toggle");
13 |     ReactDOM.render(, defaultContainer);
14 |   } 
15 | 
16 |   render () {
17 |     return (
18 |       

19 |         {this.props.children}
20 |       

21 |     )
22 |   }
23 | }
24 | export default Template;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/icon_toggle/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Icon toggle"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | default-icon-toggle
 7 | ```
 8 | Default
 9 | ```jsx
10 |  { this.setState({starred: !this.state.starred}) }}
13 | >
14 |   {this.state.starred ? 'star' : 'star_border'}
15 | 
16 | ```
17 | Primary
18 | ```jsx
19 |  { this.setState({starred: !this.state.starred}) }}
22 |   primary
23 | >
24 |   {this.state.starred ? 'star' : 'star_border'}
25 | 
26 | ```
27 | Accent
28 | ```jsx
29 |  { this.setState({starred: !this.state.starred}) }}
32 |   accent
33 | >
34 |   {this.state.starred ? 'star' : 'star_border'}
35 | 
36 | ```
37 | Disabled
38 | ```jsx
39 |  { this.setState({starred: !this.state.starred}) }}
42 |   disabled
43 | >
44 |   {this.state.starred ? 'star' : 'star_border'}
45 | 
46 | ```
47 | 


--------------------------------------------------------------------------------
/docs/pages/components/linear_progress/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import LinearProgress from '../../../../src/LinearProgress/LinearProgress'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class Default extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |   }
10 | 
11 |   render () {
12 |     return (
13 |       
14 |         
15 |           
16 |         
17 |         
18 |           
19 |         
20 |         
21 |           
22 |         
23 |       
24 |     )
25 |   }
26 | }
27 | export default Default;
28 | 


--------------------------------------------------------------------------------
/docs/pages/components/linear_progress/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | 
 5 | class Template extends React.PureComponent {
 6 | 
 7 |   static propTypes = {
 8 |     children: PropTypes.node,
 9 |   }
10 | 
11 |   componentDidMount() {
12 |     const defaultContainer = document.getElementById("default-linear-progress");
13 |     ReactDOM.render(, defaultContainer);
14 | 
15 |     const iContainer = document.getElementById("default-indeterminate-progress");
16 |     ReactDOM.render(, iContainer);
17 | 
18 |     const bContainer = document.getElementById("default-buffer-progress");
19 |     ReactDOM.render(, bContainer);
20 |   } 
21 | 
22 |   render () {
23 |     return (
24 |       

25 |         {this.props.children}
26 |       

27 |     )
28 |   }
29 | }
30 | export default Template;
31 | 


--------------------------------------------------------------------------------
/docs/pages/components/linear_progress/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Linear Progress"
 3 | ---
 4 | 
 5 | ### Default
 6 | ```react-snippet
 7 | default-linear-progress
 8 | ```
 9 | ```jsx
10 | 
11 | 
12 | 
13 | ```
14 | 
15 | ### Indeterminate
16 | ```react-snippet
17 | default-indeterminate-progress
18 | ```
19 | ```jsx
20 | 
21 | 
22 | 
23 | ```
24 | ### Buffer
25 | ```react-snippet
26 | default-buffer-progress
27 | ```
28 | ```jsx
29 | 
30 | 
31 | 
32 | ```
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {List, ListItem} from '../../../../src/List'
 3 | 
 4 | class Default extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |   }
 9 | 
10 |   render () {
11 |     return (
12 |       
13 |         Berlin, Germany
14 |         London, UK
15 |         Strasbourg, France
16 |         Buenos Aires, Argentina
17 |       
18 |     )
19 |   }
20 | }
21 | export default Default;
22 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_Detail.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {List, ListItem} from '../../../../src/List'
 3 | import Icon from '../../../../src/Icon';
 4 | import {Grid, Cell} from '../../../../src/Grid' 
 5 | 
 6 | class Detail extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |           
17 |           Berlin, Germany
18 |           
19 |         
20 |         
21 |           
22 |           London, UK
23 |           
24 |         
25 |         
26 |           
27 |           Strasbourg, France
28 |           
29 |         
30 |         
31 |           
32 |           Buenos Aires, Argentina
33 |           
34 |         
35 |       
36 |     )
37 |   }
38 | }
39 | export default Detail;
40 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_Divider.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {List, ListItem, ListDivider} from '../../../../src/List'
 3 | import Icon from '../../../../src/Icon';
 4 | import {Grid, Cell} from '../../../../src/Grid' 
 5 | 
 6 | class Divider extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |           
17 |             Berlin, Germany
18 |             
19 |             London, UK
20 |             
21 |             Strasbourg, France
22 |             
23 |             Buenos Aires, Argentina
24 |           
25 |         
26 | 
27 |         
28 |           
29 |             Berlin, Germany
30 |             
31 |             London, UK
32 |             
33 |             Strasbourg, France
34 |             
35 |             Buenos Aires, Argentina
36 |           
37 |         
38 |       
39 |     )
40 |   }
41 | }
42 | export default Divider;
43 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_Group.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {List, ListItem, ListGroup, ListHeader, ListDivider} from '../../../../src/List'
 3 | 
 4 | class Group extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |   }
 9 | 
10 |   render () {
11 |     return (
12 |       
13 |         By city
14 |         
15 |           Berlin, Germany
16 |           London, UK
17 |           Strasbourg, France
18 |           Buenos Aires, Argentina
19 |         
20 |         
21 |         By planet
22 |         
23 |           Mercury
24 |           Venus
25 |           Earth
26 |           Mars
27 |         
28 |       
29 |     )
30 |   }
31 | }
32 | export default Group;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_TwoLines.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import {List, ListItem, ListItemText, ListItemTextSecondary} from '../../../../src/List'
 3 | 
 4 | class TwoLines extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |   }
 9 | 
10 |   render () {
11 |     return (
12 |       
13 |         
14 |           
15 |             Berlin
16 |              Germany 
17 |           
18 |         
19 |         
20 |           
21 |             London
22 |              United Kingdom 
23 |           
24 |         
25 |         
26 |           
27 |             Strasbourg
28 |              France 
29 |           
30 |         
31 |         
32 |           
33 |             Buenos Aires
34 |              Argentina 
35 |           
36 |         
37 |       
38 |     )
39 |   }
40 | }
41 | export default TwoLines;
42 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import Detail from './_Detail'
 5 | import Divider from './_Divider'
 6 | import Group from './_Group'
 7 | import TwoLines from './_TwoLines'
 8 | 
 9 | class Template extends React.PureComponent {
10 | 
11 |   static propTypes = {
12 |     children: PropTypes.node,
13 |   }
14 | 
15 |   componentDidMount() {
16 |     const container = document.getElementById("list-text-only");
17 |     ReactDOM.render(, container);
18 | 
19 |     const dense = document.getElementById("list-dense");
20 |     ReactDOM.render(, dense);
21 | 
22 |     const detail = document.getElementById("list-detail");
23 |     ReactDOM.render(, detail);
24 | 
25 |     const divider = document.getElementById("list-divider");
26 |     ReactDOM.render(, divider);
27 | 
28 |     const group = document.getElementById("list-group");
29 |     ReactDOM.render(, group);
30 | 
31 |     const twoLines = document.getElementById("list-two-lines");
32 |     ReactDOM.render(, twoLines);
33 |   } 
34 | 
35 |   render () {
36 |     return (
37 |       

38 |         {this.props.children}
39 |       

40 |     )
41 |   }
42 | }
43 | export default Template;
44 | 


--------------------------------------------------------------------------------
/docs/pages/components/list/index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "List"
  3 | ---
  4 | 
  5 | ### Text only
  6 | ```react-snippet
  7 | list-text-only
  8 | ```
  9 | ```jsx
 10 | 
 11 |   Berlin, Germany
 12 |   London, UK
 13 |   Strasbourg, France
 14 |   Buenos Aires, Argentina
 15 | 
 16 | ```
 17 | 
 18 | ### Two lines
 19 | ```react-snippet
 20 | list-two-lines
 21 | ```
 22 | ```jsx
 23 | 
 24 |   
 25 |     
 26 |       Berlin
 27 |        Germany 
 28 |     
 29 |   
 30 | {/* ... */}
 31 | ```
 32 | 
 33 | ### Dense
 34 | ```react-snippet
 35 | list-dense
 36 | ```
 37 | ```jsx
 38 | 
 39 |   Berlin, Germany
 40 |   London, UK
 41 |   Strasbourg, France
 42 |   Buenos Aires, Argentina
 43 | 
 44 | ```
 45 | ### Details
 46 | ```react-snippet
 47 | list-detail
 48 | ```
 49 | ```jsx
 50 | 
 51 |   
 52 |     
 53 |     Berlin, Germany
 54 |     
 55 |   
 56 |   
 57 |     
 58 |     London, UK
 59 |     
 60 |   
 61 | {/* ... */}
 62 | ```
 63 | ### Dividers
 64 | ```react-snippet
 65 | list-divider
 66 | ```
 67 | ```jsx
 68 | {/* Without inset */}
 69 | Berlin, Germany
 70 | 
 71 | Strasbourg, France
 72 | 
 73 | 
 74 | {/* Inset  */}
 75 | Berlin, Germany
 76 | 
 77 | London, UK
 78 | 
 79 | ```
 80 | ### Groups
 81 | ```react-snippet
 82 | list-group
 83 | ```
 84 | ```jsx
 85 | 
 86 |   By city
 87 |   
 88 |     Berlin, Germany
 89 |     London, UK
 90 |     Strasbourg, France
 91 |     Buenos Aires, Argentina
 92 |   
 93 |   
 94 |   By planet
 95 |   
 96 |     Mercury
 97 |     Venus
 98 |     Earth
 99 |     Mars
100 |   
101 | 
102 | ```
103 | 


--------------------------------------------------------------------------------
/docs/pages/components/menu/_Bottom.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Button from '../../../../src/Button/Button'
 3 | import {Menu, MenuItem, MenuDivider, MenuAnchor} from '../../../../src/Menu';
 4 | 
 5 | class Bottom extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={};
10 |   }
11 | 
12 |   renderItems() {
13 |     return [
14 |        Andromeda ,
15 |        Black Eye Galaxy ,
16 |        Bode's Galaxy ,
17 |        Cartwheel Galaxy ,
18 |       , 
19 |        Cosmos Redshift 7 ,
20 |        Hoag's Object ,
21 |       , 
22 |        Large Magellanic Cloud ,
23 |        Small Magellanic Cloud ,
24 |       , 
25 |        Pinwheel Galaxy ,
26 |        Sombrero Galaxy ,
27 |        Sunflower Galaxy ,
28 |     ]
29 |   }
30 | 
31 |   render () {
32 |     return (
33 |         
34 |           
41 |           {this.setState({openLeft:false})}}
45 |           >
46 |             {this.renderItems()}
47 |           
48 | 
49 |           
56 |           {this.setState({openRight:false})}}
59 |             open={this.state.openRight}
60 |             right
61 |           >
62 |             {this.renderItems()}
63 |           
64 |         
65 |     )
66 |   }
67 | }
68 | export default Bottom;
69 | 


--------------------------------------------------------------------------------
/docs/pages/components/menu/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Button from '../../../../src/Button/Button'
 3 | import {Menu, MenuItem, MenuDivider, MenuAnchor} from '../../../../src/Menu';
 4 | 
 5 | class Default extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       

15 |         
21 |         
22 |           {this.setState({open:false})}}
25 |           >
26 |             
27 |               Andromeda
28 |             
29 |             
30 |               Black Eye Galaxy
31 |             
32 |             
33 |               Bode's Galaxy
34 |             
35 |             
36 |               Cartwheel Galaxy
37 |             
38 |             
39 |             
40 |               Cosmos Redshift 7
41 |             
42 |             
43 |               Hoag's Object
44 |             
45 |             
46 |             
47 |               Large Magellanic Cloud
48 |             
49 |             
50 |               Small Magellanic Cloud
51 |             
52 |             
53 |             
54 |               Pinwheel Galaxy
55 |             
56 |             
57 |               Sombrero Galaxy
58 |             
59 |             
60 |               Sunflower Galaxy
61 |             
62 | 
63 |           
64 |         
65 |       

66 |     )
67 |   }
68 | }
69 | export default Default;
70 | 


--------------------------------------------------------------------------------
/docs/pages/components/menu/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import Bottom from './_Bottom'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const menuDefault = document.getElementById("menu-default");
14 |     ReactDOM.render(, menuDefault);
15 | 
16 |     const bottom = document.getElementById("bottom");
17 |     ReactDOM.render(, bottom);
18 |   } 
19 | 
20 |   render () {
21 |     return (
22 |       

23 |         {this.props.children}
24 |       

25 |     )
26 |   }
27 | }
28 | export default Template;
29 | 


--------------------------------------------------------------------------------
/docs/pages/components/menu/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Menu"
 3 | ---
 4 | ```react-snippet
 5 | menu-default
 6 | ```
 7 | ```jsx
 8 | 
 9 |   {this.setState({open:false})}}
12 |   >
13 |     
14 |       Andromeda
15 |     
16 |     
17 |       Black Eye Galaxy
18 |     
19 |     
20 |       Bode's Galaxy
21 |     
22 |     
23 |       Cartwheel Galaxy
24 |     
25 |     
26 |     
27 |       Cosmos Redshift 7
28 |     
29 |   
30 | 
31 | ```
32 | ### Horizontal and Vertical aligns
33 | To align Menu component you can use ```bottom``` and ```right``` boolean properties
34 | ```react-snippet
35 | bottom
36 | ```
37 | ```jsx
38 | { /* Bottom left */ }
39 | {this.setState({open:false})}}
43 | >
44 | {/* items */}
45 | 
46 | 
47 | 
48 | { /* Bottom right */ }
49 | {this.setState({open:false})}}
54 | >
55 | {/* items */}
56 | 
57 | 
58 | ```
59 | 
60 | 


--------------------------------------------------------------------------------
/docs/pages/components/radio/_Group.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Radio from '../../../../src/Radio/Radio'
 3 | import RadioGroup from '../../../../src/Radio/RadioGroup'
 4 | 
 5 | class Group extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={saturn: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       {this.setState({saturn: value})}}
16 |         name="saturn"
17 |         value={this.state.saturn}
18 |       >
19 |         Titan
20 |         Dione
21 |         Tethys
22 |       
23 |     )
24 |   }
25 | }
26 | export default Group;
27 | 


--------------------------------------------------------------------------------
/docs/pages/components/radio/_Labeled.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Radio from '../../../../src/Radio/Radio'
 3 | import FormField from '../../../../src/FormField/FormField'
 4 | 
 5 | class Labeled extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |   }
10 | 
11 |   render () {
12 |     return (
13 |       

14 |         
15 |           
19 |           
20 |         
21 |         
22 |           
26 |           
27 |         
28 |       

29 |     )
30 |   }
31 | }
32 | export default Labeled;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/radio/_Simple.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Radio from '../../../../src/Radio/Radio'
 3 | 
 4 | class Simple extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |   }
 9 | 
10 |   render () {
11 |     return (
12 |       

13 |         
17 |         
21 |       

22 |     )
23 |   }
24 | }
25 | export default Simple;
26 | 


--------------------------------------------------------------------------------
/docs/pages/components/radio/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Simple from './_Simple'
 4 | import Labeled from './_Labeled'
 5 | import Group from './_Group'
 6 | 
 7 | class Template extends React.PureComponent {
 8 | 
 9 |   static propTypes = {
10 |     children: PropTypes.node,
11 |   }
12 | 
13 |   componentDidMount() {
14 |     const simpleContainer = document.getElementById("simple-radio");
15 |     ReactDOM.render(, simpleContainer);
16 | 
17 |     const labeledContainer = document.getElementById("labeled-radio");
18 |     ReactDOM.render(, labeledContainer);
19 | 
20 |     const groupContainer = document.getElementById("radio-group");
21 |     ReactDOM.render(, groupContainer);
22 |   } 
23 | 
24 |   render () {
25 |     return (
26 |       

27 |         {this.props.children}
28 |       

29 |     )
30 |   }
31 | }
32 | export default Template;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/radio/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Radio"
 3 | ---
 4 | ### Simple radio button
 5 | ```react-snippet
 6 | simple-radio
 7 | ```
 8 | ```jsx
 9 | 
13 | 
17 | ```
18 | 
19 | ### Labels
20 | ```react-snippet
21 | labeled-radio
22 | ```
23 | ```jsx
24 | 
25 |   
29 |   
30 | 
31 | 
32 |   
36 |   
37 | 
38 | ```
39 | ### Radio group component
40 | You can wrap radio buttons to ```RadioGroup``` component. It's based on `````` and calculates ```checked``` properties depending on given ```value```
41 | ```react-snippet
42 | radio-group
43 | ```
44 | ```jsx
45 | {this.setState({saturn: value})}}
47 |   name="saturn"
48 |   value={this.state.saturn}
49 | >
50 |   Titan
51 |   Dione
52 |   Tethys
53 | 
54 | ```
55 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Slider from '../../../../src/Slider'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1'
 7 | 
 8 | export default class Default extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={value:50,inputValue:50};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           {
22 |               this.setState({value})
23 |             }}
24 |             onInput={(inputValue)=>{
25 |               this.setState({inputValue})
26 |             }}
27 |           />
28 |         
29 |         
30 |           {`Current value: ${this.state.value}`}
31 |           {`Input value: ${this.state.inputValue}`}
32 |         
33 |       
34 |     )
35 |   }
36 | }
37 | 
38 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/_Disabled.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Slider from '../../../../src/Slider'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1'
 7 | 
 8 | export default class Disabled extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={value:50};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           
23 |         
24 |       
25 |     )
26 |   }
27 | }
28 | 
29 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/_Discrete.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Slider from '../../../../src/Slider'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1' 
 7 | 
 8 | export default class Discrete extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={value:0,inputValue:0};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           {
26 |               this.setState({value})
27 |             }}
28 |             onInput={(inputValue)=>{
29 |               this.setState({inputValue})
30 |             }}
31 |           />
32 |         
33 |         
34 |           {`Current value: ${this.state.value}`}
35 |           {`Input value: ${this.state.inputValue}`}          
36 |         
37 |       
38 |     )
39 |   }
40 | }
41 | 
42 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/_DiscreteWithMarkers.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Slider from '../../../../src/Slider'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1' 
 7 | 
 8 | export default class Discrete extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={value:0,inputValue:0};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           {
27 |               this.setState({value})
28 |             }}
29 |             onInput={(inputValue)=>{
30 |               this.setState({inputValue})
31 |             }}
32 |           />
33 |         
34 |         
35 |           {`Current value: ${this.state.value}`}
36 |           {`Input value: ${this.state.inputValue}`}
37 |         
38 |       
39 |     )
40 |   }
41 | }
42 | 
43 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import Disabled from './_Disabled'
 5 | import Discrete from './_Discrete'
 6 | import DiscreteWithMarkers from './_DiscreteWithMarkers'
 7 | 
 8 | export default class Template extends React.PureComponent {
 9 | 
10 |   static propTypes = {
11 |     children: PropTypes.node,
12 |   }
13 | 
14 |   componentDidMount() {
15 |     const defaultContainer = document.getElementById("default-slider");
16 |     ReactDOM.render(, defaultContainer);
17 |     const disabledContainer = document.getElementById("disabled-slider");
18 |     ReactDOM.render(, disabledContainer);
19 |     const discreteContainer = document.getElementById("discrete-slider");
20 |     ReactDOM.render(, discreteContainer);
21 |     const discreteWithMarkersContainer = document.getElementById("discrete-with-markers-slider");
22 |     ReactDOM.render(, discreteWithMarkersContainer);
23 |   }
24 | 
25 |   render () {
26 |     return (
27 |       

28 |         {this.props.children}
29 |       

30 |     )
31 |   }
32 | }
33 | 
34 | 


--------------------------------------------------------------------------------
/docs/pages/components/slider/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Slider"
 3 | ---
 4 | ### Continuous
 5 | ```react-snippet
 6 | default-slider
 7 | ```
 8 | Slider with default setting: continuous with default min and max
 9 | ```jsx
10 | 
11 |   {
14 |       this.setState({value})
15 |     }}
16 |     onInput={(inputValue)=>{
17 |       this.setState({inputValue})
18 |     }}
19 |   />
20 | 
21 | ```
22 | 
23 | ### Disabled
24 | ```react-snippet
25 | disabled-slider
26 | ```
27 | Use ```disabled``` property to disable slider
28 | ```jsx
29 | 
30 |   
34 |   />
35 | 
36 | ```
37 | 
38 | ### Discrete Slider
39 | ```react-snippet
40 | discrete-slider
41 | ```
42 | Use the ```discrete``` and ```step``` to create a discrete slider.
43 | ```jsx
44 | 
45 |   {
52 |       this.setState({value})
53 |     }}
54 |     onInput={(inputValue)=>{
55 |       this.setState({inputValue})
56 |     }}
57 |   />
58 |   />
59 | 
60 | ```
61 | 
62 | 
63 | ### Discrete Slider with Markers
64 | ```react-snippet
65 | discrete-with-markers-slider
66 | ```
67 | Use ```showMarkers``` property to show markers for discrete slider
68 | ```jsx
69 | 
70 |   {
78 |       this.setState({value})
79 |     }}
80 |     onInput={(inputValue)=>{
81 |       this.setState({inputValue})
82 |     }}
83 |   />
84 |   />
85 | 
86 | ```
87 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_Multiline.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Snackbar from '../../../../src/Snackbar/Snackbar'
 4 | import Button from '../../../../src/Button/Button'
 5 | 
 6 | class Multiline extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       

16 |         
20 |          { this.setState({snackbar: false}) }}
24 |         >
25 |            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam
26 |         
27 |       

28 |     )
29 |   }
30 | }
31 | export default Multiline;
32 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_MultilineBottomAction.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Snackbar from '../../../../src/Snackbar/Snackbar'
 4 | import Button from '../../../../src/Button/Button'
 5 | 
 6 | class MultilineBottomAction extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       

16 |         
20 |          { this.setState({snackbar: false}) }}
26 |         >
27 |            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam
28 |         
29 |       

30 |     )
31 |   }
32 | }
33 | export default MultilineBottomAction;
34 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_Singleline.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Snackbar from '../../../../src/Snackbar/Snackbar'
 4 | import Button from '../../../../src/Button/Button'
 5 | 
 6 | class Singleline extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       

16 |         
20 |          { this.setState({snackbar: false}) }}
23 |         >
24 |           Document modified
25 |         
26 |       

27 |     )
28 |   }
29 | }
30 | export default Singleline;
31 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_SinglelineAction.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Snackbar from '../../../../src/Snackbar/Snackbar'
 4 | import Button from '../../../../src/Button/Button'
 5 | 
 6 | class SinglelineAction extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       

16 |         
20 |          
24 |           {this.state.undoClicked && 'Undo has been called'}
25 |         
26 |         { this.setState({undoClicked: true}) }}
29 |           open={this.state.snackbar}
30 |           onTimeout={()=> { 
31 |             this.setState({snackbar: false, undoClicked: false}) 
32 |           }}
33 |         >
34 |           Document modified
35 |         
36 |       

37 |     )
38 |   }
39 | }
40 | export default SinglelineAction;
41 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_SinglelineTimeout.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Snackbar from '../../../../src/Snackbar/Snackbar'
 4 | import Button from '../../../../src/Button/Button'
 5 | 
 6 | class SinglelineTimeout extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       

16 |         
20 |          { this.setState({snackbar: false}) }}
24 |         >
25 |           Loading complete
26 |         
27 |       

28 |     )
29 |   }
30 | }
31 | export default SinglelineTimeout;
32 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Singleline from './_Singleline'
 4 | import SinglelineAction from './_SinglelineAction'
 5 | import SinglelineTimeout from './_SinglelineTimeout'
 6 | import Multiline from './_Multiline'
 7 | import MultilineBottomAction from './_MultilineBottomAction'
 8 | 
 9 | class Template extends React.PureComponent {
10 | 
11 |   static propTypes = {
12 |     children: PropTypes.node,
13 |   }
14 | 
15 |   componentDidMount() {
16 |     const singleline = document.getElementById("single-line");
17 |     ReactDOM.render(, singleline);
18 | 
19 |     const singlelineaction = document.getElementById("single-line-action");
20 |     ReactDOM.render(, singlelineaction);
21 | 
22 |     const multiline = document.getElementById("multi-line");
23 |     ReactDOM.render(, multiline);
24 | 
25 |     const multilinebottom = document.getElementById("multi-line-bottom-action");
26 |     ReactDOM.render(, multilinebottom);
27 | 
28 |     const singlelinetimout = document.getElementById("single-line-timeout");
29 |     ReactDOM.render(, singlelinetimout);
30 |   } 
31 | 
32 |   render () {
33 |     return (
34 |       

35 |         {this.props.children}
36 |       

37 |     )
38 |   }
39 | }
40 | export default Template;
41 | 


--------------------------------------------------------------------------------
/docs/pages/components/snackbar/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Snackbar"
 3 | ---
 4 | ### Single line
 5 | ```react-snippet
 6 | single-line
 7 | ```
 8 | ```jsx
 9 |  {this.setState({snackbar: false});}}
11 |   open={this.state.snackbar}
12 | >
13 |   Document modified
14 | 
15 | ```
16 | 
17 | You can add a single action to snackbar. When user clicks on action button, ```onClick``` callback will be fired
18 | ```react-snippet
19 | single-line-action
20 | ```
21 | ```jsx
22 |  { console.log(event) }}
25 |   onTimeout={() => { this.setState({snackbar: false}); }}
26 |   open={this.state.snackbar}
27 | >
28 |   Document modified
29 | 
30 | ```
31 | Default timeout is 2750 ms. But you can override it by ```timeout``` property
32 | ```react-snippet
33 | single-line-timeout
34 | ```
35 | ```jsx
36 |  {this.setState({snackbar: false});}}
39 |   open={this.state.snackbar}
40 | >
41 |   Loading complete
42 | 
43 | ```
44 | ### Multiline
45 | ```react-snippet
46 | multi-line
47 | ```
48 | ```jsx
49 |  { this.setState({snackbar: false}); }}
52 |   open={this.state.snackbar}
53 | >
54 |   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam
55 | 
56 | ```
57 | 
58 | In multiline snackbar you can place action button below the text
59 | ```react-snippet
60 | multi-line-bottom-action
61 | ```
62 | ```jsx
63 |  { console.log(event) }}
67 |   multiline
68 |   onTimeout={() => { this.setState({snackbar: false}); }}
69 |   open={this.state.snackbar}
70 | >
71 |   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam
72 | 
73 | ```
74 | 
75 | 


--------------------------------------------------------------------------------
/docs/pages/components/switch/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Switch from '../../../../src/Switch'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1' 
 7 | 
 8 | class Default extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={checked:true};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           
20 |             {
23 |                 this.setState({checked})
24 |               }}
25 |             />
26 |             
27 |           
28 |         
29 |         
30 |           {`Is checked: ${this.state.checked}`}
31 |         
32 |       
33 |     )
34 |   }
35 | }
36 | export default Default;
37 | 


--------------------------------------------------------------------------------
/docs/pages/components/switch/_Disabled.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Switch from '../../../../src/Switch'
 3 | import FormField from '../../../../src/FormField'
 4 | import Grid from '../../../../src/Grid/Grid'
 5 | import Cell from '../../../../src/Grid/Cell'
 6 | import Subheading1 from '../../../../src/Typography/Subheading1' 
 7 | 
 8 | class Disabled extends React.PureComponent {
 9 | 
10 |   constructor(props){
11 |     super(props);
12 |     this.state={checked:true};
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       
18 |         
19 |           
20 |             {
24 |                 this.setState({checked})
25 |               }}
26 |             />
27 |             
28 |           
29 |         
30 |       
31 |     )
32 |   }
33 | }
34 | export default Disabled;
35 | 


--------------------------------------------------------------------------------
/docs/pages/components/switch/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | import Disabled from './_Disabled'
 5 | 
 6 | class Template extends React.PureComponent {
 7 | 
 8 |   static propTypes = {
 9 |     children: PropTypes.node,
10 |   }
11 | 
12 |   componentDidMount() {
13 |     const defaultContainer = document.getElementById("default-switch");
14 |     ReactDOM.render(, defaultContainer);
15 |     const disabledContainer = document.getElementById("disabled-switch");
16 |     ReactDOM.render(, disabledContainer);
17 |   } 
18 | 
19 |   render () {
20 |     return (
21 |       

22 |         {this.props.children}
23 |       

24 |     )
25 |   }
26 | }
27 | export default Template;
28 | 


--------------------------------------------------------------------------------
/docs/pages/components/switch/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Switch"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | default-switch
 7 | ```
 8 | ```jsx
 9 | 
10 |   {
13 |       this.setState({checked})
14 |     }}
15 |   />
16 |   
17 | 
18 | ```
19 | 
20 | ### Disabled
21 | ```react-snippet
22 | disabled-switch
23 | ```
24 | Use ```disabled``` property to disable component
25 | ```jsx
26 | 
27 |   {
31 |       this.setState({checked})
32 |     }}
33 |   />
34 |   
35 | 
36 | ```
37 | 


--------------------------------------------------------------------------------
/docs/pages/components/tabs/_Default.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import IconToggle from '../../../../src/IconToggle/IconToggle'
 3 | import Grid from '../../../../src/Grid/Grid'
 4 | import {Tabbar, Tab} from '../../../../src/Tabs'
 5 | 
 6 | class Default extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={activeTab: 1};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       
16 |          {this.setState({activeTab:1})}}
19 |         >
20 |           Star destroyers
21 |         
22 |          {this.setState({activeTab:2})}}
25 |         >
26 |           Assault ships
27 |         
28 |          {this.setState({activeTab:3})}}
31 |         >
32 |           Cruisers
33 |         
34 |         
35 |       
36 | 
37 |     )
38 |   }
39 | }
40 | export default Default;
41 | 


--------------------------------------------------------------------------------
/docs/pages/components/tabs/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Default from './_Default'
 4 | 
 5 | class Template extends React.PureComponent {
 6 | 
 7 |   static propTypes = {
 8 |     children: PropTypes.node,
 9 |   }
10 | 
11 |   componentDidMount() {
12 |     const defaultContainer = document.getElementById("default-tabs");
13 |     ReactDOM.render(, defaultContainer);
14 |   } 
15 | 
16 |   render () {
17 |     return (
18 |       

19 |         {this.props.children}
20 |       

21 |     )
22 |   }
23 | }
24 | export default Template;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/tabs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Tabs"
 3 | ---
 4 | 
 5 | ```react-snippet
 6 | default-tabs
 7 | ```
 8 | ```jsx
 9 | 
10 |    {this.setState({activeTab:1})}}
13 |   >
14 |     Star destroyers
15 |   
16 |    {this.setState({activeTab:2})}}
19 |   >
20 |     Assault ships
21 |   
22 |    {this.setState({activeTab:3})}}
25 |   >
26 |     Cruisers
27 |   
28 |   
29 | 
30 | ```
31 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_Disabled.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | 
 4 | class Disabled extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |     this.state={city: ''};
 9 |   }
10 | 
11 |   render () {
12 |     return (
13 |        {
18 |           this.setState({ city })
19 |         }}
20 |       />
21 |     )
22 |   }
23 | }
24 | export default Disabled;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_FloatingLabel.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class FloatingLabel extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={city: '', state: '', zip: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |            {
20 |               this.setState({ city })
21 |             }}
22 |           />
23 |         
24 | 
25 |         {/* Disabled field */}
26 |         
27 |            {
32 |               this.setState({ state })
33 |             }}
34 |           />
35 |         
36 | 
37 |         {/* Required field */}
38 |         
39 |            {
44 |               this.setState({ zip })
45 |             }}
46 |           />
47 |         
48 |       
49 |     )
50 |   }
51 | }
52 | export default FloatingLabel;
53 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_Helptext.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class Helptext extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={product: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |            {
21 |               this.setState({ product })
22 |             }}
23 |           />
24 |         
25 |       
26 |     )
27 |   }
28 | }
29 | export default Helptext;
30 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_HelptextPersistent.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class HelptextPersistent extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={product: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |            {
22 |               this.setState({ product })
23 |             }}
24 |           />
25 |         
26 |       
27 |     )
28 |   }
29 | }
30 | export default HelptextPersistent;
31 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_HelptextValidation.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class HelptextValidation extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={password: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |       
15 |         
16 |            {
24 |               this.setState({ password })
25 |             }}
26 |           />
27 |         
28 |       
29 |     )
30 |   }
31 | }
32 | export default HelptextValidation;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_Icons.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | import Icon from '../../../../src/Icon'
 5 | 
 6 | class Icons extends React.PureComponent {
 7 | 
 8 |   constructor(props){
 9 |     super(props);
10 |     this.state={email: '', phone: ''};
11 |   }
12 | 
13 |   render () {
14 |     return (
15 |       
16 |         
17 |         {/* Leading icon */}
18 |            {
23 |               this.setState({ email })
24 |             }}
25 |           >
26 |             
27 |           
28 |         
29 | 
30 |         
31 |         {/* Trailing icon */}
32 |            {
38 |               this.setState({ phone })
39 |             }}
40 |           >
41 |             
42 |           
43 |         
44 | 
45 |       
46 |     )
47 |   }
48 | }
49 | export default Icons;
50 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_Required.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | 
 4 | class Required extends React.PureComponent {
 5 | 
 6 |   constructor(props){
 7 |     super(props);
 8 |     this.state={city: ''};
 9 |   }
10 | 
11 |   render () {
12 |     return (
13 |        {
18 |           this.setState({ city })
19 |         }}
20 |       />
21 |     )
22 |   }
23 | }
24 | export default Required;
25 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_Textarea.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import Textfield from '../../../../src/Textfield/Textfield'
 3 | import {Grid, Cell} from '../../../../src/Grid'
 4 | 
 5 | class Textarea extends React.PureComponent {
 6 | 
 7 |   constructor(props){
 8 |     super(props);
 9 |     this.state={description: ''};
10 |   }
11 | 
12 |   render () {
13 |     return (
14 |        {
21 |           this.setState({ description })
22 |         }}
23 |       />
24 |     )
25 |   }
26 | }
27 | export default Textarea;
28 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_UseInvalidProp.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from "react";
 2 | import Textfield from "../../../../src/Textfield/Textfield";
 3 | import { Grid, Cell } from "../../../../src/Grid";
 4 | 
 5 | class UseInvalidProp extends React.PureComponent {
 6 |   constructor(props) {
 7 |     super(props);
 8 |     this.state = { password: "" };
 9 |   }
10 | 
11 |   render() {
12 |     return (
13 |       
14 |         
15 |            {
24 |               this.setState({ password });
25 |             }}
26 |           />
27 |         
28 |       
29 |     );
30 |   }
31 | }
32 | export default UseInvalidProp;
33 | 


--------------------------------------------------------------------------------
/docs/pages/components/text_field/_template.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PropTypes} from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import FloatingLabel from './_FloatingLabel'
 4 | import Helptext from './_Helptext'
 5 | import HelptextPersistent from './_HelptextPersistent'
 6 | import HelptextValidation from './_HelptextValidation'
 7 | import UseInvalidProp from './_UseInvalidProp'
 8 | import Textarea from './_Textarea'
 9 | import Icons from './_Icons'
10 | 
11 | class Template extends React.PureComponent {
12 | 
13 |   static propTypes = {
14 |     children: PropTypes.node,
15 |   }
16 | 
17 |   componentDidMount() {
18 |     const floating = document.getElementById("text-field-label");
19 |     ReactDOM.render(, floating);
20 | 
21 |     const helptext = document.getElementById("text-field-helptext");
22 |     ReactDOM.render(, helptext);
23 | 
24 |     const helptextPersistent = document.getElementById("text-field-peristent");
25 |     ReactDOM.render(, helptextPersistent);
26 | 
27 |     const helptextValidation = document.getElementById("text-field-validation");
28 |     ReactDOM.render(, helptextValidation);
29 | 
30 |     const useInvalidProp = document.getElementById("text-field-invalidprop");
31 |     ReactDOM.render(, useInvalidProp);
32 | 
33 |     const textarea = document.getElementById("text-field-textarea");
34 |     ReactDOM.render(