diff --git a/. browserslistrc b/. browserslistrc deleted file mode 100644 index 13e6e9c..0000000 --- a/. browserslistrc +++ /dev/null @@ -1,8 +0,0 @@ -last 4 versions -Android >= 4.4 -Chrome >= 49 -Edge >= 12 -Firefox >= 51 -IE >= 11 -iOS >= 8.4 -Safari >= 8 diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 6c50bbd..0000000 --- a/.babelrc +++ /dev/null @@ -1,72 +0,0 @@ -{ - "env": { - "commonjs": { - "presets": [ - [ - "@babel/preset-env", - { - "modules": "commonjs", - "targets": { - "browsers": ["last 2 versions"] - } - } - ] - ], - "plugins": [ - "babel-plugin-transform-react-remove-prop-types", - [ - "babel-plugin-css-modules-transform", - { - "generateScopedName": "[name].[local]", - "prepend": [ "./postcss.config.js" ], - "extractCss": { - "dir": "./dist/", - "relativeRoot": "./src/", - "filename": "[path]/[name].css" - } - } - ] - ] - }, - "module": { - "plugins": [ - "babel-plugin-transform-react-remove-prop-types", - [ - "babel-plugin-css-modules-transform", - { - "generateScopedName": "[name].[local]", - "prepend": [ "./postcss.config.js" ], - "keepImport": true, - "extractCss": { - "dir": "./es/", - "relativeRoot": "./src/", - "filename": "[path]/[name].css" - } - } - ] - ] - } - }, - "plugins": [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-object-rest-spread", - "@babel/plugin-transform-runtime", - [ - "babel-plugin-transform-define", { - "__TEST__": false - } - ] - ], - "presets": [ - [ - "@babel/preset-env", - { - "modules": false, - "targets": { - "browsers": ["last 2 versions"] - } - } - ], - "@babel/preset-react" - ] -} diff --git a/.gitignore b/.gitignore index 0f5c674..f9eae2c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,15 @@ -.coverage -.tmp -dist -es -node_modules -.coveralls.yml -npm-debug.log +# Exclude everything +* -# Documentation-generated files -/index.html -/main.js -/main.js.map +# Except documentation-generated files +!.gitignore +!/index.html +!/main.js +!/main.js.map + +# And utility files needed for SPA support +# See https://github.com/rafrex/spa-github-pages +!/404.html + +# And exclude all subdirectories +!.*/ \ No newline at end of file diff --git a/.npmignore b/.npmignore deleted file mode 100644 index d5edb13..0000000 --- a/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -/* -!.babelrc -!dist/ -!es/ diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 32ef673..0000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -registry=https://registry.npmjs.org/ -save-exact=true diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index fa60dfe..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "stylelint-config-standard", - "rules": { - "declaration-block-no-redundant-longhand-properties": null - } -} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index f9d7365..0000000 --- a/.travis.yml +++ /dev/null @@ -1,8 +0,0 @@ -language: node_js -node_js: - - "stable" -before_script: - - npm run lint - - npm run build -install: - - npm install diff --git a/404.html b/404.html new file mode 100644 index 0000000..74c0029 --- /dev/null +++ b/404.html @@ -0,0 +1,41 @@ + + + + + Single Page Apps for GitHub Pages + + + + + diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index a9bfcc3..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,91 +0,0 @@ -## [2.0.6](https://github.com/collegepulse/material-react-components/compare/v2.0.5...v2.0.6) (2019-09-03) - - -### Bug Fixes - -* Docs updates ([#21](https://github.com/collegepulse/material-react-components/issues/21)) ([c1439d6](https://github.com/collegepulse/material-react-components/commit/c1439d6)) - - - -## v2.0.5 - -- [Tabs] Implementation detail changes to reduce bundle size - -## v2.0.4 - -- [Switch] [TextField] enhancements to support Preact - -## v2.0.3 - -- [Dialog] fix for better support for Preact - -## v2.0.2 - -- Upgrade to @babel/runtime@7.0.0 - -## v2.0.1 - -- Exclude require statements to CSS files in CommonJS build - -## v2.0.0 - -### API Changes - -- `Switch` and `TextField` no longer autogenerate an aria-labelledby attribute for their input fields. They can be supplied via the labelId prop. This change was needed to fix server-side rendering hydration errors on the client. uuid was also removed from dependencies, so expect a slightly smaller bundle size. - -### Build Changes - -For versions `1.2.3` (inclusive) and prior, the distributions were incorrect. - -- The commonjs `dist/index.js` file had module ES module import/export syntax. -- The commonjs source files had their css inlined (poor for performance and causes bundle size bloat). -- The module build couldn't be tree-shaken since `{sideEffects: false}` was not set in package.json. -- Both builds missed other opportunities for reducing bundle size, like removing prop types. - -## v1.2.3 - -- remove `deep-assign` from dependencies -- remove `keycode` from dependencies - -## v1.2.2 - -No changes. - -## v1.2.1 - -- Upgrade from babel 6 to 7 -- switch linter from eslint to xo -- upgrade to webpack 4 -- move babel dependencies to devDependencies (where applicable) - -## v1.2.0 - -- `SelectField` component implementation - -## v1.1.0 - -- Added `Table`, partial implementation (https://material.io/guidelines/components/data-tables.html) -- Upgraded some dependencies - -## 1.0.0 - -🎉 1.0.0 release 🎉 - -- **Support for React 16.** Cleaned up warnings that were present upon upgrade. -- **Removed undocumented API's.** Some components accepted an undocumented domRef property; these have been removed. Out of an abundance of caution, a major release bump-- upgrading should be relatively effortless, however). - -## 0.0.5 - -- [SnackBar] fix centering on IE 11 and Safari - -## 0.0.4 - -- [GridItem] fix issue where child DOM elements could overflow outside the grid - -## 0.0.3 - -- [Tabs] a11y enhancements, fix UI bug where tabs had incorrect height - -## v0.0.2-0 - -## v0.0.1-0 diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 171d89a..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017 CollegePulse - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 03cc893..0000000 --- a/README.md +++ /dev/null @@ -1,38 +0,0 @@ - -### ✨[Demo Site](https://collegepulse.github.io/material-react-components/): live component demos, code samples & more. ✨ -material-react-components -========================= - -[![npm package][npm-image]][npm-url] -[![Build Status][travis-image]][travis-url] -[![Coverage Status][coveralls-image]][coveralls-url] -[![Dependencies Status][david-image]][david-url] - -This is a collection of React components that implement Google's [material design specification](https://material.io/guidelines). The goals of this project include: - -- Minimal to zero configuration to consume components through carefully-crafted, lightweight implementations. -- Be fit for enterprise consumption: components are to be performant, accessible, unit tested, cross-browser supported, support server-side rendering, etc. - - -Examples --------- - -See our [material-react-components-examples](https://github.com/collegepulse/material-react-components-examples) repo for examples of small projects that demonstrate how to import the ES5 or ES6 components with Webpack. - -Acknowlegements ---------------- - -[](https://www.browserstack.com/) - -[BrowserStack](https://www.browserstack.com/) has provided us with the tools and infrastructure necessary to build a high quality component library by testing our components on an array of browsers. Thank you. - -[material-ui](https://github.com/callemall/material-ui) has been an influence in some of our component implementations. We are appreciative of the effort and contributions happening over there. - -[npm-image]:https://img.shields.io/npm/v/material-react-components.svg -[npm-url]:https://www.npmjs.com/package/material-react-components -[travis-image]:https://travis-ci.org/collegepulse/material-react-components.svg?branch=master -[travis-url]:https://travis-ci.org/collegepulse/material-react-components -[coveralls-image]:https://coveralls.io/repos/github/collegepulse/material-react-components/badge.svg?branch=master -[coveralls-url]:https://coveralls.io/github/collegepulse/material-react-components?branch=master -[david-image]:https://david-dm.org/collegepulse/material-react-components/status.svg -[david-url]:https://david-dm.org/collegepulse/material-react-components diff --git a/docs/components/CodeFormatter/CodeFormatter.css b/docs/components/CodeFormatter/CodeFormatter.css deleted file mode 100644 index 404310f..0000000 --- a/docs/components/CodeFormatter/CodeFormatter.css +++ /dev/null @@ -1,9 +0,0 @@ -.code { - font-family: monospace; - white-space: pre; - overflow-x: scroll; -} - -:global(.token) { - background: transparent !important; -} diff --git a/docs/components/CodeFormatter/index.js b/docs/components/CodeFormatter/index.js deleted file mode 100644 index 8a65d3b..0000000 --- a/docs/components/CodeFormatter/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import lightTheme from '!raw-loader!prismjs/themes/prism.css'; // eslint-disable-line -import prism from 'prismjs'; -import 'prismjs/components/prism-markup'; -import 'prismjs/components/prism-clike'; -import 'prismjs/components/prism-javascript'; -import 'prismjs/components/prism-jsx'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Scrollable from '../../../src/Scrollable'; -import Styles from './CodeFormatter.css'; - -const styleNode = window.document.createElement('style'); -window.document.head.appendChild(styleNode); -styleNode.textContent = lightTheme; - -/* Removes the fewest number of spaces present in front of every line. */ -function formatCode(str) { - if (!str) { - return ''; - } - const lines = str.split('\n'); - let fewestStartingSpaces = Infinity; - lines.map((line) => { - if (line) { - fewestStartingSpaces = Math.min(fewestStartingSpaces, line.search(/\S/)); - } - }); - return lines.reduce((acc, val) => ( - `${acc}${val.substring(fewestStartingSpaces)}\n` - ), ''); -} - -class CodeFormatter extends React.Component { - render() { - const {code, ...other} = this.props; - const formattedCode = formatCode(code); - const highlightedCode = prism.highlight(formattedCode, prism.languages.jsx); - return ( - -
- - ); - } -} - -CodeFormatter.defaultProps = { - code: null -}; - -CodeFormatter.propTypes = { - code: PropTypes.string -}; - -export default CodeFormatter; diff --git a/docs/components/HomePage/index.js b/docs/components/HomePage/index.js deleted file mode 100644 index 0cf32c7..0000000 --- a/docs/components/HomePage/index.js +++ /dev/null @@ -1,86 +0,0 @@ -import CodeFormatter from '../CodeFormatter'; -import React from 'react'; -import Typography from '../../../src/Typography'; - -function Base() { - return ( -
- - Installation - - - - Configuration - - -

- Two methods are available for using the library: - {' ES6 (recommended) or ES5. See the '} - - example projects - - {' that demonstrate both.'} -

- - ES6 Configuration (recommended) - - Add the following loaders to your Webpack configuration: - -

{'If using the material-design-icons SVG icons, or any components containing SVG\'s (e.g., SelectField), include the following loader:'}

- - - ES5 Configuration - -

Follow the SVG instructions in the ES6 Configuration section, if applicable.

-
- ); -} - -export default Base; diff --git a/docs/components/Navigation/Desktop.css b/docs/components/Navigation/Desktop.css deleted file mode 100644 index 911da4c..0000000 --- a/docs/components/Navigation/Desktop.css +++ /dev/null @@ -1,11 +0,0 @@ -.root { - display: none; - flex: 0 0 auto; - width: 250px; -} - -@media (min-width: $screenMd) { - .root { - display: inherit; - } -} diff --git a/docs/components/Navigation/Desktop.js b/docs/components/Navigation/Desktop.js deleted file mode 100644 index 155a5cc..0000000 --- a/docs/components/Navigation/Desktop.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import Scrollable from '../../../src/Scrollable'; -import Shared from './Shared'; -import Styles from './Desktop.css'; - -function Desktop() { - return ( -
- - - -
- ); -} - -export default Desktop; diff --git a/docs/components/Navigation/Mobile.css b/docs/components/Navigation/Mobile.css deleted file mode 100644 index 56b7dbd..0000000 --- a/docs/components/Navigation/Mobile.css +++ /dev/null @@ -1,68 +0,0 @@ -.root { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 2500; -} - -.overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: $black54; - animation-duration: 350ms; - animation-fill-mode: forwards; - animation-name: fade-in; -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -.content { - transition: all 250ms; - position: fixed; - animation-duration: 350ms; - animation-fill-mode: forwards; - animation-name: slide-in; -} - -@keyframes slide-in { - 0% { - transform: translateX(-250px); - } - - 100% { - transform: translateX(0); - } -} - -@keyframes slide-out { - 0% { - transform: translateX(0); - } - - 100% { - transform: translateX(-250px); - } -} \ No newline at end of file diff --git a/docs/components/Navigation/Mobile.js b/docs/components/Navigation/Mobile.js deleted file mode 100644 index dbf76ab..0000000 --- a/docs/components/Navigation/Mobile.js +++ /dev/null @@ -1,66 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import Shared from './Shared'; -import Styles from './Mobile.css'; -import TransitionGroup from 'react-transition-group/TransitionGroup'; - -function FirstChild(props) { - const childrenArray = React.Children.toArray(props.children); - return childrenArray[0] || null; -} - -function Mobile({onClose, open}) { - return ( - - {open && } - - ); -} - -Mobile.defaultProps = { - open: false -}; - -Mobile.propTypes = { - onClose: PropTypes.func.isRequired, - open: PropTypes.bool -}; - -class MobileInner extends React.Component { - componentWillLeave(cb) { - this.content.style.animationName = Styles['slide-out']; - this.overlay.style.animationName = Styles['fade-out']; - setTimeout(() => { - cb(); - }, 350); - } - - render() { - const {onClose} = this.props; - return ( -
-
(this.overlay = c)} - /> -
(this.content = c)} - > - -
-
- ); - } -} - -MobileInner.defaultProps = { - onClose: () => {} -}; - -MobileInner.propTypes = { - onClose: PropTypes.func -}; - -export default Mobile; diff --git a/docs/components/Navigation/Shared.css b/docs/components/Navigation/Shared.css deleted file mode 100644 index 4382a42..0000000 --- a/docs/components/Navigation/Shared.css +++ /dev/null @@ -1,26 +0,0 @@ -.root { - border-right: 1px solid #ddd; - flex: 1 0 auto; - height: 100vh; - position: fixed; - width: 250px; - box-sizing: border-box; - overflow-y: auto; - zindex: 1; -} - -.title { - padding: 15px; -} - -.subtitle { - margin-top: 5px; -} - -.inactive .primary { - color: $black54; -} - -.active .primary { - color: $black; -} diff --git a/docs/components/Navigation/Shared.js b/docs/components/Navigation/Shared.js deleted file mode 100644 index 2aa9db0..0000000 --- a/docs/components/Navigation/Shared.js +++ /dev/null @@ -1,115 +0,0 @@ -import {Link, NavLink} from 'react-router-dom'; -import List, {ListItem} from '../../../src/List'; -import {makeURL} from '../../utils/globals'; -import Paper from '../../../src/Paper'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Scrollable from '../../../src/Scrollable'; -import Styles from './Shared.css'; -import Typography from '../../../src/Typography'; - -const items = [ - { - label: 'AppBar', - url: makeURL('/AppBar') - }, - { - label: 'BottomNavigation', - url: makeURL('/BottomNavigation') - }, - { - label: 'Button', - url: makeURL('/Button') - }, - { - label: 'Collapse', - url: makeURL('/Collapse') - }, - { - label: 'Dialog', - url: makeURL('/Dialog') - }, - { - label: 'Grid', - url: makeURL('/Grid') - }, - { - label: 'List', - url: makeURL('/List') - }, - { - label: 'Paper', - url: makeURL('/Paper') - }, - { - label: 'SelectField', - url: makeURL('/SelectField') - }, - { - label: 'SnackBar', - url: makeURL('/SnackBar') - }, - { - label: 'Switch', - url: makeURL('/Switch') - }, - { - label: 'Table', - url: makeURL('/Table') - }, - { - label: 'Tabs', - url: makeURL('/Tabs') - }, - { - label: 'TextField', - url: makeURL('/TextField') - }, - { - label: 'Typography', - url: makeURL('/Typography') - } -]; - -function Shared({onClick}) { - return ( - - - - material-react-components -
By CollegePulse
- - - {items.map(item => ( - - {item.label} -
- )} - /> - ))} - - - - ); -} - -Shared.defaultProps = { - onClick: () => {} -}; - -Shared.propTypes = { - onClick: PropTypes.func -}; - -export default Shared; - diff --git a/docs/components/Navigation/index.js b/docs/components/Navigation/index.js deleted file mode 100644 index ec3bf39..0000000 --- a/docs/components/Navigation/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Desktop'; diff --git a/docs/components/PageWrapper/GitHub.svg b/docs/components/PageWrapper/GitHub.svg deleted file mode 100644 index 41117f0..0000000 --- a/docs/components/PageWrapper/GitHub.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/components/PageWrapper/PageWrapper.css b/docs/components/PageWrapper/PageWrapper.css deleted file mode 100644 index 8a4f525..0000000 --- a/docs/components/PageWrapper/PageWrapper.css +++ /dev/null @@ -1,52 +0,0 @@ -.rootInner { - width: 100%; - overflow-y: auto; - height: 100%; - position: absolute; -} - -@media (min-width: $screenMd) { - .rootInner { - width: calc(100vw - 250px); - left: 250px; - } -} - -.appBar { - position: fixed; - z-index: 1; -} - -@media (min-width: $screenMd) { - .appBar { - position: relative; - } -} - -.iconWrapper { - display: inherit; -} - -.iconLink { - display: flex; -} - -@media (min-width: $screenMd) { - .iconWrapper { - display: none; - } -} - -.icon { - fill: $white; -} - -.content { - margin: 100px 20px 20px; -} - -@media (min-width: $screenMd) { - .content { - margin: 50px; - } -} \ No newline at end of file diff --git a/docs/components/PageWrapper/index.js b/docs/components/PageWrapper/index.js deleted file mode 100644 index f8232e6..0000000 --- a/docs/components/PageWrapper/index.js +++ /dev/null @@ -1,99 +0,0 @@ -import AppBar from '../../../src/AppBar'; -import AppBarDocs from '../../pages/AppBar'; -import BottomNavigation from '../../pages/BottomNavigation'; -import Button from '../../pages/Button'; -import Collapse from '../../pages/Collapse'; -import Dialog from '../../pages/Dialog'; -import GitHub from './GitHub.svg'; -import Grid from '../../pages/Grid'; -import HomePage from '../HomePage'; -import List from '../../pages/List'; -import Mobile from '../Navigation/Mobile'; -import Menu from 'material-design-icons/navigation/svg/production/ic_menu_24px.svg'; -import {makeURL} from '../../utils/globals'; -import Paper from '../../pages/Paper'; -import React from 'react'; -import {Route} from 'react-router-dom'; -import SelectField from '../../pages/SelectField'; -import SnackBar from '../../pages/SnackBar'; -import Styles from './PageWrapper.css'; -import Switch from '../../pages/Switch'; -import SvgIcon from '../../../src/SvgIcon'; -import Table from '../../pages/Table'; -import Tabs from '../../pages/Tabs'; -import TextField from '../../pages/TextField'; -import TypographyDocs from '../../pages/Typography'; - -class PageWrapper extends React.Component { - constructor(props) { - super(props); - this.onClick = this.onClick.bind(this); - this.state = { - open: false - }; - } - - onClick() { - this.setState({ - open: !this.state.open - }); - } - - render() { - const pageName = window.location.pathname.split('/').pop() || 'material-react-components'; - return ( -
- - - - } - secondary={ - - - - } - style={{width: '100%', color: '#fff'}} - > - {`<${pageName} />`} - - -
- - - - - - - - - - - - - - - - -
-
- ); - } -} - -export default PageWrapper; diff --git a/docs/index.css b/docs/index.css deleted file mode 100644 index 08fc24e..0000000 --- a/docs/index.css +++ /dev/null @@ -1,5 +0,0 @@ -.index { - display: flex; - flex-direction: row; - height: 100%; -} diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 248ce18..0000000 --- a/docs/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - material-react-components - - - - - - diff --git a/docs/index.js b/docs/index.js deleted file mode 100644 index 9af49ae..0000000 --- a/docs/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import {BrowserRouter} from 'react-router-dom'; -import Navigation from './components/Navigation'; -import PageWrapper from './components/PageWrapper'; -import React from 'react'; -import {render} from 'react-dom'; -import Styles from './index.css'; -import 'babel-polyfill'; - -const app = document.createElement('div'); -app.style.height = '100%'; -document.body.appendChild(app); - -function Index() { - return ( - -
- - -
- - ); -} - -render(, app); diff --git a/docs/pages/AppBar/index.js b/docs/pages/AppBar/index.js deleted file mode 100644 index f3d6c35..0000000 --- a/docs/pages/AppBar/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import AppBar from '../../../src/AppBar'; -import Colors from '../../../src/variables'; -import CodeFormatter from '../../components/CodeFormatter'; -import Menu from 'material-design-icons/navigation/svg/production/ic_menu_24px.svg'; -import Page from '../Page'; -import React from 'react'; -import Search from 'material-design-icons/action/svg/production/ic_search_24px.svg'; -import SvgIcon from '../../../src/SvgIcon'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; - -class AppBarDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - backgroundColor: Colors.$primary, - children: 'AppBar', - elevation: '2', - style: '{"fill": "#FFF", "color": "#FFF"}', - primary: true, - secondary: true - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {backgroundColor, children, elevation, primary, secondary, style} = this.state; - let elevationNum; - let styleObj; - try { - elevationNum = Number(this.state.elevation); - styleObj = JSON.parse(style); - } catch (e) { - styleObj = {}; - } - return ( - } - secondary={secondary && } - > - {children} - - } - buildYourOwnCode={ - ' : null}} - secondary={${secondary ? '' : null}} - > - ${children} - ` - } - /> - } - buildYourOwnControlPanel={[ - (this.onControlPanel('children', e.target.value))} - label="children" - value={children} - />, - (this.onControlPanel('elevation', e.target.value))} - label="elevation" - value={elevation} - />, - (this.onControlPanel('style', e.target.value))} - label="Style" - value={style} - />, - (this.onControlPanel('primary', e.target.checked))} - checked={primary} - label="primary" - />, - (this.onControlPanel('secondary', e.target.checked))} - checked={secondary} - label="secondary" - /> - ]} - examples={ -
- - AppBar - -
- } - /> - ); - } -} - -export default AppBarDocs; diff --git a/docs/pages/BottomNavigation/index.js b/docs/pages/BottomNavigation/index.js deleted file mode 100644 index 30c682d..0000000 --- a/docs/pages/BottomNavigation/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import BottomNavigation, {BottomNavigationItem} from '../../../src/BottomNavigation'; -import Page from '../Page'; -import React from 'react'; -import TextField from '../../../src/TextField'; - -class BottomNavigationDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - label: 'label' - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {label} = this.state; - return ( - - {[1, 2, 3].map(key => ( - {label} - ))} - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('label', e.target.value))} - label="label" - value={label} - /> - ]} - examples={ -
- - Foo - Bar - Baz - -
- } - /> - ); - } - -} - -export default BottomNavigationDocs; diff --git a/docs/pages/Button/Button.css b/docs/pages/Button/Button.css deleted file mode 100644 index 4a0203a..0000000 --- a/docs/pages/Button/Button.css +++ /dev/null @@ -1,3 +0,0 @@ -.flex { - display: flex; -} diff --git a/docs/pages/Button/index.js b/docs/pages/Button/index.js deleted file mode 100644 index e3864fe..0000000 --- a/docs/pages/Button/index.js +++ /dev/null @@ -1,103 +0,0 @@ -import Add from 'material-design-icons/content/svg/production/ic_add_24px.svg'; -import Button from '../../../src/Button'; -import Edit from 'material-design-icons/editor/svg/production/ic_mode_edit_24px.svg'; -import Page from '../Page'; -import React from 'react'; -import Styles from './Button.css'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; -import Variables from '../../../src/variables'; - -class ButtonDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - children: 'children', - textColor: '#FFF', - buttonColor: Variables.$primary, - fab: false, - fill: '#FFF', - focusRippleDisabled: false - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {children, textColor, buttonColor, fill, fab, focusRippleDisabled} = this.state; - return ( - - {fab ? : children} - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('children', e.target.value))} - label="children" - value={children} - helperText="For demo, hidden when fab is enabled" - />, - (this.onControlPanel('textColor', e.target.value))} - label="textColor" - value={textColor} - helperText="Button text color" - />, - (this.onControlPanel('buttonColor', e.target.value))} - label="buttonColor" - value={buttonColor} - helperText="Button background color" - />, - (this.onControlPanel('fill', e.target.value))} - label="fill" - value={fill} - helperText="SVG icon color (applicable when fab mode is enabled)" - />, - (this.onControlPanel('fab', e.target.checked))} - checked={fab} - label="fab" - />, - (this.onControlPanel('focusRippleDisabled', e.target.checked))} - checked={focusRippleDisabled} - label="focusRippleDisabled" - /> - ]} - examples={ -
-
- - - - -
-
- - -
-
- } - /> - ); - } -} - -export default ButtonDocs; diff --git a/docs/pages/Collapse/Collapse.css b/docs/pages/Collapse/Collapse.css deleted file mode 100644 index bf16647..0000000 --- a/docs/pages/Collapse/Collapse.css +++ /dev/null @@ -1,3 +0,0 @@ -.collapse { - width: 100%; -} diff --git a/docs/pages/Collapse/index.js b/docs/pages/Collapse/index.js deleted file mode 100644 index e9aa294..0000000 --- a/docs/pages/Collapse/index.js +++ /dev/null @@ -1,88 +0,0 @@ -import Collapse from '../../../src/Collapse'; -import Page from '../Page'; -import Paper from '../../../src/Paper'; -import React from 'react'; -import Styles from './Collapse.css'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; - -class CollapseDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - collapseBaseline: false, - collapsedOpenOnInitialRender: true, - open: true, - children: 'The\nCollapse\nComponent\nInner\nText' - }; - } - - onControlPanel(key, value) { - if (value) { - return this.setState({[key]: value}); - } - return this.setState({[key]: !this.state[key]}); - } - - render() { - return ( - - - {this.state.children} - - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('open', e.target.checked))} - checked={this.state.open} - label="open" - />, - (this.onControlPanel('children', e.target.value))} - label="children" - value={this.state.children} - multiline - helperText="Wrapped in a element with white-space: pre-wrap; and 10px padding." - /> - ]} - examples={ -
- (this.onControlPanel('collapseBaseline'))} label={'Initially Closed'} /> - - - This
- is
- really
- long
- content
- that
- should
- animate.
- - - (this.onControlPanel('collapsedOpenOnInitialRender'))} label={'Initially Opened'} /> - - - This
- is
- really
- long
- content
- that
- should
- animate.
- - -
- } - /> - ); - } -} - -export default CollapseDocs; diff --git a/docs/pages/Dialog/Dialog.css b/docs/pages/Dialog/Dialog.css deleted file mode 100644 index 4a0203a..0000000 --- a/docs/pages/Dialog/Dialog.css +++ /dev/null @@ -1,3 +0,0 @@ -.flex { - display: flex; -} diff --git a/docs/pages/Dialog/index.js b/docs/pages/Dialog/index.js deleted file mode 100644 index dad4df4..0000000 --- a/docs/pages/Dialog/index.js +++ /dev/null @@ -1,79 +0,0 @@ -import Button from '../../../src/Button'; -import Dialog from '../../../src/Dialog'; -import Page from '../Page'; -import React from 'react'; -import Styles from './Dialog.css'; -import TextField from '../../../src/TextField'; - -class DialogDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - buildYourOwnDialogOpen: false, - title: 'Title', - description: 'Description', - dialog1Open: false - }; - } - - onControlPanel(key, value) { - if (value) { - return this.setState({[key]: value}); - } - return this.setState({[key]: !this.state[key]}); - } - - - render() { - return ( - - - (this.onControlPanel('buildYourOwnDialogOpen'))} - title={this.state.title} - description={this.state.description} - actions={[ - , - - ]} - /> -
- } - buildYourOwnControlPanel={[ - (this.onControlPanel('title', e.target.value))} - label="title" - value={this.state.title} - />, - (this.onControlPanel('description', e.target.value))} - label="description" - value={this.state.description} - /> - ]} - examples={ -
- - (this.onControlPanel('dialog1Open'))} - title={'Use Google\'s location service?'} - description={'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'} - actions={[ - , - - ]} - /> -
- } - /> - ); - } -} - -export default DialogDocs; diff --git a/docs/pages/Grid/index.js b/docs/pages/Grid/index.js deleted file mode 100644 index 948894c..0000000 --- a/docs/pages/Grid/index.js +++ /dev/null @@ -1,75 +0,0 @@ -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import Paper from '../../../src/Paper'; -import React from 'react'; -import Typography from '../../../src/Typography'; - -class GridDocs extends React.Component { - render() { - return ( - - - Full-width - grids use fluid columns. - - - {[1, 2, 3, 4, 5, 6, 7, 8].map(item => ( - - - xs=12, sm=6, md=4, lg=3 - - - ))} - - - Centered - grids use fixed columns. - - - {[1, 2, 3, 4, 5, 6, 7].map((item) => { - let xs; - if (item === 1) { - xs = 12; - } else if (item === 2 || item === 3) { - xs = 6; - } else { - xs = 3; - } - return ( - - - {`xs=${xs}`} - - - ); - })} - - - } - /> - ); - } -} - -export default GridDocs; diff --git a/docs/pages/List/index.js b/docs/pages/List/index.js deleted file mode 100644 index 623fcb9..0000000 --- a/docs/pages/List/index.js +++ /dev/null @@ -1,141 +0,0 @@ -import Folder from 'material-design-icons/file/svg/design/ic_folder_24px.svg'; -import Grid, {GridItem} from '../../../src/Grid'; -import List, {ListItem} from '../../../src/List'; -import MoreVert from 'material-design-icons/navigation/svg/production/ic_more_vert_24px.svg'; -import Page from '../Page'; -import React from 'react'; -import Switch from '../../../src/Switch'; -import SvgIcon from '../../../src/SvgIcon'; -import TextField from '../../../src/TextField'; - -class ListDocs extends React.Component { - - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - primary: 'Primary', - secondary: 'Secondary', - avatar: true, - action: true, - style: '{"width": "300px"}', - arrowNavigation: false - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {primary, secondary, avatar, action, style, arrowNavigation} = this.state; - let styleObj = {}; - try { - styleObj = JSON.parse(style); - } catch (e) { } - return ( - - - {[1, 2, 3].map(key => ( - } - action={action && } - /> - ))} - - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('primary', e.target.value))} - label="primary" - value={primary} - helperText=" " - />, - (this.onControlPanel('secondary', e.target.value))} - label="secondary" - value={secondary} - helperText=" " - />, - (this.onControlPanel('style', e.target.value))} - label="style" - value={style} - helperText="JSON will be converted to a style object" - />, - (this.onControlPanel('avatar', e.target.checked))} - checked={avatar} - label="avatar" - />, - (this.onControlPanel('action', e.target.checked))} - checked={action} - label="action" - />, - (this.onControlPanel('arrowNavigation', e.target.checked))} - checked={arrowNavigation} - label="arrowNavigation" - /> - ]} - examples={ - - - - {[1, 2, 3].map(key => ( - - ))} - - - - - {[1, 2, 3].map(key => ( - } - /> - ))} - - - - - {[1, 2, 3].map(key => ( - } - primary={'Primary'} - secondary={'Secondary'} - /> - ))} - - - - - {[1, 2, 3].map(key => ( - } - primary={'Primary'} - secondary={'Secondary'} - action={} - /> - ))} - - - - } - /> - ); - } -} - -export default ListDocs; diff --git a/docs/pages/Page.css b/docs/pages/Page.css deleted file mode 100644 index bc06aa5..0000000 --- a/docs/pages/Page.css +++ /dev/null @@ -1,17 +0,0 @@ -.buildYourOwn { - padding: 20px; - background-color: rgba(0, 0, 0, 0.025); - display: flex; - justify-content: center; - max-width: 100%; -} - -@media (min-width: $screenMd) { - padding: 40px 100px 40px; -} - -.buildYourOwnCode, -.buildYourOwnControlPanel { - padding: 0 20px 20px; - background-color: rgba(0, 0, 0, 0.025); -} diff --git a/docs/pages/Page.js b/docs/pages/Page.js deleted file mode 100644 index 8d68be1..0000000 --- a/docs/pages/Page.js +++ /dev/null @@ -1,105 +0,0 @@ -import Grid, {GridItem} from '../../src/Grid'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Styles from './Page.css'; -import Typography from '../../src/Typography'; - -function DocPage({ - componentName, - description, - buildYourOwn, - buildYourOwnCode, - buildYourOwnControlPanel, - examples -}) { - return ( -
- - {componentName} - - - {description} - - {buildYourOwn && ( - - Build your own - - )} - {buildYourOwn && ( -
- {buildYourOwn} -
- )} - {buildYourOwnCode && ( -
- {buildYourOwnCode} -
- )} - {buildYourOwnControlPanel && ( -
- - {/* eslint-disable react/no-array-index-key */} - {buildYourOwnControlPanel.map((item, index) => { - const grid = {}; - if (buildYourOwnControlPanel.length >= 2) { - grid.sm = 6; - } - if (buildYourOwnControlPanel.length >= 3) { - grid.md = 4; - } - return ( - - {item} - - ); - })} - {/* eslint-enable react/no-array-index-key */} - -
- )} - {examples && ( - - Examples - - )} - {examples} -
- ); -} - -DocPage.defaultProps = { - componentName: null, - description: null, - buildYourOwn: null, - buildYourOwnCode: null, - buildYourOwnControlPanel: null, - examples: null -}; - -DocPage.propTypes = { - componentName: PropTypes.node, - description: PropTypes.node, - buildYourOwn: PropTypes.node, - buildYourOwnCode: PropTypes.node, - buildYourOwnControlPanel: PropTypes.arrayOf(PropTypes.node), - examples: PropTypes.node -}; - -export default DocPage; diff --git a/docs/pages/Paper/index.js b/docs/pages/Paper/index.js deleted file mode 100644 index 6901983..0000000 --- a/docs/pages/Paper/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import Paper from '../../../src/Paper'; -import React from 'react'; -import TextField from '../../../src/TextField'; - -class PaperDocs extends React.Component { - - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - children: 'Hello World', - elevation: '10', - style: '{"padding": "20px", "width": "300px"}' - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - let elevation; - let style; - try { - elevation = Number(this.state.elevation); - style = JSON.parse(this.state.style); - } catch (e) { - style = {}; - } - return ( - - - {this.state.children} - - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('elevation', e.target.value))} - label="Elevation" - value={this.state.elevation} - helperText="Pick a value between 1 and 25" - />, - (this.onControlPanel('children', e.target.value))} - label="Children" - value={this.state.children} - helperText="For demonstration purposes, limited to plaintext" - />, - (this.onControlPanel('style', e.target.value))} - label="Style" - value={this.state.style} - helperText="JSON will be converted to a style object" - /> - ]} - examples={ - - {[1, 2, 3].map((value) => { - let elevationDemo; - if (value === 1) { - elevationDemo = 2; - } else if (value === 2) { - elevationDemo = 12; - } else { - elevationDemo = 25; - } - return ( - - - Paper with elevation of {elevationDemo}. - - - ); - })} - - } - /> - ); - } -} - -export default PaperDocs; diff --git a/docs/pages/SelectField/index.js b/docs/pages/SelectField/index.js deleted file mode 100644 index d917a4d..0000000 --- a/docs/pages/SelectField/index.js +++ /dev/null @@ -1,122 +0,0 @@ -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import React from 'react'; -import SelectField from '../../../src/SelectField'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; - -class SelectFieldDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - disabled: false, - errorColor: '', - helperText: 'Pick your favorite color', - id: 'id', - label: 'Color', - value: '', - style: '{}', - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {disabled, errorColor, helperText, id, label, value, style} = this.state; - let styleObj = {}; - try { - styleObj = JSON.parse(style); - } catch (e) { } - - const selectOptions = [ - 'red', - 'orange', - 'yellow', - 'green', - 'blue', - 'indigo', - 'violet' - ]; - return ( - - - { - this.setState({value: e.target.value}) - }} - > - - ))} - - - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('errorColor', e.target.value))} - label="errorColor" - helperText="If present, sets aria-invalid to true" - value={errorColor} - />, - (this.onControlPanel('helperText', e.target.value))} - label="helperText" - helperText="Overflows onto a second line" - value={helperText} - />, - (this.onControlPanel('id', e.target.value))} - label="id" - helperText="Binds label and select elements for a11y" - value={id} - />, - (this.onControlPanel('label', e.target.value))} - label="label" - helperText="Truncated to a single line" - value={label} - />, - (this.onControlPanel('value', e.target.value))} - label="value" - helperText="Value of selected option" - value={value} - />, - (this.onControlPanel('style', e.target.value))} - label="style" - helperText="Applied to the select element" - value={style} - />, - (this.onControlPanel('disabled', e.target.checked))} - checked={disabled} - label="disabled" - /> - ]} - /> - ); - } -} - -export default SelectFieldDocs; diff --git a/docs/pages/SnackBar/SnackBar.css b/docs/pages/SnackBar/SnackBar.css deleted file mode 100644 index 4a0203a..0000000 --- a/docs/pages/SnackBar/SnackBar.css +++ /dev/null @@ -1,3 +0,0 @@ -.flex { - display: flex; -} diff --git a/docs/pages/SnackBar/index.js b/docs/pages/SnackBar/index.js deleted file mode 100644 index c33d7f1..0000000 --- a/docs/pages/SnackBar/index.js +++ /dev/null @@ -1,101 +0,0 @@ -import Button from '../../../src/Button'; -import CodeFormatter from '../../components/CodeFormatter'; -import Page from '../Page'; -import React from 'react'; -import SnackBar, {SnackBarItem} from '../../../src/SnackBar'; -import Styles from './SnackBar.css'; -import TextField from '../../../src/TextField'; -import Variables from '../../../src/variables'; - -class SnackBarDocs extends React.Component { - constructor(props) { - super(props); - this.addSnackBarItem = this.addSnackBarItem.bind(this); - this.state = { - message: 'Message sent', - actionText: 'undo' - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - addSnackBarItem({addTwo}) { - const snackbaritem = ( - {this.state.actionText}} - /> - ); - this.snackbar.queue(snackbaritem); - if (addTwo) { - this.snackbar.queue(snackbaritem); - } - } - - render() { - return ( - -

Compared to our other APIs, SnackBar is unique in that is uses an imperative API to schedule showing a SnackBar.

-

This API is necessary since only one SnackBar can be displayed at a time.

-

Snackbar's are managed like a first-in, first-out queue. Once a SnackBarItem is dismissed, the next scheduled one will show.

- - } - buildYourOwn={ -
- (this.snackbar = c)} /> - - -
- } - buildYourOwnCode={ - (this.snackbar = c)} /> - - this.snackbar.queue( - ${this.state.actionText}} - /> - );` - } - /> - } - buildYourOwnControlPanel={[ - (this.onControlPanel('message', e.target.value))} - label="message" - value={this.state.message} - />, - (this.onControlPanel('actionText', e.target.value))} - label="actionText" - value={this.state.actionText} - /> - ]} - /> - ); - } -} - -export default SnackBarDocs; diff --git a/docs/pages/Switch/index.js b/docs/pages/Switch/index.js deleted file mode 100644 index 794adb1..0000000 --- a/docs/pages/Switch/index.js +++ /dev/null @@ -1,122 +0,0 @@ -import Colors from '../../../src/variables'; -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import React from 'react'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; - -class SwitchDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - checked: true, - disabled: false, - label: 'Switch Label', - labelId: 'foobar', - primaryColor: Colors.$primary, - switch1: false, - switch2: true, - switch3: true, - switch4: false, - switch5: true - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {checked, disabled, label, labelId, primaryColor} = this.state; - return ( - - (this.onControlPanel('checked', e.target.checked))} - disabled={disabled} - label={label} - labelId={labelId} - checked={checked} - primaryColor={primaryColor} - style={{justifyContent: 'center'}} - /> - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('checked', e.target.checked))} - checked={checked} - label="checked" - />, - (this.onControlPanel('disabled', e.target.checked))} - checked={disabled} - label="disabled" - />, - (this.onControlPanel('label', e.target.value))} - label="label" - value={label} - />, - (this.onControlPanel('labelId', e.target.value))} - label="labelId" - value={labelId} - />, - (this.onControlPanel('primaryColor', e.target.value))} - label="primaryColor" - value={primaryColor} - /> - ]} - examples={ - - - (this.onControlPanel('switch1', e.target.checked))} - checked={this.state.switch1} - label={'Switch #1'} - /> - - - (this.onControlPanel('switch2', e.target.checked))} - checked={this.state.switch2} - label={'Switch #2'} - /> - - - (this.onControlPanel('switch3', e.target.checked))} - checked={this.state.switch3} - label={'Custom Color'} - primaryColor={Colors.$orange700} - /> - - - (this.onControlPanel('switch4', e.target.checked))} - checked={this.state.switch4} - label={'Disabled off'} - disabled - /> - - - (this.onControlPanel('switch5', e.target.checked))} - checked={this.state.switch5} - label={'Disabled on'} - disabled - /> - - - } - /> - ); - } -} - -export default SwitchDocs; diff --git a/docs/pages/Table/index.js b/docs/pages/Table/index.js deleted file mode 100644 index b61ab4c..0000000 --- a/docs/pages/Table/index.js +++ /dev/null @@ -1,56 +0,0 @@ -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import Paper from '../../../src/Paper'; -import React from 'react'; -import Table, {TableBody, TableCell, TableHead, TableRow} from '../../../src/Table'; -import Typography from '../../../src/Typography'; - -class TabsDocs extends React.Component { - render() { - return ( - - - - Simple table. - - - - - - Name - Age - Street Address - ZIP Code - State - - - - - Johnathan Doe - 25 - 700 1st Ave - 90210 - CA - - - Jane Doe - 23 - 15 Spruce St - 92101 - CA - - -
- - - - } - /> - ); - } -} - -export default TabsDocs; diff --git a/docs/pages/Tabs/index.js b/docs/pages/Tabs/index.js deleted file mode 100644 index 1d3c095..0000000 --- a/docs/pages/Tabs/index.js +++ /dev/null @@ -1,193 +0,0 @@ -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import Paper from '../../../src/Paper'; -import React from 'react'; -import SelectField from '../../../src/SelectField'; -import Tabs, {Tab} from '../../../src/Tabs'; -import TextField from '../../../src/TextField'; -import Typography from '../../../src/Typography'; -import Variables from '../../../src/variables'; - -class TabsDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.onChange = this.onChange.bind(this); - this.state = { - barColor: Variables.$primary, - indicatorColor: Variables.$accent, - textColor: '#FFF', - type: 'fixed', - index: 0, - tabsBaseline: 0, - tabsFullWidth: 0, - tabsScrollable: 0, - tabsCentered: 0 - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - onChange(e, index, key) { - this.setState({ - [key]: index - }); - } - - render() { - return ( - (this.onChange(e, index, 'index'))} - style={{width: '100%'}} - > - - - - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('barColor', e.target.value))} - label="barColor" - value={this.state.barColor} - />, - (this.onControlPanel('indicatorColor', e.target.value))} - label="indicatorColor" - value={this.state.indicatorColor} - />, - (this.onControlPanel('textColor', e.target.value))} - label="textColor" - value={this.state.textColor} - />, - (this.onControlPanel('index', Number(e.target.value)))} - label="index" - value={String(this.state.index)} - />, - (this.onControlPanel('type', e.target.value))} - > - - - - - ]} - examples={ - - - - Fixed - tabs (default) have equal width. - - - (this.onChange(e, index, 'tabsBaseline'))} - > - - - - -
- Tab example with default styles. The tab index is {this.state.tabsBaseline}. -
- - - - - Scrollable - tabs have independently calculated widths. - - - (this.onChange(e, index, 'tabsFullWidth'))} - type="scrollable" - > - - - - -
- Tab example with default styles. The tab index is {this.state.tabsFullWidth}. -
- - - - - Scrollable - tabs have independently calculated widths. Overflow is visible upon scrolling. - - - (this.onChange(e, index, 'tabsScrollable'))} - type="scrollable" - > - - - - - - - - - - - -
- These tabs use a custom bar color, ink bar color, and text color. - The tab index is {this.state.tabsScrollable}. -
- - - - - Centered - tabs. - - - (this.onChange(e, index, 'tabsCentered'))} - type="centered" - > - - - - -
- These tabs use a custom bar color, ink bar color, and text color. - The tab index is {this.state.tabsCentered}. -
- - - - } - /> - ); - } -} - -export default TabsDocs; diff --git a/docs/pages/TextField/index.js b/docs/pages/TextField/index.js deleted file mode 100644 index d4b1ccd..0000000 --- a/docs/pages/TextField/index.js +++ /dev/null @@ -1,159 +0,0 @@ -import Colors from '../../../src/variables'; -import Grid, {GridItem} from '../../../src/Grid'; -import Page from '../Page'; -import React from 'react'; -import Switch from '../../../src/Switch'; -import TextField from '../../../src/TextField'; - -class TextFieldDocs extends React.Component { - - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - label: 'Label', - labelId: 'foobar', - value: '', - disabled: false, - placeholder: 'Placeholder', - helperText: 'Helper text', - primaryColor: Colors.$primary, - multiline: false, - errorColor: '', - width: '300px', - textFieldBaseline: '', - textFieldWithInitialValue: 'Value', - textFieldWithLongInitialValue: 'This is a lot of text and it should overflow appropriately.', - textFieldDisabled: '', - textFieldWithPlaceholder: '', - textFieldWithHelper: '', - textFieldWithError: '', - textFieldWithCustomColor: '', - textFieldMultilineBaseline: '', - textFieldMultilineBaselineWithPlaceholder: '', - textFieldMultilineWithInitialMultilineValue: 'This textfield should have the proper height on initial render because it has extra content.' - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {label, labelId, helperText, placeholder, primaryColor, - errorColor, value, disabled, multiline, width} = this.state; - return ( - (this.onControlPanel('value', e.target.value))} - label={label} - labelId={labelId} - value={value} - disabled={disabled} - placeholder={placeholder} - helperText={helperText} - primaryColor={primaryColor} - multiline={multiline} - errorColor={errorColor} - width={width} - /> - } - buildYourOwnControlPanel={[ - (this.onControlPanel('label', e.target.value))} - label="label" - value={label} - />, - (this.onControlPanel('labelId', e.target.value))} - label="labelId" - value={labelId} - />, - (this.onControlPanel('helperText', e.target.value))} - label="helperText" - value={helperText} - />, - (this.onControlPanel('placeholder', e.target.value))} - label="placeholder" - value={placeholder} - />, - (this.onControlPanel('primaryColor', e.target.value))} - label="primaryColor" - value={primaryColor} - helperText="Label and inkbar color on :focus and :active states" - />, - (this.onControlPanel('errorColor', e.target.value))} - label="errorColor" - value={errorColor} - helperText="Styles the label, inkbar, and helper text" - />, - (this.onControlPanel('value', e.target.value))} - label="value" - value={value} - />, - (this.onControlPanel('width', e.target.value))} - label="width" - value={width} - />, - (this.onControlPanel('disabled', e.target.checked))} - checked={disabled} - label="disabled" - />, - (this.onControlPanel('multiline', e.target.checked))} - checked={multiline} - label="multiline" - /> - ]} - examples={ - - - (this.onControlPanel('textFieldBaseline', e.target.value))} value={this.state.textFieldBaseline} label={'Label'} /> - - - (this.onControlPanel('textFieldWithInitialValue', e.target.value))} value={this.state.textFieldWithInitialValue} label={'Label'} /> - - - (this.onControlPanel('textFieldWithLongInitialValue', e.target.value))} value={this.state.textFieldWithLongInitialValue} label={'Label'} /> - - - (this.onControlPanel('textFieldDisabled', e.target.value))} value={this.state.textFieldDisabled} label={'Disabled'} disabled /> - - - (this.onControlPanel('textFieldWithPlaceholder', e.target.value))} value={this.state.textFieldWithPlaceholder} label={'Label'} placeholder={'Placeholder'} /> - - - (this.onControlPanel('textFieldWithHelper', e.target.value))} value={this.state.textFieldWithHelper} label={'Label'} helperText={'Helper text'} /> - - - (this.onControlPanel('textFieldWithError', e.target.value))} value={this.state.textFieldWithError} label={'Error'} helperText={'This field has an error.'} errorColor={Colors.$red500} /> - - - (this.onControlPanel('textFieldWithCustomColor', e.target.value))} value={this.state.textFieldWithCustomColor} label={'Custom color'} helperText={'It\'s special.'} primaryColor={Colors.$orange700} /> - - - (this.onControlPanel('textFieldMultilineBaseline', e.target.value))} value={this.state.textFieldMultilineBaseline} label={'Label'} placeholder={'Placeholder'} helperText={'Helper text'} /> - - - (this.onControlPanel('textFieldMultilineBaselineWithPlaceholder', e.target.value))} value={this.state.textFieldMultilineBaselineWithPlaceholder} label={'Label'} helperText={'Helper text'} placeholder={'Placeholder'} multiline /> - - - (this.onControlPanel('textFieldMultilineWithInitialMultilineValue', e.target.value))} value={this.state.textFieldMultilineWithInitialMultilineValue} label={'Label'} helperText={'Helper text'} placeholder={'Placeholder'} multiline /> - - - } - /> - ); - } -} - -export default TextFieldDocs; diff --git a/docs/pages/Typography/index.js b/docs/pages/Typography/index.js deleted file mode 100644 index b0f1965..0000000 --- a/docs/pages/Typography/index.js +++ /dev/null @@ -1,87 +0,0 @@ -import Page from '../Page'; -import React from 'react'; -import Scrollable from '../../../src/Scrollable'; -import SelectField from '../../../src/SelectField'; -import TextField from '../../../src/TextField'; -import Typography from '../../../src/Typography'; - -class TypographyDocs extends React.Component { - constructor(props) { - super(props); - this.onControlPanel = this.onControlPanel.bind(this); - this.state = { - component: 'div', - type: 'body1', - children: 'Hello World' - }; - } - - onControlPanel(key, value) { - this.setState({[key]: value}); - } - - render() { - const {component, type, children} = this.state; - return ( - - {children} - - } - buildYourOwnControlPanel={[ - (this.onControlPanel('component', e.target.value))} - label="component" - value={component} - />, - (this.onControlPanel('type', e.target.value))} - > - - - - - - - - - - - - , - (this.onControlPanel('children', e.target.value))} - label="children" - value={children} - /> - ]} - examples={ - -
- display4 - display3 - display2 - display1 - headline - title - subheading - body2 - body1 - caption - button -
- - } - /> - ); - } -} - -export default TypographyDocs; diff --git a/docs/utils/globals.js b/docs/utils/globals.js deleted file mode 100644 index 3076103..0000000 --- a/docs/utils/globals.js +++ /dev/null @@ -1,12 +0,0 @@ -const globals = { - BASE_URL: '/material-react-components' -}; - -export default globals; - -export function makeURL(path) { - if (!path) { - return globals.BASE_URL; - } - return globals.BASE_URL + path; -} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4ca0ab9 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + + material-react-components + + + + + + +
+ + + diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 21e08e2..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,226 +0,0 @@ -const sourcemaps = !process.env.SOURCEMAPS === 'false'; -const webpack = require('webpack'); - -function getPreprocessors() { - const preprocessors = ['webpack']; - if (sourcemaps) { - preprocessors.push('sourcemap'); - } - return { - 'test/test_index.js': preprocessors - }; -} - -function getBrowserStackConfig(config) { - const username = process.env.BROWSER_STACK_USERNAME; - const accessKey = process.env.BROWSER_STACK_ACCESS_KEY; - if (config.browsers.length || (!username && !accessKey)) { - return {}; - } - - const customLaunchers = { - bs_firefox_mac: { - base: 'BrowserStack', - browser: 'firefox', - browser_version: '45', - os: 'OS X', - os_version: 'Yosemite' - }, - bs_chrome_mac: { - base: 'BrowserStack', - browser: 'chrome', - browser_version: '49', - os: 'OS X', - os_version: 'Yosemite' - }, - bs_safari_mac: { - base: 'BrowserStack', - os: 'OS X', - os_version: 'Sierra', - browser: 'Safari', - browser_version: '10.1', - }, - bs_ie_windows: { - base: 'BrowserStack', - browser: 'ie', - browser_version: '11', - os: 'Windows', - os_version: '8.1' - }, - bs_edge_windows: { - base: 'BrowserStack', - browser: 'edge', - browser_version: '14', - os: 'Windows', - os_version: '10' - }, - bs_android_galaxy_s6: { - base: 'BrowserStack', - real_mobile: true, - os: 'android', - os_version: '5.0', - browser: 'Android Browser', - browser_version: null, - device: 'Samsung Galaxy S6' - } - }; - - return { - browserStack: { - username, - accessKey - }, - customLaunchers, - browsers: Object.keys(customLaunchers) - }; -} - -const babelOptions = { - plugins: [ - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-object-rest-spread', - [ - "babel-plugin-transform-define", { - "__TEST__": true - } - ], - [ - 'babel-plugin-istanbul', { - exclude: [ - '**/index.js', - '**/*.spec.js', - 'test/test_index.js' - ] - } - ] - ], - presets: [ - [ - '@babel/preset-env', - { - targets: { - browsers: [ - 'Firefox >= 45', - 'Chrome >= 49', - 'Safari >= 8', - 'IE >= 11', - 'Edge >= 14', - 'iOS >= 10', - 'Android >= 5' - ] - } - } - ], - '@babel/preset-react' - ] -}; - -module.exports = function (config) { - const initialConfig = { - browserConsoleLogOptions: { - level: '', - format: '%b %T: %m', - terminal: true - }, - browsers: [ - 'PhantomJSWithArgs' - ], - browserNoActivityTimeout: 60e3, - browserDisconnectTimeout: 60e3, - browserDisconnectTolerance: 3, - captureTimeout: 60e3, - client: { - captureConsole: true, - mocha: { - timeout: 1000000e3 - } - }, - coverageReporter: { - dir: '.coverage/', - reporters: [ - { - type: 'lcov', - subdir: '.' - } - ] - }, - customContextFile: sourcemaps ? null : 'test/context.html', - customLaunchers: { - PhantomJSWithArgs: { - base: 'PhantomJS', - options: { - viewportSize: { - width: 1024, - height: 768 - } - } - } - }, - files: [ - './node_modules/core-js/client/core.js', - 'test/test_index.js' - ], - frameworks: [ - 'mocha' - ], - preprocessors: getPreprocessors(), - reporters: [ - 'mocha', - 'coverage', - 'coveralls' - ], - singleRun: true, - webpack: { - devtool: 'source-map', - externals: { - 'react/lib/ExecutionEnvironment': true, - 'react/lib/ReactContext': 'window', - 'react/addons': true - }, - mode: 'development', - module: { - rules: [ - // Run regular source code through babel - { - test: /\.js$/, - use: { - loader: 'babel-loader', - options: babelOptions - } - }, - { - test: /\.css$/, - use: [ - 'style-loader', - 'css-loader?modules&localIdentName=[name].[local]', - 'postcss-loader' - ] - }, - { - test: /\.svg$/, - use: [ - { - loader: 'babel-loader', - options: babelOptions - }, - 'react-svg-loader' - ] - } - ] - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify('development') - } - }) - ], - target: 'web' - }, - webpackServer: { - noInfo: true - } - }; - - config.set(Object.assign({}, initialConfig, getBrowserStackConfig(config))); -}; diff --git a/main.js b/main.js new file mode 100644 index 0000000..10c084f --- /dev/null +++ b/main.js @@ -0,0 +1,32948 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "/"; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 248); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +if (true) { + module.exports = __webpack_require__(251); +} else { + module.exports = require('./cjs/react.development.js'); +} + + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +var global = __webpack_require__(14); +var core = __webpack_require__(71); +var hide = __webpack_require__(29); +var redefine = __webpack_require__(47); +var ctx = __webpack_require__(36); +var PROTOTYPE = 'prototype'; + +var $export = function (type, name, source) { + var IS_FORCED = type & $export.F; + var IS_GLOBAL = type & $export.G; + var IS_STATIC = type & $export.S; + var IS_PROTO = type & $export.P; + var IS_BIND = type & $export.B; + var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE]; + var exports = IS_GLOBAL ? core : core[name] || (core[name] = {}); + var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {}); + var key, own, out, exp; + if (IS_GLOBAL) source = name; + for (key in source) { + // contains in native + own = !IS_FORCED && target && target[key] !== undefined; + // export native or passed + out = (own ? target : source)[key]; + // bind timers to global for call from export context + exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; + // extend global + if (target) redefine(target, key, out, type & $export.U); + // export + if (exports[key] != out) hide(exports, key, exp); + if (IS_PROTO && expProto[key] != out) expProto[key] = out; + } +}; +global.core = core; +// type bitmap +$export.F = 1; // forced +$export.G = 2; // global +$export.S = 4; // static +$export.P = 8; // proto +$export.B = 16; // bind +$export.W = 32; // wrap +$export.U = 64; // safe +$export.R = 128; // real proto method for `library` +module.exports = $export; + + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = { "default": __webpack_require__(288), __esModule: true }; + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +exports.default = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _defineProperty = __webpack_require__(126); + +var _defineProperty2 = _interopRequireDefault(_defineProperty); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + (0, _defineProperty2.default)(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + +/***/ }), +/* 5 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _typeof2 = __webpack_require__(127); + +var _typeof3 = _interopRequireDefault(_typeof2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && ((typeof call === "undefined" ? "undefined" : (0, _typeof3.default)(call)) === "object" || typeof call === "function") ? call : self; +}; + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _setPrototypeOf = __webpack_require__(316); + +var _setPrototypeOf2 = _interopRequireDefault(_setPrototypeOf); + +var _create = __webpack_require__(320); + +var _create2 = _interopRequireDefault(_create); + +var _typeof2 = __webpack_require__(127); + +var _typeof3 = _interopRequireDefault(_typeof2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : (0, _typeof3.default)(superClass))); + } + + subClass.prototype = (0, _create2.default)(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) _setPrototypeOf2.default ? (0, _setPrototypeOf2.default)(subClass, superClass) : subClass.__proto__ = superClass; +}; + +/***/ }), +/* 7 */ +/***/ (function(module, exports) { + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +// css base code, injected by the css-loader +module.exports = function(useSourceMap) { + var list = []; + + // return the list of modules as css string + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); + if(item[2]) { + return "@media " + item[2] + "{" + content + "}"; + } else { + return content; + } + }).join(""); + }; + + // import a list of modules into the list + list.i = function(modules, mediaQuery) { + if(typeof modules === "string") + modules = [[null, modules, ""]]; + var alreadyImportedModules = {}; + for(var i = 0; i < this.length; i++) { + var id = this[i][0]; + if(typeof id === "number") + alreadyImportedModules[id] = true; + } + for(i = 0; i < modules.length; i++) { + var item = modules[i]; + // skip already imported module + // this implementation is not 100% perfect for weird media query combinations + // when a module is imported multiple times with different media queries. + // I hope this will never occur (Hey this way we have smaller bundles) + if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { + if(mediaQuery && !item[2]) { + item[2] = mediaQuery; + } else if(mediaQuery) { + item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; + } + list.push(item); + } + } + }; + return list; +}; + +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; + var cssMapping = item[3]; + if (!cssMapping) { + return content; + } + + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' + }); + + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } + + return [content].join('\n'); +} + +// Adapted from convert-source-map (MIT) +function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); + var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; + + return '/*# ' + data + ' */'; +} + + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ + +var stylesInDom = {}; + +var memoize = function (fn) { + var memo; + + return function () { + if (typeof memo === "undefined") memo = fn.apply(this, arguments); + return memo; + }; +}; + +var isOldIE = memoize(function () { + // Test for IE <= 9 as proposed by Browserhacks + // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 + // Tests for existence of standard globals is to allow style-loader + // to operate correctly into non-standard environments + // @see https://github.com/webpack-contrib/style-loader/issues/177 + return window && document && document.all && !window.atob; +}); + +var getElement = (function (fn) { + var memo = {}; + + return function(selector) { + if (typeof memo[selector] === "undefined") { + var styleTarget = fn.call(this, selector); + // Special case to return head of iframe instead of iframe itself + if (styleTarget instanceof window.HTMLIFrameElement) { + try { + // This will throw an exception if access to iframe is blocked + // due to cross-origin restrictions + styleTarget = styleTarget.contentDocument.head; + } catch(e) { + styleTarget = null; + } + } + memo[selector] = styleTarget; + } + return memo[selector] + }; +})(function (target) { + return document.querySelector(target) +}); + +var singleton = null; +var singletonCounter = 0; +var stylesInsertedAtTop = []; + +var fixUrls = __webpack_require__(328); + +module.exports = function(list, options) { + if (typeof DEBUG !== "undefined" && DEBUG) { + if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); + } + + options = options || {}; + + options.attrs = typeof options.attrs === "object" ? options.attrs : {}; + + // Force single-tag solution on IE6-9, which has a hard limit on the # of - - - - - - - %SCRIPTS% - - - diff --git a/test/ssr.js b/test/ssr.js deleted file mode 100644 index 993bde2..0000000 --- a/test/ssr.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-env mocha */ - -import assert from 'assert'; -import Edit from 'material-design-icons/editor/svg/production/ic_mode_edit_24px.svg'; -import React from 'react'; -import ReactDOMServer from 'react-dom/server'; -import SvgIcon from '../src/SvgIcon'; - -/* - * These lightweight tests are an assurance that - * components render in server-side environments - */ -describe('Server Side Rendering', () => { - it('should render SVG', () => { - const render = ReactDOMServer.renderToString( - - ); - assert(render.indexOf('svg') > -1); - }); -}); diff --git a/test/test_index.js b/test/test_index.js deleted file mode 100644 index deaae53..0000000 --- a/test/test_index.js +++ /dev/null @@ -1,16 +0,0 @@ -/* eslint-env es5 */ - -// Require all modules ending in ".spec.js" from the -// 'src' directory and all subdirectories - -var testsContext = require.context('../src', true, /\.spec\.js$/); -testsContext.keys().forEach(testsContext); - -// Hide karma elements added to DOM -parent.document.getElementById('banner').style.display = 'none'; -parent.document.getElementById('browsers').style.display = 'none'; - -var configure = require('enzyme').configure; -var Adapter = require('enzyme-adapter-react-16'); - -configure({adapter: new Adapter()}); diff --git a/test/utils.js b/test/utils.js deleted file mode 100644 index c066eb4..0000000 --- a/test/utils.js +++ /dev/null @@ -1,40 +0,0 @@ -import {mount, shallow} from 'enzyme'; -import {unmountComponentAtNode} from 'react-dom'; - -export function createWrapper(fn) { - const attachTo = window.document.createElement('div'); - const firstChild = window.document.body.firstChild; - - window.document.body.insertBefore(attachTo, firstChild); - - const wrapper = function enzymeWrapper(node) { - return fn(node, {attachTo}); - }; - - wrapper.cleanUp = () => { - unmountComponentAtNode(attachTo); - attachTo.parentNode.removeChild(attachTo); - }; - - return wrapper; -} - -export function createMount() { - return createWrapper(mount); -} - -export function createShallow() { - return createWrapper(shallow); -} - -/* Slow tests down a little so we can view - * the visual renders in BrowserStack - */ -export function createTest(test, timeout) { - return function (done) { - test.bind(this)(); - setTimeout(() => { - done(); - }, timeout || 1000); - }; -} diff --git a/webpack.config.docs.js b/webpack.config.docs.js deleted file mode 100644 index d67b151..0000000 --- a/webpack.config.docs.js +++ /dev/null @@ -1,102 +0,0 @@ -const path = require('path'); -const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const webpack = require('webpack'); - -function entry(env) { - let entries = []; - if (env.dev) { - entries = [ - 'react-hot-loader/patch', - 'webpack-dev-server/client?http://localhost:8080', - 'webpack/hot/only-dev-server' - ]; - } - entries.push('./docs/index'); - return entries; -} - -function getPlugins(env) { - let plugins = [ - new CaseSensitivePathsPlugin() - ]; - if (env.dev) { - plugins = [ - new webpack.HotModuleReplacementPlugin(), - new webpack.DefinePlugin({ - __TEST__: false - }) - ]; - } - if (env.docs) { - plugins = [ - new webpack.DefinePlugin({ - __TEST__: false, - 'process.env': { - NODE_ENV: JSON.stringify('production') - } - }) - ]; - } - return plugins; -} - -module.exports = function config(env = {}) { - return { - devServer: { - historyApiFallback: true, - disableHostCheck: true, - host: '0.0.0.0', - hot: true, - publicPath: '/material-react-components' - }, - devtool: env.docs ? 'cheap-module-source-map' : 'eval-source-map', - entry: entry(env), - output: { - path: path.resolve(__dirname, env.docs ? '.' : './dist'), - publicPath: '/', - filename: '[name].js' - }, - mode: 'development', - module: { - rules: [ - { - test: /\.css$/, - exclude: /node_modules/, - use: [ - 'style-loader', - 'css-loader?modules&localIdentName=[name].[local]', - 'postcss-loader' - ] - }, - { - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader' - }, - { - test: /\.svg$/, - use: [ - { - loader: 'babel-loader', - options: { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - targets: { - browsers: ['last 2 versions'] - } - } - ] - ] - } - }, - 'react-svg-loader' - ] - } - ] - }, - plugins: getPlugins(env) - }; -}; diff --git a/webpack.config.ssr.js b/webpack.config.ssr.js deleted file mode 100644 index dafc202..0000000 --- a/webpack.config.ssr.js +++ /dev/null @@ -1,42 +0,0 @@ -const path = require('path'); - -module.exports = { - devtool: 'eval', - entry: [ - './test/ssr.js' - ], - output: { - path: path.resolve(__dirname, './.tmp'), - publicPath: '/', - filename: '[name].js' - }, - mode: 'development', - module: { - rules: [ - { - test: /\.css$/, - exclude: /node_modules/, - use: [ - 'isomorphic-style-loader', - 'css-loader?modules&localIdentName=[name].[local]', - 'postcss-loader' - ] - }, - { - test: /\.js$/, - exclude: /node_modules/, - use: [ - 'babel-loader' - ] - }, - { - test: /\.svg$/, - use: [ - 'babel-loader', - 'react-svg-loader' - ] - } - ] - }, - target: 'node' -};