diff --git a/src/components/IconCard/IconCard.css b/src/components/IconCard/IconCard.css new file mode 100644 index 00000000..93adba15 --- /dev/null +++ b/src/components/IconCard/IconCard.css @@ -0,0 +1,4 @@ +@import '../../marketplace.css'; + +.root { +} diff --git a/src/components/IconCard/IconCard.js b/src/components/IconCard/IconCard.js new file mode 100644 index 00000000..1b41694c --- /dev/null +++ b/src/components/IconCard/IconCard.js @@ -0,0 +1,264 @@ +import React from 'react'; +import { string } from 'prop-types'; +import classNames from 'classnames'; + +import css from './IconCard.css'; + +const BRAND_AMEX = 'amex'; +const BRAND_DINERS = 'diners'; +const BRAND_DISCOVERY = 'discovery'; +const BRAND_JCB = 'jcb'; +const BRAND_MASTERCARD = 'mastercard'; +const BRAND_UNIONPAY = 'unionpay'; +const BRAND_VISA = 'visa'; + +const IconCard = props => { + const { className, rootClassName, brand } = props; + const classes = classNames(rootClassName || css.root, className); + + switch (brand) { + case BRAND_AMEX: + return ( + + + + + + + + + + + + + + ); + case BRAND_DINERS: + return ( + + + + + + + + ); + case BRAND_DISCOVERY: + return ( + + + + + + + + + ); + case BRAND_JCB: + return ( + + + + + + + + + + + ); + case BRAND_MASTERCARD: + return ( + + + + + + + + + ); + case BRAND_UNIONPAY: + return ( + + + + + + + + + ); + case BRAND_VISA: + return ( + + + + + + + ); + default: + return ( + + + + + + + ); + } +}; + +IconCard.defaultProps = { + className: null, + rootClassName: null, + brand: 'default', +}; + +IconCard.propTypes = { + className: string, + rootClassName: string, + brand: string, +}; + +export default IconCard; diff --git a/src/components/index.js b/src/components/index.js index aee68ee0..5aa72405 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -14,6 +14,7 @@ export { default as IconAdd } from './IconAdd/IconAdd'; export { default as IconArrowHead } from './IconArrowHead/IconArrowHead'; export { default as IconBannedUser } from './IconBannedUser/IconBannedUser'; +export { default as IconCard } from './IconCard/IconCard'; export { default as IconCheckmark } from './IconCheckmark/IconCheckmark'; export { default as IconClose } from './IconClose/IconClose'; export { default as IconEmailAttention } from './IconEmailAttention/IconEmailAttention';