diff --git a/lib/card/index.js b/lib/card/index.js index 8a836816..0aced7cb 100644 --- a/lib/card/index.js +++ b/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 { {/* eslint-disable jsx-a11y/click-events-have-key-events */} {/* eslint-disable jsx-a11y/no-static-element-interactions */} - {expandedContent !== null &&
} + {expandedContent !== null && }
); } renderContent = () => { - const { children } = this.props; + const { children, theme } = this.props; const contentAreaProps = { 'aria-label': 'card-content', + className: theme.cardContent, }; return ( @@ -131,8 +137,8 @@ class Card extends React.Component {
{ this.renderHeader() } { this.renderContent() } - { this.renderFooter() }
this.expandedContentRef = ref} className={classnames( theme.expandedContent, 'expandedContent', expanded ? `${theme.expanded} expanded` : `${theme.collapsed} collapsed`, @@ -140,6 +146,7 @@ class Card extends React.Component { > {(expandedContent !== null) && }
+ { this.renderFooter() }
); } diff --git a/lib/card/tests/render.test.js b/lib/card/tests/render.test.js index 66f8cd60..f1ce2ad6 100644 --- a/lib/card/tests/render.test.js +++ b/lib/card/tests/render.test.js @@ -53,7 +53,7 @@ describe('Card Render tests', () => { wrappedComponent.setProps({ expandedContent:
This is expanded content
}); 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); }); }); diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 83997815..810d893c 100644 --- a/lib/card/theme.module.scss +++ b/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); - } -} \ No newline at end of file +:local(.close) { + transform: rotate(0deg); +}