@manamerge/mana-atomic-ui 1.0.181 → 1.0.183
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +57 -26
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/manamerge/molecules/header.ts +5 -3
- package/dist/themes/themes/manamerge/molecules/navigation.ts +25 -15
- package/dist/types/themes/ManamergeTheme.d.ts +11 -1
- package/dist/types/themes/manamerge/molecules/header.d.ts +2 -0
- package/dist/types/themes/manamerge/molecules/navigation.d.ts +9 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -540,7 +540,6 @@ const WrapperHeader = styled.div `
|
|
|
540
540
|
display: flex;
|
|
541
541
|
flex-direction: column;
|
|
542
542
|
justify-content: center;
|
|
543
|
-
text-align: center;
|
|
544
543
|
gap: 15px;
|
|
545
544
|
position: relative;
|
|
546
545
|
${({ theme, moleculeVariant }) => {
|
|
@@ -549,6 +548,7 @@ const WrapperHeader = styled.div `
|
|
|
549
548
|
return css `
|
|
550
549
|
align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
|
|
551
550
|
padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
|
|
551
|
+
text-align: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.textAlign};;
|
|
552
552
|
`;
|
|
553
553
|
}}
|
|
554
554
|
`;
|
|
@@ -702,6 +702,11 @@ const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon,
|
|
|
702
702
|
const NavBar = styled.nav `
|
|
703
703
|
display: flex;
|
|
704
704
|
align-items: flex-start;
|
|
705
|
+
position: absolute;
|
|
706
|
+
width: auto;
|
|
707
|
+
right: 0;
|
|
708
|
+
left: 0;
|
|
709
|
+
z-index: 1;
|
|
705
710
|
|
|
706
711
|
${({ theme, moleculeVariant }) => {
|
|
707
712
|
var _a;
|
|
@@ -712,11 +717,11 @@ const NavBar = styled.nav `
|
|
|
712
717
|
align-items: center;
|
|
713
718
|
}
|
|
714
719
|
gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
|
|
715
|
-
background: ${
|
|
720
|
+
background: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background};
|
|
721
|
+
height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
|
|
722
|
+
padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
|
|
716
723
|
`;
|
|
717
724
|
}}
|
|
718
|
-
|
|
719
|
-
padding: 1rem;
|
|
720
725
|
`;
|
|
721
726
|
const BurgerWrapper = styled.div `
|
|
722
727
|
flex-direction: column;
|
|
@@ -737,17 +742,16 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
|
|
|
737
742
|
const atomLinkTheme = ((_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) || {};
|
|
738
743
|
return css `
|
|
739
744
|
cursor: pointer;
|
|
740
|
-
color: ${
|
|
745
|
+
color: ${atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color};
|
|
741
746
|
&:focus {
|
|
742
|
-
color: ${(
|
|
743
|
-
outline: ${(
|
|
744
|
-
outline-offset: ${(
|
|
745
|
-
|
|
746
|
-
box-shadow: ${((_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
|
|
747
|
+
color: ${(_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.color};
|
|
748
|
+
outline: ${(_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outline};
|
|
749
|
+
outline-offset: ${(_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.outlineOffset};
|
|
750
|
+
box-shadow: ${(_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow};
|
|
747
751
|
}
|
|
748
752
|
&:hover {
|
|
749
|
-
color: ${(
|
|
750
|
-
transition: ${(
|
|
753
|
+
color: ${(_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color};
|
|
754
|
+
transition: ${(_h = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _h === void 0 ? void 0 : _h.color};
|
|
751
755
|
}
|
|
752
756
|
`;
|
|
753
757
|
}}
|
|
@@ -755,6 +759,7 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
|
|
|
755
759
|
const NavLinks = styled.div `
|
|
756
760
|
flex-direction: column;
|
|
757
761
|
text-align: right;
|
|
762
|
+
align-items: flex-end;
|
|
758
763
|
display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
|
|
759
764
|
width: 100%;
|
|
760
765
|
|
|
@@ -764,10 +769,10 @@ const NavLinks = styled.div `
|
|
|
764
769
|
const { largeMobileUp } = theme.media;
|
|
765
770
|
return css `
|
|
766
771
|
${largeMobileUp} {
|
|
767
|
-
margin: ${
|
|
772
|
+
margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
|
|
768
773
|
display: flex;
|
|
769
774
|
flex-direction: row;
|
|
770
|
-
gap: ${
|
|
775
|
+
gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
|
|
771
776
|
justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-around"};
|
|
772
777
|
}
|
|
773
778
|
`;
|
|
@@ -779,24 +784,50 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
|
|
|
779
784
|
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.atomLink) === null || _c === void 0 ? void 0 : _c.variant
|
|
780
785
|
});
|
|
781
786
|
}) `
|
|
787
|
+
position: relative;
|
|
782
788
|
${({ theme, moleculeVariant, currentPath }) => {
|
|
783
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
789
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
784
790
|
const linkTheme = ((_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.atomLink) || {};
|
|
791
|
+
const { largeMobileUp } = theme.media;
|
|
785
792
|
return css `
|
|
786
|
-
|
|
787
|
-
? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.color) || "#f0f"
|
|
788
|
-
: (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color) || "#0f0"};
|
|
793
|
+
width: fit-content;
|
|
789
794
|
font-weight: ${currentPath
|
|
790
|
-
? ((
|
|
795
|
+
? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
|
|
791
796
|
: (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
|
|
797
|
+
color: ${currentPath
|
|
798
|
+
? (_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.color
|
|
799
|
+
: linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color};
|
|
800
|
+
|
|
801
|
+
/* ---------- CENTER EXPANDING UNDERLINE ---------- */
|
|
802
|
+
&::after {
|
|
803
|
+
content: "";
|
|
804
|
+
position: absolute;
|
|
805
|
+
left: 0;
|
|
806
|
+
bottom: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _e === void 0 ? void 0 : _e.bottom) || "2px"};
|
|
807
|
+
width: 100%;
|
|
808
|
+
height: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _f === void 0 ? void 0 : _f.height) || "2px"};
|
|
809
|
+
background: ${(_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _g === void 0 ? void 0 : _g.background};
|
|
810
|
+
transform: scaleX(${currentPath ? 1 : 0});
|
|
811
|
+
${largeMobileUp} {
|
|
812
|
+
transform-origin: ${(_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _h === void 0 ? void 0 : _h.transformOriginMobileUp};
|
|
813
|
+
}
|
|
814
|
+
transform-origin: ${(_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _j === void 0 ? void 0 : _j.transformOriginMobileDown};
|
|
815
|
+
transition: transform ${(_k = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _k === void 0 ? void 0 : _k.transition};
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
&:hover::after {
|
|
819
|
+
transform: scaleX(1);
|
|
820
|
+
}
|
|
821
|
+
|
|
792
822
|
&:focus {
|
|
793
|
-
color: ${(
|
|
794
|
-
box-shadow: ${(
|
|
795
|
-
transform: ${(
|
|
823
|
+
color: ${(_l = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _l === void 0 ? void 0 : _l.color};
|
|
824
|
+
box-shadow: ${(_m = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _m === void 0 ? void 0 : _m.boxShadow};
|
|
825
|
+
transform: ${(_o = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _o === void 0 ? void 0 : _o.transform};
|
|
796
826
|
}
|
|
797
827
|
&:hover {
|
|
798
|
-
color: ${(
|
|
799
|
-
transition: ${(
|
|
828
|
+
color: ${(_p = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _p === void 0 ? void 0 : _p.color};
|
|
829
|
+
transition: ${(_q = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _q === void 0 ? void 0 : _q.transition};
|
|
830
|
+
text-decoration: none;
|
|
800
831
|
}
|
|
801
832
|
`;
|
|
802
833
|
}};
|
|
@@ -804,14 +835,14 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
|
|
|
804
835
|
|
|
805
836
|
const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs }) => {
|
|
806
837
|
const location = useLocation();
|
|
807
|
-
const currentPath = location.pathname
|
|
838
|
+
const currentPath = location.pathname;
|
|
808
839
|
const [isOpen, setIsOpen] = useState(false);
|
|
809
840
|
const handleToggle = () => {
|
|
810
841
|
setIsOpen(!isOpen);
|
|
811
842
|
};
|
|
812
843
|
const compVariant = `Navigation-${moleculeVariant}`;
|
|
813
844
|
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
|
|
814
|
-
? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.
|
|
845
|
+
? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.to === currentPath }, { children: tab.label }), tab.label)))
|
|
815
846
|
: "no tabs available" }))] }))] })));
|
|
816
847
|
};
|
|
817
848
|
|