feat: Add roses example

examples/README.md

@@ -0,0 +1,7 @@
+# Examples
+
+A collection of small apps or pages using MDC React components.
+
+Example | Link
+--- | ---
+Roses | [./roses](./roses)

examples/roses/Feedback.js

@@ -0,0 +1,125 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// 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.
+
+import React from 'react';
+
+import {Chip, ChipSet} from '@material/react-chips';
+import TopAppBar from '@material/react-top-app-bar';
+import TextField, {Input, HelperText} from '@material/react-text-field';
+import Button from '@material/react-button';
+import MaterialIcon from '@material/react-material-icon';
+
+import './index.scss';
+
+class Feedback extends React.Component {
+  state = {
+    feedback: '',
+  };
+
+  render() {
+    return (
+      <div>
+        {this.renderTopAppBar()}
+        <main className='feedback-page mdc-top-app-bar--fixed-adjust'>
+          <div className='feedback-page__content'>
+            <img
+              className='feedback-logo'
+              src='./assets/red_roses_logo.svg'
+              alt='red roses logo'
+            />
+            {this.renderMessage()}
+            <ChipSet filter>
+              <Chip id='fast' label='Fast Delivery'/>
+              <Chip id='great_flowers' label='Great Flowers'/>
+              <Chip id='nice_courier' label='Nice Courier'/>
+              <Chip id='easy_to_use' label='Easy to Order'/>
+            </ChipSet>
+            {this.renderFeedbackTextField()}
+            {this.renderSubmit()}
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  renderTopAppBar() {
+    return (
+      <TopAppBar
+        title='Feedback'
+        navigationIcon={<MaterialIcon
+          icon='close'
+          onClick={() => console.log('close feedback surface')}
+        />}
+      />
+    );
+  }
+
+  renderMessage() {
+    return (
+      <div>
+        <h2 className='mdc-typography--headline6 mdc-theme--primary'>
+          Thanks for spreading joy with Red Roses
+        </h2>
+        <p className='mdc-typography--body2 message__subheader'>
+          We would love to hear about your ordering experience.
+        </p>
+      </div>
+    );
+  }
+
+  renderFeedbackTextField() {
+    const helperText = (
+      <HelperText persistent>
+        Don't worry feedback is never shared with couriers
+      </HelperText>
+    );
+    return (
+      <div className='feedback-text-field__container'>
+        <TextField
+          label='Additional thoughts...'
+          className='feedback-text-field'
+          trailingIcon={<MaterialIcon icon='edit' />}
+          helperText={helperText}
+          outlined
+        >
+          <Input
+            value={this.state.feedback}
+            onChange={(evt) => this.setState({feedback: evt.target.value})}
+          />
+        </TextField>
+      </div>
+    );
+  }
+
+  renderSubmit() {
+    return (
+      <Button
+        raised
+        onClick={() => console.log('submit!')}
+      >
+        Submit
+      </Button>
+    );
+  }
+}
+
+export default Feedback;

examples/roses/README.md

@@ -0,0 +1,29 @@
+# Roses Example
+
+This is an example of a product feedback form using only MDC React components. This also uses some MDC Web-only packages, which are just styles ([typography](https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography), [theme]https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme, and [shape](https://github.com/material-components/material-components-web/tree/master/packages/mdc-shape)).
+
+MDC Web Package | Description
+--- | ---
+Typography | - Set messaging text (font-size, line-height, etc.)
+Theme | - Set messaging ink color
+Shape | - Set Chip corner shape
+
+
+## Running example
+> starting from root directory (`/material-components-web-react`)
+
+1. `cd ./examples/roses`
+1. `npm i`
+1. `npk start`
+1. in web browser, head to `localhost:8080` (may be different if you have another web server running, such as the screenshot tests)
+
+
+## Alternate theme
+
+If you want to see MDC Web's Themeing power in action, head to the `./examples/roses/index.scss` file, and uncomment the first line below the license (line 23):
+
+```sass
+$mdc-theme-primary: #b31839; // uncomment for alternate primary theme color
+```
+
+This will update the primary color for the app. Just refresh the page and allow the Sass to recompile with #b31839 as the primary color. Feel free to experiment!x

examples/roses/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!--
+ The MIT License
+
+ Copyright (c) 2018 Google, Inc.
+
+ 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.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Roses Feedback</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="./bundle.css">
+  </head>
+  <body>
+    <div id='roses-feedback'></div>
+  </body>
+  <script src='./bundle.js'></script>
+</html>

examples/roses/index.js

@@ -0,0 +1,31 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// 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.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Feedback from './Feedback';
+
+import './index.scss';
+
+ReactDOM.render((
+  <Feedback />
+), document.getElementById('roses-feedback'));

examples/roses/index.scss

@@ -0,0 +1,88 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// 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.
+
+// $mdc-theme-primary: #b31839; // uncomment for alternate primary theme color
+$grey: #616161;
+$grey-light: #bdbdbd;
+
+
+// react
+@import '@material/react-chips/index';
+@import '@material/react-top-app-bar/index';
+@import '@material/react-text-field/index';
+@import '@material/react-button/index';
+
+// web
+@import '@material/typography/mdc-typography';
+@import '@material/theme/mdc-theme';
+
+// mixins
+@import '@material/top-app-bar/mixins';
+@import '@material/chips/mixins';
+@import '@material/chips/variables';
+@import '@material/shape/mixins';
+
+body {
+  margin: 0;
+}
+
+.message__subheader {
+  color: $grey;
+}
+
+.feedback-page {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.feedback-page__content {
+  max-width: 360px;
+  padding: 16px;
+}
+
+.feedback-logo {
+  width: 30px;
+  height: 30px;
+}
+
+.mdc-chip {
+  // TODO update line to use mixin when
+  // @include mdc-chip-shape-radius(10px);
+  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-chip-height-default, 4px));
+  @include mdc-chip-selected-ink-color(primary);
+  @include mdc-chip-fill-color(white);
+  @include mdc-chip-outline(1px, solid, $grey-light);
+}
+
+.mdc-chip--selected {
+  @include mdc-chip-outline-color(primary);
+}
+
+.feedback-text-field {
+  width: 100%;
+}
+
+.feedback-text-field__container {
+  margin: 48px 0;
+  padding: 0 24px;
+}