diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js index 0251d773dc..5ec8084cb6 100644 --- a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js +++ b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js @@ -61,6 +61,13 @@ const renderCoachmark = ({ ...rest } = {}, children = childrenContent) => ); +const isCoachmarkVisible = () => { + const coachmarkContainer = screen.getByTestId(dataTestId); + const coachmarkButton = coachmarkContainer.getElementsByTagName('button')[0]; + const ariaExpanded = coachmarkButton.getAttribute('aria-expanded'); + return ariaExpanded === 'true'; +}; + describe(componentName, () => { it('renders a component Coachmark', () => { renderCoachmark({ 'data-testid': dataTestId }); @@ -203,4 +210,12 @@ describe(componentName, () => { `${pkg.prefix}--coachmark__dark` ); }); + + it('Check coachmark can be open by default', () => { + renderCoachmark({ + 'data-testid': dataTestId, + isOpenByDefault: true, + }); + expect(isCoachmarkVisible()).toBeTruthy(); + }); }); diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.tsx b/packages/ibm-products/src/components/Coachmark/Coachmark.tsx index d4c012e538..56796d415d 100644 --- a/packages/ibm-products/src/components/Coachmark/Coachmark.tsx +++ b/packages/ibm-products/src/components/Coachmark/Coachmark.tsx @@ -38,6 +38,7 @@ const defaults = { onClose: () => {}, overlayKind: 'tooltip', theme: 'light', + isOpenByDefault: false, }; export interface CoachmarkProps { @@ -113,6 +114,11 @@ export interface CoachmarkProps { * Determines the theme of the component. */ theme?: 'light' | 'dark'; + /** + * Determines if the coachmark is open by default. + * Does nothing if `overlayKind=stacked`. + */ + isOpenByDefault?: boolean; } /** @@ -136,7 +142,7 @@ export let Coachmark = forwardRef( portalTarget, target, theme = defaults.theme, - + isOpenByDefault = defaults.isOpenByDefault, // Collect any other property values passed in. ...rest }, @@ -144,7 +150,7 @@ export let Coachmark = forwardRef( ) => { const isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP; const isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED; - const [isOpen, setIsOpen] = useState(isStacked); + const [isOpen, setIsOpen] = useState(isStacked || isOpenByDefault); const [shouldResetPosition, setShouldResetPosition] = useState(false); const [targetRect, setTargetRect] = useState(); const [targetOffset, setTargetOffset] = useState({ x: 0, y: 0 }); @@ -396,6 +402,12 @@ Coachmark.propTypes = { */ className: PropTypes.string, + /** + * Determines if the coachmark is open by default. + * Does nothing if `overlayKind=stacked`. + */ + isOpenByDefault: PropTypes.bool, + /** * Function to call when the Coachmark closes. */