Preview

Note: Tutorials are configured via JavaScript properties. See usage below.

Usage

<cs-tutorial-panel></cs-tutorial-panel>

<script>
  const panel = document.querySelector('cs-tutorial-panel');
  panel.tutorials = [
    {
      title: 'Create your first resource',
      description: 'Learn how to create and configure a resource.',
      completed: false,
    },
    {
      title: 'Set up monitoring',
      description: 'Configure alarms and dashboards.',
      completed: true,
    },
  ];
</script>

Properties

download-urlstring

The link to a file documenting all tutorials (usually a PDF).

i18n-stringsTutorialPanelProps.I18nStringsrequired

An object containing all the necessary localized strings required by the component.

loadingboolean default: false

Whether the content of the panel is currently loading. If this property is set to true, the panel displays a spinner and the loadingText that is specified in the i18nStrings property.

tutorialsReadonlyArray<TutorialPanelProps.Tutorial>required

List of all available tutorials. An array of objects with the following properties:

• title (string) - Name of the tutorial

• description (unknown) - Short description of the tutorial's content.

• tasks - Array of tasks (in intended order). Each Task has the following properties:

  • title (string) - Name of this task. This is shown in the task list overview of the tutorial's detail view.
  • steps - Array of steps in this task (in intended order). Each step has the following properties:

    • title (string) - Title of this step. This is shown in the step list in the tutorial's detail view.

    • content (unknown) - Content to be shown in the popover of this step. Can be JSX or plain text.

    • warningAlert (unknown) - (Optional) If this field is present, a warning alert will be displayed inside the step's popover, showing this field's content. Can be JSX or plain text.

    • hotspotId (string) - ID of the hotspot that this tutorial step points to.

      A hotspot with this ID needs to be added manually to the code of the application and represents a location in the application that a tutorial step can be attached to. It can be re-used by multiple tutorials. Hotspot IDs need to be unique in the scope of the whole application that uses this tutorial.

• completedScreenDescription (unknown) - Description to be shown on the last page of the tutorial, when the user has successfully completed the tutorial.

• prerequisitesAlert (unknown) - (Optional) If the application determines that the user cannot start the tutorial yet (by specifying the property prerequisitesNeeded on the tutorial object), the content of prerequisitesAlert will be shown in the tutorial list underneath the tutorial title.

  Example: <><Link>Create a bucket first</Link> to complete this tutorial.</>

• prerequisitesNeeded (boolean) - (Optional) If this property is set to true, the tutorial list will disable the Start tutorial button for this tutorial, and it will show the contents of the tutorial's prerequisitesAlert field in an alert underneath the tutorial title.

• learnMoreUrl (string | null) - (Optional) If present, the tutorial list will show a "Learn More" link pointing to this URL underneath the tutorial's description.

• completed (boolean) - Whether the user has already completed this tutorial.

  If this property is set to true, the tutorial list will show a status indicator underneath the tutorial title with a message that indicates that this tutorial has already been completed by the user (e.g. "Tutorial completed"), and the "Start tutorial" button will be replaced by a "Restart tutorial" button.

Events

feedbackClickCustomEvent<TutorialPanelProps.TutorialDetail>

Fired when the user clicks on the feedback link at the end of a tutorial.