@purpurds/card 6.12.4 → 7.0.0

package/src/card-heading.tsx

@@ -1,12 +1,18 @@
-import React, { ReactNode } from "react";
-import { Heading,type HeadingTagType } from "@purpurds/heading";
+import React, {
+  type AnchorHTMLAttributes,
+  type ForwardRefExoticComponent,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { Heading, type HeadingTagType, type TitleVariantType } from "@purpurds/heading";
 import c from "classnames/bind";
 
 import styles from "./card-heading.module.scss";
+import { CardTriggerItem } from "./card-trigger-item";
 
 const cx = c.bind(styles);
 
-export type CardHeadingProps = {
+export type CardHeadingDefaultProps = {
   /**
    * Use this to set a testid on the feature list
    */
@@ -15,37 +21,110 @@ export type CardHeadingProps = {
   /**
    * Use when you want an icon to the left of the title
    */
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   /**
    * Use for the CTA, it will positioned to the right
    */
   children?: ReactNode;
   titleTag?: HeadingTagType;
+  variant?: TitleVariantType;
   enableHyphenation?: boolean;
 };
 
+export type CardHeadingNonInteractiveProps = {
+  disabled?: never;
+  href?: never;
+  /**
+   * If the href prop is not provided the clickable element will be a button and use this clickHandler when the user presses the card.
+   */
+  onClick?: never;
+  linkElement?: never;
+};
+
+export type CardHeadingLinkProps = {
+  /**
+   * Use this to disable the card. Can be used both with a link card and a button card. In the case of the button the clickHandler will not be called and if a anchor tag the href will be removed.
+   */
+  disabled?: boolean;
+  /**
+   * Makes the card become a link to the provided href.
+   */
+  href: string;
+  /**
+   * If the href prop is not provided the clickable element will be a button and use this clickHandler when the user presses the card.
+   */
+  onClick?: () => void;
+  linkElement?: ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement>> | "a";
+};
+
+export type CardHeadingButtonProps = {
+  /**
+   * Use this to disable the card. Can be used both with a link card and a button card. In the case of the button the clickHandler will not be called and if a anchor tag the href will be removed.
+   */
+  disabled?: boolean;
+  /**
+   * Makes the card become a link to the provided href.
+   */
+  href?: never;
+  /**
+   * If the href prop is not provided the clickable element will be a button and use this clickHandler when the user presses the card.
+   */
+  onClick: () => void;
+  linkElement?: never;
+};
+
+export type CardHeadingProps = HTMLAttributes<HTMLHeadingElement> & CardHeadingDefaultProps;
+
 const rootClassName = "purpur-card-heading";
 
 export const CardHeading = ({
   ["data-testid"]: dataTestId = "purpur-card-heading",
+  ["aria-label"]: ariaLabel,
   title,
   icon,
   children,
   titleTag = "h2",
   enableHyphenation,
-}: CardHeadingProps) => (
-  <div className={cx(rootClassName)} data-testid={dataTestId}>
-    <div className={cx(`${rootClassName}__header`)}>
-      {icon && <div className={cx(`${rootClassName}__icon`)}>{icon}</div>}
-      <Heading
-        tag={titleTag}
-        variant="title-100"
-        className={cx(`${rootClassName}__heading`)}
-        enableHyphenation={enableHyphenation}
-      >
-        {title}
-      </Heading>
+  onClick = undefined,
+  href = undefined,
+  disabled = false,
+  linkElement = "a",
+  variant = "title-100",
+  ...props
+}: CardHeadingProps &
+  (CardHeadingLinkProps | CardHeadingButtonProps | CardHeadingNonInteractiveProps)) => {
+  const classes = cx(rootClassName, {
+    [`${rootClassName}--is-interactive`]: onClick || href,
+    [`${rootClassName}--disabled`]: disabled,
+  });
+
+  return (
+    <div className={classes} data-testid={dataTestId}>
+      <div className={cx(`${rootClassName}__header`)}>
+        {icon && <div className={cx(`${rootClassName}__icon`)}>{icon}</div>}
+        <Heading
+          tag={titleTag}
+          className={cx(`${rootClassName}__heading`)}
+          variant={variant}
+          enableHyphenation={enableHyphenation}
+          {...props}
+        >
+          {onClick || href ? (
+            <CardTriggerItem
+              aria-label={ariaLabel}
+              disabled={disabled}
+              href={href}
+              onClick={onClick}
+              linkElement={linkElement}
+            >
+              {title}
+            </CardTriggerItem>
+          ) : (
+            title
+          )}
+        </Heading>
+      </div>
+      {children}
     </div>
-    {children}
-  </div>
-);
+  );
+};

package/src/card-media-layout.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 import c from "classnames/bind";
 
 import styles from "./card-media-layout.module.scss";
 
 const cx = c.bind(styles);
 
-export type CardMediaLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+export type CardMediaLayoutProps = HTMLAttributes<HTMLDivElement> & {
   ["data-testid"]?: string;
   children?: ReactNode;
 };

package/src/card-media.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
 import c from "classnames/bind";
 
 import styles from "./card-media.module.scss";
 
 const cx = c.bind(styles);
 
-export type CardMediaProps = React.HTMLAttributes<HTMLDivElement> & {
+export type CardMediaProps = HTMLAttributes<HTMLDivElement> & {
   ["data-testid"]?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 
 const rootClassName = "purpur-card-media";

package/src/card-overline.module.scss

@@ -1,8 +1,6 @@
 .purpur-card-overline {
   &#{&} {
     color: var(--purpur-color-text-medium);
-    font-size: var(--purpur-typography-scale-75);
-    font-weight: var(--purpur-typography-weight-normal);
     margin-bottom: var(--purpur-spacing-50);
   }
 }

package/src/card-overline.tsx

@@ -24,7 +24,7 @@ export const CardOverline = ({
   overline,
 }: CardOverlineProps) => {
   return overline ? (
-    <Paragraph className={cx(rootClassName)} data-testid={dataTestId}>
+    <Paragraph variant="overline-100" className={cx(rootClassName)} data-testid={dataTestId}>
       {overline}
     </Paragraph>
   ) : null;

package/src/card-root.test.tsx

@@ -32,50 +32,4 @@ describe("CardRoot", () => {
     );
     expect(screen.getByTestId("card-root")).not.toHaveClass("purpur-card-root--full-height");
   });
-
-  it("should render a trigger item if href and screenReaderText props are set", () => {
-    render(
-      <CardRoot
-        data-testid="card-root"
-        variant="primary"
-        className="purpur-card"
-        fullHeight={false}
-        href="/link-to-product"
-        screenReaderText="Product Name S3 - 799kr/mån"
-      >
-        Card content
-      </CardRoot>
-    );
-    expect(screen.getByTestId("purpur-card-trigger-item")).toBeInTheDocument();
-  });
-
-  it("should render a trigger item if onClick and screenReaderText props are set", () => {
-    render(
-      <CardRoot
-        data-testid="card-root"
-        variant="primary"
-        className="purpur-card"
-        fullHeight={false}
-        onClick={() => null}
-        screenReaderText="Product Name S3 - 799kr/mån"
-      >
-        Card content
-      </CardRoot>
-    );
-    expect(screen.getByTestId("purpur-card-trigger-item")).toBeInTheDocument();
-  });
-
-  it("should not render a trigger item if href and onClick props are not set", () => {
-    render(
-      <CardRoot
-        data-testid="card-root"
-        variant="primary"
-        className="purpur-card"
-        fullHeight={false}
-      >
-        Card content
-      </CardRoot>
-    );
-    expect(screen.queryByTestId("purpur-card-trigger-item")).not.toBeInTheDocument();
-  });
 });

package/src/card-root.tsx

@@ -1,13 +1,17 @@
-import type { DetailedHTMLProps, ForwardedRef, HTMLAttributes, ReactNode } from "react";
-import React, { forwardRef } from "react";
+import React, {
+  type DetailedHTMLProps,
+  type ForwardedRef,
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import c from "classnames/bind";
 
 import styles from "./card-root.module.scss";
-import { CardTriggerItem } from "./card-trigger-item";
 
 const cx = c.bind(styles);
 
-type CardRootDefaultProps = React.HTMLAttributes<HTMLDivElement> & {
+export type CardRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
   /**
    * Use this to set a testid on the card
    */
@@ -17,54 +21,6 @@ type CardRootDefaultProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: "primary" | "secondary";
 };
 
-export type CardRootNonInteractiveProps = {
-  disabled?: never;
-  href?: never;
-  onClick?: never;
-  screenReaderText?: never;
-};
-
-export type CardRootLinkProps = {
-  /**
-   * Use this to disable the card. Can be used both with a link card and a button card. In the case of the button the clickHandler will not be called and if a anchor tag the href will be removed.
-   */
-  disabled?: boolean;
-  /**
-   * Makes the card become a link to the provided href.
-   */
-  href: string;
-  /**
-   * If the href prop is not provided the clickable element will be a button and use this clickHandler when the user presses the card.
-   */
-  onClick?: () => unknown;
-  /**
-   * This is the text that will be read for screen readers when the link/button in the card gets focus. Try to create a text with all the important information about the card here. This text will not be visible in the UI.
-   */
-  screenReaderText: string;
-};
-
-export type CardRootButtonProps = {
-  /**
-   * Use this to disable the card. Can be used both with a link card and a button card. In the case of the button the clickHandler will not be called and if a anchor tag the href will be removed.
-   */
-  disabled?: boolean;
-  /**
-   * Makes the card become a link to the provided href.
-   */
-  href?: never;
-  /**
-   * If the href prop is not provided the clickable element will be a button and use this clickHandler when the user presses the card.
-   */
-  onClick: () => unknown;
-  /**
-   * This is the text that will be read for screen readers when the link/button in the card gets focus. Try to create a text with all the important information about the card here. This text will not be visible in the UI.
-   */
-  screenReaderText: string;
-};
-
-export type CardRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> &
-  CardRootDefaultProps;
-
 const rootClassName = "purpur-card-root";
 
 export const CardRoot = forwardRef(
@@ -73,14 +29,10 @@ export const CardRoot = forwardRef(
       ["data-testid"]: dataTestId = "purpur-card-root",
       children,
       className,
-      disabled,
-      fullHeight,
-      href,
-      onClick,
-      screenReaderText,
+      fullHeight = true,
       variant,
       ...props
-    }: CardRootProps & (CardRootLinkProps | CardRootButtonProps | CardRootNonInteractiveProps),
+    }: CardRootProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const classes = cx([
@@ -95,14 +47,6 @@ export const CardRoot = forwardRef(
     return (
       <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
         {children}
-        {(onClick || href) && screenReaderText && (
-          <CardTriggerItem
-            disabled={disabled}
-            href={href}
-            onClick={onClick}
-            screenReaderText={screenReaderText}
-          />
-        )}
       </div>
     );
   }

package/src/card-trigger-item.module.scss

@@ -1,12 +1,21 @@
 .purpur-card-trigger-item {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
+  &--link {
+    color: inherit;
+    text-decoration: none;
+  }
 
   &--button {
     background-color: transparent;
     border: none;
+    padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    line-height: inherit;
     cursor: pointer;
+    text-align: left;
+    text-rendering: geometricPrecision;
   }
 
   &--disabled {
@@ -16,4 +25,11 @@
   &:focus-visible {
     outline: none;
   }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
 }

package/src/card-trigger-item.test.tsx

@@ -10,7 +10,7 @@ expect.extend(matchers);
 
 const triggerItemBaseProps: CardTriggerItemProps = {
   ["data-testid"]: "card-trigger-item",
-  screenReaderText: "Product Name S3 - 799kr/mån",
+  children: "Product Name S3 - 799kr/mån",
   disabled: false,
 };
 

package/src/card-trigger-item.tsx

@@ -1,28 +1,35 @@
-import React, { MouseEvent } from "react";
+import React, {
+  type AnchorHTMLAttributes,
+  type ForwardRefExoticComponent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 import c from "classnames/bind";
 
 import styles from "./card-trigger-item.module.scss";
 
 const cx = c.bind(styles);
 
-import { VisuallyHidden } from "@purpurds/visually-hidden";
-
 export type CardTriggerItemProps = {
   ["data-testid"]?: string;
+  ["aria-label"]?: string;
   disabled?: boolean;
   href?: string;
   onClick?: () => unknown;
-  screenReaderText: string;
+  children: ReactNode;
+  linkElement?: ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement>> | "a";
 };
 
 const rootClassName = "purpur-card-trigger-item";
 
 export const CardTriggerItem = ({
   ["data-testid"]: dataTestId = "purpur-card-trigger-item",
+  ["aria-label"]: ariaLabel,
   disabled = false,
   href,
   onClick,
-  screenReaderText,
+  children,
+  linkElement: LinkElement = "a",
 }: CardTriggerItemProps) => {
   const handleClick = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void => {
     if (disabled) {
@@ -37,11 +44,12 @@ export const CardTriggerItem = ({
   }`;
 
   return href ? (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a
+    <LinkElement
       aria-disabled={disabled}
+      aria-label={ariaLabel}
       className={`${cx([
         rootClassName,
+        `${rootClassName}--link`,
         {
           [`${rootClassName}--disabled`]: disabled,
         },
@@ -51,11 +59,12 @@ export const CardTriggerItem = ({
       tabIndex={disabled ? 0 : undefined}
       onClick={handleClick}
     >
-      <VisuallyHidden>{screenReaderText}</VisuallyHidden>
-    </a>
+      {children}
+    </LinkElement>
   ) : (
     <button
       aria-disabled={disabled}
+      aria-label={ariaLabel}
       className={`${cx([
         rootClassName,
         `${rootClassName}--button`,
@@ -67,7 +76,7 @@ export const CardTriggerItem = ({
       type="button"
       onClick={handleClick}
     >
-      <VisuallyHidden>{screenReaderText}</VisuallyHidden>
+      {children}
     </button>
   );
 };

package/src/card.stories.tsx

@@ -20,6 +20,8 @@ const meta = {
   title: "Components/Card",
   component: Card,
   subcomponents: {
+    //@ts-ignore
+    "Card.Heading": Card.Heading,
     //@ts-ignore
     "Card.ContentContainer": Card.ContentContainer,
     //@ts-ignore
@@ -33,23 +35,15 @@ const meta = {
     //@ts-ignore
     "Card.Overline": Card.Overline,
     //@ts-ignore
-    "Card.Heading": Card.Heading,
-    //@ts-ignore
     "Card.Media": Card.Media,
     //@ts-ignore
     "Card.MediaLayout": Card.MediaLayout,
   },
   args: {
-    href: "/?path=/docs/components-card--docs",
-    screenReaderText: "Browse to tips and tricks",
     variant: "primary",
     fullHeight: false,
-    disabled: false,
   },
   argTypes: {
-    onClick: {
-      table: { type: { summary: "() => unknown" } },
-    },
     variant: {
       options: ["primary", "secondary"],
       control: {
@@ -57,6 +51,17 @@ const meta = {
       },
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+<br/>
+<br/>
+## Action using link or button
+The Card component can be used to create a link or button. To do so, use the \`Card.Heading\` component with either \`href\` or \`onClick\` prop.`,
+      },
+    },
+  },
 } satisfies Meta<typeof Card>;
 
 export default meta;
@@ -76,10 +81,13 @@ export const CardWithHeading: Story = {
         {Array(4)
           .fill(0)
           .map((_, index) => (
-             
             <Card {...args} key={index}>
               <Card.ContentContainer gapSize="sm">
-                <Card.Heading title="Tips and tricks" icon={<IconSimcard size="sm" />}>
+                <Card.Heading
+                  title="Tips and tricks"
+                  icon={<IconSimcard size="sm" />}
+                  href="/?path=/docs/components-card--docs"
+                >
                   <Card.Cta linkStyling>
                     <IconArrowRight size="sm" />
                   </Card.Cta>

package/src/card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type FunctionComponent } from "react";
 import c from "classnames/bind";
 
 import styles from "./card.module.scss";
@@ -11,17 +11,18 @@ import { CardHeading } from "./card-heading";
 import { CardMedia } from "./card-media";
 import { CardMediaLayout } from "./card-media-layout";
 import { CardOverline } from "./card-overline";
-import type {
-  CardRootButtonProps,
-  CardRootLinkProps,
-  CardRootNonInteractiveProps,
-  CardRootProps,
-} from "./card-root";
+import type { CardRootProps } from "./card-root";
 import { CardRoot } from "./card-root";
+export type {
+  CardHeadingButtonProps,
+  CardHeadingDefaultProps,
+  CardHeadingLinkProps,
+  CardHeadingNonInteractiveProps,
+} from "./card-heading";
 
 const cx = c.bind(styles);
 
-type CardCmp<P> = React.FunctionComponent<P> & {
+type CardCmp<P> = FunctionComponent<P> & {
   Badge: typeof CardBadge;
   Content: typeof CardContent;
   ContentContainer: typeof CardContentContainer;
@@ -34,23 +35,11 @@ type CardCmp<P> = React.FunctionComponent<P> & {
 };
 
 export type CardProps = CardRootProps;
-export type CardButtonProps = CardRootButtonProps;
-export type CardLinkProps = CardRootLinkProps;
-export type CardNonInteractiveProps = CardRootNonInteractiveProps;
 
 const rootClassName = "purpur-card";
 
-export const Card: CardCmp<
-  CardProps & (CardButtonProps | CardLinkProps | CardNonInteractiveProps)
-> = ({ children, className, ...props }) => {
-  const classes = cx([
-    rootClassName,
-    className,
-    {
-      [`${rootClassName}--is-interactive`]: props.onClick || props.href,
-      [`${rootClassName}--disabled`]: props.disabled,
-    },
-  ]);
+export const Card: CardCmp<CardProps> = ({ children, className, ...props }) => {
+  const classes = cx([rootClassName, className]);
   return (
     <div
       className={cx(`${rootClassName}__container`, {