@veracity/vui/dist/tutorial/tutorialCard.js

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

import styled from "../core/styled.js";
import { Box } from "../box/box.js";
import { Icon } from "../icon/icon.js";
import { DismissButton } from "../dismissButton/DismissButton.js";
import { Button } from "../button/button.js";
import { IconButton } from "../button/buttons.js";
import { Card } from "../card/card.js";
import { H4 } from "../heading/headings.js";
import { tutorialColors } from "./consts.js";
import { TutorialStep } from "./tutorialStep.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/tutorial/tutorialCard.tsx
const TutorialHeader = styled(Box)`
  display: flex;
  flex-direction: row;
  flex: 0;
  flex-grow: 0;
  -webkit-flex-grow: 0;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  --vui-dismiss-fg: var(--vui-action-contrast-solid);
`;
function TutorialCard({ actionLabel = "Action", className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle }) {
	const [steps, setSteps] = useState([]);
	const [activeStep, setActiveStep] = useState(0);
	useEffect(() => {
		if (title && propsSteps.length) {
			const s = propsSteps.map((step, key) => ({
				active: false,
				step,
				key
			}));
			const finalStep = {
				title: `Completed!`,
				content: `${readMoreLink ? "To learn more, please visit:" : "Thank you!"}`
			};
			if (readMoreLink) finalStep.readMoreLink = readMoreLink;
			includeFinalPage ? setSteps([...s, {
				step: finalStep,
				key: propsSteps.length
			}]) : setSteps([...s]);
		}
	}, [title, propsSteps]);
	const isStartStep = activeStep === 0;
	const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1;
	return /* @__PURE__ */ jsxs(Card, {
		bg: tutorialColors.bg,
		className,
		color: tutorialColors.color,
		column: true,
		justifyContent: "space-between",
		minH: 400,
		px: 3,
		py: 2,
		w: 580,
		children: [
			/* @__PURE__ */ jsxs(TutorialHeader, {
				className: className + "__header",
				children: [/* @__PURE__ */ jsx(H4, {
					color: tutorialColors.color,
					children: useContentTitle ? steps[activeStep]?.step?.title : title
				}), !isFinalStep && /* @__PURE__ */ jsx(DismissButton, {
					"aria-label": "close",
					icon: "uiTimes",
					onClick: onDismiss,
					scale: 2
				})]
			}),
			/* @__PURE__ */ jsx(Box, {
				flex: 5,
				row: true,
				children: steps?.map?.((s) => /* @__PURE__ */ jsx(TutorialStep, {
					active: s.key === activeStep,
					content: s.step.content,
					readMoreLink: s.step.readMoreLink,
					title: s.step.title,
					useContentTitle
				}, s.step.title))
			}),
			/* @__PURE__ */ jsxs(Box, {
				alignItems: "center",
				justifyContent: "space-between",
				mt: 0,
				children: [/* @__PURE__ */ jsxs(Box, {
					alignItems: "center",
					justifyContent: "space-between",
					w: "-webkit-fill-available",
					children: [
						/* @__PURE__ */ jsx(IconButton, {
							"aria-label": "previous",
							color: tutorialColors.buttonColor,
							disabled: isStartStep,
							icon: "uiArrowLeft",
							onClick: () => setActiveStep(activeStep - 1),
							scale: 2,
							transition: "none",
							variant: "tertiary"
						}),
						/* @__PURE__ */ jsx(Box, {
							className: "vuiTutorialStepDots",
							children: steps?.map?.((s) => /* @__PURE__ */ jsx(Icon, {
								color: s.key === activeStep ? tutorialColors.color : "darkBlue.30",
								cursor: "pointer",
								hoverColor: tutorialColors.buttonColor,
								name: "uiDotFull",
								onClick: () => setActiveStep(s.key)
							}, s.key))
						}),
						/* @__PURE__ */ jsx(IconButton, {
							"aria-label": "next",
							color: tutorialColors.buttonColor,
							disabled: isFinalStep,
							icon: "uiArrowRight",
							onClick: () => setActiveStep(activeStep + 1),
							scale: 2,
							transition: "none",
							variant: "tertiary"
						})
					]
				}), (showSkipButton || isFinalStep || !!onAction) && /* @__PURE__ */ jsxs(Box, {
					alignItems: "center",
					justifyContent: "space-between",
					children: [
						showSkipButton && !isFinalStep && /* @__PURE__ */ jsx(Button, {
							mx: 1,
							onClick: onDismiss,
							variant: "secondary",
							intent: "contrast",
							children: "Skip"
						}),
						isFinalStep && /* @__PURE__ */ jsx(Button, {
							mx: 1,
							onClick: onFinish,
							variant: "primary",
							intent: "contrast",
							minW: "82px",
							children: "I got it"
						}),
						!!onAction && /* @__PURE__ */ jsx(Button, {
							ml: 1,
							mr: showSkipButton || isFinalStep ? 12 : 2,
							onClick: onAction,
							variant: "primary",
							intent: "contrast",
							children: actionLabel
						})
					]
				})]
			})
		]
	});
}
TutorialCard.displayName = "TutorialCard";

//#endregion
export { TutorialCard };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=tutorialCard.js.map