Added additional examples in spec

react-toolbox · Nov 22, 2015 · 38e9dd3 · 38e9dd3
1 parent 6d9f9aa
commit 38e9dd3
Show file tree

Hide file tree

Showing 8 changed files with 220 additions and 66 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -58,9 +58,7 @@
     "max-params": [0, 3],
     "max-statements": [0, 10],
     "new-parens": [2],
-    "new-cap": [2, {
-      "capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
-    }],
+    "new-cap": [0],
     "newline-after-var": [0],
     "no-alert": [2],
     "no-array-constructor": [2],

diff --git a/components/button/style.scss b/components/button/style.scss
@@ -184,19 +184,38 @@
 }
 
 .neutral:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-neutral-color-contrast;
-    background-color: $button-neutral-color;
+  &:not(.inverse) {
+    &.raised, &.floating {
+      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) {
+        background: $button-neutral-color-hover;
+      }
+    }
   }
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:hover {
-      background: $button-neutral-color-hover;
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
     }
-    &:focus:not(:active) {
-      background: $button-neutral-color-hover;
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:hover {
+        background: $button-neutral-color-hover;
+      }
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
     }
   }
+
 }
 
 .mini.floating {

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

diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
@@ -35,12 +35,12 @@ const CardTitle = (props) => {
         </div>
       )}
       <div>
-        {(title || children) && (
-          <h5 className={style.title}>
-            {title ? title : children}
-          </h5>
+        {title && <h5 className={style.title}>{title}</h5>}
+        {children && typeof children === 'string' && (
+          <h5 className={style.title}>{children}</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,
-  // className: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  className: PropTypes.string,
   subtitle: PropTypes.string,
   title: PropTypes.string
 };

diff --git a/components/card/_config.scss b/components/card/_config.scss
@@ -1,5 +1,5 @@
-$card-color-white: unquote("rgb(#{$color-white})") !default;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.3)");
+$card-color-white: $color-white !default;
+$card-text-overlay: rgba($color-black, 0.35) !default;
 
 $card-background-color: $card-color-white;
 

diff --git a/components/card/style.scss b/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"] {
-
-    }
-  }
 }