Repository: react-materialize/react-materialize
Pull request #810 (2019-04-03 23:09:22)

Add missing Collection stories
# Description

As per the title, adding missing `Secondary content` and `Avatar Content` stories.

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Textarea.js b/src/Textarea.js
index ce7fd5d..2cf7cc0 100644
--- a/src/Textarea.js
+++ b/src/Textarea.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import idgen from './idgen';
 import Icon from './Icon';
-import constants from './constants';
+import TextInput from './TextInput';
 
 class Textarea extends Component {
   componentDidUpdate() {
@@ -15,36 +14,12 @@ class Textarea extends Component {
   }
 
   render() {
-    const {
-      s,
-      m,
-      l,
-      xl,
-      noLayout,
-      iconClassName,
-      icon,
-      label,
-      id,
-      onChange,
-      ...other
-    } = this.props;
+    const { iconClassName, icon, label, id, onChange, ...other } = this.props;
 
     const computedId = id || idgen();
 
-    const sizes = { s, m, l, xl };
-
-    let responsiveClasses;
-    if (!noLayout) {
-      responsiveClasses = { col: true };
-      constants.SIZES.forEach(size => {
-        responsiveClasses[size + sizes[size]] = sizes[size];
-      });
-    }
-
-    const wrapperClasses = cx('input-field', responsiveClasses);
-
     return (
-      <div className={wrapperClasses}>
+      <div className="input-field">
         {icon && this.renderIcon(icon, iconClassName)}
         <textarea
           ref={input => {
@@ -62,26 +37,6 @@ class Textarea extends Component {
 }
 
 Textarea.propTypes = {
-  /*
- * Strip away all layout classes such as col and sX
- */
-  noLayout: PropTypes.bool,
-  /*
-   * Responsive size for Mobile Devices
-   */
-  s: PropTypes.number,
-  /*
-   * Responsive size for Tablet Devices
-   */
-  m: PropTypes.number,
-  /*
-   * Responsive size for Desktop Devices
-   */
-  l: PropTypes.number,
-  /**
-   *  Responsive size for Large Desktop Devices
-   */
-  xl: PropTypes.number,
   /*
    * render icon next to input
    */
diff --git a/src/index.js b/src/index.js
index 29e7d2f..0dffaf3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ export { default as Autocomplete } from './Autocomplete';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as Button } from './Button';
-export { default as Caption } from './Caption';
 export { default as Card } from './Card';
 export { default as CardPanel } from './CardPanel';
 export { default as CardTitle } from './CardTitle';
diff --git a/stories/Collection.stories.js b/stories/Collection.stories.js
index 7cfcfc7..20dac2a 100644
--- a/stories/Collection.stories.js
+++ b/stories/Collection.stories.js
@@ -4,6 +4,7 @@ import Col from '../src/Col';
 import Row from '../src/Row';
 import Collection from '../src/Collection';
 import CollectionItem from '../src/CollectionItem';
+import Icon from '../src/Icon';
 
 const stories = storiesOf('Components|Collection', module);
 
@@ -49,3 +50,81 @@ stories.add('Header', () => (
     <CollectionItem>Alvin</CollectionItem>
   </Collection>
 ));
+
+stories.add('Secondary Content', () => (
+  <Collection header="First Names">
+    <CollectionItem>
+      Alvin
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>send</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem>
+      Alvin
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>send</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem>
+      Alvin
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>send</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem>
+      Alvin
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>send</Icon>
+      </a>
+    </CollectionItem>
+  </Collection>
+));
+
+stories.add('Avatar Content', () => (
+  <Collection>
+    <CollectionItem className="avatar">
+      <img
+        src="https://materializecss.com/images/yuna.jpg"
+        alt=""
+        className="circle"
+      />
+      <span className="title">Title</span>
+      <p>
+        First Line <br /> Second Line
+      </p>
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>grade</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem className="avatar">
+      <Icon className="circle">folder</Icon>
+      <span className="title">Title</span>
+      <p>
+        First Line <br /> Second Line
+      </p>
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>grade</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem className="avatar">
+      <Icon className="circle green">insert_chart</Icon>
+      <span className="title">Title</span>
+      <p>
+        First Line <br /> Second Line
+      </p>
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>grade</Icon>
+      </a>
+    </CollectionItem>
+    <CollectionItem className="avatar">
+      <Icon className="circle red">play_arrow</Icon>
+      <span className="title">Title</span>
+      <p>
+        First Line <br /> Second Line
+      </p>
+      <a href="javascript:void(0)" className="secondary-content">
+        <Icon>grade</Icon>
+      </a>
+    </CollectionItem>
+  </Collection>
+));
diff --git a/stories/Media.stories.js b/stories/Media.stories.js
index 6c08bd4..6a8541d 100644
--- a/stories/Media.stories.js
+++ b/stories/Media.stories.js
@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import MediaBox from '../src/MediaBox';
 import Slider from '../src/Slider';
 import Slide from '../src/Slide';
-import Caption from '../src/Caption';
 
 const stories = storiesOf('Javascript|Media', module);
 
@@ -22,37 +21,50 @@ stories.add('Default', () => (
 
 stories.add('Slider', () => (
   <Slider>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/1" alt="" />}>
-      <Caption>
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580/nature/1"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption center-align">
         <h3>This is our big Tagline!</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="http://lorempixel.com/780/580/nature/2" alt="" />}>
-      <Caption placement="left">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/2"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption left-align">
         <h3>Left Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
+      </div>
     </Slide>
-    <Slide image={<img src="https://lorempixel.com/780/580/nature/3" alt="" />}>
-      <Caption placement="right">
+    <Slide
+      image={
+        <MediaBox
+          src="http://lorempixel.com/780/580//nature/3"
+          caption="A demo media box1"
+        />
+      }
+    >
+      <div className="caption right-align">
         <h3>Right Aligned Caption</h3>
         <h5 className="light grey-text text-lighten-3">
           Here's our small slogan.
         </h5>
-      </Caption>
-    </Slide>
-    <Slide image={<img src="https://lorempixel.com/580/250/nature/4" alt="" />}>
-      <Caption>
-        <h3>This is our big Tagline!</h3>
-        <h5 className="light grey-text text-lighten-3">
-          Here's our small slogan.
-        </h5>
-      </Caption>
+      </div>
     </Slide>
   </Slider>
 ));
diff --git a/stories/Textarea.stories.js b/stories/Textarea.stories.js
index 8481e33..3568c5a 100644
--- a/stories/Textarea.stories.js
+++ b/stories/Textarea.stories.js
@@ -1,11 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, boolean, number, withKnobs } from '@storybook/addon-knobs';
-import Row from '../src/Row';
 import Textarea from '../src/Textarea';
 
 const stories = storiesOf('Components|Textarea', module);
-stories.addDecorator(withKnobs);
 
 stories.addParameters({
   info: {
@@ -16,40 +13,12 @@ stories.addParameters({
   }
 });
 
-stories.add('Textarea', () => {
-  const defaultValue = 12;
-  const options = {
-    range: true,
-    min: 1,
-    max: 12,
-    step: 1
-  };
+stories.add('Textarea', () => <Textarea />);
 
-  return (
-    <Row>
-      <Textarea
-        s={number('s', defaultValue, options)}
-        m={number('m', defaultValue, options)}
-        l={number('l', defaultValue, options)}
-        xl={number('xl', defaultValue, options)}
-      />
-    </Row>
-  );
-});
-
-stories.add('Disabled', () => (
-  <Textarea
-    value={text('value', 'I was here')}
-    disabled={boolean('disabled', true)}
-  />
-));
+stories.add('Disabled', () => <Textarea value="I was here" disabled />);
 
-stories.add('Placeholder', () => (
-  <Textarea placeholder={text('placeholder', 'I was here')} />
-));
+stories.add('Placeholder', () => <Textarea placeholder="I was here" />);
 
-stories.add('Label', () => (
-  <Textarea label={text('label', 'Write something here...')} />
-));
+stories.add('Label', () => <Textarea label="Write something here..." />);
 
-stories.add('Icon', () => <Textarea icon={text('icon', 'mode_edit')} />);
+stories.add('Icon', () => <Textarea icon="mode_edit" />);


Test patch:
diff --git a/test/Textarea.spec.js b/test/Textarea.spec.js
index 7c9b3ab..a3785eb 100644
--- a/test/Textarea.spec.js
+++ b/test/Textarea.spec.js
@@ -10,24 +10,6 @@ describe('<Textarea />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Handles layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeTruthy();
-    expect(wrapper.hasClass('s4')).toBeTruthy();
-    expect(wrapper.hasClass('m6')).toBeTruthy();
-  });
-
-  test('Handles removing layout classes', () => {
-    wrapper = shallow(<Textarea s={4} m={6} noLayout />);
-
-    expect(wrapper.hasClass('input-field')).toBeTruthy();
-    expect(wrapper.hasClass('col')).toBeFalsy();
-    expect(wrapper.hasClass('s4')).toBeFalsy();
-    expect(wrapper.hasClass('m6')).toBeFalsy();
-  });
-
   test('Disabled', () => {
     wrapper = shallow(<Textarea value="I was here" disabled />);
     expect(wrapper).toMatchSnapshot();
diff --git a/test/__snapshots__/Textarea.spec.js.snap b/test/__snapshots__/Textarea.spec.js.snap
index ca97ec1..fff9088 100644
--- a/test/__snapshots__/Textarea.spec.js.snap
+++ b/test/__snapshots__/Textarea.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Textarea /> Disabled 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -18,7 +18,7 @@ exports[`<Textarea /> Disabled 1`] = `
 
 exports[`<Textarea /> Icon 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <Icon
     className="material-icons prefix"
@@ -37,7 +37,7 @@ exports[`<Textarea /> Icon 1`] = `
 
 exports[`<Textarea /> Label 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -53,7 +53,7 @@ exports[`<Textarea /> Label 1`] = `
 
 exports[`<Textarea /> Placeholder 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"
@@ -68,7 +68,7 @@ exports[`<Textarea /> Placeholder 1`] = `
 
 exports[`<Textarea /> Textarea 1`] = `
 <div
-  className="input-field col"
+  className="input-field"
 >
   <textarea
     className="materialize-textarea"