@sproutsocial/seeds-react-card 1.0.0 → 1.1.1

package/src/CardTypes.ts

@@ -50,36 +50,65 @@ export interface TypeCardStyles
 
 type TypeOnClick = (event: React.MouseEvent | React.KeyboardEvent) => void;
 
+type TypeGenericCard = {
+  /** role is used for to set accessibility properties,
+   *  to determine styling and interaction behavior,
+   *  and to determine which props should be allowed.*/
+  role: "link" | "button" | "checkbox" | "presentation";
+  /** When role is link, use href to determine the link destination.
+   *  Required for role="link", disallowed for all other roles */
+  href?: string;
+  /** Required for role="button" and role="checkbox",
+   *  discouraged for role="presentation", and disallowed for role="link" */
+  onClick?: TypeOnClick;
+  /** Indicates whether the card is selected.
+   *  Required for role="checkbox", disallowed for all other roles */
+  selected?: boolean;
+};
+
+export type TypeLinkCardProps = {
+  role: "link";
+  href: string;
+  onClick?: never;
+  selected?: never;
+};
+
+export type TypeButtonCardProps = {
+  role: "button";
+  href?: never;
+  onClick: TypeOnClick;
+  selected?: never;
+};
+
+export type TypeCheckboxCardProps = {
+  role: "checkbox";
+  href?: never;
+  onClick: TypeOnClick;
+  selected: boolean;
+};
+
+export type TypePresentationCardProps = {
+  role: "presentation";
+  href?: never;
+  /**
+   * **Warning:**
+   * `role='presentation'` is outside of the accessibility tree.
+   * Using an `onClick` that performs a user action should likely be used
+   * with `role='button'` instead.
+   */
+  onClick?: TypeOnClick;
+  selected?: never;
+};
+
 export type TypeCardConditions =
-  | {
-      role: "link";
-      href: string;
-      onClick?: never;
-    }
-  | {
-      role: "button";
-      href?: never;
-      onClick: TypeOnClick;
-    }
-  | {
-      role: "checkbox";
-      href?: never;
-      onClick: TypeOnClick;
-      selected: boolean;
-    }
-  | {
-      role: "presentation";
-      href?: never;
-      /**
-       * **Warning:**
-       * `role='presentation'` is outside of the accessiblity tree. Using an `onClick` that performs a user action should likely be used
-       * with `role='button'` instead.
-       */
-      onClick?: TypeOnClick;
-    };
-
-export type TypeCardProps = TypeCardConditions &
-  React.PropsWithChildren<TypeCardStyles>;
+  | TypeLinkCardProps
+  | TypeButtonCardProps
+  | TypeCheckboxCardProps
+  | TypePresentationCardProps;
+
+export type TypeCardProps = React.PropsWithChildren<TypeCardStyles> &
+  TypeGenericCard &
+  TypeCardConditions;
 
 export interface TypeCardArea extends TypeSharedCardSystemProps {
   $divider?: "top" | "bottom";

package/src/__tests__/CardTypes.typetest.tsx

@@ -64,6 +64,7 @@ function CardTypes() {
       <Card role="presentation" href="">
         This is a card.
       </Card>
+      {/* @ts-expect-error - test that selected is never allowed with role=presentation */}
       <Card role="presentation" disabled={true} selected={true}>
         This is a card.
       </Card>