Add tour point step translation (#206)

Co-authored-by: Danil Chepelev <[email protected]>

src/components/TourPoint/TourPoint.tsx

@@ -32,6 +32,7 @@ export function TourPoint({
   confirmation = 'Got it',
   dismission = 'Dismiss',
   content,
+  getStepsTranslation,
   onClose,
   src,
   step,
@@ -108,7 +109,12 @@ export function TourPoint({
           <Footer>
             {steps && (
               <Steps onClick={stepBack}>
-                Step {step} of {steps}
+                {getStepsTranslation
+                  ? getStepsTranslation({
+                      currentStep: step,
+                      totalSteps: steps,
+                    })
+                  : `Step ${step} of ${steps}`}
               </Steps>
             )}
             {Dismiss}

src/components/TourPoint/TourPoint.types.ts

@@ -30,6 +30,13 @@ export interface Props {
   step: number;
   style?: CSSProperties;
   title?: HTMLElement['title'];
+  getStepsTranslation?: ({
+    currentStep,
+    totalSteps,
+  }: {
+    currentStep: number;
+    totalSteps: number;
+  }) => string;
 }
 
 type StepEvent = { direction: 'back' | 'next' | 'dismiss' };

src/components/TourPoint/examples/InsidePopOver.story.tsx

@@ -9,6 +9,15 @@ import { Paragraph } from '../../../typography';
 
 export function InsidePopOver() {
   const [active, activeSet] = useState(false);
+  const getStepsTranslation = ({
+    currentStep,
+    totalSteps,
+  }: {
+    currentStep: number;
+    totalSteps: number;
+  }) => {
+    return `step ${currentStep} of ${totalSteps}`;
+  };
 
   return (
     <div
@@ -31,6 +40,7 @@ export function InsidePopOver() {
                 attach="top"
                 src="http://placekitten.com/320/213"
                 step={1}
+                getStepsTranslation={getStepsTranslation}
                 title="A Fresh New Look"
                 content="All the leaves are brown and the sky is grey, I've been for a walk on a winters day."
               >