Added additional examples in spec

.eslintrc

@@ -58,9 +58,7 @@
     "max-params": [0, 3],
     "max-statements": [0, 10],
     "new-parens": [2],
-    "new-cap": [2, {
+    "new-cap": [0],
-      "capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
-    }],
     "newline-after-var": [0],
     "no-alert": [2],
     "no-array-constructor": [2],

components/button/style.scss

@@ -184,19 +184,38 @@
 }
 
 .neutral:not([disabled]) {
-  &.raised, &.floating {
+  &:not(.inverse) {
-    color: $button-neutral-color-contrast;
+    &.raised, &.floating {
-    background-color: $button-neutral-color;
+      color: $button-neutral-color-contrast;
-  }
+      background-color: $button-neutral-color;
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:hover {
-      background: $button-neutral-color-hover;
     }
-    &:focus:not(:active) {
+    &.flat, &.toggle {
-      background: $button-neutral-color-hover;
+      color: $button-neutral-color-contrast;
+      &:hover {
+        background: $button-neutral-color-hover;
+      }
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
     }
   }
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
+    }
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:hover {
+        background: $button-neutral-color-hover;
+      }
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
+    }
+  }
+
 }
 
 .mini.floating {

components/card/Card.jsx

@@ -14,11 +14,7 @@ const Card = ({
   }, className);
 
   return (
-    <div
+    <div className={classes} {...otherProps}>
-      data-react-toolbox="card"
-      className={classes}
-      {...otherProps}
-    >
       {children}
     </div>
   );

components/card/CardTitle.jsx

@@ -35,12 +35,12 @@ const CardTitle = (props) => {
         </div>
       )}
       <div>
-        {(title || children) && (
+        {title && <h5 className={style.title}>{title}</h5>}
-          <h5 className={style.title}>
+        {children && typeof children === 'string' && (
-            {title ? title : children}
+          <h5 className={style.title}>{children}</h5>
-          </h5>
         )}
         {subtitle && <p className={style.subtitle}>{subtitle}</p>}
+        {children && typeof children !== 'string' && children}
       </div>
     </div>
   );
@@ -51,8 +51,11 @@ CardTitle.propTypes = {
     PropTypes.string,
     PropTypes.element
   ]),
-  // children: PropTypes.string,
+  children: PropTypes.oneOfType([
-  // className: PropTypes.string,
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  className: PropTypes.string,
   subtitle: PropTypes.string,
   title: PropTypes.string
 };

components/card/_config.scss

@@ -1,5 +1,5 @@
-$card-color-white: unquote("rgb(#{$color-white})") !default;
+$card-color-white: $color-white !default;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.3)");
+$card-text-overlay: rgba($color-black, 0.35) !default;
 
 $card-background-color: $card-color-white;
 

components/card/style.scss

@@ -7,6 +7,7 @@
   flex-direction: column;
   border-radius: 2px;
   overflow: hidden;
+  width: 100%;
 
   // Fonts
   font-size: $card-font-size;
@@ -30,13 +31,19 @@
   background-position: center center;
   height: 0;
 
-  &.wide {
+  &.wide, &.square {
     width: 100%;
+
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+
+  &.wide {
     padding-top: 56.25%;
   }
 
   &.square {
-    width: 100%;
     padding-top: 100%;
   }
 
@@ -52,6 +59,7 @@
     justify-content: flex-end;
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 
   .contentOverlay {
@@ -120,7 +128,7 @@
   justify-content: flex-start;
   padding: $card-padding-sm $card-padding-sm;
 
-  button[data-react-toolbox="button"] {
+  button {
     min-width: 0;
     margin: 0 $card-padding-sm/2;
     padding: 0 $card-padding-sm;
@@ -134,9 +142,4 @@
     }
   }
 
-  .cardMedia & {
-    button[data-react-toolbox="button"] {
-
-    }
-  }
 }

spec/components/card.jsx

@@ -11,21 +11,65 @@ import style from '../style';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
-const demos = [
+const Spacer = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flex: '1 1 auto'
+    }}/>
+  );
+};
+
+const DemoList = (props) => <ul className={style.demoList}>{props.children}</ul>;
+
+const DemoListItem = (props) => (
+  <li className={style.demoListItem}>
+    <div className={style.demo}>
+      {props.component}
+    </div>
+    <div className={style.demoName}>
+      {props.name}
+    </div>
+  </li>
+);
+
+const basic = [
   {
     name: 'Basic Card',
     component: (
       <Card className={style.card}>
-        <CardTitle>Basic Card</CardTitle>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
         <CardText>{dummyText}</CardText>
         <CardActions>
-          <Button label="Action" />
+          <Button label="Action 1" />
-          <Button label="More" />
+          <Button label="Action 2" />
         </CardActions>
       </Card>
     )
   }, {
-    name: 'Card Media Area',
+    name: 'Raised Card',
+    component: (
+      <Card raised className={style.card}>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }
+];
+
+const media = [
+  {
+    name: '16:9 Card Media Area',
     component: (
       <Card className={style.card}>
         <CardMedia
@@ -39,21 +83,45 @@ const demos = [
       </Card>
     )
   }, {
-    name: '16:9 Card Media',
+    name: '16:9 Card Media Image',
     component: (
       <Card className={style.card}>
         <CardMedia
           aspectRatio="wide"
           image="https://placeimg.com/800/450/nature"
         />
-        <CardTitle
+          <CardTitle
-          title="Basic Card"
+            title="Title goes here"
-          subtitle="An awesome basic card"
+            subtitle="Subtitle here"
-        />
+          />
         <CardText>{dummyText}</CardText>
       </Card>
     )
   }, {
+    name: 'Square Media Card',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/700/700/nature"
+        >
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardActions>
+            <Button inverse label="Action 1" />
+            <Button inverse label="Action 2" />
+          </CardActions>
+        </CardMedia>
+      </Card>
+    )
+  }
+];
+
+const avatar = [
+  {
     name: 'Avatar Card Title',
     component: (
       <Card className={style.card}>
@@ -67,29 +135,72 @@ const demos = [
           image="https://placeimg.com/800/450/nature"
         />
         <CardActions style={{ justifyContent: 'flex-end' }}>
-          <Button icon="feedback" />
+          <Button toggle icon="share" />
-          <Button icon="favorite" />
+          <Button toggle icon="favorite" />
         </CardActions>
       </Card>
     )
   }, {
-    name: 'Square Media Card',
+    name: 'Video in a card',
     component: (
       <Card className={style.card}>
+        <CardTitle
+          avatar="https://placeimg.com/80/80/animals"
+          title="Avatar Card"
+          subtitle="An awesome basic card"
+        />
         <CardMedia
-          contentOverlay
+          aspectRatio="wide"
-          aspectRatio="square"
-          image="https://placeimg.com/800/450/nature"
         >
+          <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen></iframe>
+        </CardMedia>
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <Button toggle icon="report-problem" />
+          <Spacer/>
+          <Button toggle icon="share" />
+          <Button toggle icon="favorite" />
+        </CardActions>
+      </Card>
+    )
+  }
+];
+
+const small = [
+  {
+    name: 'Small Media Card',
+    component: (
+      <Card>
+        <CardMedia
+          aspectRatio="square"
+          image="https://placeimg.com/400/400/nature"
+        >
+          <CardTitle>Test</CardTitle>
+        </CardMedia>
+        <CardActions style={{justifyContent: 'center'}}>
+          <Button toggle icon="thumb-down" />
+          <Button toggle icon="thumb-up" />
+          <Button toggle icon="turned-in-not" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Alternative Layout Example',
+    component: (
+      <Card className={style.card}>
+        <div className={style.cardRow}>
           <CardTitle
             title="Title goes here"
             subtitle="Subtitle here"
           />
-          <CardActions>
+          <CardMedia
-            <Button label="Action 1" />
+            className={style.media}
-            <Button label="Action 2" />
+            image="https://placeimg.com/400/400/nature"
-          </CardActions>
+          />
-        </CardMedia>
+        </div>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
       </Card>
     )
   }
@@ -101,18 +212,30 @@ class CardTest extends React.Component {
     return (
       <div>
         <h2>Cards</h2>
-        <ul className={style.demoList}>
+
-          {demos.map((demo, i) => (
+        <DemoList>
-            <li key={i} className={style.demoListItem}>
+          {basic.map((demo, i) => (
-              <div className={style.demo}>
+            <DemoListItem key={i} {...demo}/>
-                {demo.component}
-              </div>
-              <div className={style.demoName}>
-                {demo.name}
-              </div>
-            </li>
           ))}
-        </ul>
+        </DemoList>
+
+        <DemoList>
+          {media.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
+        <DemoList>
+          {avatar.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
+        <DemoList>
+          {small.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
       </div>
     );
   }

spec/style.scss

@@ -1,4 +1,4 @@
-@import "../components/base";
+@import "../components/commons";
 @import "../components/app_bar/config";
 @import "../components/button/config";
 
@@ -54,7 +54,7 @@ $offset: 1.8 * $unit;
 }
 
 .primary {
-  background-color: unquote("rgb(#{$color-primary})");
+  background-color: $color-primary;
 }
 
 .demoList {
@@ -92,3 +92,15 @@ $offset: 1.8 * $unit;
 .card {
   width: 345px;
 }
+
+.cardRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .media {
+    width: 80px;
+    height: 80px;
+    margin: 16px 16px 0 0;
+  }
+}