@manamerge/mana-atomic-ui 1.0.178 → 1.0.180

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.
Files changed (7) hide show
  1. package/dist/index.js +25 -56
  2. package/dist/index.js.map +1 -1
  3. package/dist/themes/themes/manamerge/molecules/header.ts +1 -1
  4. package/dist/themes/themes/manamerge/molecules/navigation.ts +15 -25
  5. package/dist/types/themes/ManamergeTheme.d.ts +1 -9
  6. package/dist/types/themes/manamerge/molecules/navigation.d.ts +1 -9
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -702,11 +702,6 @@ 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;
710
705
 
711
706
  ${({ theme, moleculeVariant }) => {
712
707
  var _a;
@@ -717,11 +712,11 @@ const NavBar = styled.nav `
717
712
  align-items: center;
718
713
  }
719
714
  gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
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};
715
+ background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
723
716
  `;
724
717
  }}
718
+
719
+ padding: 1rem;
725
720
  `;
726
721
  const BurgerWrapper = styled.div `
727
722
  flex-direction: column;
@@ -742,16 +737,17 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
742
737
  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) || {};
743
738
  return css `
744
739
  cursor: pointer;
745
- color: ${atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color};
740
+ color: ${(atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color) || "#0f0"};
746
741
  &:focus {
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};
742
+ color: ${((_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.color) || "gold"};
743
+ outline: ${((_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outline) || "none"};
744
+ outline-offset: ${((_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.outlineOffset) ||
745
+ "none"};
746
+ box-shadow: ${((_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
751
747
  }
752
748
  &:hover {
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};
749
+ color: ${((_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color) || "purple"};
750
+ transition: ${((_h = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "none"};
755
751
  }
756
752
  `;
757
753
  }}
@@ -759,7 +755,6 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
759
755
  const NavLinks = styled.div `
760
756
  flex-direction: column;
761
757
  text-align: right;
762
- align-items: flex-end;
763
758
  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
764
759
  width: 100%;
765
760
 
@@ -769,10 +764,10 @@ const NavLinks = styled.div `
769
764
  const { largeMobileUp } = theme.media;
770
765
  return css `
771
766
  ${largeMobileUp} {
772
- margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
767
+ margin: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin) || "none"};
773
768
  display: flex;
774
769
  flex-direction: row;
775
- gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
770
+ gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "none"};
776
771
  justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-around"};
777
772
  }
778
773
  `;
@@ -784,50 +779,24 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
784
779
  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
785
780
  });
786
781
  }) `
787
- position: relative;
788
782
  ${({ theme, moleculeVariant, currentPath }) => {
789
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
783
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
790
784
  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;
792
785
  return css `
793
- width: fit-content;
786
+ color: ${currentPath
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"};
794
789
  font-weight: ${currentPath
795
- ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
790
+ ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.fontWeight) || "900"
796
791
  : (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
-
822
792
  &:focus {
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};
793
+ color: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _e === void 0 ? void 0 : _e.color) || "gold"};
794
+ box-shadow: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
795
+ transform: ${((_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _g === void 0 ? void 0 : _g.transform) || "none"};
826
796
  }
827
797
  &:hover {
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;
798
+ color: ${((_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "purple"};
799
+ transition: ${((_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _j === void 0 ? void 0 : _j.transition) || "none"};
831
800
  }
832
801
  `;
833
802
  }};
@@ -835,14 +804,14 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
835
804
 
836
805
  const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs }) => {
837
806
  const location = useLocation();
838
- const currentPath = location.pathname;
807
+ const currentPath = location.pathname.slice(1);
839
808
  const [isOpen, setIsOpen] = useState(false);
840
809
  const handleToggle = () => {
841
810
  setIsOpen(!isOpen);
842
811
  };
843
812
  const compVariant = `Navigation-${moleculeVariant}`;
844
813
  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
845
- ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.to === currentPath }, { children: tab.label }), tab.label)))
814
+ ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.label === currentPath }, { children: tab.label }), tab.label)))
846
815
  : "no tabs available" }))] }))] })));
847
816
  };
848
817