From 1c5508bdd71f5d580df42fab985cf21590b8079c Mon Sep 17 00:00:00 2001 From: david ornelas Date: Tue, 20 Jan 2026 13:07:28 -0700 Subject: [PATCH 1/5] feat(unity-react-core): add new content spotlight card --- .../ContentSpotlight/ContentSpotlight.jsx | 105 ++++++++++++++++++ .../ContentSpotlight.stories.jsx | 39 +++++++ .../ContentSpotlight.test.jsx | 39 +++++++ .../src/components/ContentSpotlight/init.js | 1 + .../unity-react-core/src/components/index.js | 1 + .../unity-react-core/src/core/utils/index.js | 7 ++ 6 files changed, 192 insertions(+) create mode 100644 packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.jsx create mode 100644 packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx create mode 100644 packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.test.jsx create mode 100644 packages/unity-react-core/src/components/ContentSpotlight/init.js diff --git a/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.jsx b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.jsx new file mode 100644 index 000000000..6b02ea5ae --- /dev/null +++ b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.jsx @@ -0,0 +1,105 @@ +// @ts-check +import PropTypes from "prop-types"; +import React from "react"; +import { sanitizeDangerousMarkup } from "@asu/shared"; + +/** + * @typedef {Object} ContentSpotlightProps + * @property {string} backgroundImage - URL of the background image + * @property {string|string[]} [icon] - FontAwesome icon name (e.g. 'graduation-cap') or array ['fab', 'icon-name'] + * @property {string|React.ReactNode} title - Main title + * @property {string} [highlightText] - Text to highlight in gold within the title. + * @property {string} [description] - Body text + * @property {Object} [button] - Button config + * @property {string} button.label - Button text + * @property {string} button.href - Button URL + * @property {string} button.color - Button color + */ + +/** + * @param {ContentSpotlightProps} props + * @returns {JSX.Element} + */ +export const ContentSpotlight = ({ + backgroundImage, + icon, + title, + highlightText, + description, + button, +}) => { + // Icon rendering helper + const renderIcon = () => { + if (!icon) return null; + let iconClasses = ""; + if (Array.isArray(icon)) { + iconClasses = icon.join(" "); + } else { + iconClasses = icon.includes(" ") ? icon : `fas fa-${icon}`; + } + + return