Merge pull request #134 from jamesplease/card

Elevation

docs/components.js

@@ -60,6 +60,14 @@ export default [
     component: 'src/components/component-doc',
     materialDocsLink: 'https://material.io/design/components/dialogs.html',
   },
+  {
+    name: 'Elevation',
+    url: 'elevation',
+    componentKey: 'elevation',
+    description:
+      'Elevations create a sense of depth by applying a drop shadow to an element.',
+    component: 'src/components/component-doc',
+  },
   {
     name: 'Chips',
     url: 'chips',

docs/examples/elevation.js

@@ -0,0 +1,11 @@
+class ElevationExample extends Component {
+  render() {
+    return (
+      <Elevation depth={2} style={{ padding: '20px' }}>
+        This is an elevation with some content
+      </Elevation>
+    );
+  }
+}
+
+return <ElevationExample />;

docs/readmes/action-chip.md

@@ -8,13 +8,12 @@ import 'materialish/ripple.css';
 
 ## Props
 
-| Prop Name | Default Value | Required | Description                                                                       |
-| --------- | ------------- | -------- | --------------------------------------------------------------------------------- |
-| children  |               | No       | The contents that are rendered within the chip                                    |
-| className |               | No       | Additional class name(s) to add to the chip                                       |
-| ripple    | true          | No       | Whether or not to display the "ripple" effect                                     |
-| onClick   |               | No       | The existence of this prop determines whether the Chip behaves as a button or not |
-| ...rest   |               | No       | Other props are placed on the root element                                        |
+| Prop Name | Default Value | Required | Description                                    |
+| --------- | ------------- | -------- | ---------------------------------------------- |
+| children  |               | No       | The contents that are rendered within the chip |
+| className |               | No       | Additional class name(s) to add to the chip    |
+| ripple    | true          | No       | Whether or not to display the "ripple" effect  |
+| ...rest   |               | No       | Other props are placed on the root element     |
 
 ## CSS Variables
 

docs/readmes/elevation.md

@@ -0,0 +1,21 @@
+## Usage
+
+```jsx
+import { Elevation } from 'materialish';
+import 'materialish/elevation.css';
+```
+
+## Props
+
+| Prop Name | Default Value | Required | Description                                                                   |
+| --------- | ------------- | -------- | ----------------------------------------------------------------------------- |
+| className |               | No       | Additional class name(s) to add to the Elevation                              |
+| depth     | 1             | No       | A value between 0 and 5 that determines the magnitude of the visual elevation |
+| ...rest   |               | No       | Other props are placed on the root element of the Avatar                      |
+
+## CSS Variables
+
+| Variable          | Default Value | Description                           |
+| ----------------- | ------------- | ------------------------------------- |
+| --mt-baseFontSize | 1rem          | The size of text within the elevation |
+| --mt-fontFamily   | 'Roboto'      | The font family to use for text       |

docs/static.config.js

@@ -17,6 +17,7 @@ const readmes = {
   spinner: fs.readFileSync('./readmes/spinner.md', fsOptions),
   radio: fs.readFileSync('./readmes/radio.md', fsOptions),
   dialog: fs.readFileSync('./readmes/dialog.md', fsOptions),
+  elevation: fs.readFileSync('./readmes/elevation.md', fsOptions),
   'action-chip': fs.readFileSync('./readmes/action-chip.md', fsOptions),
   'filter-chip': fs.readFileSync('./readmes/filter-chip.md', fsOptions),
   'choice-chip': fs.readFileSync('./readmes/choice-chip.md', fsOptions),
@@ -31,6 +32,7 @@ const examples = {
   spinner: fs.readFileSync('./examples/spinner.js', fsOptions),
   radio: fs.readFileSync('./examples/radio.js', fsOptions),
   dialog: fs.readFileSync('./examples/dialog.js', fsOptions),
+  elevation: fs.readFileSync('./examples/elevation.js', fsOptions),
   'action-chip': fs.readFileSync('./examples/action-chip.js', fsOptions),
   'filter-chip': fs.readFileSync('./examples/filter-chip.js', fsOptions),
   'choice-chip': fs.readFileSync('./examples/choice-chip.js', fsOptions),

src/elevation/elevation.css

@@ -0,0 +1,33 @@
+.mt-elevation {
+  font-size: var(--mt-baseFontSize, 1rem);
+  font-family: var(--mt-fontFamily, 'Roboto');
+  background: #fff;
+  border-radius: 0.125em;
+  display: inline-block;
+  position: relative;
+  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+mt-elevation-0 {
+  box-shadow: none;
+}
+
+.mt-elevation-1 {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+.mt-elevation-2 {
+  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
+}
+
+.mt-elevation-3 {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12);
+}
+
+.mt-elevation-4 {
+  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12);
+}
+
+.mt-elevation-5 {
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
+}

src/elevation/elevation.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+function clamp(min, val, max) {
+  return Math.min(Math.max(min, val), max);
+}
+
+class Elevation extends Component {
+  render() {
+    const { className = '', depth = 1, ...props } = this.props;
+
+    const depthToUse = Number.isNaN(depth) ? 1 : depth;
+    const clampedDepth = clamp(0, depthToUse, 5);
+
+    return (
+      <div
+        className={`mt-elevation mt-elevation-${clampedDepth} ${className}`}
+        {...props}
+      />
+    );
+  }
+}
+
+Elevation.propTypes = {
+  className: PropTypes.string,
+  depth: PropTypes.oneOf([1, 2, 3, 4, 5]),
+};
+
+export default Elevation;

src/index.js

@@ -6,6 +6,7 @@ import Avatar from './avatar/avatar';
 import Spinner from './spinner/spinner';
 import Radio from './radio/radio';
 import Dialog from './dialog/dialog';
+import Elevation from './elevation/elevation';
 import ActionChip from './action-chip/action-chip';
 import ChoiceChip from './choice-chip/choice-chip';
 import FilterChip from './filter-chip/filter-chip';
@@ -19,6 +20,7 @@ export {
   Switch,
   Radio,
   Dialog,
+  Elevation,
   ActionChip,
   ChoiceChip,
   FilterChip,

stories/elevation.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import '../src/elevation/elevation.css';
+import { Elevation } from '../src/index';
+
+setOptions({
+  name: 'Materialish',
+  addonPanelInRight: true,
+});
+
+storiesOf('Elevation', module)
+  .add('Depth - 0', () => (
+    <Elevation
+      depth={0}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ))
+  .add('Depth - 1', () => (
+    <Elevation
+      depth={1}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ))
+  .add('Depth - 2', () => (
+    <Elevation
+      depth={2}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ))
+  .add('Depth - 3', () => (
+    <Elevation
+      depth={3}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ))
+  .add('Depth - 4', () => (
+    <Elevation
+      depth={4}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ))
+  .add('Depth - 5', () => (
+    <Elevation
+      depth={5}
+      style={{ width: '200px', height: '200px', padding: '20px' }}>
+      This is an elevation with some content
+    </Elevation>
+  ));