Adapt cards codestyle to the current constraints

components/card/Card.jsx

@@ -1,34 +1,23 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * The base card component. This acts as the main card container
- * that all subcomponents are placed within.
- */
-const Card = ({
-    children,
-    className,
-    raised,
-    ...otherProps
-  }) => {
-
+const Card = ({children, className, raised, ...other}) => {
   const classes = ClassNames(style.card, {
     [style.raised]: raised
   }, className);
 
   return (
-    <div className={classes} {...otherProps}>
+    <div className={classes} {...other}>
       {children}
     </div>
   );
 };
 
 Card.propTypes = {
-  /** Child components, usually Card subcomponents. */
   children: PropTypes.any,
   className: PropTypes.string,
-  /** Increases the shadow depth to appear elevated. */
   raised: PropTypes.bool
 };
 

components/card/CardActions.jsx

@@ -1,31 +1,20 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * This component is used as a container for supplemental
- * card actions. Supplemental actions within the card are
- * explicitly called out using icons, text, and UI controls,
- * typically placed at the bottom of the card.
- */
 class CardActions extends Component {
-
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
   }
 
   render () {
-    const {
-      children,
-      className,
-      ...otherProps
-    } = this.props;
-
+    const { children, className, ...other } = this.props;
     const classes = ClassNames(style.cardActions, className);
 
     return (
-      <div className={classes} {...otherProps}>
+      <div className={classes} {...other}>
         {children}
       </div>
     );

components/card/CardMedia.jsx

@@ -1,33 +1,15 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * Used for displaying media such as images or videos
- * on a card. Can also be used with a solid background
- * color instead of an image.
- */
 class CardMedia extends Component {
-
   static propTypes = {
-    /**
-     * Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
-     */
     aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
-    /**
-     * Usually an image/video element or a `<CardTitle>` component.
-     */
     children: PropTypes.any,
     className: PropTypes.string,
-    /** Sets the background color */
     color: PropTypes.string,
-    /**
-     * Creates a dark overlay underneath the child components.
-     */
     contentOverlay: PropTypes.bool,
-    /**
-     * Can be used instead of children. Accepts an element or a URL string.
-     */
     image: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.element
@@ -35,16 +17,7 @@ class CardMedia extends Component {
   }
 
   render () {
-    const {
-      aspectRatio,
-      children,
-      className,
-      color,
-      contentOverlay,
-      image,
-      ...otherProps
-    } = this.props;
-
+    const { aspectRatio, children, className, color, contentOverlay, image, ...other } = this.props;
     const classes = ClassNames(style.cardMedia, {
       [style[aspectRatio]]: aspectRatio
     }, className);
@@ -59,7 +32,7 @@ class CardMedia extends Component {
     };
 
     return (
-      <div style={bgStyle} className={classes} {...otherProps}>
+      <div style={bgStyle} className={classes} {...other}>
         <div className={innerClasses}>
           {children}
         </div>

components/card/CardText.jsx

@@ -1,29 +1,20 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * Basic card content container. Good for
- * small descriptions or other supplementary text.
- */
 class CardText extends Component {
-
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
   }
 
   render () {
-    const {
-      children,
-      className,
-      ...otherProps
-    } = this.props;
-
+    const { children, className, ...other } = this.props;
     const classes = ClassNames(style.cardText, className);
 
     return (
-      <div className={classes} {...otherProps}>
+      <div className={classes} {...other}>
         {typeof children === 'string' ? <p>{children}</p> : children}
       </div>
     );

components/card/CardTitle.jsx

@@ -1,23 +1,10 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
 import style from './style';
 
-/**
- * A versatile title block that can be used in
- * various places on the card, including the media
- * area. This component can also display an avatar next
- * to the title content.
- */
-const CardTitle = ({
-  avatar,
-  children,
-  className,
-  subtitle,
-  title,
-  ...otherProps
-}) => {
-
+const CardTitle = ({avatar, children, className, subtitle, title, ...other}) => {
   const classes = ClassNames(style.cardTitle, {
     [style.small]: avatar,
     [style.large]: !avatar
@@ -32,7 +19,7 @@ const CardTitle = ({
   }
 
   return (
-    <div className={classes} {...otherProps}>
+    <div className={classes} {...other}>
       {avatarComponent && (
         <div className={style.avatar}>
           {avatarComponent}

components/card/index.js

@@ -1,5 +1,5 @@
-export Card from './Card.jsx';
-export CardActions from './CardActions.jsx';
-export CardMedia from './CardMedia.jsx';
-export CardText from './CardText.jsx';
-export CardTitle from './CardTitle.jsx';
+export Card from './Card';
+export CardActions from './CardActions';
+export CardMedia from './CardMedia';
+export CardText from './CardText';
+export CardTitle from './CardTitle';

components/card/style.scss

@@ -2,23 +2,14 @@
 @import "./config";
 
 .card {
-  // Box Model
   display: flex;
-  flex-direction: column;
-  border-radius: 2px;
-  overflow: hidden;
   width: 100%;
-
-  // Fonts
+  flex-direction: column;
+  overflow: hidden;
   font-size: $card-font-size;
-
-  // Colors
   background: $card-background-color;
-
-  // Elevation
+  border-radius: 2px;
   @include shadow-2dp();
-
-  // Raised Elevation as per spec
   &.raised {
     @include shadow-8dp();
   }
@@ -26,42 +17,35 @@
 
 .cardMedia {
   position: relative;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
   height: 0;
-
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
   &.wide, &.square {
     width: 100%;
-
     .content > iframe, .content > video, .content > img {
       max-width: 100%;
     }
   }
-
   &.wide {
     padding-top: 56.25%;
   }
-
   &.square {
     padding-top: 100%;
   }
-
   .content {
     // Positioning
     position: absolute;
     top: 0;
     left: 0;
-
     // Box Model
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
     width: 100%;
     height: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
     overflow: hidden;
   }
-
   .contentOverlay {
     .cardTitle, .cardActions, .cardText {
       background-color: $card-text-overlay;
@@ -72,27 +56,21 @@
 .cardTitle {
   display: flex;
   align-items: center;
-
   .avatar {
     margin-right: 13px;
   }
-
   .subtitle {
     color: $color-text-secondary;
   }
-
   &.large {
     padding: $card-padding-lg $card-padding ($card-padding - 2px);
-
     .title {
       @include typo-headline();
       line-height: 1.25;
     }
   }
-
   &.small {
     padding: $card-padding;
-
     .title {
       @include typo-body-2(false, true);
       line-height: 1.4;
@@ -102,7 +80,6 @@
       line-height: 1.4;
     }
   }
-
   .cardMedia & {
     .title, .subtitle {
       color: $card-color-white;
@@ -112,11 +89,9 @@
 
 .cardTitle, .cardText {
   padding: ($card-padding - 2px) $card-padding;
-
   &:last-child {
     padding-bottom: $card-padding-lg;
   }
-
   & + .cardText {
     padding-top: 0;
   }
@@ -126,20 +101,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: $card-padding-sm $card-padding-sm;
-
+  padding: $card-padding-sm;
   button {
     min-width: 0;
-    margin: 0 $card-padding-sm/2;
     padding: 0 $card-padding-sm;
-
+    margin: 0 $card-padding-sm / 2;
     &:first-child {
       margin-left: 0;
     }
-
     &:last-child {
       margin-right: 0;
     }
   }
-
 }