From 8c86a9e1da2912ead21a13307673da3c039ef4f8 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Fri, 28 Dec 2018 18:00:51 +0530 Subject: [PATCH 1/7] fix(card): update card component design #287 --- lib/card/index.js | 12 ++-- lib/card/theme.module.scss | 124 +++++++++++++++---------------------- 2 files changed, 56 insertions(+), 80 deletions(-) diff --git a/lib/card/index.js b/lib/card/index.js index 8a836816..4422e152 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, FaAngleDoubleUp } from 'react-icons/fa'; import defaultTheme from './theme.module.scss'; import '../globals/fonts.scss'; @@ -33,13 +34,10 @@ class Card extends React.Component { ); } + const Icon = expanded ? FaAngleDoubleUp : FaAngleDoubleDown; const iconProps = { onClick: this.toggleCard, - className: classnames( - theme['more-icon'], - { [theme['less-icon']]: expanded }, - ), - 'aria-label': 'more-icon', + className: classnames(theme['expand-icon']), }; return ( @@ -52,7 +50,7 @@ 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 && }
); } @@ -131,7 +129,6 @@ class Card extends React.Component {
{ this.renderHeader() } { this.renderContent() } - { this.renderFooter() }
{(expandedContent !== null) && }
+ { this.renderFooter() }
); } diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 83997815..92b422bc 100644 --- a/lib/card/theme.module.scss +++ b/lib/card/theme.module.scss @@ -1,105 +1,83 @@ @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; - } + overflow: hidden; + padding-top: 1%; + &.expanded { + max-height: 2000px; + transition: max-height 1s ease; + } + &.collapsed { + max-height: 0; + transition: max-height 0.5s ease; + } } + :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; } :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: 2%; + display: flex; + justify-content: space-between; + box-sizing: border-box; + padding: 0.5%; + font-size: 0.8rem; + flex-direction: column; } :local(.card-actions) { - float: left; - align-self: center; - height: 100%; - width: 50%; + float: left; + align-self: center; + height: 100%; + width: 50%; } -: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(.less-icon) { - &::after { - top: 0.7em; - transform: rotate(135deg); +:local(.expand-icon) { + align-self: center; + &:active { + background-color: #dddddd54; } + width: 100%; + padding: 1%; + font-size: 1.36em; } \ No newline at end of file From d1b99da8fa8f7ce6b199f24b4596cdb8d2904644 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Fri, 28 Dec 2018 18:10:30 +0530 Subject: [PATCH 2/7] test(card): fix broken test --- lib/card/index.js | 1 + lib/card/tests/render.test.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/card/index.js b/lib/card/index.js index 4422e152..d8034bc3 100644 --- a/lib/card/index.js +++ b/lib/card/index.js @@ -38,6 +38,7 @@ class Card extends React.Component { const iconProps = { onClick: this.toggleCard, className: classnames(theme['expand-icon']), + 'aria-label': 'more-icon', }; return ( 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); }); }); From 35a85ee0c52719b283e3802272912c7c3751fc2e Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 13:51:55 +0530 Subject: [PATCH 3/7] fix(card): minor changes and fixes --- lib/card/index.js | 7 +++---- lib/card/theme.module.scss | 17 ++++++++++++----- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/lib/card/index.js b/lib/card/index.js index d8034bc3..bba71cd1 100644 --- a/lib/card/index.js +++ b/lib/card/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { themr } from 'react-css-themr'; import classnames from 'classnames'; -import { FaAngleDoubleDown, FaAngleDoubleUp } from 'react-icons/fa'; +import { FaAngleDoubleDown } from 'react-icons/fa'; import defaultTheme from './theme.module.scss'; import '../globals/fonts.scss'; @@ -34,10 +34,9 @@ class Card extends React.Component { ); } - const Icon = expanded ? FaAngleDoubleUp : FaAngleDoubleDown; const iconProps = { onClick: this.toggleCard, - className: classnames(theme['expand-icon']), + className: classnames(theme['expand-icon'], expanded ? theme.close : theme.open), 'aria-label': 'more-icon', }; @@ -51,7 +50,7 @@ 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 && } ); } diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 92b422bc..4e49a065 100644 --- a/lib/card/theme.module.scss +++ b/lib/card/theme.module.scss @@ -14,13 +14,14 @@ max-height: 0; overflow: hidden; padding-top: 1%; + will-change: max-height; &.expanded { max-height: 2000px; - transition: max-height 1s ease; + transition: max-height 0.5s ease-in-out; } &.collapsed { max-height: 0; - transition: max-height 0.5s ease; + transition: max-height 0.5s ease-in-out; } } @@ -74,10 +75,16 @@ :local(.expand-icon) { align-self: center; - &:active { - background-color: #dddddd54; - } + transition: transform 0.5s linear; width: 100%; padding: 1%; font-size: 1.36em; +} + +:local(.open) { + transform: rotate(180deg); +} + +:local(.close) { + transform: rotate(0deg); } \ No newline at end of file From 989aabc6f048ebd2a092dc78a3043e313d4bb114 Mon Sep 17 00:00:00 2001 From: Sai Krishna Prasad Kandula Date: Wed, 2 Jan 2019 12:15:30 +0530 Subject: [PATCH 4/7] fix icon orientation Co-Authored-By: rishichawda --- lib/card/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/card/index.js b/lib/card/index.js index bba71cd1..277745a9 100644 --- a/lib/card/index.js +++ b/lib/card/index.js @@ -36,7 +36,7 @@ class Card extends React.Component { const iconProps = { onClick: this.toggleCard, - className: classnames(theme['expand-icon'], expanded ? theme.close : theme.open), + className: classnames(theme['expand-icon'], expanded ? theme.open : theme.close), 'aria-label': 'more-icon', }; From 0731d8b1fc2a76a897e70cbfe5321d342d6c1549 Mon Sep 17 00:00:00 2001 From: Sai Krishna Prasad Kandula Date: Wed, 2 Jan 2019 12:16:09 +0530 Subject: [PATCH 5/7] update cursor style. Co-Authored-By: rishichawda --- lib/card/theme.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 4e49a065..7445be7a 100644 --- a/lib/card/theme.module.scss +++ b/lib/card/theme.module.scss @@ -79,6 +79,7 @@ width: 100%; padding: 1%; font-size: 1.36em; + cursor: pointer; } :local(.open) { @@ -87,4 +88,4 @@ :local(.close) { transform: rotate(0deg); -} \ No newline at end of file +} From 72c6c8428c022e55fbc96ae5dc983e48567ebea5 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Wed, 2 Jan 2019 15:56:44 +0530 Subject: [PATCH 6/7] fix(card): fix card animation --- lib/card/index.js | 11 ++++++++++- lib/card/theme.module.scss | 24 +++++++++++------------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/lib/card/index.js b/lib/card/index.js index 277745a9..0aced7cb 100644 --- a/lib/card/index.js +++ b/lib/card/index.js @@ -12,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 = () => { @@ -56,10 +63,11 @@ class Card extends React.Component { } renderContent = () => { - const { children } = this.props; + const { children, theme } = this.props; const contentAreaProps = { 'aria-label': 'card-content', + className: theme.cardContent, }; return ( @@ -130,6 +138,7 @@ class Card extends React.Component { { this.renderHeader() } { this.renderContent() }
this.expandedContentRef = ref} className={classnames( theme.expandedContent, 'expandedContent', expanded ? `${theme.expanded} expanded` : `${theme.collapsed} collapsed`, diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 7445be7a..52b81f45 100644 --- a/lib/card/theme.module.scss +++ b/lib/card/theme.module.scss @@ -11,18 +11,13 @@ } .expandedContent { - max-height: 0; + -moz-transition: height .5s; + -ms-transition: height .5s; + -o-transition: height .5s; + -webkit-transition: height .5s; + transition: height .5s; + height: 0; overflow: hidden; - padding-top: 1%; - will-change: max-height; - &.expanded { - max-height: 2000px; - transition: max-height 0.5s ease-in-out; - } - &.collapsed { - max-height: 0; - transition: max-height 0.5s ease-in-out; - } } :local(.noPadding) { @@ -55,9 +50,13 @@ margin-bottom: 15px; } +:local(.cardContent) { + margin-bottom: 0.5em; +} + :local(.cardFooter) { width: 100%; - margin-top: 2%; + margin-top: 0.2em; display: flex; justify-content: space-between; box-sizing: border-box; @@ -76,7 +75,6 @@ :local(.expand-icon) { align-self: center; transition: transform 0.5s linear; - width: 100%; padding: 1%; font-size: 1.36em; cursor: pointer; From dff29f80abcab80f6f775da3dea3656f67cd1bb8 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Wed, 2 Jan 2019 16:40:17 +0530 Subject: [PATCH 7/7] fix(card): fix card mobile view --- lib/card/theme.module.scss | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/lib/card/theme.module.scss b/lib/card/theme.module.scss index 52b81f45..810d893c 100644 --- a/lib/card/theme.module.scss +++ b/lib/card/theme.module.scss @@ -18,6 +18,13 @@ 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) { @@ -48,10 +55,24 @@ 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) { @@ -63,6 +84,13 @@ 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) {