move image examples to english tour example

Author: haschek

src/components/VisualTour/stories/VisualTour.stories.tsx

@@ -4,15 +4,16 @@ import { Meta, StoryFn } from "@storybook/react";
 import {
     Button,
     Icon,
+    OverflowText,
     OverviewItem,
     OverviewItemDepiction,
     OverviewItemDescription,
     OverviewItemLine,
     Toolbar,
     ToolbarSection,
+    VisualTour,
     VisualTourProps,
 } from "../../../../index";
-import VisualTour from "../VisualTour";
 
 import stepDefinitionsEn from "./defaultTour";
 import stepDefinitionsDe from "./defaultTour.de";
@@ -23,6 +24,7 @@ export default {
     argTypes: {},
 } as Meta<typeof VisualTour>;
 
+// FIXME: should give code example about the tour, not only about the elements used as targets
 const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
     const [closed, setClosed] = React.useState<boolean>(true);
 
@@ -53,6 +55,7 @@ const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
 };
 
 // Randomly choose between English and German translation
+// FIXME: we cannot use random situation, otherwise the storybook example cannot relly compared between revisions
 const stepDefinitions = Math.random() < 0.5 ? stepDefinitionsEn : stepDefinitionsDe;
 
 export const Default = Template.bind({});
@@ -71,8 +74,12 @@ const defaultArgs: VisualTourProps = {
                             <Icon name={"item-info"} />
                         </OverviewItemDepiction>
                         <OverviewItemDescription>
-                            <OverviewItemLine>{texts.firstLine}</OverviewItemLine>
-                            <OverviewItemLine>{texts.secondLine}</OverviewItemLine>
+                            <OverviewItemLine>
+                                <OverflowText>{texts.firstLine}</OverflowText>
+                            </OverviewItemLine>
+                            <OverviewItemLine>
+                                <OverflowText>{texts.secondLine}</OverflowText>
+                            </OverviewItemLine>
                         </OverviewItemDescription>
                     </OverviewItem>
                 );

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

@@ -23,12 +23,10 @@ const definition = {
     },
     highlightElementLeft: {
         title: "Element auf der linken Seite hervorheben & Bild hochkant",
-        image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Knowledge_graph_installation_at_the_Futurium_Berlin_21.jpg",
         content: "Der Tooltip wird dort plaziert, wo er am besten für den Benutzer zu sehen ist.",
     },
     highlightElementC: {
         title: "Element C hervorheben & Bild landscape",
-        image: "https://upload.wikimedia.org/wikipedia/commons/1/15/Knowledge_graph_installation_at_the_Futurium_Berlin.jpg",
         content: "Element ist außerhalb des Tourcontainers.",
     },
     highlightElementD: {

src/components/VisualTour/stories/defaultTour.ts

@@ -22,11 +22,13 @@ const definition = {
         content: "Context overlay for another highlighted element.",
     },
     highlightElementLeft: {
-        title: "Highlight element on the left",
+        title: "Highlight element on the left & portrait image",
+        image: "https://upload.wikimedia.org/wikipedia/commons/a/a3/Knowledge_graph_installation_at_the_Futurium_Berlin_21.jpg",
         content: "The tooltip is placed where it is best seen by the user.",
     },
     highlightElementC: {
-        title: "Highlight element C",
+        title: "Highlight element C & landscape image",
+        image: "https://upload.wikimedia.org/wikipedia/commons/1/15/Knowledge_graph_installation_at_the_Futurium_Berlin.jpg",
         content: "Element outside tour container.",
     },
     highlightElementD: {