From 95cfed6261d4ed98e35658a7490b35204fb71939 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 30 Nov 2018 11:09:46 -0600 Subject: [PATCH] adds bottom graphic to card component --- src/components/card/_card.scss | 15 +++++++++ src/components/card/card.js | 61 ++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 3ca3300eefc9..f4b151893274 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -21,6 +21,8 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. flex-direction: column; padding: $euiCardSpacing; min-height: 1px; /* 2 */ + position: relative; + overflow: hidden; // This creates a bunch of sub selectors for the beta badge @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations @@ -60,6 +62,10 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. } } } + + &.euiCard--hasBottomGraphic { + padding-bottom: $euiCardSpacing + $euiSizeXXL; + } } .euiCard__top { @@ -144,3 +150,12 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. margin-right: $euiSize; } } + +// Optional decorative graphics +.euiCard__graphicBottom { + position: absolute; + bottom: 0; + left: 0; + height: $euiSizeXXL; + width: 100%; +} diff --git a/src/components/card/card.js b/src/components/card/card.js index dd8316c2ae41..5f96c5ec8d91 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -15,6 +15,14 @@ const textAlignToClassNameMap = { export const ALIGNMENTS = Object.keys(textAlignToClassNameMap); +const graphicColorsToCodes = [ + { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 150.476037,4 213.348797,4 C276.221558,4 298.768469,12.0470661 700,14.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len + { color: 'green', start: '#00B3A4', end: '#017F75', path: 'M3.14689825e-06,14.6239758 C26.8316503,16.6239758 59.5180176,25.7863641 146.281974,25.7864412 C233.045931,25.7865184 294.268472,3 700.000003,3 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,14.6239758 Z', pathLight: 'M3.13729941e-06,24.4746094 C127.450326,24.4746094 164.698941,0 236.25,0 C307.801058,0 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.13729941e-06,24.4746094 Z' }, // eslint-disable-line max-len + { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,7 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,7 Z', pathLight: 'M700,24.4746094 L700,40 L1.76214598e-12,40 L1.12746009e-08,17.4941406 C61.2315307,17.4941406 52.5540432,0 124.105102,0 C195.656161,0 232.549676,24.4746094 700,24.4746094 Z' }, // eslint-disable-line max-len +]; + +export const GRAPHIC_COLORS = graphicColorsToCodes.map(function (colorObj) {return colorObj.color;}); + const layoutToClassNameMap = { vertical: '', horizontal: 'euiCard--horizontal', @@ -54,6 +62,8 @@ export const EuiCard = ({ betaBadgeTooltipContent, betaBadgeTitle, layout, + bottomGraphic, + bottomGraphicColor, ...rest, }) => { const classes = classNames( @@ -64,6 +74,7 @@ export const EuiCard = ({ 'euiCard--isClickable': onClick || href || isClickable, 'euiCard--hasBetaBadge': betaBadgeLabel, 'euiCard--hasIcon': icon, + 'euiCard--hasBottomGraphic': bottomGraphic, }, className, ); @@ -124,6 +135,46 @@ export const EuiCard = ({ ); } + let optionalBottomGraphic; + let graphicStartColor; + let graphicEndColor; + let graphicSVGPath; + let graphicSVGPathLight; + if (bottomGraphic) { + // Set the svg gradient colors + graphicStartColor = graphicColorsToCodes.find(w => w.color === bottomGraphicColor).start; + graphicEndColor = graphicColorsToCodes.find(x => x.color === bottomGraphicColor).end; + graphicSVGPath = graphicColorsToCodes.find(y => y.color === bottomGraphicColor).path; + graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === bottomGraphicColor).pathLight; + + optionalBottomGraphic = ( + + + + + + + + + + + + + + + + + + + ); + } + return ( } + + {optionalBottomGraphic} ); }; @@ -209,10 +262,18 @@ EuiCard.propTypes = { * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used */ betaBadgeTitle: PropTypes.string, + + /** + * Add a decorative bottom graphic to the card + * This should be used sparingly, consult the Kibana design team before use + */ + bottomGraphic: PropTypes.bool, + bottomGraphicColor: PropTypes.oneOf(GRAPHIC_COLORS), }; EuiCard.defaultProps = { textAlign: 'center', layout: 'vertical', titleElement: 'span', + bottomGraphicColor: 'blue', };