@veracity/vui/dist/tutorial/tutorial.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import React from "react";
import { Placement } from "@floating-ui/react";
//#region src/tutorial/tutorial.types.d.ts
type TutorialDataStep = {
  /** title of step */
  title: string;
  /** Content */
  content?: string | React.ReactNode;
  /** Link to page where they can read more */
  readMoreLink?: string;
};
type TutorialProps = {
  /** Label for the action button @default `Action` */
  actionLabel?: string;
  /** Target element for the tutorial */
  children: React.ReactNode;
  /** Custom class name */
  className?: string;
  /** An id for further handling with localStorage */
  id: string;
  /** Invoked once the action button is clicked. */
  onAction?: () => void;
  /** Invoked once the dismiss button is clicked. */
  onDismiss?: () => void;
  /** Invoked once the finish button is clicked. */
  onFinish?: () => void;
  /** Popover placement */
  placement?: Placement;
  /** An array of steps */
  steps: TutorialDataStep[];
  /** Show the Skip button */
  showSkipButton?: boolean;
  /** General tutorial title */
  title: string;
  /** Link to page where they can read more */
  readMoreLink?: string;
  /** Decides if should show or hide floating panel  */
  isVisible?: boolean;
  /** Should include last thank you page  */
  includeFinalPage?: boolean;
  /** Should use dynamic header based on content  */
  useContentTitle?: boolean;
};
type TutorialCardProps = {
  /** Label for the action button @default `Action` */
  actionLabel?: string;
  /** Custom class name */
  className?: string;
  /** The card title */
  title: string;
  /** Steps of the card */
  steps: TutorialDataStep[];
  /** Invoked once the action button clicked. */
  onAction?: () => void;
  /** Callback for the dismiss button click. */
  onDismiss?: () => void;
  /** Callback for the finish button click. */
  onFinish?: () => void;
  /** Link to page where they can read more */
  readMoreLink?: string;
  /** Show the Skip button */
  showSkipButton?: boolean;
  /** Include the final page */
  includeFinalPage?: boolean;
  /** Should use dynamic header based on content  */
  useContentTitle?: boolean;
};
type TutorialStepProps = {
  /** If the step is active or not */
  active: boolean;
  /** Title of step */
  title: string;
  /** Step content */
  content?: string | React.ReactNode;
  /** Link to page where user can read more */
  readMoreLink?: string;
  /** Should use dynamic header based on content  */
  useContentTitle?: boolean;
};
type TutorialStepWrapper = {
  key: number;
  step: TutorialDataStep;
};
type CloseEvent = 'dismissed' | 'finished';
//#endregion
export { CloseEvent, TutorialCardProps, TutorialDataStep, TutorialProps, TutorialStepProps, TutorialStepWrapper };

//# sourceMappingURL=tutorial.types.d.ts.map