refactor: carousel to grid refactor

src/skills-builder/skills-builder-modal/skillsBuilderModal.scss

@@ -4,6 +4,10 @@
   }
 }
 
+.chip-max-width {
+  max-width: 18rem;
+}
+
 $breakpoint-medium: 992px;
 @media (max-width: $breakpoint-medium) {
   .med-min-height {
@@ -17,6 +21,10 @@ $breakpoint-medium: 992px;
   }
 }
 
-.chip-max-width {
-  max-width: 16rem;
+@media (min-width: $breakpoint-medium) {
+  .product-card {
+    .chip-max-width {
+      width: 100%;
+    }
+  }
 }

src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CardGrid } from '@edx/paragon';
+import RecommendationCard from './RecommendationCard';
+
+const ProductCardGrid = ({
+  productTypeName, productTypeRecommendations, handleCourseCardClick, isExpanded,
+}) => (
+  <CardGrid
+    columnSizes={{
+      xs: 12,
+      md: 6,
+      lg: 3,
+    }}
+    hasEqualColumnHeights
+  >
+    {isExpanded ? (
+      productTypeRecommendations?.map(rec => (
+        <RecommendationCard
+          key={rec.uuid}
+          handleCourseCardClick={handleCourseCardClick}
+          rec={rec}
+          productType={productTypeName}
+        />
+      ))
+    ) : (
+      productTypeRecommendations?.slice(0, 4).map(rec => (
+        <RecommendationCard
+          key={rec.uuid}
+          handleCourseCardClick={handleCourseCardClick}
+          rec={rec}
+          productType={productTypeName}
+        />
+      ))
+    )}
+  </CardGrid>
+);
+
+ProductCardGrid.propTypes = {
+  productTypeRecommendations: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  productTypeName: PropTypes.string.isRequired,
+  handleCourseCardClick: PropTypes.func.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+};
+
+export default ProductCardGrid;

src/skills-builder/skills-builder-modal/view-results/ProductTypeBanner.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, Icon, Stack, useMediaQuery, breakpoints,
+} from '@edx/paragon';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import {
+  DEGREE,
+  BOOT_CAMP,
+  EXECUTIVE_EDUCATION,
+  PROGRAM,
+  COURSE,
+} from './data/constants';
+
+const ProductTypeBanner = ({
+  productTypeName, jobName, numberResults, handleShowAllButtonClick, isExpanded,
+}) => {
+  const { formatMessage } = useIntl();
+  const isLarge = useMediaQuery({ minWidth: breakpoints.large.minWidth });
+
+  const normalizeProductTitle = () => {
+    switch (productTypeName) {
+      case COURSE:
+        return formatMessage(messages.productTypeCourseText);
+      case BOOT_CAMP:
+        return formatMessage(messages.productTypeBootCampText);
+      case EXECUTIVE_EDUCATION:
+        return formatMessage(messages.productTypeExecutiveEducationText);
+      case DEGREE:
+        return formatMessage(messages.productTypeDegreeText);
+      case PROGRAM:
+        return formatMessage(messages.productTypeProgramText);
+      default:
+        return '';
+    }
+  };
+
+  const renderTitle = () => {
+    const productTypeHeaderText = normalizeProductTitle(productTypeName);
+    return (
+      <h3>
+        {formatMessage(messages.productRecommendationsHeaderText, {
+          productTypeHeaderText,
+          jobName,
+        })}
+      </h3>
+    );
+  };
+
+  const infoStackProps = {
+    gap: 2,
+    direction: isLarge ? 'horizontal' : 'vertical',
+    className: 'justify-content-between align-items-start',
+  };
+
+  const showAllButtonProps = {
+    variant: 'link',
+    className: 'p-0',
+    onClick: () => handleShowAllButtonClick(productTypeName),
+    'aria-expanded': isExpanded ? 'true' : 'false',
+    'aria-controls': `card-grid-${productTypeName}`,
+    'data-testid': `${productTypeName}-expand-button`,
+  };
+
+  return (
+    <Stack>
+      {renderTitle(productTypeName)}
+      <Stack {...infoStackProps}>
+        <span>
+          {formatMessage(messages.productTypeBannerResults, {
+            numberResults,
+          })}
+        </span>
+        <Button {...showAllButtonProps}>
+          {isExpanded ? (
+            formatMessage(messages.productTypeBannerShowLess, {
+              numberResults,
+              arrowIcon: <Icon src={KeyboardArrowUp} />,
+            })
+          ) : (
+            formatMessage(messages.productTypeBannerShowAll, {
+              numberResults,
+              arrowIcon: <Icon src={KeyboardArrowDown} />,
+            })
+          )}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+ProductTypeBanner.propTypes = {
+  productTypeName: PropTypes.string.isRequired,
+  jobName: PropTypes.string.isRequired,
+  numberResults: PropTypes.number.isRequired,
+  handleShowAllButtonClick: PropTypes.func.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+};
+
+export default ProductTypeBanner;

src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx

@@ -20,7 +20,7 @@ const RecommendationCard = ({ rec, productType, handleCourseCardClick }) => {
   return (
     <Hyperlink destination={marketingUrl} target="_blank" showLaunchIcon={false}>
       <Card
-        className="carousel-card"
+        className="product-card"
         onClick={() => handleCourseCardClick(courseKey, productType)}
       >
         <Card.ImageCap

src/skills-builder/skills-builder-modal/view-results/RecommendationStack.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Stack } from '@edx/paragon';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import ProductCardGrid from './ProductCardGrid';
+import ProductTypeBanner from './ProductTypeBanner';
+import { extractProductKeys } from '../../utils/extractProductKeys';
+
+const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
+  const [showAllButtonClickedList, setShowButtonClickedList] = useState([]);
+  const { id: jobId, name: jobName, recommendations } = selectedRecommendations;
+
+  const handleCourseCardClick = (courseKey, productTypeName) => {
+    sendTrackEvent(
+      'edx.skills_builder.recommendation.click',
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        page: 'skills_builder',
+        courserun_key: courseKey,
+        product_type: productTypeName,
+        selected_recommendations: {
+          job_id: jobId,
+          job_name: jobName,
+          courserun_keys: extractProductKeys(recommendations),
+        },
+      },
+    );
+  };
+
+  const handleShowAllButtonClick = (type) => {
+    if (showAllButtonClickedList.includes(type)) {
+      setShowButtonClickedList(prev => prev.filter(item => item !== type));
+      return;
+    }
+    setShowButtonClickedList(prev => [...prev, type]);
+  };
+
+  return (
+    productTypeNames.map(productTypeName => {
+      const productTypeRecommendations = recommendations[productTypeName];
+      const numberResults = productTypeRecommendations?.length;
+      const isExpanded = showAllButtonClickedList.includes(productTypeName);
+
+      return (
+        <Stack gap={2.5} key={productTypeName}>
+          <ProductTypeBanner
+            productTypeName={productTypeName}
+            jobName={jobName}
+            numberResults={numberResults}
+            handleShowAllButtonClick={handleShowAllButtonClick}
+            isExpanded={isExpanded}
+          />
+          <ProductCardGrid
+            productTypeName={productTypeName}
+            productTypeRecommendations={productTypeRecommendations}
+            handleCourseCardClick={handleCourseCardClick}
+            isExpanded={isExpanded}
+          />
+        </Stack>
+      );
+    }));
+};
+
+export default RecommendationStack;