@octopusdeploy/design-system-components
Version:
The design systems component library.
58 lines (57 loc) • 3.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverSequential = PopoverSequential;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Button_1 = require("../Button");
const IconButton_1 = require("../IconButton");
const StepCount_1 = require("../StepCount");
const Popover_1 = require("./Popover");
const PopoverContentContainer_1 = require("./PopoverContentContainer");
function PopoverSequential({ width = "wide", ...props }) {
return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { placement: props.placement, open: props.open, anchorEl: props.anchorEl, onClose: props.onClose, children: (0, jsx_runtime_1.jsxs)(PopoverContentContainer_1.PopoverContentContainer, { width: width, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.titleContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: styles.title, children: props.title }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(IconButton_1.DeprecatedIconButton, { accessibleName: "ClosePopover", icon: "XmarkIcon", onClick: props.onClose }) })] }), props.image && (0, jsx_runtime_1.jsx)("img", { className: styles.image, src: props.image }), props.video && ((0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("video", { src: props.video, playsInline: true, autoPlay: true, loop: true, muted: true, className: styles.video }) })), (0, jsx_runtime_1.jsx)("div", { className: styles.content, children: props.description }), props.infoCallout && (0, jsx_runtime_1.jsx)("div", { className: styles.tipContainer, children: props.infoCallout }), (0, jsx_runtime_1.jsxs)("div", { className: styles.bottomContainer, children: [(0, jsx_runtime_1.jsx)(StepCount_1.StepCount, { variant: "text", currentStep: props.currentStep, totalSteps: props.totalSteps }), (0, jsx_runtime_1.jsxs)("div", { className: styles.buttonsContainer, children: [props.currentStep > 1 && (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", importance: "secondary", onClick: props.onBack }), props.currentStep < props.totalSteps && (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Next", importance: "primary", onClick: props.onNext }), props.currentStep >= props.totalSteps && (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Finish", importance: "primary", onClick: props.onFinish })] })] })] }) }));
}
const styles = {
titleContainer: (0, css_1.css)({
display: "flex",
alignItems: "start",
justifyContent: "space-between",
}),
title: (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.large,
paddingRight: design_system_tokens_1.space[8],
}),
content: (0, css_1.css)({
marginTop: design_system_tokens_1.space[12],
marginBottom: design_system_tokens_1.space[12],
font: design_system_tokens_1.text.body.regular.medium,
}),
image: (0, css_1.css)({
width: "100%",
paddingTop: design_system_tokens_1.space[12],
}),
tipContainer: (0, css_1.css)({
borderRadius: design_system_tokens_1.borderRadius.small,
padding: design_system_tokens_1.space[12],
marginBottom: design_system_tokens_1.space[12],
font: design_system_tokens_1.text.body.regular.medium,
backgroundColor: design_system_tokens_1.themeTokens.color.popover.background.secondary,
}),
bottomContainer: (0, css_1.css)({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}),
buttonsContainer: (0, css_1.css)({
display: "flex",
flexDirection: "row",
gap: design_system_tokens_1.space[8],
justifyContent: "center",
}),
video: (0, css_1.css)({
width: "100%",
borderRadius: design_system_tokens_1.borderRadius.small,
paddingTop: design_system_tokens_1.space[12],
}),
};