From 8d18da71681fa5f0b77818e8c5b137e2484df7cf Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 15:19:30 -0600 Subject: [PATCH 1/2] chore: react imports cleanup 2 --- babel.config.json | 2 +- src/Card/BaseCard.tsx | 8 +++++--- src/Card/CardBody.jsx | 4 ++-- src/Card/CardCarousel/CardCarousel.jsx | 1 - src/Card/CardCarousel/CardCarouselControls.jsx | 2 +- src/Card/CardCarousel/CardCarouselHeader.jsx | 2 +- src/Card/CardCarousel/CardCarouselItems.jsx | 2 +- src/Card/CardCarousel/CardCarouselProvider.jsx | 2 +- src/Card/CardCarousel/CardCarouselSubtitle.jsx | 1 - src/Card/CardCarousel/CardCarouselTitle.jsx | 1 - src/Card/CardCarousel/tests/CardCarousel.test.jsx | 1 - .../CardCarousel/tests/CardCarouselControls.test.jsx | 1 - src/Card/CardContext.jsx | 1 + src/Card/CardDeck.jsx | 4 ++-- src/Card/CardDivider.jsx | 4 ++-- src/Card/CardFooter.jsx | 4 ++-- src/Card/CardGrid.jsx | 4 ++-- src/Card/CardHeader.jsx | 11 +++++++---- src/Card/CardImageCap.jsx | 4 ++-- src/Card/CardSection.jsx | 4 ++-- src/Card/CardStatus.jsx | 4 ++-- src/Card/index.jsx | 5 +++-- src/Card/tests/BaseCard.test.jsx | 1 - src/Card/tests/CardBody.test.jsx | 1 - src/Card/tests/CardContext.test.jsx | 1 - src/Card/tests/CardDeck.test.jsx | 1 - src/Card/tests/CardDivider.test.jsx | 1 - src/Card/tests/CardFooter.test.jsx | 1 - src/Card/tests/CardGrid.test.jsx | 1 - src/Card/tests/CardHeader.test.jsx | 1 - src/Card/tests/CardImageCap.test.jsx | 1 - src/Card/tests/CardSection.test.jsx | 1 - src/Card/tests/CardStatus.test.jsx | 1 - 33 files changed, 37 insertions(+), 46 deletions(-) diff --git a/babel.config.json b/babel.config.json index 6815ebd872..e9fb16d200 100644 --- a/babel.config.json +++ b/babel.config.json @@ -8,7 +8,7 @@ "test": { "presets": [ ["@babel/preset-env", {}], - ["@babel/preset-react", { "useSpread": true } ], + ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], "@babel/preset-typescript" ] } diff --git a/src/Card/BaseCard.tsx b/src/Card/BaseCard.tsx index d1c7eccebf..7dbc699c3a 100644 --- a/src/Card/BaseCard.tsx +++ b/src/Card/BaseCard.tsx @@ -1,4 +1,6 @@ -import React from 'react'; +import type { ReactNode } from 'react'; +// React import needed to support JSX outside functions +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -34,11 +36,11 @@ interface Props extends BsPropsWithAs { borderColor?: ColorVariant; hasBody?: boolean; className?: string; - children: React.ReactNode; + children: ReactNode; } type BaseCardType = ComponentWithAsProp<'div', Props>; -const BaseCard : BaseCardType = React.forwardRef( +const BaseCard : BaseCardType = forwardRef( ( { prefix, diff --git a/src/Card/CardBody.jsx b/src/Card/CardBody.jsx index c21a87f36e..29a695db1c 100644 --- a/src/Card/CardBody.jsx +++ b/src/Card/CardBody.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -const CardBody = React.forwardRef(({ className, children, ...rest }, ref) => ( +const CardBody = forwardRef(({ className, children, ...rest }, ref) => (
{children}
diff --git a/src/Card/CardCarousel/CardCarousel.jsx b/src/Card/CardCarousel/CardCarousel.jsx index a89e1c94ad..291b4281e4 100644 --- a/src/Card/CardCarousel/CardCarousel.jsx +++ b/src/Card/CardCarousel/CardCarousel.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { OverflowScroll } from '../../OverflowScroll'; import CardCarouselProvider from './CardCarouselProvider'; diff --git a/src/Card/CardCarousel/CardCarouselControls.jsx b/src/Card/CardCarousel/CardCarouselControls.jsx index ef85cb46f4..327f94946f 100644 --- a/src/Card/CardCarousel/CardCarouselControls.jsx +++ b/src/Card/CardCarousel/CardCarouselControls.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import { useIntl } from 'react-intl'; import Stack from '../../Stack'; import IconButton from '../../IconButton'; diff --git a/src/Card/CardCarousel/CardCarouselHeader.jsx b/src/Card/CardCarousel/CardCarouselHeader.jsx index b6f93721f4..852bb4261d 100644 --- a/src/Card/CardCarousel/CardCarouselHeader.jsx +++ b/src/Card/CardCarousel/CardCarouselHeader.jsx @@ -1,4 +1,4 @@ -import React, { useContext, isValidElement } from 'react'; +import { useContext, isValidElement } from 'react'; import PropTypes from 'prop-types'; import CardCarouselTitle from './CardCarouselTitle'; import CardCarouselSubtitle from './CardCarouselSubtitle'; diff --git a/src/Card/CardCarousel/CardCarouselItems.jsx b/src/Card/CardCarousel/CardCarouselItems.jsx index 7f70d5cc1e..10a50c6cc3 100644 --- a/src/Card/CardCarousel/CardCarouselItems.jsx +++ b/src/Card/CardCarousel/CardCarouselItems.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import PropTypes from 'prop-types'; import CardDeck from '../CardDeck'; import { CardCarouselContext } from './CardCarouselProvider'; diff --git a/src/Card/CardCarousel/CardCarouselProvider.jsx b/src/Card/CardCarousel/CardCarouselProvider.jsx index 8d00559e21..8ea27c7e46 100644 --- a/src/Card/CardCarousel/CardCarouselProvider.jsx +++ b/src/Card/CardCarousel/CardCarouselProvider.jsx @@ -1,4 +1,4 @@ -import React, { createContext, useContext, useMemo } from 'react'; +import { createContext, useContext, useMemo } from 'react'; import PropTypes from 'prop-types'; import { OverflowScrollContext } from '../../OverflowScroll'; diff --git a/src/Card/CardCarousel/CardCarouselSubtitle.jsx b/src/Card/CardCarousel/CardCarouselSubtitle.jsx index 2bc84b238a..d0677cdb41 100644 --- a/src/Card/CardCarousel/CardCarouselSubtitle.jsx +++ b/src/Card/CardCarousel/CardCarouselSubtitle.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/Card/CardCarousel/CardCarouselTitle.jsx b/src/Card/CardCarousel/CardCarouselTitle.jsx index a7ac7ff0b9..30b5e417be 100644 --- a/src/Card/CardCarousel/CardCarouselTitle.jsx +++ b/src/Card/CardCarousel/CardCarouselTitle.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/Card/CardCarousel/tests/CardCarousel.test.jsx b/src/Card/CardCarousel/tests/CardCarousel.test.jsx index f4d0fb21b9..9a52622cb0 100644 --- a/src/Card/CardCarousel/tests/CardCarousel.test.jsx +++ b/src/Card/CardCarousel/tests/CardCarousel.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import renderer from 'react-test-renderer'; import { v4 as uuidv4 } from 'uuid'; diff --git a/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx index a711a9e83b..65ca7d34ab 100644 --- a/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx +++ b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/src/Card/CardContext.jsx b/src/Card/CardContext.jsx index 82da46c3a5..39bd479244 100644 --- a/src/Card/CardContext.jsx +++ b/src/Card/CardContext.jsx @@ -1,3 +1,4 @@ +// React import needed to support JSX outside functions import React, { createContext } from 'react'; import PropTypes from 'prop-types'; diff --git a/src/Card/CardDeck.jsx b/src/Card/CardDeck.jsx index 7780b2034d..b1e8908b9f 100644 --- a/src/Card/CardDeck.jsx +++ b/src/Card/CardDeck.jsx @@ -1,11 +1,11 @@ -import React, { Children, useMemo } from 'react'; +import { forwardRef, Children, useMemo } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import { useOverflowScrollItems } from '../OverflowScroll'; -const CardDeck = React.forwardRef(({ +const CardDeck = forwardRef(({ className, children, columnSizes, diff --git a/src/Card/CardDivider.jsx b/src/Card/CardDivider.jsx index 0c487336b3..92d680f07a 100644 --- a/src/Card/CardDivider.jsx +++ b/src/Card/CardDivider.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -const CardDivider = React.forwardRef(({ className, ...props }, ref) => ( +const CardDivider = forwardRef(({ className, ...props }, ref) => (
)); diff --git a/src/Card/CardFooter.jsx b/src/Card/CardFooter.jsx index ec2fca5dff..b8748f0760 100644 --- a/src/Card/CardFooter.jsx +++ b/src/Card/CardFooter.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { forwardRef, useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Skeleton from 'react-loading-skeleton'; @@ -6,7 +6,7 @@ import CardContext from './CardContext'; const IS_LOADING_HEIGHT_VALUE = 18; -const CardFooter = React.forwardRef(({ +const CardFooter = forwardRef(({ children, className, isStacked, diff --git a/src/Card/CardGrid.jsx b/src/Card/CardGrid.jsx index b60617b3a2..f5255f7379 100644 --- a/src/Card/CardGrid.jsx +++ b/src/Card/CardGrid.jsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import { Children, useMemo } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import Row from 'react-bootstrap/Row'; @@ -11,7 +11,7 @@ function CardGrid({ hasEqualColumnHeights, }) { const cards = useMemo( - () => React.Children.map(children, (card) => ( + () => Children.map(children, (card) => ( { - if (React.isValidElement(Action)) { + if (isValidElement(Action)) { const { children } = Action.props; const addtlActionProps = { size, children: Array.isArray(children) ? children.map(cloneActions) : cloneActions(children), }; - return React.cloneElement(Action, addtlActionProps); + return cloneElement(Action, addtlActionProps); } return Action; diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx index eb27d912b2..6087f147c2 100644 --- a/src/Card/CardImageCap.jsx +++ b/src/Card/CardImageCap.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import { forwardRef, useContext, useState } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Skeleton from 'react-loading-skeleton'; @@ -8,7 +8,7 @@ import { cardSrcFallbackImg } from './CardFallbackDefaultImage'; const SKELETON_HEIGHT_VALUE = 140; const LOGO_SKELETON_HEIGHT_VALUE = 41; -const CardImageCap = React.forwardRef(({ +const CardImageCap = forwardRef(({ src, fallbackSrc, srcAlt, diff --git a/src/Card/CardSection.jsx b/src/Card/CardSection.jsx index d5cc2c35a7..d4e962af93 100644 --- a/src/Card/CardSection.jsx +++ b/src/Card/CardSection.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { forwardRef, useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Skeleton from 'react-loading-skeleton'; @@ -6,7 +6,7 @@ import CardContext from './CardContext'; const SKELETON_HEIGHT_VALUE = 100; -const CardSection = React.forwardRef(({ +const CardSection = forwardRef(({ className, children, title, diff --git a/src/Card/CardStatus.jsx b/src/Card/CardStatus.jsx index 89b56a0b59..d46669ad9f 100644 --- a/src/Card/CardStatus.jsx +++ b/src/Card/CardStatus.jsx @@ -1,11 +1,11 @@ -import React, { useContext } from 'react'; +import { forwardRef, useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Skeleton from 'react-loading-skeleton'; import Icon from '../Icon'; import CardContext from './CardContext'; -const CardStatus = React.forwardRef(({ +const CardStatus = forwardRef(({ className, children, variant, diff --git a/src/Card/index.jsx b/src/Card/index.jsx index 07dc4cf06a..a5e5a49aa8 100644 --- a/src/Card/index.jsx +++ b/src/Card/index.jsx @@ -1,4 +1,5 @@ -import React from 'react'; +// React import needed to support JSX outside functions +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import BaseCard from './BaseCard'; @@ -14,7 +15,7 @@ import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps'; export const CARD_VARIANTS = ['light', 'dark', 'muted']; -const Card = React.forwardRef(({ +const Card = forwardRef(({ orientation, isLoading, className, diff --git a/src/Card/tests/BaseCard.test.jsx b/src/Card/tests/BaseCard.test.jsx index 2558a943af..8b79b6e86b 100644 --- a/src/Card/tests/BaseCard.test.jsx +++ b/src/Card/tests/BaseCard.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import BaseCard from '../BaseCard'; diff --git a/src/Card/tests/CardBody.test.jsx b/src/Card/tests/CardBody.test.jsx index 0521acd6ad..2d76f5dd76 100644 --- a/src/Card/tests/CardBody.test.jsx +++ b/src/Card/tests/CardBody.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; import CardBody from '../CardBody'; diff --git a/src/Card/tests/CardContext.test.jsx b/src/Card/tests/CardContext.test.jsx index 580d3b6995..a66f41596b 100644 --- a/src/Card/tests/CardContext.test.jsx +++ b/src/Card/tests/CardContext.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; import { CardContextProvider } from '../CardContext'; diff --git a/src/Card/tests/CardDeck.test.jsx b/src/Card/tests/CardDeck.test.jsx index 1884d00ffa..72070453ec 100644 --- a/src/Card/tests/CardDeck.test.jsx +++ b/src/Card/tests/CardDeck.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { v4 as uuidv4 } from 'uuid'; import CardDeck from '../CardDeck'; diff --git a/src/Card/tests/CardDivider.test.jsx b/src/Card/tests/CardDivider.test.jsx index 78c772b233..0ec27f0e8f 100644 --- a/src/Card/tests/CardDivider.test.jsx +++ b/src/Card/tests/CardDivider.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import CardDivider from '../CardDivider'; diff --git a/src/Card/tests/CardFooter.test.jsx b/src/Card/tests/CardFooter.test.jsx index f45f9647c9..32ac459abd 100644 --- a/src/Card/tests/CardFooter.test.jsx +++ b/src/Card/tests/CardFooter.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render } from '@testing-library/react'; import Button from '../../Button'; diff --git a/src/Card/tests/CardGrid.test.jsx b/src/Card/tests/CardGrid.test.jsx index 4ac44c0c39..f0c55d9a59 100644 --- a/src/Card/tests/CardGrid.test.jsx +++ b/src/Card/tests/CardGrid.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import CardGrid from '../CardGrid'; import Card from '..'; diff --git a/src/Card/tests/CardHeader.test.jsx b/src/Card/tests/CardHeader.test.jsx index 6f13b70929..a6d6bd4e5a 100644 --- a/src/Card/tests/CardHeader.test.jsx +++ b/src/Card/tests/CardHeader.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render } from '@testing-library/react'; import Button from '../../Button'; diff --git a/src/Card/tests/CardImageCap.test.jsx b/src/Card/tests/CardImageCap.test.jsx index f0ef086d03..57b5c8e73c 100644 --- a/src/Card/tests/CardImageCap.test.jsx +++ b/src/Card/tests/CardImageCap.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render, fireEvent, screen } from '@testing-library/react'; import CardImageCap from '../CardImageCap'; diff --git a/src/Card/tests/CardSection.test.jsx b/src/Card/tests/CardSection.test.jsx index 8940bd1360..336c21e5cf 100644 --- a/src/Card/tests/CardSection.test.jsx +++ b/src/Card/tests/CardSection.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render } from '@testing-library/react'; import Button from '../../Button'; diff --git a/src/Card/tests/CardStatus.test.jsx b/src/Card/tests/CardStatus.test.jsx index db4d7425c7..8e0571a06d 100644 --- a/src/Card/tests/CardStatus.test.jsx +++ b/src/Card/tests/CardStatus.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render, screen } from '@testing-library/react'; From a761cffaa6b51c4b7098bf5202e887c4d406915e Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 15:57:41 -0600 Subject: [PATCH 2/2] test: adding unit test to increase code coverage --- babel.config.json | 2 +- src/Card/tests/CardHeader.test.jsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/babel.config.json b/babel.config.json index e9fb16d200..f2421ecf77 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,7 +1,7 @@ { "presets": [ ["@babel/preset-env", { "modules": false } ], - ["@babel/preset-react", { "useSpread": true } ], + ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], "@babel/preset-typescript" ], "env": { diff --git a/src/Card/tests/CardHeader.test.jsx b/src/Card/tests/CardHeader.test.jsx index a6d6bd4e5a..45cbb7efdc 100644 --- a/src/Card/tests/CardHeader.test.jsx +++ b/src/Card/tests/CardHeader.test.jsx @@ -5,10 +5,10 @@ import CardHeader from '../CardHeader'; import CardContext from '../CardContext'; // eslint-disable-next-line react/prop-types -function CardHeaderWrapper({ isLoading }) { +function CardHeaderWrapper({ isLoading, size = 'md', actions = null }) { return ( - + ); } @@ -47,4 +47,10 @@ describe('', () => { const { container } = render(); expect(container.querySelector('.pgn__card-header-loader')).toBeTruthy(); }); + + it('renders with size sm and actions', () => { + const actions = <>Actions; + const { getByText } = render(); + expect(getByText('Actions')).toBeInTheDocument(); + }); });