Merge pull request #133 from jamesplease/dialog

adding dialog and docs

docs/components.js

@@ -50,4 +50,14 @@ export default [
     materialDocsLink:
       'https://material.io/design/components/selection-controls.html#radio-buttons',
   },
+  {
+    name: 'Dialog',
+    url: 'dialog',
+    componentKey: 'dialog',
+    editorHeight: '500px',
+    description:
+      'Dialogs inform users about a task or decision that needs to be made.',
+    component: 'src/components/component-doc',
+    materialDocsLink: 'https://material.io/design/components/dialogs.html',
+  },
 ];

docs/examples/dialog.js

@@ -0,0 +1,22 @@
+class DialogExample extends Component {
+  render() {
+    return (
+      <Dialog style={{ maxWidth: '500px' }}>
+        <Dialog.Title>Dialog Title</Dialog.Title>
+        <Dialog.Body>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam
+            consequatur enim voluptates nobis perferendis voluptatibus alias
+            modi voluptate dolorum ipsa amet.
+          </p>
+        </Dialog.Body>
+        <Dialog.Actions>
+          <Button flat>Cancel</Button>
+          <Button flat>Accept</Button>
+        </Dialog.Actions>
+      </Dialog>
+    );
+  }
+}
+
+return <DialogExample />;

docs/readmes/dialog.md

@@ -0,0 +1,27 @@
+## Usage
+
+```jsx
+import { Dialog } from 'materialish';
+import 'materialish/dialog.css';
+```
+
+Take note of the fact that a dialog is made up of several components. To see how they
+are used together, refer to the example above.
+
+## Props
+
+All of the components of a dialog receive the same props.
+
+| Prop Name | Default Value | Required | Description                                                        |
+| --------- | ------------- | -------- | ------------------------------------------------------------------ |
+| className |               | No       | Additional class name(s) to add to the dialog component            |
+| ...rest   |               | No       | Other props are placed on the root element of the dialog component |
+
+## CSS Variables
+
+These CSS variables should be applied to the `<Dialog/>` component, and not the sub-components.
+
+| Variable          | Default Value | Description                                            |
+| ----------------- | ------------- | ------------------------------------------------------ |
+| --mt-baseFontSize | 1rem          | The text size of the dialog is based off of this value |
+| --mt-fontFamily   | 'Roboto'      | The font family to use for text                        |

docs/src/components/component-doc.css

@@ -62,7 +62,12 @@
   align-items: center;
   justify-content: center;
   min-height: 150px;
+  padding: 50px;
   background-color: #f2f2f2;
   border-radius: 5px 5px 0 0;
   margin-top: 50px;
 }
+
+.componentDoc_editor .CodeMirror {
+  min-height: var(--editorHeight, 300px);
+}

docs/src/components/component-doc.js

@@ -33,6 +33,7 @@ export class ComponentDoc extends Component {
       componentKey,
       sourceLink,
       materialDocsLink,
+      editorHeight = '300px',
     } = component;
 
     const sourceLinkToUse = sourceLink
@@ -74,6 +75,9 @@ export class ComponentDoc extends Component {
                 your changes.
               </div>
               <Editor
+                style={{
+                  '--editorHeight': editorHeight,
+                }}
                 className="componentDoc_editor"
                 theme="oceanic-next"
                 codeText={code}

docs/src/vendor/doc-components/editor/editor.js

@@ -1,5 +1,5 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
 let CodeMirror;
 if (typeof document !== 'undefined') {
@@ -14,15 +14,15 @@ class Editor extends React.Component {
     onChange: PropTypes.func,
     readOnly: PropTypes.bool,
     tabSize: PropTypes.number,
-    theme: PropTypes.string
+    theme: PropTypes.string,
   };
 
   static defaultProps = {
-    className: "",
+    className: '',
     lineNumbers: false,
     readOnly: false,
     tabSize: 2,
-    theme: "oceanic-next"
+    theme: 'oceanic-next',
   };
 
   componentDidMount() {
@@ -31,16 +31,16 @@ class Editor extends React.Component {
     }
 
     this.editor = CodeMirror.fromTextArea(this.refs.editor, {
-      mode: "javascript",
+      mode: 'javascript',
       lineNumbers: this.props.lineNumbers,
       smartIndent: false,
       tabSize: this.props.tabSize,
       matchBrackets: true,
       theme: this.props.theme,
-      readOnly: this.props.readOnly
+      readOnly: this.props.readOnly,
     });
 
-    this.editor.on("change", this.handleChange);
+    this.editor.on('change', this.handleChange);
   }
 
   componentDidUpdate() {
@@ -61,10 +61,10 @@ class Editor extends React.Component {
   }
 
   render() {
-    const { className } = this.props;
+    const { className, style } = this.props;
 
     return (
-      <div className={className}>
+      <div className={className} style={style}>
         <textarea ref="editor" defaultValue={this.props.codeText} />
       </div>
     );

docs/static.config.js

@@ -15,6 +15,7 @@ const readmes = {
   icons: fs.readFileSync('./readmes/icons.md', { encoding: 'utf-8' }),
   spinner: fs.readFileSync('./readmes/spinner.md', { encoding: 'utf-8' }),
   radio: fs.readFileSync('./readmes/radio.md', { encoding: 'utf-8' }),
+  dialog: fs.readFileSync('./readmes/dialog.md', { encoding: 'utf-8' }),
 };
 
 const examples = {
@@ -25,6 +26,7 @@ const examples = {
   icons: fs.readFileSync('./examples/icons.js', { encoding: 'utf-8' }),
   spinner: fs.readFileSync('./examples/spinner.js', { encoding: 'utf-8' }),
   radio: fs.readFileSync('./examples/radio.js', { encoding: 'utf-8' }),
+  dialog: fs.readFileSync('./examples/dialog.js', { encoding: 'utf-8' }),
 };
 
 // import { addSearchObjects } from './algolia'

src/dialog/dialog.css

@@ -0,0 +1,30 @@
+.mt-dialog {
+  font-family: var(--mt-fontFamily, 'Roboto');
+  font-size: var(--mt-baseFontSize, 1rem);
+  background-color: #fff;
+  text-align: left;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  border-radius: 0.125em;
+}
+
+.mt-dialog_title {
+  color: #212121;
+  font-size: 1.25em;
+  padding: 1.2em 1.2em 0;
+  font-weight: 500;
+}
+
+.mt-dialog_content {
+  color: #757575;
+  margin: 1.25em 1.5em 1.5em;
+}
+
+.mt-dialog_actions {
+  padding: 0.5em;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mt-dialog_actions .mt-button+.mt-button {
+  margin-left: 0.43em;
+}

src/dialog/dialog.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Dialog extends Component {
+  static Title = ({ className = '', ...props }) => (
+    <div className={`mt-dialog_title ${className}`} {...props} />
+  );
+  static Body = ({ className = '', ...props }) => (
+    <div className={`mt-dialog_content ${className}`} {...props} />
+  );
+
+  static Actions = ({ className = '', ...props }) => (
+    <div className={`mt-dialog_actions ${className}`} {...props} />
+  );
+
+  render() {
+    const { className = '', ...props } = this.props;
+    return <div className={`mt-dialog ${className}`} {...props} />;
+  }
+}
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Dialog;

src/index.js

@@ -5,5 +5,6 @@ import Switch from './switch/switch';
 import Avatar from './avatar/avatar';
 import Spinner from './spinner/spinner';
 import Radio from './radio/radio';
+import Dialog from './dialog/dialog';
 
-export { Avatar, Button, Checkbox, Ripple, Spinner, Switch, Radio };
+export { Avatar, Button, Checkbox, Dialog, Ripple, Spinner, Switch, Radio };

stories/dialog.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import '../src/dialog/dialog.css';
+import { Dialog } from '../src/index';
+import { Button } from '../src/index';
+
+setOptions({
+  name: 'Materialish',
+  addonPanelInRight: true,
+});
+
+storiesOf('Dialog', module).add('Regular', () => (
+  <Dialog>
+    <Dialog.Title>I am a modal</Dialog.Title>
+    <Dialog.Body>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam
+        consequatur enim voluptates nobis perferendis voluptatibus alias modi
+        voluptate dolorum ipsa amet, aliquam similique blanditiis iusto ipsam,
+        atque beatae aliquid sit! Lorem ipsum dolor sit amet consectetur
+        adipisicing elit.
+      </p>
+    </Dialog.Body>
+    <Dialog.Actions>
+      <Button flat>Nevermind</Button>
+      <Button flat>Accept</Button>
+    </Dialog.Actions>
+  </Dialog>
+));