fix(card): update card design (#290)

* fix(card): update card component design

#287

* fix(card): minor changes and fixes

Author: rishichawda

lib/card/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { FaAngleDoubleDown } from 'react-icons/fa';
 import defaultTheme from './theme.module.scss';
 import '../globals/fonts.scss';
 
@@ -11,12 +12,19 @@ class Card extends React.Component {
     this.state = {
       expanded: false,
     };
+    this.expandedContentRef = null;
   }
 
   toggleCard = () => {
     this.setState(prevState => ({
       expanded: !prevState.expanded,
     }));
+    if (this.expandedContentRef.clientHeight) {
+      this.expandedContentRef.style.height = 0;
+    } else {
+      const wrapper = this.expandedContentRef.firstChild;
+      this.expandedContentRef.style.height = `${wrapper.clientHeight}px`;
+    }
   };
 
   renderFooter = () => {
@@ -35,10 +43,7 @@ class Card extends React.Component {
 
     const iconProps = {
       onClick: this.toggleCard,
-      className: classnames(
-        theme['more-icon'],
-        { [theme['less-icon']]: expanded },
-      ),
+      className: classnames(theme['expand-icon'], expanded ? theme.open : theme.close),
       'aria-label': 'more-icon',
     };
 
@@ -52,16 +57,17 @@ class Card extends React.Component {
         </div>
         {/* eslint-disable jsx-a11y/click-events-have-key-events */}
         {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-        {expandedContent !== null && <div {...iconProps} />}
+        {expandedContent !== null && <FaAngleDoubleDown {...iconProps} />}
       </div>
     );
   }
 
   renderContent = () => {
-    const { children } = this.props;
+    const { children, theme } = this.props;
 
     const contentAreaProps = {
       'aria-label': 'card-content',
+      className: theme.cardContent,
     };
 
     return (
@@ -131,15 +137,16 @@ class Card extends React.Component {
       <div {...rootProps}>
         { this.renderHeader() }
         { this.renderContent() }
-        { this.renderFooter() }
         <div
+          ref={ref => this.expandedContentRef = ref}
           className={classnames(
             theme.expandedContent, 'expandedContent',
             expanded ? `${theme.expanded} expanded` : `${theme.collapsed} collapsed`,
           )}
         >
           {(expandedContent !== null) && <HiddenContent />}
         </div>
+        { this.renderFooter() }
       </div>
     );
   }

lib/card/tests/render.test.js

@@ -53,7 +53,7 @@ describe('Card Render tests', () => {
     wrappedComponent.setProps({ expandedContent: <div>This is expanded content</div> });
 
     expect(simulatedValue()).to.equal(0);
-    wrappedComponent.find('div[aria-label="more-icon"]').simulate('click');
+    wrappedComponent.find('svg[aria-label="more-icon"]').simulate('click');
     expect(simulatedValue()).to.equal(1);
   });
 });

lib/card/theme.module.scss

@@ -1,105 +1,117 @@
 @import '../globals/theme';
-
 :local(.card) {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  background: $original-white;
-  border-radius: 3px;
-  padding: 15px 20px;
-  margin: 5px;
-  font-family: Roboto, sans-serif;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: $original-white;
+    border-radius: 3px;
+    padding: 1.6%;
+    margin: 5px;
+    font-family: Roboto, sans-serif;
 }
+
 .expandedContent {
-  max-height: 0;
-  overflow: hidden;
-  &.expanded {
-    max-height: 2000px;
-    transition: max-height 1s ease;
-  }
-  &.collapsed {
-    max-height: 0;
-    transition: max-height 0.5s ease;
-  }
+    -moz-transition: height .5s;
+    -ms-transition: height .5s;
+    -o-transition: height .5s;
+    -webkit-transition: height .5s;
+    transition: height .5s;
+    height: 0;
+    overflow: hidden;
+    @media only screen and (max-width: 768px) {
+        padding: 0 3%;
+    }
+    @media only screen and (max-width:500px) {
+        padding: 0 5%;
+        line-height: 1.4em;
+    }
 }
+
 :local(.noPadding) {
-  padding: 0;
+    padding: 0;
 }
 
 :local(.wrapContent) {
-  display: inline-block;
+    display: inline-block;
 }
 
 :local(.elevation-low) {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 1px 3px 1.5px #d4d4d5, 0 0 0 1px #d4d4d5;
+    box-shadow: 0 1px 3px 1.5px #d4d4d5, 0 0 0 1px #d4d4d5;
 }
 
 :local(.elevation-medium) {
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-              0 1px 10px 0 rgba(0, 0, 0, 0.12),
-              0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 1px 3px 3px #d4d4d5, 0 0 0 1px #d4d4d5;
+    box-shadow: 0 1px 3px 3px #d4d4d5, 0 0 0 1px #d4d4d5;
 }
 
 :local(.elevation-high) {
-  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-              0 6px 30px 5px rgba(0, 0, 0, 0.12),
-              0 8px 10px -5px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 1px 3px 4px #d4d4d5, 0 0 0 2px #d4d4d5;
+    box-shadow: 0 1px 3px 4px #d4d4d5, 0 0 0 2px #d4d4d5;
 }
 
 :local(.cardHeader) {
-  font-weight: bold;
-  font-size: 18px;
-  padding: 5px 0;
-  margin-bottom: 15px;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 5px 0;
+    margin-bottom: 15px;
+    @media only screen and (max-width: 768px) {
+        padding: 1% 3%;
+    }
+    @media only screen and (max-width:500px) {
+        padding: 2% 5%;
+        line-height: 1.4em;
+    }
+}
+
+:local(.cardContent) {
+    margin-bottom: 0.5em;
+    @media only screen and (max-width: 768px) {
+        padding: 1% 3%;
+    }
+    @media only screen and (max-width:500px) {
+        padding: 2% 5%;
+        line-height: 1.4em;
+    }
 }
 
 :local(.cardFooter) {
-  width: 100%;
-  margin-top: 2%;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1%;
-  font-size: 0.8rem;
+    width: 100%;
+    margin-top: 0.2em;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0.5%;
+    font-size: 0.8rem;
+    flex-direction: column;
+    @media only screen and (max-width: 768px) {
+        padding: 1% 3%;
+    }
+    @media only screen and (max-width:500px) {
+        padding: 2% 5%;
+        line-height: 1.4em;
+    }
 }
 
 :local(.card-actions) {
-  float: left;
+    float: left;
+    align-self: center;
+    height: 100%;
+    width: 50%;
+}
+
+:local(.expand-icon) {
   align-self: center;
-  height: 100%;
-  width: 50%;
+  transition: transform 0.5s linear;
+  padding: 1%;
+  font-size: 1.36em;
+  cursor: pointer;
 }
 
-:local(.more-icon) {
-  height: 20px;
-  width: 20px;
-  position: relative;
-  border-radius: 50%;
-  box-sizing: border-box;
-  padding: 1em;
-  &:hover {
-    cursor: pointer;
-  }
-  &::after {
-    position: absolute;
-    content: '';
-    display: block;
-    border-left: 2px solid #454a4f;
-    border-bottom: 2px solid #454a4f;
-    height: 8px;
-    width: 8px;
-    top: 0.4em;
-    left: 30%;
-    transform: rotate(-45deg);
-    transition: 0.5s ease-in-out;
-  }
+:local(.open) {
+    transform: rotate(180deg);
 }
 
-:local(.less-icon) {
-  &::after {
-    top: 0.7em;
-    transform: rotate(135deg);
-  }
-}
+:local(.close) {
+    transform: rotate(0deg);
+}