chore: Mark Cards component as a funnel substep

cloudscape-design · Jul 24, 2023 · f6ec600 · f6ec600
1 parent e40efa4
commit f6ec600
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 53 deletions.
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
@@ -24,6 +24,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import { supportsStickyPosition } from '../internal/utils/dom';
 import { useInternalI18n } from '../internal/i18n/context';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 
 export { CardsProps };
 
@@ -126,57 +127,59 @@ const Cards = React.forwardRef(function <T = any>(
   }
 
   return (
-    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
-      <InternalContainer
-        header={
-          hasToolsHeader && (
-            <div
-              className={clsx(
-                styles.header,
-                isRefresh && styles['header-refresh'],
-                styles[`header-variant-${computedVariant}`]
-              )}
-            >
-              <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
-            </div>
-          )
-        }
-        footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
-        disableContentPaddings={true}
-        disableHeaderPaddings={computedVariant === 'full-page'}
-        variant={computedVariant === 'container' ? 'cards' : computedVariant}
-        __stickyHeader={stickyHeader}
-        __stickyOffset={stickyHeaderVerticalOffset}
-        __headerRef={headerRef}
-        __headerId={cardsHeaderId}
-        __darkHeader={computedVariant === 'full-page'}
-        __disableFooterDivider={true}
-      >
-        <div className={clsx(hasToolsHeader && styles['has-header'])}>
-          {!!renderAriaLive && !!firstIndex && (
-            <LiveRegion>
-              <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>
-            </LiveRegion>
-          )}
-          {status ?? (
-            <CardsList
-              items={items}
-              cardDefinition={cardDefinition}
-              trackBy={trackBy}
-              selectionType={selectionType}
-              columns={columns}
-              isItemSelected={isItemSelected}
-              getItemSelectionProps={getItemSelectionProps}
-              visibleSections={visibleSections}
-              updateShiftToggle={updateShiftToggle}
-              onFocus={onCardFocus}
-              ariaLabel={ariaLabels?.cardsLabel}
-              ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}
-            />
-          )}
-        </div>
-      </InternalContainer>
-    </div>
+    <AnalyticsFunnelSubStep>
+      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
+        <InternalContainer
+          header={
+            hasToolsHeader && (
+              <div
+                className={clsx(
+                  styles.header,
+                  isRefresh && styles['header-refresh'],
+                  styles[`header-variant-${computedVariant}`]
+                )}
+              >
+                <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
+              </div>
+            )
+          }
+          footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
+          disableContentPaddings={true}
+          disableHeaderPaddings={computedVariant === 'full-page'}
+          variant={computedVariant === 'container' ? 'cards' : computedVariant}
+          __stickyHeader={stickyHeader}
+          __stickyOffset={stickyHeaderVerticalOffset}
+          __headerRef={headerRef}
+          __headerId={cardsHeaderId}
+          __darkHeader={computedVariant === 'full-page'}
+          __disableFooterDivider={true}
+        >
+          <div className={clsx(hasToolsHeader && styles['has-header'])}>
+            {!!renderAriaLive && !!firstIndex && (
+              <LiveRegion>
+                <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>
+              </LiveRegion>
+            )}
+            {status ?? (
+              <CardsList
+                items={items}
+                cardDefinition={cardDefinition}
+                trackBy={trackBy}
+                selectionType={selectionType}
+                columns={columns}
+                isItemSelected={isItemSelected}
+                getItemSelectionProps={getItemSelectionProps}
+                visibleSections={visibleSections}
+                updateShiftToggle={updateShiftToggle}
+                onFocus={onCardFocus}
+                ariaLabel={ariaLabels?.cardsLabel}
+                ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}
+              />
+            )}
+          </div>
+        </InternalContainer>
+      </div>
+    </AnalyticsFunnelSubStep>
   );
 }) as CardsForwardRefType;
 

diff --git a/src/internal/analytics/__tests__/components/analytics-funnel.test.tsx b/src/internal/analytics/__tests__/components/analytics-funnel.test.tsx
@@ -14,6 +14,7 @@ import { useFunnel, useFunnelSubStep } from '../../../../../lib/components/inter
 import Button from '../../../../../lib/components/button';
 import FormField from '../../../../../lib/components/form-field';
 import Container from '../../../../../lib/components/container';
+import Cards from '../../../../../lib/components/cards';
 import ExpandableSection from '../../../../../lib/components/expandable-section';
 
 import { mockedFunnelInteractionId, mockFunnelMetrics } from '../mocks';
@@ -306,6 +307,7 @@ describe('AnalyticsFunnelStep', () => {
         <AnalyticsFunnelStep stepNumber={stepNumber} stepNameSelector={stepNameSelector}>
           Step Content
           <Container />
+          <Cards items={[]} cardDefinition={{}} />
           <ExpandableSection variant="container" />
         </AnalyticsFunnelStep>
       </AnalyticsFunnel>
@@ -317,7 +319,7 @@ describe('AnalyticsFunnelStep', () => {
       stepNumber,
       stepNameSelector,
       subStepAllSelector: expect.any(String),
-      totalSubSteps: 2,
+      totalSubSteps: 3,
     });
   });
 
@@ -330,6 +332,7 @@ describe('AnalyticsFunnelStep', () => {
         <AnalyticsFunnelStep stepNumber={stepNumber} stepNameSelector={stepNameSelector}>
           Step Content
           <Container />
+          <Cards items={[]} cardDefinition={{}} />
           <ExpandableSection variant="container" />
         </AnalyticsFunnelStep>
       </AnalyticsFunnel>
@@ -345,7 +348,7 @@ describe('AnalyticsFunnelStep', () => {
       stepNumber,
       stepNameSelector,
       subStepAllSelector: expect.any(String),
-      totalSubSteps: 2,
+      totalSubSteps: 3,
     });
   });