feat(coachmark): Add default opening for not-stacked coachmarks

packages/ibm-products/src/components/Coachmark/Coachmark.test.js

@@ -203,4 +203,28 @@ describe(componentName, () => {
       `${pkg.prefix}--coachmark__dark`
     );
   });
+
+  it('Check coachmark can be open by default', () => {
+    renderCoachmark({
+      'data-testid': dataTestId,
+      isOpenByDefault: true,
+    });
+    const coachmarkContainer = screen.getByTestId(dataTestId);
+    const coachmarkButton =
+      coachmarkContainer.children[0].children[0].children[0];
+    const ariaExpanded = coachmarkButton.getAttribute('aria-expanded');
+    expect(ariaExpanded).toEqual('true');
+  });
+
+  it('Check stacked coachmark are always open by default', () => {
+    renderCoachmark({
+      'data-testid': dataTestId,
+      isOpenByDefault: false,
+      overlayKind: 'stacked',
+    });
+    const coachmarkContainer = screen.getByTestId(dataTestId);
+    const coachmarkButton = coachmarkContainer.children[0].children[0];
+    const ariaExpanded = coachmarkButton.getAttribute('aria-expanded');
+    expect(ariaExpanded).toEqual('true');
+  });
 });

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 is `overlayKind=slacked`.
+   */
+  isOpenByDefault: boolean;
 }
 
 /**
@@ -136,15 +142,15 @@ export let Coachmark = forwardRef<HTMLElement, CoachmarkProps>(
       portalTarget,
       target,
       theme = defaults.theme,
-
+      isOpenByDefault = defaults.isOpenByDefault,
       // Collect any other property values passed in.
       ...rest
     },
     ref
   ) => {
     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 });
@@ -407,6 +413,8 @@ Coachmark.propTypes = {
 
   /**
    * What kind or style of Coachmark to render.
+   * Note that stacked coachmark are opened by default, unless the property
+   * `isOpenByDefault` is defined.
    */
   overlayKind: PropTypes.oneOf(['tooltip', 'floating', 'stacked']),