From df98bb2e809f118a727ed2be97a1ed3e219650b5 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Fri, 7 Jun 2024 15:18:19 -0500 Subject: [PATCH 1/6] chore: update Storybook source path for local and prod environment --- .../sage-react/.storybook/preview-head.html | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/sage-react/.storybook/preview-head.html b/packages/sage-react/.storybook/preview-head.html index 7040a6d78b..301d284fea 100644 --- a/packages/sage-react/.storybook/preview-head.html +++ b/packages/sage-react/.storybook/preview-head.html @@ -2,7 +2,31 @@ Need local instance of Pine CORE running. not PINE ICONS Make sure that the port here matches what is running in your local instance. --> - - + + + + + - From 9e53463ecd68e6e53a0b45442712749f315780bd Mon Sep 17 00:00:00 2001 From: Andrew Perez Date: Wed, 12 Jun 2024 14:39:08 -0600 Subject: [PATCH 2/6] feat: add Card.Header component with updates to storybook --- .../lib/stylesheets/components/_card.scss | 23 ++++++++++ packages/sage-react/lib/Card/Card.jsx | 2 + packages/sage-react/lib/Card/Card.story.jsx | 40 ++++++++++++++++- packages/sage-react/lib/Card/CardHeader.jsx | 44 +++++++++++++++++++ 4 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 packages/sage-react/lib/Card/CardHeader.jsx diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 76c14ba454..f3fa4d221b 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-frame-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-frame--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..e7172d9eaa 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,41 @@ 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..a88e9ee276 --- /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 { SageClassnames, 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-frame-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, +}; From d6da56d0fdc52bb5630433eac36a949ebce66ed2 Mon Sep 17 00:00:00 2001 From: Andrew Perez Date: Wed, 12 Jun 2024 15:24:45 -0600 Subject: [PATCH 3/6] fix: correct linting errors --- packages/sage-react/lib/Card/Card.story.jsx | 1 - packages/sage-react/lib/Card/CardHeader.jsx | 46 ++++++++++----------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx index e7172d9eaa..8361f78b1c 100644 --- a/packages/sage-react/lib/Card/Card.story.jsx +++ b/packages/sage-react/lib/Card/Card.story.jsx @@ -168,7 +168,6 @@ CardWithHeader.argTypes = { }), }; - export const InteractiveCard = () => ( diff --git a/packages/sage-react/lib/Card/CardHeader.jsx b/packages/sage-react/lib/Card/CardHeader.jsx index a88e9ee276..3fb5705db7 100644 --- a/packages/sage-react/lib/Card/CardHeader.jsx +++ b/packages/sage-react/lib/Card/CardHeader.jsx @@ -1,33 +1,33 @@ import React from 'react'; import PropTypes, { oneOfType } from 'prop-types'; -import { SageClassnames, SageTokens } from '../configs'; +import { SageTokens } from '../configs'; export const CardHeader = ({ background, children, ...rest }) => { - const { style } = rest; - const styles = style || {}; - - const hasCustomBackground = background + const { style } = rest; + const styles = style || {}; + + const hasCustomBackground = background && !Object.values(SageTokens.COLOR_SLIDERS).includes(background); - if (hasCustomBackground) { - styles['--sage-frame-background'] = background; - } + if (hasCustomBackground) { + styles['--sage-frame-background'] = background; + } - return ( -
x).join(' ') - } - {...rest} - style={styles} - > - {children} -
- ); + return ( +
x).join(' ') + } + {...rest} + style={styles} + > + {children} +
+ ); }; CardHeader.defaultProps = { From e390a2cb6b38162db9c82e07a79a5707d39427bb Mon Sep 17 00:00:00 2001 From: Andrew Perez Date: Wed, 12 Jun 2024 15:45:15 -0600 Subject: [PATCH 4/6] fix: update css class naming --- packages/sage-assets/lib/stylesheets/components/_card.scss | 4 ++-- packages/sage-react/lib/Card/CardHeader.jsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index f3fa4d221b..498f851b9a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -6,7 +6,7 @@ // Default background option -$-sage-frame-background: transparent; +$-sage-card-background: transparent; .sage-card { @include sage-card(); @@ -165,7 +165,7 @@ $-sage-frame-background: transparent; @each $-color, $-sliders in $sage-colors { @each $-number, $-configs in $-sliders { - .sage-frame--background-#{"" + $-color}-#{$-number} { + .sage-card--background-#{"" + $-color}-#{$-number} { background: #{sage-color($-color, $-number)}; } } diff --git a/packages/sage-react/lib/Card/CardHeader.jsx b/packages/sage-react/lib/Card/CardHeader.jsx index 3fb5705db7..35dd84c5ab 100644 --- a/packages/sage-react/lib/Card/CardHeader.jsx +++ b/packages/sage-react/lib/Card/CardHeader.jsx @@ -10,7 +10,7 @@ export const CardHeader = ({ background, children, ...rest }) => { && !Object.values(SageTokens.COLOR_SLIDERS).includes(background); if (hasCustomBackground) { - styles['--sage-frame-background'] = background; + styles['--sage-card-background'] = background; } return ( @@ -18,8 +18,8 @@ export const CardHeader = ({ background, children, ...rest }) => { className={ [ 'sage-card__header-layout', - hasCustomBackground ? 'sage-frame--background-custom' : '', - background && !hasCustomBackground ? `sage-frame--background-${background}` : '' + hasCustomBackground ? 'sage-card--background-custom' : '', + background && !hasCustomBackground ? `sage-card--background-${background}` : '' ].filter((x) => x).join(' ') } {...rest} From 35d35d5bc2403d2df73311c482fc78a99c68ad44 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 1 Jul 2024 08:32:19 -0700 Subject: [PATCH 5/6] fix(label): adds missing icon and corrects class typo (#1902) * fix(label): adds missing icon and corrects class type * fix: hello linter my old friend --- packages/sage-react/lib/Label/Label.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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) && ( - + )} ); From c279013f7b3aa18a09fd39db7e78a5e289d2a89c Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 1 Jul 2024 08:33:57 -0700 Subject: [PATCH 6/6] style: pds icon adjustments (#1903) --- .../lib/stylesheets/components/_button.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 {