@manamerge/mana-atomic-ui 1.0.8 → 1.0.10

package/dist/index.d.ts

@@ -141,8 +141,8 @@ interface HeaderTypes {
     moleculeVariant?: string;
     iconTop?: FunctionComponent<SVGProps<SVGSVGElement>>;
     iconDot?: FunctionComponent<SVGProps<SVGSVGElement>>;
-    iconLeft?: FunctionComponent<SVGProps<SVGSVGElement>>;
-    iconRight?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    buttonLeftIcon?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    buttonRightIcon?: FunctionComponent<SVGProps<SVGSVGElement>>;
     textBanner?: string;
     headingTitle?: string;
     textTitle?: string[];
@@ -150,16 +150,20 @@ interface HeaderTypes {
     buttonLeftClick?: React.MouseEventHandler<HTMLElement>;
     buttonRightText?: string;
     buttonRightClick?: React.MouseEventHandler<HTMLElement>;
+    imageURLBackground?: string;
+    withOverlay?: boolean;
 }
 declare const Header: React.FC<HeaderTypes>;
 
 interface NavigationTypes {
     moleculeVariant?: string;
+    logo?: FunctionComponent<SVGProps<SVGSVGElement>>;
     iconBurger: FunctionComponent<SVGProps<SVGSVGElement>>;
     tabs: {
         label: string;
         to: string;
     }[];
+    onLogoClick?: () => void;
     onTabClick: (label: string) => void;
 }
 declare const Navigation: React.FC<NavigationTypes>;

package/dist/index.js

@@ -502,20 +502,62 @@ const CDNImage = ({ src, alt = "", fetchPriority = "auto", decoding = "async", b
 };
 
 const WrapperBackground = styled.div `
-    position: relative;
     display: flex;
+    position: relative;
     align-items: center;
-    justify-content: center;
     width: 100%;
+    ${({ theme, moleculeVariant, imageURLBackground, withOverlay }) => {
+    var _a;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            background-image: url(${imageURLBackground});
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "center"};
+            height: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.height) || "unset"};
+            background-color: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundColor) || "unset"};
+
+            /* Overlay */
+            ${withOverlay &&
+        css `
+                &::before {
+                    content: "";
+                    position: absolute;
+                    inset: 0;
+
+                    background: linear-gradient(
+                        ${thisTheme.gradientStyles.orientation},
+                        ${thisTheme.gradientStyles.primaryColor},
+                        ${thisTheme.gradientStyles.secondaryColor},
+                        ${thisTheme.gradientStyles.tertiaryColor}
+                    );
+
+                    opacity: 0;
+                    transition: opacity 0.7s ease;
+                    pointer-events: none;
+                }
+                &:hover::before {
+                    opacity: 1;
+                }
+            `}
+        `;
+}};
 `;
 const WrapperHeader = styled.div `
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
     text-align: center;
     gap: 15px;
     position: relative;
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const thisTheme = ((_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.wrapperHeader) || {};
+    return css `
+            align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
+        `;
+}}
 `;
 const WrapperLineTop = styled.div `
     display: flex;
@@ -597,13 +639,35 @@ const AtomButtonLeft = styled(Button).attrs(({ theme, moleculeVariant }) => {
     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.atomButtonLeft) === null || _c === void 0 ? void 0 : _c.variant
     });
-}) ``;
+}) `
+    display: flex;
+
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const atomTheme = ((_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.atomButtonLeft) || {};
+    return css `
+            flex-direction: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.flexDirection) || "none"};
+            gap: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.gap) || "none"};
+        `;
+}}
+`;
 const AtomButtonRight = styled(Button).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.atomButtonRight) === null || _c === void 0 ? void 0 : _c.variant
     });
-}) ``;
+}) `
+    display: flex;
+
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const atomTheme = ((_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.atomButtonRight) || {};
+    return css `
+            flex-direction: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.flexDirection) || "none"};
+            gap: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.gap) || "none"};
+        `;
+}}
+`;
 const AtomTextLeft = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -628,18 +692,39 @@ const AtomIconRight = styled(Icon).attrs(({ theme, moleculeVariant }) => {
         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.atomIconRight) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
+const WrapperTextTitle = styled.div `
+    display: flex;
+    flex-direction: column;
+
+    ${({ theme, moleculeVariant }) => {
+    var _a, _b;
+    const atomTheme = ((_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.wrapperTextTitle) || {};
+    return css `
+            align-items: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.alignItems) || "none"};
+        `;
+}}
+`;
 
-const Header = ({ moleculeVariant = "primary", iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick }) => {
+const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay }) => {
     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$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 }))] }))] })] }) })));
+    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, { children: jsxs(WrapperHeader, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), textBanner && (jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] })))] }), headingTitle && (jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle }))), jsx(WrapperTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textTitle &&
+                        (textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: text }), i)))) })), jsxs(WrapperLineBottom, { children: [(buttonLeftIcon || buttonLeftText) && (jsxs(AtomButtonLeft, Object.assign({ moleculeVariant: compVariant, onClick: buttonLeftClick }, { children: [buttonLeftIcon && (jsx(AtomIconLeft, { moleculeVariant: compVariant, svg: buttonLeftIcon })), buttonLeftText && (jsx(AtomTextLeft, Object.assign({ moleculeVariant: compVariant }, { children: buttonLeftText })))] }))), (buttonRightIcon || buttonRightText) && (jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [buttonRightText && (jsx(AtomTextRight, Object.assign({ moleculeVariant: compVariant }, { children: buttonRightText }))), buttonRightIcon && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: buttonRightIcon }))] })))] })] })) })));
 };
 
 const NavBar = styled.nav `
+    display: flex;
+    align-items: flex-start;
+
     ${({ theme, moleculeVariant }) => {
     var _a;
     const navigationTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    const { largeMobileUp } = theme.media;
     return css `
-            background: ${navigationTheme.background || "#333"};
+            ${largeMobileUp} {
+                align-items: center;
+            }
+            gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
+            background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
         `;
 }}
 
@@ -649,12 +734,11 @@ const BurgerWrapper = styled.div `
     flex-direction: column;
     align-items: flex-end;
     display: flex;
-    padding: 3px;
     ${({ theme }) => theme.media.largeMobileUp} {
         display: none;
     }
 `;
-const BurgerIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
+const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
         variant: (_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.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
@@ -685,11 +769,21 @@ const NavLinks = styled.div `
     text-align: right;
     display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
     width: 100%;
-    ${({ theme }) => theme.media.largeMobileUp} {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-    }
+
+    ${({ 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} {
+                padding: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding) || "none"};
+                display: flex;
+                flex-direction: row;
+                gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "none"};
+                justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-around"};
+            }
+        `;
+}}
 `;
 const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
@@ -719,26 +813,21 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
         `;
 }};
 `;
-const AtomButton$1 = styled(Button).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
-    return ({
-        variant: (_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.atomButton) === null || _c === void 0 ? void 0 : _c.variant
-    });
-}) ``;
 
-const Navigation = ({ moleculeVariant = "primary", iconBurger, tabs, onTabClick }) => {
+const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs, onTabClick }) => {
     const location = useLocation();
     const currentPath = location.pathname.slice(1);
     const [isOpen, setIsOpen] = useState(false);
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
-    return (jsxs(NavBar, Object.assign({ className: classNames("Navigation-", moleculeVariant), moleculeVariant: "Navigation-" + moleculeVariant }, { children: [jsx(BurgerWrapper, { children: jsx(AtomButton$1, Object.assign({ moleculeVariant: "Navigation-" + moleculeVariant, onClick: handleToggle, "aria-pressed": isOpen }, { children: jsx(BurgerIcon, { moleculeVariant: "Navigation-" + moleculeVariant, svg: iconBurger }) })) }), jsx(NavLinks, Object.assign({ isOpen: isOpen }, { children: tabs.length > 0
-                    ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: "Navigation-" + moleculeVariant, to: tab.to, currentPath: tab.label === currentPath, onClick: () => {
-                            onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
-                            setIsOpen(false);
-                        } }, { children: tab.label }), tab.label)))
-                    : "no tabs available" }))] })));
+    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.label === currentPath, onClick: () => {
+                                    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
+                                    setIsOpen(false);
+                                } }, { children: tab.label }), tab.label)))
+                            : "no tabs available" }))] }))] })));
 };
 
 // Wrapper for the footer
@@ -1065,7 +1154,7 @@ const scroll = keyframes `
     transform: translateX(0);
 }
 100% {
-    transform: translateX(-50%);
+    transform: translateX(-5%);
 }
 `;
 const TapeContainer = styled.div `