feat(Card): Adding missing MediaItem functionality

rmwc · Dec 7, 2017 · 76c1a16 · 76c1a16
1 parent 957ba8d
commit 76c1a16
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 60 deletions.
diff --git a/docs/content.js b/docs/content.js
@@ -48,6 +48,7 @@ export default [
     class: [
       'Card',
       'CardMedia',
+      'CardMediaItem',
       'CardPrimary',
       'CardTitle',
       'CardSubtitle',

diff --git a/docs/docgen.json b/docs/docgen.json
@@ -96,21 +96,67 @@
     {
       "description": "Action Button for the Card",
       "displayName": "CardActions",
-      "methods": []
+      "methods": [],
+      "props": {
+        "vertical": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": true,
+          "description": "Allows for vertical alignment of actions."
+        }
+      }
     },
     {
       "description": "Media for the Card",
       "displayName": "CardMedia",
       "methods": []
     },
+    {
+      "description": "Inidividual Media Item for the Card",
+      "displayName": "CardMediaItem",
+      "methods": [],
+      "props": {
+        "oneDotFiveX": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": true,
+          "description": "Sets the media item height to 120px."
+        },
+        "twoX": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": true,
+          "description": "Sets the media item height to 160px."
+        },
+        "threeX": {
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": true,
+          "description": "Sets the media item height to 240px."
+        }
+      }
+    },
     {
       "description": "Horizontal content for the Card",
       "displayName": "CardHorizontalBlock",
       "methods": []
     },
     {
       "description": "A Card action Button",
-      "methods": []
+      "displayName": "CardAction",
+      "methods": [],
+      "props": {
+        "compact": {
+          "defaultValue": {
+            "value": "true",
+            "computed": false
+          }
+        }
+      }
     },
     {
       "description": "A Card Component",
@@ -298,32 +344,21 @@
     {
       "description": "",
       "displayName": "DialogFooterButton",
-      "methods": [
-        {
-          "name": "classNames",
-          "docblock": null,
-          "modifiers": [],
-          "params": [
-            {
-              "name": "props",
-              "type": null
-            }
-          ],
-          "returns": null
-        }
-      ],
+      "methods": [],
       "props": {
         "accept": {
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": false,
+          "description": ""
         },
         "cancel": {
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
+          "flowType": {
+            "name": "boolean"
+          },
+          "required": false,
+          "description": ""
         }
       }
     },

diff --git a/src/Card/card.story.js b/src/Card/card.story.js
@@ -1,40 +1,57 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 // import { linkTo } from '@storybook/addon-links';
 // import { Welcome } from '@storybook/react/demo';
 import { boolean } from '@storybook/addon-knobs';
 import {
-	Card,
-	CardMedia,
-	CardPrimary,
-	CardTitle,
-	CardSubtitle,
-	CardSupportingText,
-	CardActions,
-	CardAction
+  Card,
+  CardHorizontalBlock,
+  CardMedia,
+  CardMediaItem,
+  CardPrimary,
+  CardTitle,
+  CardSubtitle,
+  CardSupportingText,
+  CardActions,
+  CardAction
 } from './';
 
 // storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Cards', module).add('Card', () => (
-	<Card style={{ width: '320px' }} themeDark={boolean('themeDark', false)}>
-		<CardMedia
-			style={{
-				backgroundImage:
-					'url(https://material-components-web.appspot.com/images/16-9.jpg)',
-				height: '12.313rem'
-			}}
-		/>
-		<CardPrimary>
-			<CardTitle large>Card Title</CardTitle>
-			<CardSubtitle>Subtitle here</CardSubtitle>
-		</CardPrimary>
-		<CardSupportingText />
-		<CardActions>
-			<CardAction>Action 1</CardAction>
-			<CardAction>Action 2</CardAction>
-		</CardActions>
-	</Card>
+  <div>
+    <Card style={{ width: '320px' }} themeDark={boolean('themeDark', false)}>
+      <CardMedia
+        style={{
+          backgroundImage:
+            'url(https://material-components-web.appspot.com/images/16-9.jpg)',
+          height: '12.313rem'
+        }}
+      />
+      <CardPrimary>
+        <CardTitle large>Card Title</CardTitle>
+        <CardSubtitle>Subtitle here</CardSubtitle>
+      </CardPrimary>
+      <CardSupportingText />
+      <CardActions>
+        <CardAction>Action 1</CardAction>
+        <CardAction>Action 2</CardAction>
+      </CardActions>
+    </Card>
+
+    <Card style={{ width: '320px' }}>
+      <CardHorizontalBlock>
+        <CardPrimary>
+          <CardTitle large>Title Here</CardTitle>
+          <CardSubtitle>Subtitle Here</CardSubtitle>
+        </CardPrimary>
+        <CardMediaItem src="https://material-components-web.appspot.com/images/1-1.jpg" />
+      </CardHorizontalBlock>
+      <CardActions>
+        <CardAction>Action 1</CardAction>
+        <CardAction>Action 2</CardAction>
+      </CardActions>
+    </Card>
+  </div>
 ));
diff --git a/src/Card/index.js b/src/Card/index.js
@@ -59,12 +59,27 @@ export const CardSupportingText: React.ComponentType<
   classNames: 'mdc-card__supporting-text'
 });
 
+type CardActionsT = {
+  /** Allows for vertical alignment of actions. */
+  vertical: boolean
+};
+
 /** Action Button for the Card */
-export const CardActions = simpleTag({
+export class CardActions extends simpleTag({
   displayName: 'CardActions',
   tag: 'section',
-  classNames: 'mdc-card__actions'
-});
+  classNames: props => [
+    'mdc-card__actions',
+    { 'mdc-card__actions--vertical': props.vertical }
+  ],
+  defaultProps: {
+    vertical: undefined
+  }
+})<CardActionsT> {
+  render() {
+    return super.render();
+  }
+}
 
 /** Media for the Card */
 export const CardMedia = simpleTag({
@@ -73,20 +88,50 @@ export const CardMedia = simpleTag({
   classNames: 'mdc-card__media'
 });
 
+type CardMediaItemT = {
+  /** Sets the media item height to 120px. */
+  oneDotFiveX: boolean,
+  /** Sets the media item height to 160px. */
+  twoX: boolean,
+  /** Sets the media item height to 240px. */
+  threeX: boolean
+};
+
+/** Inidividual Media Item for the Card */
+export class CardMediaItem extends simpleTag({
+  displayName: 'CardMediaItem',
+  tag: 'img',
+  classNames: props => [
+    'mdc-card__media-item',
+    {
+      'mdc-card__media-item--1dot5x	': props.oneDotFiveX,
+      'mdc-card__media-item--2x': props.twoX,
+      'mdc-card__media-item--3x': props.threeX
+    }
+  ]
+})<CardMediaItemT> {
+  render() {
+    return super.render();
+  }
+}
+
 /** Horizontal content for the Card */
 export const CardHorizontalBlock: React.ComponentType<
   SimpleTagPropsT
 > = simpleTag({
   displayName: 'CardHorizontalBlock',
-  classNames: 'mdc-card__media'
+  classNames: 'mdc-card__horizontal-block'
 });
 
 /** A Card action Button */
-export const CardAction: React.ComponentType<Button> = props => {
-  const { className, ...rest } = props;
-  const classes = classNames('mdc-card__action', className);
-  return <Button compact className={classes} {...rest} />;
-};
+export const CardAction = simpleTag({
+  displayName: 'CardAction',
+  tag: Button,
+  classNames: 'mdc-card__action',
+  defaultProps: {
+    compact: true
+  }
+});
 
 type CardPropsT = {
   /** Use the cards dark theme. */