@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
69 lines (68 loc) • 5.92 kB
JavaScript
import { __assign } from "tslib";
import React, { useCallback, useState } from 'react';
import styles from './styles.css.js';
import Box from '../../../box';
import Button from '../../../button';
import { InternalButton } from '../../../button/internal';
import StatusIndicator from '../../../status-indicator';
import SpaceBetween from '../../../space-between';
import { fireNonCancelableEvent } from '../../../internal/events/index.js';
import clsx from 'clsx';
import Alert from '../../../alert';
import Link from '../../../link';
import { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';
import { CSSTransition } from 'react-transition-group';
import Icon from '../../../icon';
import useFocusVisible from '../../../internal/hooks/focus-visible/index.js';
export default function TutorialList(_a) {
var i18nStrings = _a.i18nStrings, tutorials = _a.tutorials, _b = _a.loading, loading = _b === void 0 ? false : _b, onStartTutorial = _a.onStartTutorial, downloadUrl = _a.downloadUrl;
var focusVisible = useFocusVisible();
return (React.createElement(React.Fragment, null,
React.createElement(SpaceBetween, { size: "s" },
React.createElement(SpaceBetween, { size: "m" },
React.createElement(Box, { variant: "h2", padding: { bottom: 'n' } }, i18nStrings.tutorialListTitle),
React.createElement(Box, { variant: "p", color: "text-body-secondary", padding: "n" }, i18nStrings.tutorialListDescription)),
React.createElement(SpaceBetween, { size: "l" },
React.createElement("a", __assign({}, focusVisible, { href: downloadUrl, target: "_blank", rel: "noopener noreferrer", className: styles['download-link'] }),
React.createElement(Icon, { name: "download" }),
React.createElement(Box, { padding: { left: 'xs' }, color: "inherit", fontWeight: "bold", display: "inline" }, i18nStrings.tutorialListDownloadLinkText)),
loading ? (React.createElement(StatusIndicator, { type: "loading" }, i18nStrings.loadingText)) : (React.createElement(React.Fragment, null,
React.createElement("ul", { className: styles['tutorial-list'], role: "list" }, tutorials.map(function (tutorial, index) { return (React.createElement(Tutorial, { tutorial: tutorial, key: index, onStartTutorial: onStartTutorial, i18nStrings: i18nStrings })); }))))))));
}
function Tutorial(_a) {
var _b;
var tutorial = _a.tutorial, onStartTutorialEventHandler = _a.onStartTutorial, i18nStrings = _a.i18nStrings;
var controlId = useUniqueId();
var triggerControldId = useUniqueId();
var headerId = useUniqueId();
var onStartTutorial = useCallback(function () {
fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial: tutorial });
}, [onStartTutorialEventHandler, tutorial]);
var _c = useState(!tutorial.prerequisitesNeeded && !tutorial.completed), expanded = _c[0], setExpanded = _c[1];
var onClick = useCallback(function () {
setExpanded(function (expanded) { return !expanded; });
}, []);
return (React.createElement("li", { className: styles['tutorial-box'], role: "listitem" },
React.createElement(SpaceBetween, { size: "xs" },
React.createElement("div", { className: styles['tutorial-box-title'] },
React.createElement(Box, { variant: "h3", id: headerId, margin: { right: 'xs' }, padding: "n" }, tutorial.title),
React.createElement("div", { className: styles['button-wrapper'] },
React.createElement(InternalButton, { id: triggerControldId, variant: "icon", nativeAttributes: {
'aria-controls': controlId,
'aria-expanded': expanded,
'aria-labelledby': headerId
}, formAction: "none", onClick: onClick, className: expanded ? styles['collapse-button'] : styles['expand-button'], iconName: expanded ? 'angle-up' : 'angle-down' }))),
tutorial.completed ? (React.createElement(StatusIndicator, { type: "success" }, i18nStrings.tutorialCompletedText)) : null),
React.createElement("div", { "aria-live": "polite" },
React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] } },
React.createElement("div", { className: clsx(styles['expandable-section'], expanded && styles.expanded), id: controlId },
React.createElement(SpaceBetween, { size: "l" },
React.createElement(SpaceBetween, { size: "m" },
tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (React.createElement(Alert, null, tutorial.prerequisitesAlert)),
React.createElement(SpaceBetween, { size: "s" },
React.createElement(Box, { color: "text-body-secondary" },
React.createElement("div", { className: clsx(styles['tutorial-description'], typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']) }, tutorial.description)),
tutorial.learnMoreUrl && (React.createElement(Link, { href: tutorial.learnMoreUrl, external: true, target: "_blank", className: styles['learn-more-link'] }, i18nStrings.learnMoreLinkText)))),
React.createElement(Box, { margin: { bottom: 'xxs' } },
React.createElement(Button, { onClick: onStartTutorial, disabled: (_b = tutorial.prerequisitesNeeded) !== null && _b !== void 0 ? _b : false, formAction: "none", className: styles.start, ariaLabel: tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText }, tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText))))))));
}