feat: Use i18n provider messages in tutorial panel

src/__tests__/required-props-for-components.ts

@@ -86,8 +86,8 @@ const defaultProps: Record<string, Record<string, any>> = {
   },
   'tutorial-panel': {
     i18nStrings: {
-      stepTitle: () => '',
-      labelTotalSteps: () => '',
+      tutorialListDescription: '',
+      labelLearnMoreExternalIcon: '',
     },
     tutorials: [],
   },

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -35239,27 +35239,28 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
     },
     {
       "description": "An object containing all the necessary localized strings required by the component.",
+      "i18nTag": true,
       "inlineType": {
         "name": "TutorialPanelProps.I18nStrings",
         "properties": [
           {
             "name": "completionScreenTitle",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "dismissTutorialButtonText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "feedbackLinkText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "labelExitTutorial",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
@@ -35274,29 +35275,29 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
           },
           {
             "inlineType": {
-              "name": "{ pending: string; 'in-progress': string; success: string; }",
+              "name": "{ pending?: string | undefined; 'in-progress'?: string | undefined; success?: string | undefined; }",
               "properties": [
                 {
                   "name": "in-progress",
-                  "optional": false,
+                  "optional": true,
                   "type": "string",
                 },
                 {
                   "name": "pending",
-                  "optional": false,
+                  "optional": true,
                   "type": "string",
                 },
                 {
                   "name": "success",
-                  "optional": false,
+                  "optional": true,
                   "type": "string",
                 },
               ],
               "type": "object",
             },
             "name": "labelsTaskStatus",
-            "optional": false,
-            "type": "{ pending: string; 'in-progress': string; success: string; }",
+            "optional": true,
+            "type": "{ pending?: string | undefined; 'in-progress'?: string | undefined; success?: string | undefined; }",
           },
           {
             "inlineType": {
@@ -35311,8 +35312,8 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
               "type": "function",
             },
             "name": "labelTotalSteps",
-            "optional": false,
-            "type": "(totalStepCount: number) => string",
+            "optional": true,
+            "type": "((totalStepCount: number) => string)",
           },
           {
             "name": "labelTutorialListDownloadLink",
@@ -35321,22 +35322,22 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
           },
           {
             "name": "learnMoreLinkText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "loadingText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "restartTutorialButtonText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "startTutorialButtonText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
@@ -35356,8 +35357,8 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
               "type": "function",
             },
             "name": "stepTitle",
-            "optional": false,
-            "type": "(stepIndex: number, stepTitle: string) => string",
+            "optional": true,
+            "type": "((stepIndex: number, stepTitle: string) => string)",
           },
           {
             "inlineType": {
@@ -35376,12 +35377,12 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
               "type": "function",
             },
             "name": "taskTitle",
-            "optional": false,
-            "type": "(taskIndex: number, taskTitle: string) => string",
+            "optional": true,
+            "type": "((taskIndex: number, taskTitle: string) => string)",
           },
           {
             "name": "tutorialCompletedText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
@@ -35391,12 +35392,12 @@ exports[`Components definition for tutorial-panel matches the snapshot: tutorial
           },
           {
             "name": "tutorialListDownloadLinkText",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
           {
             "name": "tutorialListTitle",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
         ],

src/tutorial-panel/__tests__/tutorial-panel.test.tsx

@@ -7,6 +7,8 @@ import {
   HotspotContext as HotspotContextType,
   hotspotContext as HotspotContext,
 } from '../../../lib/components/annotation-context/context';
+import { I18nProvider } from '../../../lib/components/i18n';
+import messages from '../../../lib/components/i18n/messages/all.en';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import TutorialPanel, { TutorialPanelProps } from '../../../lib/components/tutorial-panel';
 import { getTutorials, i18nStrings } from './data';
@@ -335,3 +337,62 @@ describe('URL sanitization', () => {
     });
   });
 });
+
+describe('i18n', () => {
+  const requiredI18nStrings: TutorialPanelProps.I18nStrings = {
+    tutorialListDescription: 'DESCRIPTION',
+    labelLearnMoreExternalIcon: 'EXTERNAL_ICON',
+  };
+
+  function renderWithProvider(
+    props: Pick<TutorialPanelProps, 'i18nStrings'>,
+    contextProps?: Partial<HotspotContextType>
+  ) {
+    const tutorials = getTutorials();
+    const { container } = render(
+      <I18nProvider messages={[messages]} locale="en">
+        <HotspotContext.Provider value={getContext(contextProps)}>
+          <TutorialPanel tutorials={tutorials} downloadUrl="DOWNLOAD_URL" onFeedbackClick={() => {}} {...props} />
+        </HotspotContext.Provider>
+      </I18nProvider>
+    );
+    return { wrapper: createWrapper(container).findTutorialPanel()!, tutorials };
+  }
+
+  test('falls back to provider strings in the tutorial list', () => {
+    const { wrapper } = renderWithProvider({
+      i18nStrings: { ...requiredI18nStrings, tutorialListTitle: 'CUSTOM_TITLE' },
+    });
+
+    expect(wrapper.getElement()).toHaveTextContent('CUSTOM_TITLE');
+    expect(wrapper.findDownloadLink()!.getElement()).toHaveTextContent('Download PDF version');
+    expect(wrapper.findDownloadLink()!.getElement()).toHaveAttribute(
+      'aria-label',
+      'Download PDF version of this tutorial'
+    );
+    const tutorial = wrapper.findTutorials()[0];
+    expect(tutorial.findLearnMoreLink()!.getElement()).toHaveTextContent('Learn more');
+    expect(tutorial.findStartButton()!.getElement()).toHaveTextContent('Start tutorial');
+  });
+
+  test('falls back to provider strings in the tutorial detail view', () => {
+    const tutorial = getTutorials()[0];
+    const { wrapper } = renderWithProvider({ i18nStrings: requiredI18nStrings }, { currentTutorial: tutorial });
+
+    const task = wrapper.findTaskList()[0];
+    expect(task.findTitle().getElement()).toHaveTextContent('Task 1: FIRST_TASK_TEST');
+    expect(task.findStepsTitle().getElement()).toHaveTextContent('Total steps: 1');
+    expect(task.findSteps()[0].getElement()).toHaveTextContent('Step 1: FIRST_STEP_TEST');
+    expect(wrapper.findDismissButton()!.getElement()).toHaveTextContent('Dismiss tutorial');
+  });
+
+  test('falls back to provider strings in the completion screen', () => {
+    const tutorial = { ...getTutorials()[0], completed: true };
+    const { wrapper } = renderWithProvider({ i18nStrings: requiredI18nStrings }, { currentTutorial: tutorial });
+
+    expect(wrapper.findCompletionScreenTitle()!.getElement()).toHaveTextContent(
+      'Congratulations! You completed the tutorial.'
+    );
+    expect(wrapper.findFeedbackLink()!.getElement()).toHaveTextContent('Feedback');
+  });
+});

src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx

@@ -14,7 +14,7 @@ import styles from './styles.css.js';
 interface CongratulationScreenProps {
   children: React.ReactNode;
   onFeedbackClick?: () => void;
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
 }
 
 export function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps) {

src/tutorial-panel/components/tutorial-detail-view/index.tsx

@@ -26,7 +26,7 @@ export default function TutorialDetailView({
   onExitTutorial: HotspotContext['onExitTutorial'];
   currentStepIndex: HotspotContext['currentStepIndex'];
   onFeedbackClick: TutorialPanelProps['onFeedbackClick'];
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
 }) {
   const isRefresh = useVisualRefresh();
 

src/tutorial-panel/components/tutorial-detail-view/task-list.tsx

@@ -16,7 +16,7 @@ interface TaskListProps {
   tasks: ReadonlyArray<TutorialPanelProps.Task>;
   onExitTutorial: () => void;
   currentGlobalStepIndex: HotspotContext['currentStepIndex'];
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
 }
 
 export function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps) {

src/tutorial-panel/components/tutorial-detail-view/task.tsx

@@ -27,7 +27,7 @@ interface TaskProps {
   currentTaskIndex: number;
   expanded: boolean;
   onToggleExpand: (step: number) => void;
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
 }
 
 export function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18nStrings }: TaskProps) {
@@ -44,7 +44,7 @@ export function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpa
           <InternalStatusIndicator
             __size="inherit"
             type={statusIndicatorType}
-            iconAriaLabel={i18nStrings.labelsTaskStatus[statusIndicatorType]}
+            iconAriaLabel={i18nStrings.labelsTaskStatus?.[statusIndicatorType]}
             className={styles['task-title--status']}
           />
 
@@ -54,22 +54,22 @@ export function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpa
             fontSize="heading-s"
             color={taskIndex < currentTaskIndex ? 'text-status-success' : 'text-status-inactive'}
           >
-            {i18nStrings.taskTitle(taskIndex, task.title)}
+            {i18nStrings.taskTitle?.(taskIndex, task.title)}
           </InternalBox>
         </div>
 
         <div className={styles['expandable-section-wrapper']}>
           <InternalExpandableSection
             header={
               <span className={styles['expandable-section-header']}>
-                {i18nStrings.labelTotalSteps(task.steps.length)}
+                {i18nStrings.labelTotalSteps?.(task.steps.length)}
               </span>
             }
             expanded={expanded}
             onChange={onExpandChange}
             headerAriaLabel={joinStrings(
-              i18nStrings.taskTitle(taskIndex, task.title),
-              i18nStrings.labelTotalSteps(task.steps.length)
+              i18nStrings.taskTitle?.(taskIndex, task.title),
+              i18nStrings.labelTotalSteps?.(task.steps.length)
             )}
           >
             <ol className={styles['step-list']}>
@@ -81,7 +81,7 @@ export function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpa
                     padding={{ left: 'l' }}
                     className={styles['step-title']}
                   >
-                    {i18nStrings.stepTitle(stepIndex, step.title)}
+                    {i18nStrings.stepTitle?.(stepIndex, step.title)}
                   </InternalBox>
                 </li>
               ))}

src/tutorial-panel/components/tutorial-list/index.tsx

@@ -26,7 +26,7 @@ interface TutorialListProps {
   loading?: boolean;
   tutorials: TutorialPanelProps['tutorials'];
   onStartTutorial: HotspotContext['onStartTutorial'];
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
   downloadUrl: TutorialPanelProps['downloadUrl'];
   headingId?: string;
 }
@@ -98,7 +98,7 @@ function Tutorial({
 }: {
   tutorial: TutorialPanelProps.Tutorial;
   onStartTutorial: HotspotContext['onStartTutorial'];
-  i18nStrings: TutorialPanelProps['i18nStrings'];
+  i18nStrings: TutorialPanelProps.I18nStrings;
 }) {
   checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);
   const controlId = useUniqueId();