feat(react-media): implement new interface

- images are passed in as props rather than having a large number of props passed into media itself - vertical alignment is still done on the individual image level rather than by the object itself [#84877438] Signed-off-by: Beatrice Peng <bpeng@pivotal.io>
pivotal-cf · Jan 5, 2015 · 9725895 · 9725895
1 parent bfbb966
commit 9725895
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 95 deletions.
diff --git a/src/pivotal-ui/components/media.scss b/src/pivotal-ui/components/media.scss
@@ -242,18 +242,6 @@ name: media_react
 category: Beta
 ---
 
-## Image modifiers
-
-Media Modifiers                   | Options                                        | Description
---------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------
-`<left or right>ImageHref       ` | url                                            | Url the image should link to
-`<left or right>ImageSource     ` | url                                            | Image source
-`<left or right>ImageAlignment  ` | top (default), "middle", "bottom"              | Vertical alignment
-`<left or right>MediaSpacing    ` | "small", "medium", "large", "xlarge"           | Spacing adjustments between the image and the content next to it
-`<left or right>ImageHeight     ` | pixel or percentage                            | Height of the image
-`<left or right>ImageWidth      ` | pixel or percentage                            | Width of the image
-`<left or right>ImageAlt        ` | string                                         | Text description of the image (for disabled users)
-
 ## General media object modifiers
 
 Media Modifiers     | Options                                        | Description
@@ -270,26 +258,25 @@ The base button renderer. You won't really interact with this directly.
 ```
 
 ```jsx_example
+var image = <img src='http://placehold.it/50x50' />
+var linkedImage = <img src='http://placehold.it/50x50' href="http://google.com" />
+var alignedImage = <img src='http://placehold.it/50x50' alignment='middle' />
+
 React.render(
   <div>
     <Media
-      leftImageSource='http://placehold.it/50x50'>
+      leftImage={image}>
         left media
     </Media>
 
     <Media
-      rightImageHref='http://www.google.com'
-      rightImageSource='http://placehold.it/50x50'>
+        rightImage={linkedImage}>
         right media
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftImageAlignment='middle'
-      rightImageHref='http://www.google.com'
-      rightImageSource='http://placehold.it/50x50'
-      rightImageAlignment='middle'
+      leftImage={image}
+      rightImage={image}
       bodyAlignment='middle'
       stackSize='medium'>
         left and right media
@@ -304,34 +291,30 @@ React.render(
 ```
 
 ```jsx_example
+var image = <img href='http://www.google.com' src='http://placehold.it/50x50'/>
+var middleAlignedImage = <img href='http://www.google.com' src='http://placehold.it/50x50' alignment='middle' />
+var bottomAlignedImage = <img href='http://www.google.com' src='http://placehold.it/50x50' alignment='bottom' />
+
 React.render(
   <div>
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'>
+      leftImage={image}>
         top aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftImageAlignment='middle'>
+      leftImage={middleAlignedImage}>
         middle aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftImageAlignment='middle'
-      leftAlt='this is the alt text for the left media'
+      leftImage={middleAlignedImage}
       bodyAlignment='middle'>
         middle aligned and middle body (for short text and big images)
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftImageAlignment='bottom'>
+      leftImage={bottomAlignedImage}>
         bottom aligned - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </Media>
   </div>,
@@ -347,39 +330,36 @@ Media spacing can be added to the left and right medias. If no spacing is define
 ```
 
 ```jsx_example
+var image = <img href='http://www.google.com' src='http://placehold.it/50x50'/>
+var smallSpaceImage =  <img href='http://www.google.com' src='http://placehold.it/50x50' spacing='small'/>
+var mediumSpaceImage =  <img href='http://www.google.com' src='http://placehold.it/50x50' spacing='medium'/>
+var largeSpaceImage =  <img href='http://www.google.com' src='http://placehold.it/50x50' spacing='large'/>
+var xlargeSpaceImage =  <img href='http://www.google.com' src='http://placehold.it/50x50' spacing='xlarge'/>
+
 React.render(
   <div>
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'>
+      leftImage={image}>
         default image spacing media
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftMediaSpacing='small'>
+      leftImage={smallSpaceImage}>
         small image spacing media
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftMediaSpacing='medium'>
+      leftImage={mediumSpaceImage}>
         medium image spacing media
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftMediaSpacing='large'>
+      leftImage={largeSpaceImage}>
         large image spacing media
     </Media>
 
     <Media
-      leftImageHref='http://www.google.com'
-      leftImageSource='http://placehold.it/50x50'
-      leftMediaSpacing='xlarge'>
+      leftImage={xlargeSpaceImage}>
         xlarge image spacing media
     </Media>
   </div>,

diff --git a/src/pivotal-ui/javascripts/media.jsx b/src/pivotal-ui/javascripts/media.jsx
@@ -9,8 +9,7 @@ var MediaObject = React.createClass({
       'media-left': this.props.horizontalAlignment === 'left',
       'media-right': this.props.horizontalAlignment === 'right',
       'media-middle': this.props.verticalAlignment === 'middle',
-      'media-bottom': this.props.verticalAlignment === 'bottom',
-      'media-object': !this.props.imageHref
+      'media-bottom': this.props.verticalAlignment === 'bottom'
     });
 
     var paddingClasses = setClass({
@@ -26,18 +25,18 @@ var MediaObject = React.createClass({
 
     var mediaClasses = [classes, paddingClasses].join(' ');
 
-    if (this.props.imageHref) {
+    if (this.props.href) {
       return (
         <div className={mediaClasses}>
-          <a href={this.props.imageHref} >
-            <img alt={this.props.alt} className="media-object" src={this.props.imageSource} height={this.props.height} width={this.props.width} />
+          <a href={this.props.href} >
+            {this.props.children}
           </a>
         </div>
         );
     } else {
       return (
         <div className={mediaClasses}>
-          <img alt={this.props.alt} src={this.props.imageSource} height={this.props.height} width={this.props.width} />
+          {this.props.children}
         </div>
       );
     }
@@ -63,33 +62,27 @@ var Media = React.createClass({
       'media-bottom': this.props.bodyAlignment === 'bottom'
     });
 
-    if (this.props.leftImageSource) {
+    if (this.props.leftImage) {
       leftMedia = (
         <MediaObject
           horizontalAlignment='left'
-          verticalAlignment={this.props.leftImageAlignment}
-          imageHref={this.props.leftImageHref}
-          imageSource={this.props.leftImageSource}
-          leftMediaSpacing={this.props.leftMediaSpacing}
-          alt={this.props.leftAlt}
-          height={this.props.leftImageHeight}
-          width={this.props.leftImageWidth}>
+          verticalAlignment={this.props.leftImage.props.alignment}
+          href={this.props.leftImage.props.href}
+          leftMediaSpacing={this.props.leftImage.props.spacing}>
+            {this.props.leftImage}
 
         </MediaObject>
       );
     }
 
-    if (this.props.rightImageSource) {
+    if (this.props.rightImage) {
       rightMedia = (
         <MediaObject
           horizontalAlignment='right'
-          verticalAlignment={this.props.rightImageAlignment}
-          imageHref={this.props.rightImageHref}
-          imageSource={this.props.rightImageSource}
-          rightMediaSpacing={this.props.rightMediaSpacing}
-          alt={this.props.rightAlt}
-          height={this.props.rightImageHeight}
-          width={this.props.rightImageWidth}>
+          verticalAlignment={this.props.rightImage.props.alignment}
+          href={this.props.rightImage.props.href}
+          rightMediaSpacing={this.props.rightImage.props.spacing}>
+            {this.props.rightImage}
         </MediaObject>
       );
     }

diff --git a/test/spec/javascripts/media_spec.js b/test/spec/javascripts/media_spec.js
@@ -30,13 +30,11 @@ describe('Media', function() {
   describe("when left image src is set", function() {
     describe("when left image src is set and href is not", function() {
       beforeEach(function() {
+        var image = <img src="http://placehold.it/20x20" alt="my fancy image description" height='50px' width='40px'/>;
         React.render(
           Media({
             children: "fop",
-            leftImageSource: "http://placehold.it/20x20",
-            leftAlt: "my fancy image description",
-            leftImageHeight: '50px',
-            leftImageWidth: '40px'
+            leftImage: image
           }),
           this.node
         );
@@ -58,11 +56,11 @@ describe('Media', function() {
 
     describe("when left href is set", function() {
       beforeEach(function() {
+        var image = <img src="http://placehold.it/20x20" href="http://www.google.com"/>;
         React.render(
           Media({
             children: "fop",
-            leftImageSource: "http://placehold.it/20x20",
-            leftImageHref: "http://www.google.com",
+            leftImage: image
           }),
           this.node
         );
@@ -79,14 +77,12 @@ describe('Media', function() {
 
     describe("When default image padding is modified to large", function() {
       beforeEach(function() {
+        var image = <img src="http://placehold.it/20x20" href="http://www.google.com" spacing="large" />;
+
         React.render(
           Media({
             children: "fop",
-            leftImageSource: "http://placehold.it/20x20",
-            leftImageHref: "http://www.google.com",
-            leftMediaSpacing: "large",
-            rightImageSource: "http://placehold.it/20x20",
-            rightImageHref: "http://www.google.com"
+            leftImage: image
           }),
           this.node
         );
@@ -120,18 +116,19 @@ describe('Media', function() {
 
   describe("when right image src is set", function() {
     beforeEach(function() {
+      var image = <img src="http://placehold.it/20x20" href="http://www.google.com" />;
+
       React.render(
         Media({
           children: "fop",
-          rightImageSource: "http://placehold.it/20x20",
-          rightImageHref: "http://www.google.com"
+          rightImage: image
         }),
         this.node
       );
     });
 
     it("displays the media-right link with an image inside", function() {
-      expect($('#container .media .media-right .media-object').attr('src')).toEqual('http://placehold.it/20x20');
+      expect($('#container .media .media-right img').attr('src')).toEqual('http://placehold.it/20x20');
     });
 
     it("links to it's href (google, in this case)", function(){
@@ -141,12 +138,12 @@ describe('Media', function() {
 
   describe("when image alignment is set to middle", function() {
     beforeEach(function() {
+      var image = <img src="http://placehold.it/20x20" href="http://www.google.com" alignment="middle" />;
+
       React.render(
         Media({
           children: "fop",
-          leftImageSource: "http://placehold.it/20x20",
-          leftImageHref: "http://www.google.com",
-          leftImageAlignment: "middle"
+          leftImage: image
         }),
         this.node
       );
@@ -159,12 +156,11 @@ describe('Media', function() {
 
   describe("when image alignment is set to bottom", function() {
     beforeEach(function() {
+      var image = <img src="http://placehold.it/20x20" href="http://www.google.com" alignment="bottom" />;
       React.render(
         Media({
           children: "fop",
-          leftImageSource: "http://placehold.it/20x20",
-          leftImageHref: "http://www.google.com",
-          leftImageAlignment: "bottom"
+          leftImage: image
         }),
         this.node
       );
@@ -193,12 +189,11 @@ describe('Media', function() {
 
   describe("when media block is set to stack on small screens", function() {
     beforeEach(function() {
+      var image = <img src="http://placehold.it/20x20" href="http://www.google.com" />;
       React.render(
         Media({
           children: "fop",
-          leftImageSource: "http://placehold.it/20x20",
-          leftImageHref: "http://www.google.com",
-          leftImageAlignment: "middle",
+          leftImage: image,
           stackSize: "small"
         }),
         this.node
@@ -212,12 +207,11 @@ describe('Media', function() {
 
   describe("when media block is set to stack on medium screens", function() {
     beforeEach(function() {
+      var image = <img src="http://placehold.it/20x20" href="http://www.google.com" />;
       React.render(
         Media({
           children: "fop",
-          leftImageSource: "http://placehold.it/20x20",
-          leftImageHref: "http://www.google.com",
-          leftImageAlignment: "middle",
+          leftImage: image,
           stackSize: "medium"
         }),
         this.node