Uds 2036 - card arrangement component

packages/unity-bootstrap-theme/src/scss/extends/_card-arrangements.scss

@@ -66,7 +66,7 @@
   &-vertical {
     flex-direction: row;
 
-    & > .uds-card-arrangement-content-container {
+    &  .uds-card-arrangement-content-container {
       align-items: flex-start;
       justify-content: start;
       flex: 1;

packages/unity-bootstrap-theme/src/scss/extends/_ranking-cards.scss

@@ -1,5 +1,7 @@
 .card-ranking {
   height: 543px;
+  width: 282px;
+  max-width: 100%;
   position: relative;
   border: 1px solid $asu-gray-5;
   overflow: hidden;

packages/unity-react-core/src/components/CardArrangement/CardArrangement.jsx

@@ -0,0 +1,83 @@
+// @ts-check
+import PropTypes from "prop-types";
+
+import { Card } from "../Card/Card";
+import { RankingCard } from "../RankingCard/RankingCard";
+
+/**
+ * @typedef {import('../Card/Card').CardProps} IndividualCardProps
+ */
+
+/**
+ * @typedef {import('../RankingCard/RankingCard').RankingCardProps} IndividualRankingCardProps
+ */
+
+/**
+ * @typedef {Object} CardArrangementProps
+ * @property {(IndividualCardProps[] | IndividualRankingCardProps[])} cards - Array of card props objects to render
+ * @property {"card" | "ranking"} [cardType="card"] - Type of card to render
+ * @property {1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"} [columns] - Number of columns to display (optional)
+ */
+
+/**
+ * CardArrangement component renders multiple cards that wrap naturally based on
+ * their intrinsic min/max widths. The parent container determines the overall width,
+ * and cards will flow and wrap automatically to fit the available space.
+ *
+ * @param {CardArrangementProps} props
+ * @returns {JSX.Element}
+ */
+export const CardArrangement = ({ cards, cardType = "card", columns }) => {
+  if (!cards || cards.length === 0) {
+    return null;
+  }
+
+  /**
+   *
+   * @param {CardArrangementProps["columns"]} columns
+   * @returns
+   */
+  const getColumnClass = (columns) => {
+    const col = String(columns);
+      switch (col) {
+        case "2":
+          return "col-6";
+        case "3":
+          return "col-4";
+        case "4":
+          return "col-3";
+        default:
+          return "col";
+      }
+    };
+
+  const CardComponent = cardType === "ranking" ? RankingCard : Card;
+
+  return (
+    <div
+      className={`row`}
+      data-testid="card-arrangement"
+    >
+      {cards.map((cardProps, index) => {
+
+        return (
+          <div key={index} data-testid="uds-card-arrangement-content-container" className={`${ cardProps.horizontal === true ? "" : getColumnClass(columns)} mb-4`}>
+            <CardComponent {...cardProps} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+CardArrangement.propTypes = {
+  /**
+   * Array of card objects to render. Each object should contain props for the Card or RankingCard component.
+   * Cards will wrap naturally based on their intrinsic min/max widths.
+   */
+  cards: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Type of card to render - either "card" (default) or "ranking"
+   */
+  cardType: PropTypes.oneOf(["card", "ranking"]),
+};