@manamerge/mana-atomic-ui 0.0.89 → 0.0.91

package/dist/index.d.ts

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

package/dist/index.js

@@ -357,7 +357,7 @@ const DividerStyle = styled.hr `
 
     ${(_a) => {
     var _b;
-    var { theme, variant = "" } = _a, props = __rest(_a, ["theme", "variant"]);
+    var { theme, variant = "primary" } = _a, props = __rest(_a, ["theme", "variant"]);
     const dividerStyle = ((_b = theme === null || theme === void 0 ? void 0 : theme.divider) === null || _b === void 0 ? void 0 : _b[variant]) || {};
     return css `
             width: ${props.width || dividerStyle.width || "100%"};
@@ -403,6 +403,17 @@ const WrapperBackground = styled.div `
             `;
 }}
         animation: glow 3s infinite alternate ease-in-out;
+
+        @keyframes glow {
+            0% {
+                transform: scale(1);
+                opacity: 0.5;
+            }
+            100% {
+                transform: scale(1.5);
+                opacity: 1;
+            }
+        }
     }
 `;
 const WrapperHeader = styled.div `
@@ -469,7 +480,7 @@ const AtomIconDot = styled(Icon).attrs(({ theme }) => {
         `;
 }}
 `;
-const AtomHeading$2 = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$3 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
@@ -533,7 +544,7 @@ const Header = ({ iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitl
                 React.createElement(WrapperLineTop, null,
                     iconDot && React.createElement(AtomIconDot, { svg: iconDot }),
                     React.createElement(AtomTextTitle, null, textBanner))),
-            React.createElement(AtomHeading$2, null, headingTitle),
+            React.createElement(AtomHeading$3, null, headingTitle),
             React.createElement("div", null, textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (React.createElement(AtomTextTitle, { key: i }, text)))),
             React.createElement(WrapperLineBottom, null,
                 React.createElement(AtomButtonLeft, { onClick: buttonLeftClick },
@@ -628,6 +639,12 @@ const StyledLink$1 = styled(Link).attrs(({ theme }) => {
         `;
 }};
 `;
+const AtomButton$1 = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomButton) === null || _b === void 0 ? void 0 : _b.variant) || "icon"
+    });
+}) ``;
 
 const Navigation = ({ iconBurger, tabs, onTabClick }) => {
     const location = useLocation();
@@ -636,14 +653,10 @@ const Navigation = ({ iconBurger, tabs, onTabClick }) => {
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
-    const handleKeyDown = (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-            handleToggle();
-        }
-    };
     return (React.createElement(NavBar, null,
         React.createElement(BurgerWrapper, null,
-            React.createElement(BurgerIcon, { onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-pressed": isOpen, svg: iconBurger })),
+            React.createElement(AtomButton$1, { onClick: handleToggle, "aria-pressed": isOpen },
+                React.createElement(BurgerIcon, { svg: iconBurger }))),
         React.createElement(NavLinks, { isOpen: isOpen }, tabs.length > 0
             ? tabs.map((tab) => (React.createElement(StyledLink$1, { key: tab.label, to: tab.to, currentPath: tab.label === currentPath, onClick: () => {
                     onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
@@ -1104,6 +1117,8 @@ const Card$1 = styled.div `
     var { theme } = _a, props = __rest(_a, ["theme"]);
     const thisTheme = (theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) || {};
     return css `
+            all: unset;
+            width: 100%;
             display: flex;
             flex-direction: ${(props === null || props === void 0 ? void 0 : props.flexDirection) ||
         (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.flexDirection) ||
@@ -1155,7 +1170,7 @@ const Card$1 = styled.div `
         `;
 }}
 `;
-const WrapperLine = styled.div `
+const WrapperLine$1 = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1163,19 +1178,19 @@ const WrapperLine = styled.div `
     text-align: center;
     gap: 10px;
 `;
-const AtomIcon$1 = styled(Icon).attrs(({ theme }) => {
+const AtomIcon$2 = styled(Icon).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
     });
 }) ``;
-const AtomHeading$1 = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$2 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h3"
     });
 }) ``;
-const AtomText$1 = styled(Text).attrs(({ theme }) => {
+const AtomText$2 = styled(Text).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a.atomText) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
@@ -1183,19 +1198,12 @@ const AtomText$1 = styled(Text).attrs(({ theme }) => {
 }) ``;
 
 const CardSimpleRender = ({ icon, title, description, children, cardClick }) => {
-    const handleKeyDown = (event) => {
-        if (cardClick) {
-            if (event.key === "Enter" || event.key === " ") {
-                cardClick(event);
-            }
-        }
-    };
-    return (React.createElement(Card$1, { onClick: cardClick, onKeyDown: handleKeyDown, tabIndex: cardClick ? 0 : undefined, cardHover: !!cardClick },
+    return (React.createElement(Card$1, { as: cardClick ? "button" : "div", onClick: cardClick, cardHover: !!cardClick },
         React.createElement("div", null,
-            React.createElement(WrapperLine, null,
-                icon && React.createElement(AtomIcon$1, { svg: icon }),
-                React.createElement(AtomHeading$1, null, title)),
-            React.createElement(AtomText$1, null, description)),
+            React.createElement(WrapperLine$1, null,
+                icon && React.createElement(AtomIcon$2, { svg: icon }),
+                React.createElement(AtomHeading$2, null, title)),
+            React.createElement(AtomText$2, null, description)),
         children));
 };
 
@@ -1225,13 +1233,13 @@ const Card = styled.div `
         `;
 }}
 `;
-const AtomHeading = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$1 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h3"
     });
 }) ``;
-const AtomText = styled(Text).attrs(({ theme }) => {
+const AtomText$1 = styled(Text).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomText) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
@@ -1249,7 +1257,7 @@ const AtomTextButton = styled(Text).attrs(({ theme }) => {
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomTextButton) === null || _b === void 0 ? void 0 : _b.variant) || "primary"
     });
 }) ``;
-const AtomIcon = styled(Icon).attrs(({ theme }) => {
+const AtomIcon$1 = styled(Icon).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
@@ -1259,12 +1267,93 @@ const AtomIcon = styled(Icon).attrs(({ theme }) => {
 const CardBanner = ({ icon, title, description, buttonText, buttonClick }) => {
     return (React.createElement(Card, null,
         React.createElement("div", null,
-            React.createElement(AtomHeading, null, title),
-            React.createElement(AtomText, null, description)),
+            React.createElement(AtomHeading$1, null, title),
+            React.createElement(AtomText$1, null, description)),
         buttonClick && (React.createElement(AtomButton, { onClick: buttonClick },
             React.createElement(AtomTextButton, null, buttonText),
-            icon && React.createElement(AtomIcon, { svg: icon })))));
+            icon && React.createElement(AtomIcon$1, { svg: icon })))));
+};
+
+const AccordionContainer = styled.div `
+    width: 100%;
+    background-color: #1e1e1e;
+    color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+`;
+const AccordionItem = styled.div `
+    border-bottom: 1px solid #333;
+`;
+const WrapperLine = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    gap: 10px;
+    cursor: pointer;
+    background: #2a2a2a;
+    &:hover {
+        background: #3a3a3a;
+    }
+`;
+const AccordionTitle = styled.div `
+    width: 80%;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+`;
+const AccordionDescription = styled.div `
+    padding: 16px;
+    background: #252525;
+    font-size: 14px;
+    display: ${({ isOpen }) => (isOpen ? "block" : "none")};
+`;
+const AtomHeading = styled(Heading).attrs((_a) => {
+    var _b, _c, _d;
+    var { theme } = _a, props = __rest(_a, ["theme"]);
+    return ({
+        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomHeading) === null || _d === void 0 ? void 0 : _d.variant) || "h5"
+    });
+}) ``;
+const AtomText = styled(Text).attrs((_a) => {
+    var _b, _c, _d;
+    var { theme } = _a, props = __rest(_a, ["theme"]);
+    return ({
+        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomText) === null || _d === void 0 ? void 0 : _d.variant) || "regular"
+    });
+}) ``;
+const AtomIcon = styled(Icon).attrs((_a) => {
+    var _b, _c, _d;
+    var { theme } = _a, props = __rest(_a, ["theme"]);
+    return ({
+        variant: ((_d = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _b === void 0 ? void 0 : _b[(props === null || props === void 0 ? void 0 : props.variant) || "Accordion-primary"]) === null || _c === void 0 ? void 0 : _c.atomIcon) === null || _d === void 0 ? void 0 : _d.variant) || "small"
+    });
+}) `
+    padding: 16px;
+`;
+
+const Accordion = ({ variant = "primary", iconPlus, iconMinus, content = [] }) => {
+    const [openIndices, setOpenIndices] = useState([]);
+    const toggleAccordion = (index) => {
+        setOpenIndices((prev) => {
+            const newOpenIndices = [...prev];
+            newOpenIndices[index] = !newOpenIndices[index];
+            return newOpenIndices;
+        });
+    };
+    return (React.createElement(AccordionContainer, { className: classNames("Accordion", variant), variant: "Accordion-" + variant }, content === null || content === void 0 ? void 0 : content.map((item, index) => (React.createElement(AccordionItem, { key: index },
+        React.createElement(WrapperLine, { onClick: () => toggleAccordion(index) },
+            React.createElement(AccordionTitle, null,
+                React.createElement(AtomHeading, { variant: "Accordion-" + variant }, item.title)),
+            React.createElement(AtomIcon, { svg: openIndices[index] ? iconMinus : iconPlus })),
+        React.createElement(AccordionDescription, { isOpen: openIndices[index] },
+            React.createElement(AtomText, { variant: "Accordion-" + variant }, item.description)))))));
 };
 
-export { BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
+export { Accordion, BreakerTape, Button, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Text };
 //# sourceMappingURL=index.js.map