feat(Card)!: deprecate orientation prop

src/components/Card/Card.module.css

@@ -33,58 +33,9 @@
   box-shadow: var(--eds-box-shadow-xl);
 }
 
-/**
- * Card with horizontal contents.
- */
-.card--horizontal {
-  /* Change the orientation to display header, body, and footer in a row. */
-  flex-direction: row;
-}
-
-/**
- * Card header.
- */
-.card__header {
-  /* Add spacing in between the header and body. */
-  margin-bottom: var(--eds-size-2);
-
-  /**
-   * Card header within horizontal card
-   */
-  .card--horizontal & {
-    /**
-     * Remove default spacing for vertical card. Add margin right for spacing between header and body
-     */
-    margin-bottom: 0;
-    margin-right: var(--eds-size-2);
-  }
-}
-
 /**
  * Card body.
  */
 .card__body {
   flex: 1;
 }
-
-/**
- * Card footer
- */
-.card__footer {
-  /**
-   * Using margin-top since card__footer is optional and may not always exist. Putting
-   * margin-bottom on card__body would result in a gap if card__footer does not exist.
-   */
-  margin-top: var(--eds-size-2);
-
-  /**
-   * Card footer within horizontal card
-   */
-  .card--horizontal & {
-    /**
-     * Using margin left to space away from card body. Zero out margin top.
-     */
-    margin-top: 0;
-    margin-left: var(--eds-size-2);
-  }
-}

src/components/Card/Card.stories.tsx

@@ -49,11 +49,17 @@ type Args = React.ComponentProps<typeof Card> & {
   isLoading: boolean;
 };
 
+/**
+ * Cards come with structural containers for semantic grouping.
+ */
 export const Default: StoryObj<Args> = {};
 
+/**
+ * You can use utility classes to alter the layout and orientation of those structural containers. Here, we change to a horizontal orientation.
+ */
 export const Horizontal: StoryObj<Args> = {
   args: {
-    orientation: 'horizontal',
+    className: 'flex-row',
   },
 };
 

src/components/Card/Card.tsx

@@ -27,16 +27,6 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
    * **Default is `false`**.
    */
   isDragging?: boolean;
-  /**
-   * Orientation of a card
-   * - **vertical** renders the header, body, and footer in a columnar fashion (default)
-   * - **horizontal** renders the header, body, and footer in a horizontal fashion
-   * where the body is required but the header and footer are not
-   *
-   * **Default is `"vertical"`**.
-   * @deprecated
-   */
-  orientation?: 'vertical' | 'horizontal';
 }
 
 export interface CardSubComponentProps {
@@ -61,12 +51,10 @@ export const Card = ({
   children,
   elevation = 'none',
   isDragging = false,
-  orientation = 'vertical',
   ...other
 }: CardProps) => {
   const componentClassName = clsx(
     styles['card'],
-    orientation === 'horizontal' && styles['card--horizontal'],
     elevation === 'raised' && styles['card--raised'],
     elevation === 'dragging' && styles['card--dragging'],
     isDragging && styles['card--dragging'],

src/components/Card/__snapshots__/Card.test.ts.snap

@@ -81,7 +81,7 @@ exports[`<Card /> Horizontal story renders snapshot 1`] = `
   class="p-8"
 >
   <article
-    class="card card--horizontal"
+    class="card flex-row"
   >
     <header
       class="card__header"