@manamerge/mana-atomic-ui 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -221,4 +221,16 @@ interface CardBannerTypes {
 }
 declare const CardBanner: React.FC<CardBannerTypes>;
 
-export { BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
+interface ContentTypes {
+    title?: string;
+    description?: string;
+}
+interface AccordionTypes {
+    moleculeVariant?: string;
+    iconPlus?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    iconMinus?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    content?: ContentTypes[];
+}
+declare const Accordion: React.FC<AccordionTypes>;
+
+export { Accordion, BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };

package/dist/index.js

@@ -573,7 +573,7 @@ const AtomIconDot = styled(Icon).attrs(({ theme, moleculeVariant }) => {
         `;
 }}
 `;
-const AtomHeading$2 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
+const AtomHeading$3 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant
@@ -631,7 +631,7 @@ const AtomIconRight = styled(Icon).attrs(({ theme, moleculeVariant }) => {
 
 const Header = ({ moleculeVariant = "primary", iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick }) => {
     const compVariant = `Header-${moleculeVariant}`;
-    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: jsxs(WrapperHeader, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] }))] }), jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle })), jsx("div", { children: textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: text }), i))) }), jsxs(WrapperLineBottom, { children: [jsxs(AtomButtonLeft, Object.assign({ moleculeVariant: compVariant, onClick: buttonLeftClick }, { children: [iconLeft && (jsx(AtomIconLeft, { moleculeVariant: compVariant, svg: iconLeft })), jsx(AtomTextLeft, Object.assign({ moleculeVariant: compVariant }, { children: buttonLeftText }))] })), jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [jsx(AtomTextRight, Object.assign({ moleculeVariant: compVariant }, { children: buttonRightText })), iconRight && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: iconRight }))] }))] })] }) })));
+    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: jsxs(WrapperHeader, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] }))] }), jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle })), jsx("div", { children: textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: text }), i))) }), jsxs(WrapperLineBottom, { children: [jsxs(AtomButtonLeft, Object.assign({ moleculeVariant: compVariant, onClick: buttonLeftClick }, { children: [iconLeft && (jsx(AtomIconLeft, { moleculeVariant: compVariant, svg: iconLeft })), jsx(AtomTextLeft, Object.assign({ moleculeVariant: compVariant }, { children: buttonLeftText }))] })), jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [jsx(AtomTextRight, Object.assign({ moleculeVariant: compVariant }, { children: buttonRightText })), iconRight && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: iconRight }))] }))] })] }) })));
 };
 
 const NavBar = styled.nav `
@@ -1238,19 +1238,19 @@ const WrapperLine = styled.div `
     text-align: center;
     gap: 10px;
 `;
-const AtomIcon$1 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
+const AtomIcon$2 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
-const AtomHeading$1 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
+const AtomHeading$2 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
-const AtomText$1 = styled(Text).attrs(({ theme, moleculeVariant }) => {
+const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant
@@ -1258,7 +1258,7 @@ const AtomText$1 = styled(Text).attrs(({ theme, moleculeVariant }) => {
 }) ``;
 
 const CardSimpleRender = ({ moleculeVariant = "primary", icon, title, description, children, cardClick }) => {
-    return (jsxs(Card$1, Object.assign({ className: classNames("CardSimpleRender-", moleculeVariant), moleculeVariant: "CardSimpleRender-" + moleculeVariant, as: cardClick ? "button" : "div", onClick: cardClick, cardHover: !!cardClick }, { children: [jsxs("div", { children: [jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$1, { moleculeVariant: "CardSimpleRender-" + moleculeVariant, svg: icon })), jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardSimpleRender-" + moleculeVariant }, { children: title }))] }), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardSimpleRender-" + moleculeVariant }, { children: description }))] }), children] })));
+    return (jsxs(Card$1, Object.assign({ className: classNames("CardSimpleRender-", moleculeVariant), moleculeVariant: "CardSimpleRender-" + moleculeVariant, as: cardClick ? "button" : "div", onClick: cardClick, cardHover: !!cardClick }, { children: [jsxs("div", { children: [jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: "CardSimpleRender-" + moleculeVariant, svg: icon })), jsx(AtomHeading$2, Object.assign({ moleculeVariant: "CardSimpleRender-" + moleculeVariant }, { children: title }))] }), jsx(AtomText$2, Object.assign({ moleculeVariant: "CardSimpleRender-" + moleculeVariant }, { children: description }))] }), children] })));
 };
 
 const Card = styled.div `
@@ -1288,13 +1288,13 @@ const Card = styled.div `
         `;
 }}
 `;
-const AtomHeading = styled(Heading).attrs(({ theme, moleculeVariant }) => {
+const AtomHeading$1 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
-const AtomText = styled(Text).attrs(({ theme, moleculeVariant }) => {
+const AtomText$1 = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant
@@ -1312,7 +1312,7 @@ const AtomTextButton = styled(Text).attrs(({ theme, moleculeVariant }) => {
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextButton) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
-const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
+const AtomIcon$1 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
@@ -1320,8 +1320,112 @@ const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
 }) ``;
 
 const CardBanner = ({ moleculeVariant = "primary", icon, title, description, buttonText, buttonClick }) => {
-    return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, { children: [jsxs("div", { children: [jsx(AtomHeading, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [jsx(AtomTextButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: buttonText })), icon && (jsx(AtomIcon, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
+    return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, { children: [jsxs("div", { children: [jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [jsx(AtomTextButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: buttonText })), icon && (jsx(AtomIcon$1, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
+};
+
+const AccordionContainer = styled.div `
+    ${({ theme, moleculeVariant }) => {
+    var _a;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.width) || "100%"};
+            border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
+            overflow: hidden;
+        `;
+}};
+`;
+const AccordionTitle = styled.button `
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b, _c, _d;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            all: unset;
+            width: 100%;
+            display: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.display) || "flex"};
+            align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
+            justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-between"};
+            text-align: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.textAlign};
+            gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
+            cursor: pointer;
+            background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundTitle};
+            &:hover {
+                background: ${(_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _b === void 0 ? void 0 : _b.background};
+            }
+            &:focus-visible {
+                outline: ${((_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focusVisible) === null || _c === void 0 ? void 0 : _c.outline) ||
+        "#0078d4 2px solid"};
+                outline-offset: ${((_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focusVisible) === null || _d === void 0 ? void 0 : _d.outlineOffset) ||
+        "1px"};
+            }
+            > * {
+                padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.paddingTitle};
+            }
+        `;
+}};
+`;
+const AccordionDescription = styled.div `
+    ${({ theme, moleculeVariant }) => {
+    var _a;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundDescription};
+        `;
+}};
+
+    overflow: hidden;
+    opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+    max-height: ${({ isOpen }) => (isOpen ? "1000px" : "0")};
+    transition:
+        max-height 0.5s ease,
+        opacity 0.6s ease;
+`;
+const AtomHeading = styled(Heading).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c;
+    return ({
+        variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant) || "h5"
+    });
+}) `
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) || {};
+    return css `
+            color: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.color};
+        `;
+}};
+`;
+const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c;
+    return ({
+        variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant) || "small"
+    });
+}) ``;
+const AtomText = styled(Text).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c;
+    return ({
+        variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant) || "regular"
+    });
+}) `
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) || {};
+    return css `
+            padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
+        `;
+}};
+`;
+
+const Accordion = ({ moleculeVariant = "primary", iconPlus, iconMinus, content = [] }) => {
+    const [openIndices, setOpenIndices] = useState([]);
+    const toggleAccordion = (index) => {
+        setOpenIndices((prev) => {
+            const newOpenIndices = [...prev];
+            newOpenIndices[index] = !newOpenIndices[index];
+            return newOpenIndices;
+        });
+    };
+    const compVariant = `Accordion-${moleculeVariant}`;
+    return (jsx(AccordionContainer, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: content === null || content === void 0 ? void 0 : content.map((item, index) => (jsxs(Fragment, { children: [jsxs(AccordionTitle, Object.assign({ moleculeVariant: compVariant, onClick: () => toggleAccordion(index), "aria-pressed": openIndices[index] }, { children: [jsx(AtomHeading, Object.assign({ moleculeVariant: compVariant }, { children: item.title })), iconPlus && iconMinus && (jsx(AtomIcon, { moleculeVariant: compVariant, svg: openIndices[index] ? iconMinus : iconPlus }))] })), jsx(AccordionDescription, Object.assign({ moleculeVariant: compVariant, isOpen: openIndices[index], onTransitionEnd: () => !openIndices[index] }, { children: jsx(AtomText, Object.assign({ moleculeVariant: compVariant }, { children: item.description })) }))] }))) })));
 };
 
-export { BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
+export { Accordion, BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
 //# sourceMappingURL=index.js.map