@cloudscape-design/components 3.0.0

package/top-navigation/use-top-navigation.js

@@ -0,0 +1,176 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';
+import styles from './styles.css.js';
+// A small buffer to make calculations more lenient against browser lag or padding adjustments.
+var RESPONSIVENESS_BUFFER = 20;
+export function useTopNavigation(_a) {
+    var identity = _a.identity, search = _a.search, utilities = _a.utilities;
+    // Refs and breakpoints
+    var mainRef = useRef(null);
+    var virtualRef = useRef(null);
+    var _b = useContainerBreakpoints(['xxs', 's']), breakpoint = _b[0], breakpointRef = _b[1];
+    // Responsiveness state
+    // The component works by calculating the possible resize states that it can
+    // be in, and having a state variable to track which state we're currently in.
+    var hasSearch = !!search;
+    var hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
+    var responsiveStates = useMemo(function () {
+        return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);
+    }, [utilities, hasSearch, hasTitleWithLogo]);
+    // To hide/show elements dynamically, we need to know how much space they take up,
+    // even if they're not being rendered. The top navigation elements are hidden/resized
+    // based on the available size or if a search bar is open, and they need to be available
+    // for calculations so we know where to toggle them. So we render a second, more stable
+    // top-nav off screen to do these calculations against.
+    //
+    // We can't "affix" these values to pixels because they can depend on spacing tokens.
+    // It's easier to render all of these utilities separately rather than figuring out
+    // spacing token values, icon sizes, text widths, etc.
+    var _c = useState(), responsiveState = _c[0], setResponsiveState = _c[1];
+    var recalculateFit = useCallback(function () {
+        var _a, _b, _c, _d;
+        if (!(mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) || !virtualRef.current) {
+            setResponsiveState(responsiveStates[0]);
+            return;
+        }
+        // Get available width from the visible top navigation.
+        var availableWidth = getContentBoxWidth(mainRef.current.querySelector(".".concat(styles['padding-box'])));
+        if (availableWidth === 0) {
+            // Likely in an SSR or Jest situation.
+            setResponsiveState(responsiveStates[0]);
+            return;
+        }
+        var sizeConfiguration = {
+            hasSearch: hasSearch,
+            availableWidth: availableWidth,
+            // Get widths from the hidden top navigation
+            fullIdentityWidth: virtualRef.current.querySelector(".".concat(styles.identity)).getBoundingClientRect().width,
+            titleWidth: (_b = (_a = virtualRef.current.querySelector(".".concat(styles.title))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
+            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(".".concat(styles.search))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
+            searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]').getBoundingClientRect()
+                .width,
+            utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(".".concat(styles.utilities))).paddingLeft || '0px'),
+            utilityWithLabelWidths: Array.prototype.slice
+                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"false\"]"))
+                .map(function (element) { return element.getBoundingClientRect().width; }),
+            utilityWithoutLabelWidths: Array.prototype.slice
+                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"true\"]"))
+                .map(function (element) { return element.getBoundingClientRect().width; }),
+            menuTriggerUtilityWidth: virtualRef.current
+                .querySelector('[data-utility-special="menu-trigger"]')
+                .getBoundingClientRect().width
+        };
+        setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));
+    }, [responsiveStates, hasSearch]);
+    var _d = useContainerQuery(function () {
+        recalculateFit();
+    }, [recalculateFit]), containerQueryRef = _d[1];
+    // Due to being rendered in a portal, the virtual navigation isn't rendered
+    // at the same time as the main one.
+    var onVirtualMount = useCallback(function (element) {
+        virtualRef.current = element;
+        recalculateFit();
+    }, [recalculateFit]);
+    // Search slot expansion on small screens
+    var _e = useState(true), isSearchMinimized = _e[0], setSearchMinimized = _e[1];
+    var isSearchExpanded = !isSearchMinimized && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch);
+    // If the search was expanded, and then the screen resized so that the
+    // expansion is no longer necessary. So we implicitly minimize it.
+    useEffect(function () {
+        if (!(responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch)) {
+            setSearchMinimized(true);
+        }
+    }, [responsiveState]);
+    // If the search is expanded after clicking on the search utility, move
+    // the focus to the input. Since this is a user-controlled slot, we're just
+    // assuming that it contains an input, though it's a pretty safe guess.
+    useEffect(function () {
+        var _a, _b;
+        if (isSearchExpanded) {
+            (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(styles.search, " input"))) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [isSearchExpanded, mainRef]);
+    var mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);
+    return {
+        mainRef: mergedMainRef,
+        virtualRef: onVirtualMount,
+        responsiveState: responsiveState !== null && responsiveState !== void 0 ? responsiveState : responsiveStates[0],
+        breakpoint: breakpoint !== null && breakpoint !== void 0 ? breakpoint : 'default',
+        isSearchExpanded: !!isSearchExpanded,
+        onSearchUtilityClick: function () { return setSearchMinimized(function (isSearchMinimized) { return !isSearchMinimized; }); }
+    };
+}
+/**
+ * Get the width of the content box (assuming the element's box-sizing is border-box).
+ */
+function getContentBoxWidth(element) {
+    var style = getComputedStyle(element);
+    return (parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px'));
+}
+/**
+ * Generates the series of responsive steps that can be performed on the header in order.
+ */
+export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTitle) {
+    var states = [{}];
+    if (utilities.some(function (utility) { return utility.text; })) {
+        states.push({ hideUtilityText: true });
+    }
+    if (canHideSearch) {
+        states.push({
+            hideUtilityText: true,
+            hideSearch: true
+        });
+    }
+    var hiddenUtilties = [];
+    for (var i = 0; i < utilities.length; i++) {
+        if (!utilities[i].disableUtilityCollapse) {
+            hiddenUtilties.push(i);
+            states.push({
+                hideUtilityText: true,
+                hideSearch: canHideSearch || undefined,
+                hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined
+            });
+        }
+    }
+    if (canHideTitle) {
+        states.push({
+            hideUtilityText: true,
+            hideSearch: canHideSearch || undefined,
+            hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,
+            hideTitle: true
+        });
+    }
+    return states;
+}
+/**
+ * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states
+ * and the current sizes of all elements inside the navigation bar.
+ */
+export function determineBestResponsiveState(possibleStates, sizes) {
+    var hasSearch = sizes.hasSearch, availableWidth = sizes.availableWidth, utilitiesLeftPadding = sizes.utilitiesLeftPadding, fullIdentityWidth = sizes.fullIdentityWidth, titleWidth = sizes.titleWidth, searchSlotWidth = sizes.searchSlotWidth, searchUtilityWidth = sizes.searchUtilityWidth, utilityWithLabelWidths = sizes.utilityWithLabelWidths, utilityWithoutLabelWidths = sizes.utilityWithoutLabelWidths, menuTriggerUtilityWidth = sizes.menuTriggerUtilityWidth;
+    var _loop_1 = function (state) {
+        var searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;
+        var utilitiesWidth = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)
+            .filter(function (_width, i) { return !state.hideUtilities || state.hideUtilities.indexOf(i) === -1; })
+            .reduce(function (sum, width) { return sum + width; }, 0);
+        var menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;
+        var identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;
+        var expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;
+        if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {
+            return { value: state };
+        }
+    };
+    // Iterate through each state and calculate its expected required width.
+    for (var _i = 0, possibleStates_1 = possibleStates; _i < possibleStates_1.length; _i++) {
+        var state = possibleStates_1[_i];
+        var state_1 = _loop_1(state);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    // If nothing matches, pick the smallest possible state.
+    return possibleStates[possibleStates.length - 1];
+}
+//# sourceMappingURL=use-top-navigation.js.map

package/top-navigation/use-top-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  mainRef: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const mainRef = useRef<HTMLElement | null>(null);\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  const [responsiveState, setResponsiveState] = useState<ResponsiveState | undefined>();\n  const recalculateFit = useCallback(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    // Get available width from the visible top navigation.\n    const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!);\n    if (availableWidth === 0) {\n      // Likely in an SSR or Jest situation.\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    const sizeConfiguration = {\n      hasSearch,\n      availableWidth,\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'\n      ),\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n    setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));\n  }, [responsiveStates, hasSearch]);\n\n  const [, containerQueryRef] = useContainerQuery(() => {\n    recalculateFit();\n  }, [recalculateFit]);\n\n  // Due to being rendered in a portal, the virtual navigation isn't rendered\n  // at the same time as the main one.\n  const onVirtualMount = useCallback(\n    (element: HTMLDivElement | null) => {\n      virtualRef.current = element;\n      recalculateFit();\n    },\n    [recalculateFit]\n  );\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);\n\n  return {\n    mainRef: mergedMainRef,\n    virtualRef: onVirtualMount,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return (\n    parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px')\n  );\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TutorialPanelProps } from '../../interfaces';
+interface CongratulationScreenProps {
+    children: React.ReactNode;
+    onFeedbackClick: () => void;
+    i18nStrings: TutorialPanelProps['i18nStrings'];
+}
+export declare function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps): JSX.Element;
+export {};
+//# sourceMappingURL=congratulation-screen.d.ts.map

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"congratulation-screen.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,yBAAyB,eA+BzG"}

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js

@@ -0,0 +1,26 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import styles from './styles.css.js';
+import InternalStatusIndicator from '../../../status-indicator/internal';
+import InternalSpaceBetween from '../../../space-between/internal';
+import InternalLink from '../../../link/internal';
+import clsx from 'clsx';
+import InternalBox from '../../../box/internal';
+export function CongratulationScreen(_a) {
+    var _b;
+    var children = _a.children, onFeedbackClick = _a.onFeedbackClick, i18nStrings = _a.i18nStrings;
+    return (React.createElement(InternalSpaceBetween, { size: "xxl" },
+        React.createElement(InternalSpaceBetween, { size: "xl" },
+            React.createElement("div", { className: styles['congratulation-message'] },
+                React.createElement(InternalStatusIndicator, { __size: "inherit", type: "success", className: styles['congratulation-message--status'] }),
+                React.createElement("div", { className: styles['completion-screen-title'] }, i18nStrings.completionScreenTitle)),
+            React.createElement(InternalBox, { color: "text-body-secondary" },
+                React.createElement("div", { className: clsx((_b = {},
+                        _b[styles['completion-screen-description']] = true,
+                        _b[styles['plaintext-congratulation-description']] = typeof children === 'string',
+                        _b)) }, children))),
+        React.createElement("div", { className: styles.divider }),
+        React.createElement(InternalLink, { onFollow: onFeedbackClick, className: styles['feedback-link'] }, i18nStrings.feedbackLinkText)));
+}
+//# sourceMappingURL=congratulation-screen.js.map

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"congratulation-screen.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAQhD,MAAM,UAAU,oBAAoB,CAAC,EAAqE;;QAAnE,QAAQ,cAAA,EAAE,eAAe,qBAAA,EAAE,WAAW,iBAAA;IAC3E,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;gBAC9C,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC,GACnD;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,qBAAqB,CAAO,CACxF;YACN,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;gBACtC,6BACE,SAAS,EAAE,IAAI;wBACb,GAAC,MAAM,CAAC,+BAA+B,CAAC,IAAG,IAAI;wBAC/C,GAAC,MAAM,CAAC,sCAAsC,CAAC,IAAG,OAAO,QAAQ,KAAK,QAAQ;4BAC9E,IAED,QAAQ,CACL,CACM,CACO;QAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAElC,oBAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACxE,WAAW,CAAC,gBAAgB,CAChB,CACM,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalLink from '../../../link/internal';\nimport clsx from 'clsx';\nimport InternalBox from '../../../box/internal';\n\ninterface CongratulationScreenProps {\n  children: React.ReactNode;\n  onFeedbackClick: () => void;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps) {\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['congratulation-message']}>\n          <InternalStatusIndicator\n            __size=\"inherit\"\n            type=\"success\"\n            className={styles['congratulation-message--status']}\n          />\n          <div className={styles['completion-screen-title']}>{i18nStrings.completionScreenTitle}</div>\n        </div>\n        <InternalBox color=\"text-body-secondary\">\n          <div\n            className={clsx({\n              [styles['completion-screen-description']]: true,\n              [styles['plaintext-congratulation-description']]: typeof children === 'string',\n            })}\n          >\n            {children}\n          </div>\n        </InternalBox>\n      </InternalSpaceBetween>\n\n      <div className={styles.divider} />\n\n      <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']}>\n        {i18nStrings.feedbackLinkText}\n      </InternalLink>\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/index.d.ts

@@ -0,0 +1,10 @@
+import { TutorialPanelProps } from '../../interfaces';
+import { HotspotContext } from '../../../annotation-context/context';
+export default function TutorialDetailView({ tutorial, onExitTutorial: onExitTutorialHandler, currentStepIndex, onFeedbackClick: onFeedbackClickHandler, i18nStrings, }: {
+    tutorial: TutorialPanelProps.Tutorial;
+    onExitTutorial: HotspotContext['onExitTutorial'];
+    currentStepIndex: HotspotContext['currentStepIndex'];
+    onFeedbackClick: TutorialPanelProps['onFeedbackClick'];
+    i18nStrings: TutorialPanelProps['i18nStrings'];
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/tutorial-panel/components/tutorial-detail-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAoB,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrD,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD,eAgDA"}

package/tutorial-panel/components/tutorial-detail-view/index.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useRef } from 'react';
+import InternalBox from '../../../box/internal';
+import { InternalButton } from '../../../button/internal';
+import InternalSpaceBetween from '../../../space-between/internal';
+import styles from './styles.css.js';
+import { fireNonCancelableEvent } from '../../../internal/events/index';
+import { CongratulationScreen } from './congratulation-screen';
+import { TaskList } from './task-list';
+import { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';
+export default function TutorialDetailView(_a) {
+    var tutorial = _a.tutorial, onExitTutorialHandler = _a.onExitTutorial, _b = _a.currentStepIndex, currentStepIndex = _b === void 0 ? 0 : _b, onFeedbackClickHandler = _a.onFeedbackClick, i18nStrings = _a.i18nStrings;
+    var refreshRef = useRef(null);
+    var isRefresh = useVisualRefresh(refreshRef);
+    var onExitTutorial = useCallback(function () {
+        fireNonCancelableEvent(onExitTutorialHandler, { tutorial: tutorial });
+    }, [onExitTutorialHandler, tutorial]);
+    var onFeedbackClick = useCallback(function () {
+        fireNonCancelableEvent(onFeedbackClickHandler, { tutorial: tutorial });
+    }, [onFeedbackClickHandler, tutorial]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InternalSpaceBetween, { size: "xl" },
+            React.createElement("div", { className: styles['tutorial-title'], ref: refreshRef },
+                React.createElement(InternalButton, { variant: "icon", onClick: onExitTutorial, ariaLabel: i18nStrings.labelExitTutorial, formAction: "none", iconName: "arrow-left" }),
+                React.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? 'heading-m' : 'heading-l', padding: { top: 'xxs' }, margin: { left: 's' } }, tutorial.title)),
+            tutorial.completed ? (React.createElement(CongratulationScreen, { onFeedbackClick: onFeedbackClick, i18nStrings: i18nStrings }, tutorial.completedScreenDescription)) : (React.createElement(TaskList, { tasks: tutorial.tasks, onExitTutorial: onExitTutorial, currentGlobalStepIndex: currentStepIndex, i18nStrings: i18nStrings })))));
+}
+//# sourceMappingURL=index.js.map

package/tutorial-panel/components/tutorial-detail-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAY1C;QAXC,QAAQ,cAAA,EACQ,qBAAqB,oBAAA,EACrC,wBAAoB,EAApB,gBAAgB,mBAAG,CAAC,KAAA,EACH,sBAAsB,qBAAA,EACvC,WAAW,iBAAA;IAQX,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAE/C,IAAM,cAAc,GAAG,WAAW,CAAC;QACjC,sBAAsB,CAAC,qBAAqB,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAG,WAAW,CAAC;QAClC,sBAAsB,CAAC,sBAAsB,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,UAAU;gBACvD,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,iBAAiB,EACxC,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,YAAY,GACrB;gBAEF,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAEpB,QAAQ,CAAC,KAAK,CACH,CACV;YACL,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CACpB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACoB,CACtB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useRef } from 'react';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../../../internal/events/index';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { CongratulationScreen } from './congratulation-screen';\nimport { TaskList } from './task-list';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\n\nexport default function TutorialDetailView({\n  tutorial,\n  onExitTutorial: onExitTutorialHandler,\n  currentStepIndex = 0,\n  onFeedbackClick: onFeedbackClickHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onExitTutorial: HotspotContext['onExitTutorial'];\n  currentStepIndex: HotspotContext['currentStepIndex'];\n  onFeedbackClick: TutorialPanelProps['onFeedbackClick'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  const refreshRef = useRef(null);\n  const isRefresh = useVisualRefresh(refreshRef);\n\n  const onExitTutorial = useCallback(() => {\n    fireNonCancelableEvent(onExitTutorialHandler, { tutorial });\n  }, [onExitTutorialHandler, tutorial]);\n\n  const onFeedbackClick = useCallback(() => {\n    fireNonCancelableEvent(onFeedbackClickHandler, { tutorial });\n  }, [onFeedbackClickHandler, tutorial]);\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['tutorial-title']} ref={refreshRef}>\n          <InternalButton\n            variant=\"icon\"\n            onClick={onExitTutorial}\n            ariaLabel={i18nStrings.labelExitTutorial}\n            formAction=\"none\"\n            iconName=\"arrow-left\"\n          />\n\n          <InternalBox\n            variant=\"h2\"\n            fontSize={isRefresh ? 'heading-m' : 'heading-l'}\n            padding={{ top: 'xxs' }}\n            margin={{ left: 's' }}\n          >\n            {tutorial.title}\n          </InternalBox>\n        </div>\n        {tutorial.completed ? (\n          <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n            {tutorial.completedScreenDescription}\n          </CongratulationScreen>\n        ) : (\n          <TaskList\n            tasks={tutorial.tasks}\n            onExitTutorial={onExitTutorial}\n            currentGlobalStepIndex={currentStepIndex}\n            i18nStrings={i18nStrings}\n          />\n        )}\n      </InternalSpaceBetween>\n    </>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/styles.css.js

@@ -0,0 +1,25 @@
+
+    import './styles.scoped.css';
+    export default {
+  "tutorial-list": "awsui_tutorial-list_1u70p_su581_93",
+  "tutorial-title": "awsui_tutorial-title_1u70p_su581_106",
+  "task": "awsui_task_1u70p_su581_113",
+  "task-title": "awsui_task-title_1u70p_su581_121",
+  "task-title--status": "awsui_task-title--status_1u70p_su581_129",
+  "current-task": "awsui_current-task_1u70p_su581_133",
+  "successful-task": "awsui_successful-task_1u70p_su581_137",
+  "congratulation-message": "awsui_congratulation-message_1u70p_su581_141",
+  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_su581_149",
+  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_su581_153",
+  "divider": "awsui_divider_1u70p_su581_157",
+  "step-list": "awsui_step-list_1u70p_su581_161",
+  "step": "awsui_step_1u70p_su581_161",
+  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_su581_170",
+  "expandable-section-header": "awsui_expandable-section-header_1u70p_su581_174",
+  "step-title": "awsui_step-title_1u70p_su581_179",
+  "feedback-link": "awsui_feedback-link_1u70p_su581_180",
+  "dismiss-button": "awsui_dismiss-button_1u70p_su581_181",
+  "completion-screen-title": "awsui_completion-screen-title_1u70p_su581_182",
+  "completion-screen-description": "awsui_completion-screen-description_1u70p_su581_183"
+};
+  

package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css

@@ -0,0 +1,234 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_tutorial-list_1u70p_su581_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  padding: 0;
+  margin: 0;
+}
+
+.awsui_tutorial-title_1u70p_su581_106:not(#\9) {
+  display: flex;
+  align-items: flex-start;
+  margin-left: calc(-1 * 4px);
+  margin-left: calc(-1 * var(--space-xxs-ynfts5, 4px));
+  padding-bottom: 2px;
+  padding-bottom: var(--space-xxxs-k2w98v, 2px);
+}
+
+.awsui_task_1u70p_su581_113:not(#\9) {
+  list-style: none;
+  padding-top: 0;
+}
+.awsui_task_1u70p_su581_113:not(#\9):not(:first-child) {
+  margin-top: 24px;
+  margin-top: var(--space-xl-a39hup, 24px);
+}
+
+.awsui_task-title_1u70p_su581_121:not(#\9) {
+  display: flex;
+  align-items: flex-start;
+  padding-left: 2px;
+  padding-left: var(--border-divider-section-width-4wm2it, 2px);
+  font-size: 16px;
+  font-size: var(--font-heading-s-size-9clg8y, 16px);
+  line-height: 20px;
+  line-height: var(--font-heading-s-line-height-5b7f0q, 20px);
+  letter-spacing: -0.005em;
+  letter-spacing: var(--font-heading-s-letter-spacing-4d69jc, -0.005em);
+}
+.awsui_task-title--status_1u70p_su581_129:not(#\9) {
+  line-height: inherit;
+}
+
+.awsui_current-task_1u70p_su581_133:not(#\9) {
+  font-weight: 700;
+}
+
+.awsui_successful-task_1u70p_su581_137:not(#\9) {
+  color: #037f0c;
+  color: var(--color-text-status-success-0fzhv9, #037f0c);
+}
+
+.awsui_congratulation-message_1u70p_su581_141:not(#\9) {
+  display: flex;
+  font-size: 16px;
+  font-size: var(--font-heading-s-size-9clg8y, 16px);
+  line-height: 20px;
+  line-height: var(--font-heading-s-line-height-5b7f0q, 20px);
+  letter-spacing: -0.005em;
+  letter-spacing: var(--font-heading-s-letter-spacing-4d69jc, -0.005em);
+  font-weight: 800;
+  font-weight: var(--font-heading-xs-weight-wwznty, 800);
+  color: #037f0c;
+  color: var(--color-text-status-success-0fzhv9, #037f0c);
+}
+.awsui_congratulation-message--status_1u70p_su581_149:not(#\9) {
+  line-height: inherit;
+}
+
+.awsui_plaintext-congratulation-description_1u70p_su581_153:not(#\9) {
+  white-space: pre-line;
+}
+
+.awsui_divider_1u70p_su581_157:not(#\9) {
+  border-bottom: 2px solid #e9ebed;
+  border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_step-list_1u70p_su581_161:not(#\9) {
+  list-style: none;
+  padding: 0 0 0 2px;
+  padding: 0 0 0 var(--space-xxxs-k2w98v, 2px);
+}
+
+.awsui_step_1u70p_su581_161:not(#\9):not(:first-child) {
+  padding-top: 4px;
+  padding-top: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_expandable-section-wrapper_1u70p_su581_170:not(#\9) {
+  width: 100%;
+}
+
+.awsui_expandable-section-header_1u70p_su581_174:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+}
+
+.awsui_step-title_1u70p_su581_179:not(#\9),
+.awsui_feedback-link_1u70p_su581_180:not(#\9),
+.awsui_dismiss-button_1u70p_su581_181:not(#\9),
+.awsui_completion-screen-title_1u70p_su581_182:not(#\9),
+.awsui_completion-screen-description_1u70p_su581_183:not(#\9) {
+  /* used in test-utils */
+}

package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js

@@ -0,0 +1,26 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "tutorial-list": "awsui_tutorial-list_1u70p_su581_93",
+  "tutorial-title": "awsui_tutorial-title_1u70p_su581_106",
+  "task": "awsui_task_1u70p_su581_113",
+  "task-title": "awsui_task-title_1u70p_su581_121",
+  "task-title--status": "awsui_task-title--status_1u70p_su581_129",
+  "current-task": "awsui_current-task_1u70p_su581_133",
+  "successful-task": "awsui_successful-task_1u70p_su581_137",
+  "congratulation-message": "awsui_congratulation-message_1u70p_su581_141",
+  "congratulation-message--status": "awsui_congratulation-message--status_1u70p_su581_149",
+  "plaintext-congratulation-description": "awsui_plaintext-congratulation-description_1u70p_su581_153",
+  "divider": "awsui_divider_1u70p_su581_157",
+  "step-list": "awsui_step-list_1u70p_su581_161",
+  "step": "awsui_step_1u70p_su581_161",
+  "expandable-section-wrapper": "awsui_expandable-section-wrapper_1u70p_su581_170",
+  "expandable-section-header": "awsui_expandable-section-header_1u70p_su581_174",
+  "step-title": "awsui_step-title_1u70p_su581_179",
+  "feedback-link": "awsui_feedback-link_1u70p_su581_180",
+  "dismiss-button": "awsui_dismiss-button_1u70p_su581_181",
+  "completion-screen-title": "awsui_completion-screen-title_1u70p_su581_182",
+  "completion-screen-description": "awsui_completion-screen-description_1u70p_su581_183"
+};
+  

package/tutorial-panel/components/tutorial-detail-view/task-list.d.ts

@@ -0,0 +1,10 @@
+import { TutorialPanelProps } from '../../interfaces';
+import { HotspotContext } from '../../../annotation-context/context';
+export interface TaskListProps {
+    tasks: ReadonlyArray<TutorialPanelProps.Task>;
+    onExitTutorial: () => void;
+    currentGlobalStepIndex: HotspotContext['currentStepIndex'];
+    i18nStrings: TutorialPanelProps['i18nStrings'];
+}
+export declare function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps): JSX.Element;
+//# sourceMappingURL=task-list.d.ts.map

package/tutorial-panel/components/tutorial-detail-view/task-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAIrE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,sBAAsB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC3D,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAE,EAAE,aAAa,eAmCrG"}