diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 99c6aa40d6..320a7f3bc2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -500,7 +500,9 @@ $-btn-loading-min-height: rem(36px); } } } - + pds-icon { + pointer-events: none; + } // NOTE: Icon generation consolidated in `core/_icons.scss` } @@ -675,7 +677,8 @@ a.sage-btn { } &::before, - span { + span, + pds-icon { z-index: 1; } } @@ -784,11 +787,6 @@ a.sage-btn { background-color: transparent; } } - - pds-icon { - z-index: 1; - pointer-events: none; - } } .sage-btn--small { diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 76c14ba454..498f851b9a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -5,6 +5,9 @@ //// +// Default background option +$-sage-card-background: transparent; + .sage-card { @include sage-card(); @@ -155,6 +158,26 @@ @include sage-grid-card-row(); } + +.sage-card--background-custom { + background: var(--sage-card-background, transparent); +} + +@each $-color, $-sliders in $sage-colors { + @each $-number, $-configs in $-sliders { + .sage-card--background-#{"" + $-color}-#{$-number} { + background: #{sage-color($-color, $-number)}; + } + } +} + +.sage-card__header-layout { + width: calc(100% + #{2 * sage-spacing(card)}); + margin: (-1 * sage-spacing(card)) (-1 * sage-spacing(card)) (-1 * sage-spacing(card)); + border-top-left-radius: sage-border(radius-large); + border-top-right-radius: sage-border(radius-large); +} + .sage-card__list { padding: 0; margin: 0 -#{sage-spacing()}; diff --git a/packages/sage-react/lib/Card/Card.jsx b/packages/sage-react/lib/Card/Card.jsx index 4ca40b8ed8..5b19857f57 100644 --- a/packages/sage-react/lib/Card/Card.jsx +++ b/packages/sage-react/lib/Card/Card.jsx @@ -5,6 +5,7 @@ import { Loader } from '../Loader'; import { CardBlock } from './CardBlock'; import { CardDivider } from './CardDivider'; import { CardFigure } from './CardFigure'; +import { CardHeader } from './CardHeader'; import { CardFooter } from './CardFooter'; import { CardHighlight } from './CardHighlight'; import { CardImage } from './CardImage'; @@ -52,6 +53,7 @@ export const Card = ({ Card.Block = CardBlock; Card.Divider = CardDivider; Card.Figure = CardFigure; +Card.Header = CardHeader; Card.Footer = CardFooter; Card.Highlight = CardHighlight; Card.Image = CardImage; diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx index 2e30d50e80..8361f78b1c 100644 --- a/packages/sage-react/lib/Card/Card.story.jsx +++ b/packages/sage-react/lib/Card/Card.story.jsx @@ -1,11 +1,12 @@ import React from 'react'; import { selectArgs } from '../story-support/helpers'; -import { SageTokens } from '../configs'; +import { SageTokens, SageClassnames } from '../configs'; import { Button } from '../Button'; import { Grid } from '../Grid'; import { Icon } from '../Icon'; import { Link } from '../Link'; import { Card } from './Card'; +import { Frame } from '../Frame'; export default { title: 'Sage/Card', @@ -19,6 +20,7 @@ export default { }, }, subcomponents: { + 'Card.Header': Card.Header, 'Card.Title': Card.Title, 'Card.Block': Card.Block, 'Card.Stack': Card.Stack, @@ -47,7 +49,6 @@ Default.decorators = [ Default.args = { children: ( <> - Card Title Block (with Sage Type)

@@ -133,6 +134,40 @@ Default.args = { ), }; +export const CardWithHeader = (args) => ( + + + + +

November 7, 2018

+

Order #12931820

+ + +

Total

+

$623.98

+ + + + +

Main content goes here.

+ + + + + + +); + +CardWithHeader.args = { + background: SageTokens.COLOR_SLIDERS.GREY_200, +}; + +CardWithHeader.argTypes = { + ...selectArgs({ + background: SageTokens.COLOR_SLIDERS + }), +}; + export const InteractiveCard = () => ( diff --git a/packages/sage-react/lib/Card/CardHeader.jsx b/packages/sage-react/lib/Card/CardHeader.jsx new file mode 100644 index 0000000000..35dd84c5ab --- /dev/null +++ b/packages/sage-react/lib/Card/CardHeader.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes, { oneOfType } from 'prop-types'; +import { SageTokens } from '../configs'; + +export const CardHeader = ({ background, children, ...rest }) => { + const { style } = rest; + const styles = style || {}; + + const hasCustomBackground = background + && !Object.values(SageTokens.COLOR_SLIDERS).includes(background); + + if (hasCustomBackground) { + styles['--sage-card-background'] = background; + } + + return ( +
x).join(' ') + } + {...rest} + style={styles} + > + {children} +
+ ); +}; + +CardHeader.defaultProps = { + background: SageTokens.COLOR_SLIDERS.GREY_200, + children: null, +}; + +CardHeader.propTypes = { + background: oneOfType([ + PropTypes.string, + PropTypes.oneOf(Object.values(SageTokens.COLOR_SLIDERS)), + ]), + children: PropTypes.node, +}; diff --git a/packages/sage-react/lib/Label/Label.jsx b/packages/sage-react/lib/Label/Label.jsx index 81244a9fd7..2c75b68f94 100644 --- a/packages/sage-react/lib/Label/Label.jsx +++ b/packages/sage-react/lib/Label/Label.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { SageTokens } from '../configs'; +import { SageTokens, SageClassnames } from '../configs'; import { LABEL_COLORS, LABEL_STYLES, @@ -61,13 +61,19 @@ export const Label = React.forwardRef(({ type={interactiveType ? 'button' : null} {...rest} > + {icon && ( + + )} {value} {interactiveType === LABEL_INTERACTIVE_TYPES.SECONDARY_BUTTON && secondaryButton} {(interactiveType === LABEL_INTERACTIVE_TYPES.DROPDOWN) && ( - + )} );