Card Secondary Variant (#2703)

Co-authored-by: Fernanda Castillo <[email protected]>

.changeset/tall-crabs-attend.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Add secondary variant to `Card` and `InteractableCard` via `variant` prop.

packages/core/src/card/Card.css

@@ -1,13 +1,21 @@
 /* Styles applied to the root element */
 .saltCard {
-  background: var(--saltCard-background, var(--salt-container-primary-background));
   box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));
   border-width: var(--salt-size-border);
   border-style: var(--salt-container-borderStyle);
-  border-color: var(--salt-container-primary-borderColor);
   padding: var(--saltCard-padding, var(--salt-spacing-300));
 }
 
+.saltCard-primary {
+  background: var(--saltCard-background, var(--salt-container-primary-background));
+  border-color: var(--salt-container-primary-borderColor);
+}
+
+.saltCard-secondary {
+  background: var(--saltCard-background, var(--salt-container-secondary-background));
+  border-color: var(--salt-container-secondary-borderColor);
+}
+
 /*
  * **Deprecated:** The following styles are deprecated
  *  Use Interactable Card component instead

packages/core/src/card/Card.tsx

@@ -22,13 +22,24 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
    * on the page.
    */
   interactable?: boolean;
+  /**
+   * Styling variant; defaults to "primary".
+   */
+  variant?: "primary" | "secondary";
 }
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   props,
   ref
 ) {
-  const { className, disabled, interactable, children, ...rest } = props;
+  const {
+    className,
+    disabled,
+    interactable,
+    children,
+    variant = "primary",
+    ...rest
+  } = props;
 
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -41,6 +52,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
     <div
       className={clsx(
         withBaseName(),
+        withBaseName(variant),
         {
           /* **Deprecated:** InteractableCard should be used instead for these features */
           [withBaseName("disabled")]: disabled,

packages/core/src/card/InteractableCard.css

@@ -1,6 +1,5 @@
 /* Styles applied to InteractableCard */
 .saltInteractableCard {
-  background: var(--saltCard-background, var(--salt-container-primary-background));
   box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));
   border-width: var(--saltCard-borderWidth, var(--card-borderWidth));
   border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));
@@ -11,6 +10,16 @@
   padding: var(--saltCard-padding, var(--salt-spacing-300));
 }
 
+/* Styles applied to InteractableCard when variant="primary" */
+.saltInteractableCard-primary {
+  background: var(--saltCard-background, var(--salt-container-primary-background));
+}
+
+/* Styles applied to InteractableCard when variant="secondary" */
+.saltInteractableCard-secondary {
+  background: var(--saltCard-background, var(--salt-container-secondary-background));
+}
+
 /* Styles applied to InteractableCard if `accentPlacement="bottom"` (default) */
 .saltInteractableCard-accentBottom {
   --card-borderWidth: 0 0 var(--salt-size-accent) 0;
@@ -64,14 +73,30 @@ a:link .saltInteractableCard * {
 .saltInteractableCard-disabled:focus,
 .saltInteractableCard-disabled:hover,
 .saltInteractableCard-disabled:active {
-  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));
   box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));
-  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));
   color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));
   cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));
   outline: none;
 }
 
+/* Styles applied to InteractableCard primary variant if `disabled={true}` */
+.saltInteractableCard-primary.saltInteractableCard-disabled,
+.saltInteractableCard-primary.saltInteractableCard-disabled:focus,
+.saltInteractableCard-primary.saltInteractableCard-disabled:hover,
+.saltInteractableCard-primary.saltInteractableCard-disabled:active {
+  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled));
+  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));
+}
+
+/* Styles applied to InteractableCard secondary variant if `disabled={true}` */
+.saltInteractableCard-secondary.saltInteractableCard-disabled,
+.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,
+.saltInteractableCard-secondary.saltInteractableCard-disabled:hover,
+.saltInteractableCard-secondary.saltInteractableCard-disabled:active {
+  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled));
+  background: var(--saltCard-background-disabled, var(--salt-container-secondary-background));
+}
+
 /* Styles applied to nested divs in InteractableCard if `disabled={true}` */
 .saltInteractableCard-disabled div {
   pointer-events: none;

packages/core/src/card/InteractableCard.tsx

@@ -20,6 +20,10 @@ export interface InteractableCardProps extends ComponentPropsWithoutRef<"div"> {
    * If `true`, the card will be disabled.
    */
   disabled?: boolean;
+  /**
+   * Styling variant; defaults to "primary".
+   */
+  variant?: "primary" | "secondary";
 }
 
 export const InteractableCard = forwardRef<
@@ -30,6 +34,7 @@ export const InteractableCard = forwardRef<
     accentPlacement = "bottom",
     children,
     className,
+    variant = "primary",
     disabled,
     onBlur,
     onClick,
@@ -60,6 +65,7 @@ export const InteractableCard = forwardRef<
       {...restCardProps}
       className={clsx(
         withBaseName(),
+        withBaseName(variant),
         withBaseName(`accent${capitalize(accentPlacement)}`),
         {
           [withBaseName("disabled")]: disabled,

packages/core/stories/card/card.qa.stories.tsx

@@ -1,4 +1,4 @@
-import { Card, H1, Text } from "@salt-ds/core";
+import { Card, H1, InteractableCard, Text } from "@salt-ds/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, QAContainerProps } from "docs/components";
 
@@ -16,6 +16,18 @@ export const AllExamplesUsingText: StoryFn<
         <H1>Card with density</H1>
         <Text>Content</Text>
       </Card>
+      <Card variant="secondary">
+        <H1>Secondary card with density</H1>
+        <Text>Content</Text>
+      </Card>
+      <InteractableCard>
+        <H1>Interactable card with density</H1>
+        <Text>Content</Text>
+      </InteractableCard>
+      <InteractableCard variant="secondary">
+        <H1>Secondary interactable with density</H1>
+        <Text>Content</Text>
+      </InteractableCard>
     </QAContainer>
   );
 };

site/docs/components/card/examples.mdx

@@ -14,6 +14,10 @@ data:
       ### Default
     </LivePreview>
 
+    <LivePreview componentName="card" exampleName="Secondary" >
+      ### Secondary
+    </LivePreview>
+
     <LivePreview componentName="card" exampleName="Actions" >
       ### Adding actions
 
@@ -28,6 +32,10 @@ data:
       - Avoid adding too much content to Interactable Cards. They should be easily readable by all users, and not take too long for a screen reader tool to read out the contents.
     </LivePreview>
 
+    <LivePreview componentName="card" exampleName="SecondaryInteractableCard" >
+      ### Secondary Interactable Card
+    </LivePreview>
+
     <LivePreview componentName="card" exampleName="DisabledInteractableCard" >
       ### Disabled Interactable Card
       - Set `disabled={true}` to apply disabled styling to Interactable Cards.

site/src/examples/card/Secondary.tsx

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { Card, H3, Text } from "@salt-ds/core";
+
+export const Secondary = (): ReactElement => {
+  return (
+    <Card variant="secondary" style={{ width: "256px" }}>
+      <H3>Sustainable investing products</H3>
+      <Text>
+        We have a commitment to provide a wide range of investment solutions to
+        enable you to align your financial goals to your values.
+      </Text>
+    </Card>
+  );
+};

site/src/examples/card/SecondaryInteractableCard.tsx

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+import {
+  InteractableCard as SaltInteractableCard,
+  H3,
+  Link,
+  Text,
+} from "@salt-ds/core";
+
+export const SecondaryInteractableCard = (): ReactElement => {
+  return (
+    <Link
+      style={{ textDecoration: "none" }}
+      href="https://saltdesignsystem.com/"
+      IconComponent={null}
+      target="_blank"
+    >
+      <SaltInteractableCard variant="secondary" style={{ width: "256px" }}>
+        <H3>Sustainable investing products</H3>
+        <Text>
+          We have a commitment to provide a wide range of investment solutions
+          to enable you to align your financial goals to your values.
+        </Text>
+      </SaltInteractableCard>
+    </Link>
+  );
+};

site/src/examples/card/index.ts

@@ -4,3 +4,5 @@ export * from "./InteractableCard";
 export * from "./DisabledInteractableCard";
 export * from "./AccentVariations";
 export * from "./MultipleCards";
+export * from "./Secondary";
+export * from "./SecondaryInteractableCard";