@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
94 lines (93 loc) • 3.12 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import classnames from 'classnames';
import React, { useContext } from 'react';
import Button from "../button/Button.js";
import Section from "../section/Section.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import chevron_down from "../../icons/chevron_down.js";
import { validateDOMAttributes, combineDescribedBy } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import FormLabel from "../form-label/FormLabel.js";
import StepIndicatorContext from "./StepIndicatorContext.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
function StepIndicatorTriggerButton({
className,
isNested,
...rest
}) {
const {
data,
...contextWithoutData
} = useContext(StepIndicatorContext);
const {
stepsLabel,
activeStep,
overview_title,
openState,
closeHandler,
openHandler,
skeleton,
filterAttributes,
no_animation
} = contextWithoutData;
const item = data[activeStep || 0];
const label = stepsLabel;
const id = useId();
const triggerParams = {
...contextWithoutData,
className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', skeleton)),
'aria-live': 'polite'
};
const buttonParams = {
...rest,
className: classnames(`dnb-step-indicator__trigger__button dnb-step-indicator__trigger__button--${openState ? 'expanded' : 'collapsed'}`, className)
};
buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, id + '-overview');
const triggerParamKeys = Object.keys(triggerParams);
triggerParamKeys.forEach(key => {
if (filterAttributes.includes(key)) {
delete triggerParams[key];
}
});
skeletonDOMAttributes(triggerParams, skeleton);
validateDOMAttributes(contextWithoutData, triggerParams);
return React.createElement(Section, {
backgroundColor: "var(--step-indicator-trigger-background)",
outline: "transparent",
innerSpace: {
top: 'small',
bottom: 'small'
},
roundedCorner: {
small: false,
medium: [true, true, !openState, !openState],
large: [true, true, !openState, !openState]
},
outset: isNested ? true : undefined,
"aria-label": overview_title
}, React.createElement(HeightAnimation, {
animate: !no_animation
}, React.createElement("div", triggerParams, React.createElement(FormLabel, {
"aria-describedby": id,
"aria-hidden": true,
className: "dnb-step-indicator__label",
right: "x-small"
}, label), React.createElement(Button, _extends({}, buttonParams, {
onClick: () => {
if (openState) {
closeHandler();
} else {
openHandler();
}
},
"aria-expanded": openState,
"aria-label": label,
wrap: true,
variant: "tertiary",
icon: chevron_down,
icon_position: "right"
}), (typeof item === 'string' ? item : item && item.title) || ''))));
}
export default StepIndicatorTriggerButton;
//# sourceMappingURL=StepIndicatorTriggerButton.js.map