From f2e95a858034abee7a9515b4cf2f31dbbcdc7f49 Mon Sep 17 00:00:00 2001 From: Michael Webber Date: Tue, 30 Jun 2026 15:20:14 -0700 Subject: [PATCH 01/94] fix(unity-react-core): card carousel updates --- .../src/js/card-bodies.js | 4 +-- .../.storybook/decorators.tsx | 2 +- .../components/CardCarousel/CardCarousel.jsx | 3 ++ .../CardCarousel/CardCarousel.stories.jsx | 30 +++++++++++++++---- .../ImageCarousel/ImageCarousel.jsx | 2 ++ .../ImageCarousel/ImageCarousel.stories.jsx | 25 ++++++++++++++-- .../BaseCarousel/components/BulletItems.jsx | 7 +++-- .../BaseCarousel/components/NavButtons.jsx | 7 +++-- .../BaseCarousel/components/NextButton.jsx | 6 ++-- .../BaseCarousel/components/PrevButton.jsx | 6 ++-- .../BaseCarousel/glide/glide.theme.scss | 18 +++++++++-- .../core/components/BaseCarousel/index.jsx | 12 ++++---- .../core/types/card-carousel-types.js | 1 + .../core/types/image-carousel-types.js | 1 + 14 files changed, 96 insertions(+), 28 deletions(-) diff --git a/packages/unity-bootstrap-theme/src/js/card-bodies.js b/packages/unity-bootstrap-theme/src/js/card-bodies.js index 685379c5db..051a6c381e 100644 --- a/packages/unity-bootstrap-theme/src/js/card-bodies.js +++ b/packages/unity-bootstrap-theme/src/js/card-bodies.js @@ -25,7 +25,7 @@ function initCardBodies() { cardBodies.forEach((cardBody, index) => { const paragraph = cardBody.querySelector("div p"); - const originalText = paragraph.textContent; + const originalText = paragraph?.textContent??''; const style = window.getComputedStyle(cardBody); // Get the number of lines allowed (line clamp), usually set via CSS like -webkit-line-clamp @@ -44,7 +44,7 @@ function initCardBodies() { const maxHeight = lineClamp * actualLineHeight; // Check if the paragraph exceeds the maximum allowed height - if (paragraph.offsetHeight >= maxHeight) { + if (paragraph && paragraph.offsetHeight && paragraph.offsetHeight >= maxHeight) { let visibleText = ""; const words = originalText.split(" "); let visibleWordCount = 0; diff --git a/packages/unity-react-core/.storybook/decorators.tsx b/packages/unity-react-core/.storybook/decorators.tsx index d745b5f526..8308b03839 100644 --- a/packages/unity-react-core/.storybook/decorators.tsx +++ b/packages/unity-react-core/.storybook/decorators.tsx @@ -75,7 +75,7 @@ export const withContainer: Decorator = ( window.unloading = true; // variable to prevent calling mount function before the page is reloaded // adding this timeout allows controls time to update - setTimeout(()=>{window.location.reload()}, 100); + setTimeout(()=>{window.location.reload()}, 500); } } diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx index e0da884a8e..91f0898857 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx @@ -86,6 +86,7 @@ const CardCarousel = ({ width = undefined, maxWidth = undefined, imageAutoSize = true, + bgColor = "", }) => { const perView = parseInt(`${perViewProp}`, 10); const [currentPerView, setCurrentPerView] = useState(perView); @@ -141,6 +142,7 @@ const CardCarousel = ({ hasNavButtons={activateGlideActions} isDraggable={activateGlideActions} hasShadow + bgColor={bgColor} /> ); }; @@ -167,6 +169,7 @@ CardCarousel.propTypes = { width: PropTypes.string, maxWidth: PropTypes.string, imageAutoSize: PropTypes.bool, + bgColor: PropTypes.string, }; export { CardCarousel }; diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx index 5a9b83aaf7..2fecb55649 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx @@ -4,10 +4,28 @@ import React from "react"; import { cardCarouselItems } from "../../../../../__mocks__/data/props-mock"; import { CardCarousel } from "./CardCarousel"; +const cardCarouselBgColorClassName = { + "None": "", + "Gray 1": "gray-faint-bg", + "Gray 2": "gray-light-bg", + "Gray 7": "gray-dark-bg" +}; + export default { title: "Components/Card Carousel", component: CardCarousel, - parameters: { controls: { disable: true } }, + parameters: { /*controls: { disable: true }*/ }, + argTypes: { + bgColor: { + name: "Background color of the section", + description: + "Background color is not applied to the component, but to the section wrapper.", + options: Object.keys(cardCarouselBgColorClassName), + control: { + type: "radio", + }, + }, + }, globals: { framework: "react", }, @@ -21,14 +39,16 @@ export default { */ const Wrapper = ({ children }) =>
{children}
; -export const ThreeItemCarousel = () => ( +export const ThreeItemCarousel = ({ bgColor }) => ( - + ); -export const TwoItemCarousel = () => ( +export const TwoItemCarousel = ({ bgColor }) => ( - + ); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx index 1d7fe9cc58..dd74a5aebc 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx @@ -75,6 +75,7 @@ const ImageCarousel = ({ width = undefined, maxWidth = undefined, imageAutoSize = true, + bgColor = "", }) => { if (!imageItems || imageItems.length === 0) { return null; @@ -95,6 +96,7 @@ const ImageCarousel = ({ hasPositionIndicators={activateGlideActions} hasNavButtons={activateGlideActions} isDraggable={activateGlideActions} + bgColor={bgColor} hasShadow /> ); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx index a51c750b32..38335dbcfa 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx @@ -4,6 +4,13 @@ import React from "react"; import { imageCarouselItems } from "../../../../../__mocks__/data/props-mock"; import { ImageCarousel } from "./ImageCarousel"; +const cardCarouselBgColorClassName = { + "None": "", + "Gray 1": "gray-faint-bg", + "Gray 2": "gray-light-bg", + "Gray 7": "gray-dark-bg" +}; + const mockItemWithContent = () => imageCarouselItems.map(item => ({ ...item, @@ -43,18 +50,30 @@ export default { perView: { control: { type: "range", min: 1, max: 3, step: 1 }, }, + bgColor: { + name: "Background color of the section", + description: + "Background color is not applied to the component, but to the section wrapper.", + options: Object.keys(cardCarouselBgColorClassName), + control: { + type: "radio", + }, + }, }, + parameters: { /*controls: { disable: true }*/ }, }; const maxWidth = "800px"; // const maxHeight = "600px"; /** - * @param {{ imageItems: Array, perView: number}} props + * @param {{ imageItems: Array, perView: number, bgColor: string}} props * @returns { JSX.Element} */ -const Wrapper = ({ imageItems, perView }) => ( +const Wrapper = ({ imageItems, perView, bgColor }) => (
( perView={perView} maxWidth={maxWidth} imageItems={imageItems} + // @ts-ignore + bgColor={cardCarouselBgColorClassName[bgColor]} />
); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx index 83216dce94..210a707c8f 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx @@ -41,10 +41,10 @@ BaseBulletItemContainer.propTypes = { /** * - * @param {{ buttonCount: number }} props + * @param {{ buttonCount: number, buttonTheme?: string }} props * @returns { JSX.Element } */ -const BulletItems = ({ buttonCount }) => { +const BulletItems = ({ buttonCount, buttonTheme = '' }) => { // Build out bullets markup based on buttonCount. const bulletItems = []; for (let i = 0; i < buttonCount; i += 1) { @@ -52,7 +52,7 @@ const BulletItems = ({ buttonCount }) => {