@eccenca/gui-elements/src/components/VisualTour/stories/defaultTour.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

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",
        usableStepTarget: false,
        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",
        usableStepTarget: true,
        content: "Context overlay for another highlighted element.",
    },
    highlightElementLeft: {
        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 & 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: {
        title: "Highlight element D",
        content: "Element not visible at first.",
    },
} satisfies VisualTourStepDefinitions;

export default definition;