@manamerge/mana-atomic-ui 1.0.196 → 1.0.197

package/dist/index.d.ts

@@ -160,7 +160,6 @@ interface CardTeaserTypes {
     onClick?: React.MouseEventHandler<HTMLElement>;
     checks?: string[];
     svg?: FunctionComponent<SVGProps<SVGSVGElement>>;
-    backgroundSvg?: FunctionComponent<SVGProps<SVGSVGElement>>;
     cardImageSrc?: string;
     separator?: boolean;
 }

package/dist/index.js

@@ -718,7 +718,7 @@ const NavBar = styled.nav `
     width: auto;
     right: 0;
     left: 0;
-    z-index: 1;
+    z-index: 20;
 
     ${({ theme, moleculeVariant }) => {
     var _a;
@@ -772,15 +772,30 @@ const NavLinks = styled.div `
     flex-direction: column;
     text-align: right;
     align-items: flex-end;
-    display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+    display: flex;
+
     width: 100%;
 
+    overflow: hidden;
+    transition:
+        max-height 0.55s ease,
+        opacity 0.55s ease,
+        transform 0.55s ease;
+
+    max-height: ${({ isOpen }) => (isOpen ? "400px" : "0px")};
+    opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+    transform: ${({ isOpen }) => isOpen ? "translateY(0)" : "translateY(-10px)"};
+
     ${({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d;
     const thisTheme = ((_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.navLinks) === null || _c === void 0 ? void 0 : _c.responsive) === null || _d === void 0 ? void 0 : _d.largeMobileUp) || {};
     const { largeMobileUp } = theme.media;
     return css `
             ${largeMobileUp} {
+                max-height: none;
+                opacity: 1;
+                transform: none;
+
                 margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
                 display: flex;
                 flex-direction: row;
@@ -844,6 +859,17 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
         `;
 }};
 `;
+const Backdrop = styled.div `
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+
+    opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+    pointer-events: ${({ isOpen }) => (isOpen ? "auto" : "none")};
+
+    transition: opacity 0.25s ease;
+    z-index: 10;
+`;
 
 const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs }) => {
     const location = useLocation();
@@ -853,9 +879,9 @@ const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger
         setIsOpen(!isOpen);
     };
     const compVariant = `Navigation-${moleculeVariant}`;
-    return (jsxs(NavBar, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [logo && (jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: logo, onClick: onLogoClick, onKeyDown: onLogoClick, "aria-label": "Logo", tabIndex: 0, role: "button" })), jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [jsx(BurgerWrapper, { children: jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: iconBurger, onClick: handleToggle, onKeyDown: handleToggle, "aria-pressed": isOpen, "aria-label": "Burger", tabIndex: 0, role: "button" }) }), jsx(NavLinks, Object.assign({ isOpen: isOpen, moleculeVariant: compVariant }, { children: tabs.length > 0
-                            ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.to === currentPath }, { children: tab.label }), tab.label)))
-                            : "no tabs available" }))] }))] })));
+    return (jsxs(Fragment, { children: [jsx(Backdrop, { isOpen: isOpen, onClick: () => setIsOpen(false) }), jsxs(NavBar, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [logo && (jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: logo, onClick: onLogoClick, onKeyDown: onLogoClick, "aria-label": "Logo", tabIndex: 0, role: "button" })), jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [jsx(BurgerWrapper, { children: jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: iconBurger, onClick: handleToggle, onKeyDown: handleToggle, "aria-pressed": isOpen, "aria-label": "Burger", tabIndex: 0, role: "button" }) }), jsx(NavLinks, Object.assign({ isOpen: isOpen, moleculeVariant: compVariant }, { children: tabs.length > 0
+                                    ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.to === currentPath, onClick: () => setIsOpen(false) }, { children: tab.label }), tab.label)))
+                                    : "no tabs available" }))] }))] }))] }));
 };
 
 // Wrapper for the footer
@@ -980,20 +1006,21 @@ const CardContainer = styled.div `
     var _a;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
     return css `
+            background-image: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background};
             border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
             max-width: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth};
         `;
 }}
+
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
 `;
 const HeadingCompanyDate = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingCompanyDate) === null || _c === void 0 ? void 0 : _c.variant,
-        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.headingCompanyDate) === null || _f === void 0 ? void 0 : _f.asTag
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingCompanyDate) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) `
     ${({ theme, moleculeVariant }) => {
@@ -1010,12 +1037,19 @@ const HeadingCompanyDate = styled(Heading).attrs(({ theme, moleculeVariant }) =>
     overflow: hidden;
 `;
 const HeadingTitle = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) === null || _c === void 0 ? void 0 : _c.variant,
-        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.headingTitle) === null || _f === void 0 ? void 0 : _f.asTag
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) === null || _c === void 0 ? void 0 : _c.variant
     });
-}) ``;
+}) `
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const headingTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) || {};
+    return css `
+            color: ${headingTheme === null || headingTheme === void 0 ? void 0 : headingTheme.color};
+        `;
+}}
+`;
 const TextListItem = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -1026,6 +1060,7 @@ const TextListItem = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b;
     const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.text) || {};
     return css `
+            color: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.color};
             margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
         `;
 }}
@@ -1044,7 +1079,6 @@ const List = styled.ul `
 `;
 const ButtonCardContainer = styled.div `
     align-self: center;
-    margin-top: 15px;
     ${({ theme }) => theme.media.mobileUp} {
         align-self: flex-start;
     }
@@ -1087,7 +1121,6 @@ const LeftCardContainer = styled.div `
     display: flex;
     flex-direction: column;
     width: 100%;
-    z-index: 1;
     ${({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d, _e;
     const leftCardContainer = ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.leftCardContainer) === null || _c === void 0 ? void 0 : _c.responsive) || {};
@@ -1145,24 +1178,11 @@ const Separator = styled.section `
     }
 `;
 const IconCard = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.variant,
-        fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.icon) === null || _f === void 0 ? void 0 : _f.fill,
-        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.icon) === null || _j === void 0 ? void 0 : _j.stroke
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.variant
     });
-}) `
-    ${({ theme, moleculeVariant }) => {
-    var _a;
-    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
-    return css `
-            &:hover {
-                fill: ${thisTheme.icon.hover.fill};
-                stroke: ${thisTheme.icon.hover.stroke};
-            }
-        `;
-}};
-`;
+}) ``;
 const ButtonCard = styled(Button).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -1173,42 +1193,18 @@ const CardBackgroundColor = styled.div `
     ${({ theme, moleculeVariant }) => {
     var _a;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
-    const { largeMobileUp } = theme.media;
     return css `
-            position: relative;
-            width: 500px;
+            width: 100%;
             border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
             max-width: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth};
             background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientBackground};
-            ${largeMobileUp} {
-                width: 100%;
-            }
         `;
 }}
 `;
-const GradientStyle = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
-    return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.gradient) === null || _c === void 0 ? void 0 : _c.variant
-    });
-}) ``;
-const BackgroundSvg = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
-    return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.svgBackground) === null || _c === void 0 ? void 0 : _c.variant
-    });
-}) `
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 25px;
-`;
 
-const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, backgroundSvg, cardImageSrc, separator }) => {
+const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, cardImageSrc, separator }) => {
     const compVariant = "CardTeaser-" + moleculeVariant;
-    return (jsxs(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [backgroundSvg && (jsx(BackgroundSvg, { moleculeVariant: compVariant, svg: backgroundSvg })), jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsx(GradientStyle, Object.assign({ moleculeVariant: "primary" }, { children: jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] })) }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] }))] })));
+    return (jsx(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] })) })));
 };
 
 const scroll = keyframes `
@@ -1484,6 +1480,7 @@ const AccordionTitle = styled.button `
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
     return css `
             all: unset;
+            user-select: text;
             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"};
@@ -1532,13 +1529,16 @@ const AtomHeading = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     });
 }) ``;
 const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
     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,
         size: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.size,
         color: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.color,
         fill: (_m = (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _k === void 0 ? void 0 : _k[moleculeVariant]) === null || _l === void 0 ? void 0 : _l.atomIcon) === null || _m === void 0 ? void 0 : _m.fill,
-        stroke: (_q = (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _o === void 0 ? void 0 : _o[moleculeVariant]) === null || _p === void 0 ? void 0 : _p.atomIcon) === null || _q === void 0 ? void 0 : _q.stroke
+        stroke: (_q = (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _o === void 0 ? void 0 : _o[moleculeVariant]) === null || _p === void 0 ? void 0 : _p.atomIcon) === null || _q === void 0 ? void 0 : _q.stroke,
+        hoverColor: (_u = (_t = (_s = (_r = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _r === void 0 ? void 0 : _r[moleculeVariant]) === null || _s === void 0 ? void 0 : _s.atomIcon) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u.color,
+        hoverFill: (_y = (_x = (_w = (_v = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _v === void 0 ? void 0 : _v[moleculeVariant]) === null || _w === void 0 ? void 0 : _w.atomIcon) === null || _x === void 0 ? void 0 : _x.hover) === null || _y === void 0 ? void 0 : _y.fill,
+        hoverStroke: (_2 = (_1 = (_0 = (_z = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _z === void 0 ? void 0 : _z[moleculeVariant]) === null || _0 === void 0 ? void 0 : _0.atomIcon) === null || _1 === void 0 ? void 0 : _1.hover) === null || _2 === void 0 ? void 0 : _2.stroke
     });
 }) `
     min-width: fit-content;