Merge pull request #310 from eccenca/feature/tourComponent-CMEM-6790

Visual tour component

Author: haschek

CHANGELOG.md

@@ -19,6 +19,8 @@ This is a major release, and it might be not compatible with your current usage
     -   the `data` object provides `markerAppearance` to set and remove the edge arrows
 -   `<EdgeNew />`
     -   component for React Flow v12, displaying new connection lines
+-   `<VisualTour />`
+    -   component to display a visual tour multi-step tour of the current view
 
 ### Removed
 

src/components/Dialog/Modal.tsx

@@ -21,7 +21,7 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     /**
      * Size of the modal.
      */
-    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    size?: ModalSize;
     /**
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
@@ -45,6 +45,8 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     forceTopPosition?: boolean;
 }
 
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen"
+
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.

src/components/Icon/IconButton.tsx

@@ -6,9 +6,10 @@ import Button, { ButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
+import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
-    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

src/components/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * The size specifies the dimension the tooltip overlay element can maximal grow.
      */
-    size?: "small" | "medium" | "large";
+    size?: TooltipSize;
     /**
      * The tooltip will be attached to this element when it is hovered.
      */
@@ -50,6 +50,8 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
+export type TooltipSize = "small" | "medium" | "large"
+
 export const Tooltip = ({
     children,
     content,