@navinc/base-react-components
Version:
Nav's Pattern Library
72 lines (71 loc) • 3.48 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CarouselCard = exports.CarouselCardBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const standard_card_js_1 = require("./standard-card.js");
const carousel_1 = require("./carousel");
const TopWave = 'https://design-assets.nav.com/illustrations/color-wave-down.svg';
const CarouselCardHeader = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CarouselCardHeader", componentId: "brc-sc-1mu5nvr" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
text-align: center;
`;
const CarouselCardFooter = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CarouselCardFooter", componentId: "brc-sc-d2kfrb" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 0 16px;
`;
const CarouselCardContent = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CarouselCardContent", componentId: "brc-sc-13haaay" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 48px;
`;
const CarouselCardBg = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CarouselCardBg", componentId: "brc-sc-z5byn0" }) `
z-index: 1;
position: absolute;
width: 100%;
left: 0;
top: 0;
right: 0;
height: 50%;
background-image: url(${TopWave});
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
`;
const CarouselCardContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CarouselCardContainer", componentId: "brc-sc-17pthjt" }) `
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
z-index: 2;
gap: 24px;
${CarouselCardHeader} {
& * {
color: ${({ theme }) => theme.navNeutralLight};
}
}
`;
const CarouselCardBase = ({ renderHeader, renderFooter, children, carouselProps = {}, }) => {
const [index, setIndex] = (0, react_1.useState)(0);
// Sync with the activeIndex of carousel component
const handleSlideChange = ({ activeIndex }) => {
setIndex(activeIndex);
};
return ((0, jsx_runtime_1.jsxs)(standard_card_js_1.StandardCard, { children: [(0, jsx_runtime_1.jsx)(CarouselCardBg, {}), (0, jsx_runtime_1.jsxs)(CarouselCardContainer, { "data-testid": "carousel-card", children: [renderHeader && ((0, jsx_runtime_1.jsx)(CarouselCardHeader, { "data-testid": "carousel-card:header", children: renderHeader({ index }) })), (0, jsx_runtime_1.jsx)(CarouselCardContent, { children: (0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({}, carouselProps, { onSlideChange: handleSlideChange, children: children })) }), renderFooter && ((0, jsx_runtime_1.jsx)(CarouselCardFooter, { "data-testid": "carousel-card:footer", children: renderFooter({ index }) }))] })] }));
};
exports.CarouselCardBase = CarouselCardBase;
exports.CarouselCardBase.displayName = 'CarouselCard';
const StyledCarouselCardExp = (0, styled_components_1.default)(exports.CarouselCardBase).withConfig({ displayName: "brc-sc-StyledCarouselCardExp", componentId: "brc-sc-te4q33" }) ``;
exports.CarouselCard = StyledCarouselCardExp;
//# sourceMappingURL=carousel-card.js.map