Add texts property for text copy of custom components; Show how to use external files for tour definitions in different languages

Author: andreas-schultz

src/components/VisualTour/VisualTour.tsx

@@ -23,15 +23,19 @@ export interface VisualTourProps {
     prevLabel?: string;
 }
 
-interface VisualTourStep {
-    /** (Short) Title of the current step. */
+export interface VisualTourStep {
     title: string;
     /** The description or more elaborate content element that is shown in the modal/overlay. */
     content: string | (() => React.JSX.Element);
     /** Optional element that should be highlighted, every other element in the container element is greyed out. */
     highlightElementQuery?: string;
+    /** The texts used in the step, e.g. when custom layouts are rendered, these will be used for the text strings. */
+    texts?: Record<string, string>;
 }
 
+/** This should be used for defining steps in a separate object/file. Use with 'satisfies' after the object definition. */
+export type VisualTourStepDefinitions = Record<string, Partial<VisualTourStep>>;
+
 const containerHighlightClass = `${eccgui}-visual-tour__container`;
 const highlightElementClass = `${eccgui}-visual-tour__highlighted-element`;
 

…onents/VisualTour/VisualTour.stories.tsx …isualTour/stories/VisualTour.stories.tsxsrc/components/VisualTour/VisualTour.stories.tsx renamed to src/components/VisualTour/stories/VisualTour.stories.tsx src/components/VisualTour/VisualTour.stories.tsx renamed to src/components/VisualTour/stories/VisualTour.stories.tsx

@@ -11,9 +11,11 @@ import {
     Toolbar,
     ToolbarSection,
     VisualTourProps,
-} from "../../../index";
+} from "../../../../index";
+import VisualTour from "../VisualTour";
 
-import VisualTour from "./VisualTour";
+import stepDefinitionsEn from "./defaultTour";
+import stepDefinitionsDe from "./defaultTour.de";
 
 export default {
     title: "Components/VisualTour",
@@ -50,49 +52,46 @@ const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
     );
 };
 
+const stepDefinitions = Math.random() < 0.5 ? stepDefinitionsEn : stepDefinitionsDe;
+
 export const Default = Template.bind({});
 const defaultArgs: VisualTourProps = {
     containerElementQuery: "#tourContainer",
     steps: [
         {
-            title: "First step",
-            content: "This is a demonstration of a visual tour. A step can be simple text.",
+            ...stepDefinitions.firstStep,
         },
         {
-            title: "Custom content",
-            content: () => (
-                <OverviewItem>
-                    <OverviewItemDepiction>
-                        <Icon name={"item-info"} />
-                    </OverviewItemDepiction>
-                    <OverviewItemDescription>
-                        <OverviewItemLine>
-                            Or a step can be arbitrary content that is displayed in a modal by default.
-                        </OverviewItemLine>
-                        <OverviewItemLine>The developer can choose what's appropriate.</OverviewItemLine>
-                    </OverviewItemDescription>
-                </OverviewItem>
-            ),
+            ...stepDefinitions.customContent,
+            content: () => {
+                const texts = stepDefinitions.customContent.texts;
+                return (
+                    <OverviewItem>
+                        <OverviewItemDepiction>
+                            <Icon name={"item-info"} />
+                        </OverviewItemDepiction>
+                        <OverviewItemDescription>
+                            <OverviewItemLine>{texts.firstLine}</OverviewItemLine>
+                            <OverviewItemLine>{texts.secondLine}</OverviewItemLine>
+                        </OverviewItemDescription>
+                    </OverviewItem>
+                );
+            },
         },
         {
-            title: "Highlight element A",
-            content:
-                "It's possible to highlight specific elements on a page. The step content is then displayed in a kind of tooltip instead of a modal.",
+            ...stepDefinitions.highlightElementA,
             highlightElementQuery: "#actionA",
         },
         {
-            title: "Highlight element B",
-            content: "Context overlay for another highlighted element.",
+            ...stepDefinitions.highlightElementB,
             highlightElementQuery: "#actionB",
         },
         {
-            title: "Highlight element C",
-            content: "Element outside tour container.",
+            ...stepDefinitions.highlightElementC,
             highlightElementQuery: "#actionC",
         },
         {
-            title: "Highlight element D",
-            content: "Element not visible at first.",
+            ...stepDefinitions.highlightElementD,
             highlightElementQuery: "#actionD",
         },
     ],

src/components/VisualTour/stories/defaultTour.de.ts

@@ -0,0 +1,34 @@
+import { VisualTourStepDefinitions } from "../VisualTour";
+
+const definition = {
+    firstStep: {
+        title: "Erter Schritt",
+        content: "Dies ist eine Demonstration einer Visuellen Tour. Ein Schritt kann aus einfachen Text bestehen.",
+    },
+    customContent: {
+        title: "Benutzerspezifizierter Inhalt",
+        texts: {
+            firstLine: "Ein Schritt kann aber auch beliebigen Inhalt anbieten, der in einem Dialog angezeigt wird.",
+            secondLine: "Der Entwickler kann bestimmen wie etwas angezeigt werden soll.",
+        },
+    },
+    highlightElementA: {
+        title: "Element A hervorheben",
+        content:
+            "Es ist möglich spezifische Elemente auf der Seite hervorzuheben. Der Inhalt des Schrittes ist dann als eine Art Tooltip um das Element herum dargestellt.",
+    },
+    highlightElementB: {
+        title: "Element B hervorheben",
+        content: "Kontextoverlay für ein anderes hervorgehobenes Element.",
+    },
+    highlightElementC: {
+        title: "Element C hervorheben",
+        content: "Element ist außerhalb des Tourcontainers.",
+    },
+    highlightElementD: {
+        title: "Element D hervorheben",
+        content: "Element ist nucht sichtbar am Anfang.",
+    },
+} satisfies VisualTourStepDefinitions;
+
+export default definition;

src/components/VisualTour/stories/defaultTour.ts

@@ -0,0 +1,34 @@
+import { VisualTourStepDefinitions } from "../VisualTour";
+
+const definition = {
+    firstStep: {
+        title: "First step",
+        content: "This is a demonstration of a visual tour. A step can be simple text.",
+    },
+    customContent: {
+        title: "Custom content",
+        texts: {
+            firstLine: "Or a step can be arbitrary content that is displayed in a modal by default.",
+            secondLine: "The developer can choose what's appropriate.",
+        },
+    },
+    highlightElementA: {
+        title: "Highlight element A",
+        content:
+            "It's possible to highlight specific elements on a page. The step content is then displayed in a kind of tooltip instead of a modal.",
+    },
+    highlightElementB: {
+        title: "Highlight element B",
+        content: "Context overlay for another highlighted element.",
+    },
+    highlightElementC: {
+        title: "Highlight element C",
+        content: "Element outside tour container.",
+    },
+    highlightElementD: {
+        title: "Highlight element D",
+        content: "Element not visible at first.",
+    },
+} satisfies VisualTourStepDefinitions;
+
+export default definition;