Merge pull request #1904 from Kajabi/develop

Next Version Bump
Kajabi · Jul 1, 2024 · 7f20fd2 · 7f20fd2
2 parents 612be1b + c279013
commit 7f20fd2
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>Card Title</Card.Title>
       <Card.Title>Block (with Sage Type)</Card.Title>
       <Card.Block sageType={true}>
         <p>
@@ -133,6 +134,40 @@ Default.args = {
   ),
 };
 
+export const CardWithHeader = (args) => (
+  <Card>
+    <Card.Header background={args.background}>
+      <Frame padding={Frame.PADDINGS.SM} direction={Frame.DIRECTIONS.HORIZONTAL}>
+        <Frame direction={Frame.DIRECTIONS.VERTICAL} gap={Frame.GAPS.NONE}>
+          <p className={SageClassnames.TYPE.BODY_SMALL}>November 7, 2018</p>
+          <p className={SageClassnames.TYPE.BODY_SMALL_BOLD}>Order #12931820</p>
+        </Frame>
+        <Frame direction={Frame.DIRECTIONS.VERTICAL} gap={Frame.GAPS.NONE}>
+          <p className={SageClassnames.TYPE.BODY_SMALL}>Total</p>
+          <p className={SageClassnames.TYPE.BODY_SMALL_BOLD}>$623.98</p>
+        </Frame>
+      </Frame>
+    </Card.Header>
+    <Card.Row gridTemplate={SageTokens.GRID_TEMPLATES.ETE}>
+      <p>Main content goes here.</p>
+    </Card.Row>
+    <Card.Footer>
+      <Button color="secondary">Lorem ipsum</Button>
+      <Button>Dolor sit</Button>
+    </Card.Footer>
+  </Card>
+);
+
+CardWithHeader.args = {
+  background: SageTokens.COLOR_SLIDERS.GREY_200,
+};
+
+CardWithHeader.argTypes = {
+  ...selectArgs({
+    background: SageTokens.COLOR_SLIDERS
+  }),
+};
+
 export const InteractiveCard = () => (
   <Card interactive={true}>
     <Link className="sage-card__link--primary" href="//example.com">

diff --git a/packages/sage-react/lib/Card/CardHeader.jsx 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 (
+    <div
+      className={
+        [
+          'sage-card__header-layout',
+          hasCustomBackground ? 'sage-card--background-custom' : '',
+          background && !hasCustomBackground ? `sage-card--background-${background}` : ''
+        ].filter((x) => x).join(' ')
+      }
+      {...rest}
+      style={styles}
+    >
+      {children}
+    </div>
+  );
+};
+
+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
@@ -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 && (
+          <pds-icon
+            name={icon}
+            class={`${SageClassnames.SPACERS.XS_RIGHT} ${icon && customIconColor ? 'sage-label--icon--custom-color' : ''}`}
+          />
+        )}
         <span className="sage-label__value-text">
           {value}
         </span>
       </TagName>
       {interactiveType === LABEL_INTERACTIVE_TYPES.SECONDARY_BUTTON && secondaryButton}
       {(interactiveType === LABEL_INTERACTIVE_TYPES.DROPDOWN) && (
-        <pds-icon className="sage-label__decor-icon" name="down-small" />
+        <pds-icon class="sage-label__decor-icon" name="down-small" />
       )}
     </span>
   );