@telia/teddy 0.2.0 → 0.2.2
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/components/navigation-menu/global-navigation/global-navigation-desktop.cjs +0 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-desktop.js +0 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile.d.ts +1 -1
- package/dist/components/navigation-menu/global-navigation/utils.cjs +35 -5
- package/dist/components/navigation-menu/global-navigation/utils.d.ts +44 -7
- package/dist/components/navigation-menu/global-navigation/utils.js +36 -6
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +311 -209
- package/dist/components/radio-card-group/radio-card-group-item-title.js +312 -210
- package/dist/style.css +28 -27
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import React__default, { useEffect } from "react";
|
|
3
3
|
import clsx from "clsx";
|
|
4
|
-
import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, MDU_LINKS,
|
|
4
|
+
import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, PRIVATE_LINKS, BUSINESS_LINKS, BUSINESS_UKKO_LINKS, MDU_LINKS, getLinks, getActiveSubLink } from "../navigation-menu/global-navigation/utils.js";
|
|
5
5
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
6
6
|
import { useComposedRefs, composeRefs } from "../../utils/composeRefs.js";
|
|
7
7
|
import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
|
|
@@ -660,23 +660,23 @@ const NavigationMenu = Object.assign(Root$1, {
|
|
|
660
660
|
TopMenuTrigger
|
|
661
661
|
});
|
|
662
662
|
const styles = {
|
|
663
|
-
"teddy-global-navigation": "_teddy-global-
|
|
664
|
-
"teddy-global-navigation__mobile": "_teddy-global-
|
|
665
|
-
"teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-
|
|
666
|
-
"teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-
|
|
667
|
-
"teddy-global-navigation__link": "_teddy-global-
|
|
668
|
-
"teddy-global-navigation__header": "_teddy-global-
|
|
669
|
-
"teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-
|
|
670
|
-
"teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--
|
|
671
|
-
"teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--
|
|
672
|
-
"teddy-global-navigation__list": "_teddy-global-
|
|
673
|
-
"teddy-global-navigation__viewport": "_teddy-global-
|
|
674
|
-
"teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-
|
|
675
|
-
"teddy-global-navigation__item-count": "_teddy-global-navigation__item-
|
|
676
|
-
"teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-
|
|
677
|
-
"close-viewport": "_close-
|
|
678
|
-
"teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-
|
|
679
|
-
"teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-
|
|
663
|
+
"teddy-global-navigation": "_teddy-global-navigation_1mn6i_1",
|
|
664
|
+
"teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1mn6i_6",
|
|
665
|
+
"teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1mn6i_26",
|
|
666
|
+
"teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1mn6i_31",
|
|
667
|
+
"teddy-global-navigation__link": "_teddy-global-navigation__link_1mn6i_35",
|
|
668
|
+
"teddy-global-navigation__header": "_teddy-global-navigation__header_1mn6i_48",
|
|
669
|
+
"teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1mn6i_51",
|
|
670
|
+
"teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1mn6i_55",
|
|
671
|
+
"teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1mn6i_59",
|
|
672
|
+
"teddy-global-navigation__list": "_teddy-global-navigation__list_1mn6i_65",
|
|
673
|
+
"teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1mn6i_70",
|
|
674
|
+
"teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1mn6i_73",
|
|
675
|
+
"teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1mn6i_77",
|
|
676
|
+
"teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1mn6i_84",
|
|
677
|
+
"close-viewport": "_close-viewport_1mn6i_1",
|
|
678
|
+
"teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1mn6i_100",
|
|
679
|
+
"teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1mn6i_103"
|
|
680
680
|
};
|
|
681
681
|
function MyPages(props) {
|
|
682
682
|
var _a, _b;
|
|
@@ -837,12 +837,15 @@ const Desktop = React__default.forwardRef(() => {
|
|
|
837
837
|
const rootContext = React__default.useContext(RootContext);
|
|
838
838
|
const [showMenu, setShowMenu] = React__default.useState(false);
|
|
839
839
|
const topMenuRef = React__default.useRef(null);
|
|
840
|
-
const shouldShowViewport = [
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
)
|
|
840
|
+
const shouldShowViewport = [
|
|
841
|
+
...PRIVATE_LINKS.links,
|
|
842
|
+
...BUSINESS_LINKS.links,
|
|
843
|
+
...BUSINESS_UKKO_LINKS.links,
|
|
844
|
+
...MDU_LINKS.links
|
|
845
|
+
].some((link) => {
|
|
846
|
+
const sameParent = link.link.split("/")[1] === (rootContext == null ? void 0 : rootContext.pathname.split("/")[1]) || !link.link && (rootContext == null ? void 0 : rootContext.pathname) === "/";
|
|
847
|
+
return link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
|
|
848
|
+
});
|
|
846
849
|
const topMenuSize = useSize(topMenuRef.current);
|
|
847
850
|
const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
|
|
848
851
|
if (!rootContext)
|
|
@@ -853,146 +856,212 @@ const Desktop = React__default.forwardRef(() => {
|
|
|
853
856
|
setSpecifiedLink(linkName || "");
|
|
854
857
|
setSelectedMenuItem(linkName || "", true);
|
|
855
858
|
};
|
|
856
|
-
const viewPortHeight =
|
|
859
|
+
const viewPortHeight = shouldShowViewport ? "333px" : void 0;
|
|
857
860
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
858
861
|
/* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
|
|
859
862
|
"div",
|
|
860
863
|
{
|
|
861
|
-
style: mergeStyles(
|
|
862
|
-
{ ["--teddy-top-menu-height"]: topMenuHeight }
|
|
863
|
-
),
|
|
864
|
+
style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
|
|
864
865
|
className: styles[`${rootClassName}__top-menu-wrapper`],
|
|
865
|
-
children: /* @__PURE__ */
|
|
866
|
-
NavigationMenu.
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
866
|
+
children: /* @__PURE__ */ jsxs(NavigationMenu.TopMenuList, { ref: topMenuRef, children: [
|
|
867
|
+
getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
|
|
868
|
+
NavigationMenu.TopMenuTrigger,
|
|
869
|
+
{
|
|
870
|
+
value: link.name,
|
|
871
|
+
asChild: true,
|
|
872
|
+
onClick: () => {
|
|
873
|
+
rootContext.setPathname(link.link);
|
|
874
|
+
setSpecifiedLink("");
|
|
875
|
+
},
|
|
876
|
+
children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name })
|
|
877
|
+
}
|
|
878
|
+
) }, link.name)),
|
|
879
|
+
/* @__PURE__ */ jsx(Box, { ml: "auto" }),
|
|
880
|
+
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
|
|
881
|
+
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
|
|
882
|
+
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
|
|
883
|
+
] })
|
|
877
884
|
}
|
|
878
885
|
) }),
|
|
879
|
-
|
|
886
|
+
getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => {
|
|
880
887
|
var _a;
|
|
881
|
-
return /* @__PURE__ */
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
888
|
+
return /* @__PURE__ */ jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
|
|
889
|
+
(subLink) => {
|
|
890
|
+
var _a2, _b, _c;
|
|
891
|
+
return /* @__PURE__ */ jsxs(
|
|
892
|
+
NavigationMenu.Item,
|
|
893
|
+
{
|
|
894
|
+
value: subLink.name,
|
|
895
|
+
onMouseEnter: () => setShowMenu(true),
|
|
896
|
+
onMouseLeave: () => setShowMenu(false),
|
|
897
|
+
children: [
|
|
898
|
+
subLink.name === "Logo" ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(
|
|
899
|
+
Link2,
|
|
891
900
|
{
|
|
892
|
-
|
|
893
|
-
onMouseEnter: () =>
|
|
894
|
-
|
|
895
|
-
children:
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
901
|
+
href: subLink.link,
|
|
902
|
+
onMouseEnter: () => handleInteractions(),
|
|
903
|
+
onClick: () => handleInteractions(),
|
|
904
|
+
children: /* @__PURE__ */ jsx(
|
|
905
|
+
"img",
|
|
906
|
+
{
|
|
907
|
+
src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
|
|
908
|
+
draggable: "false",
|
|
909
|
+
alt: "Telia logo"
|
|
910
|
+
}
|
|
911
|
+
)
|
|
912
|
+
}
|
|
913
|
+
) : /* @__PURE__ */ jsx(
|
|
914
|
+
"a",
|
|
915
|
+
{
|
|
916
|
+
href: subLink.link,
|
|
917
|
+
onMouseEnter: () => handleInteractions(),
|
|
918
|
+
onClick: () => handleInteractions(),
|
|
919
|
+
children: /* @__PURE__ */ jsx(
|
|
920
|
+
"img",
|
|
921
|
+
{
|
|
922
|
+
src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
|
|
923
|
+
draggable: "false",
|
|
924
|
+
alt: "Telia logo"
|
|
925
|
+
}
|
|
926
|
+
)
|
|
927
|
+
}
|
|
928
|
+
) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
|
|
929
|
+
NavigationMenu.Trigger,
|
|
930
|
+
{
|
|
931
|
+
asChild: true,
|
|
932
|
+
active: currentLocation === subLink.link,
|
|
933
|
+
children: /* @__PURE__ */ jsx(
|
|
934
|
+
Button,
|
|
935
|
+
{
|
|
936
|
+
onMouseEnter: () => handleInteractions(subLink.name),
|
|
937
|
+
onKeyDown: () => {
|
|
938
|
+
handleInteractions(subLink.name);
|
|
939
|
+
setShowMenu(true);
|
|
940
|
+
},
|
|
941
|
+
onClick: () => handleInteractions(subLink.name),
|
|
942
|
+
children: subLink.name
|
|
943
|
+
}
|
|
944
|
+
)
|
|
945
|
+
}
|
|
946
|
+
) : /* @__PURE__ */ jsx(
|
|
947
|
+
NavigationMenu.Link,
|
|
948
|
+
{
|
|
949
|
+
asChild: true,
|
|
950
|
+
active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
|
|
951
|
+
children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(
|
|
952
|
+
Link2,
|
|
953
|
+
{
|
|
954
|
+
onMouseEnter: () => handleInteractions(subLink.name),
|
|
955
|
+
onClick: () => handleInteractions(subLink.name),
|
|
956
|
+
href: subLink.link,
|
|
957
|
+
children: subLink.name
|
|
958
|
+
}
|
|
959
|
+
) : /* @__PURE__ */ jsx(
|
|
960
|
+
"a",
|
|
961
|
+
{
|
|
962
|
+
onMouseEnter: () => handleInteractions(subLink.name),
|
|
963
|
+
onClick: () => handleInteractions(subLink.name),
|
|
964
|
+
href: subLink.link,
|
|
965
|
+
children: subLink.name
|
|
966
|
+
}
|
|
967
|
+
)
|
|
968
|
+
}
|
|
969
|
+
),
|
|
970
|
+
typeof window !== "undefined" && /* @__PURE__ */ jsx(
|
|
971
|
+
"div",
|
|
972
|
+
{
|
|
973
|
+
style: mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
|
|
974
|
+
className: styles[`${rootClassName}__viewport-wrapper`],
|
|
975
|
+
"data-state": showMenu ? "open" : "closed",
|
|
976
|
+
children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
977
|
+
((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(
|
|
978
|
+
HightlightedLinksDesktop,
|
|
927
979
|
{
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
980
|
+
listName: subLink.name,
|
|
981
|
+
setShowMenu,
|
|
982
|
+
links: subLink.links
|
|
931
983
|
}
|
|
932
984
|
),
|
|
933
|
-
|
|
934
|
-
|
|
985
|
+
((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(
|
|
986
|
+
HightlightedLinksDesktop,
|
|
935
987
|
{
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
"data-state": showMenu ? "open" : "closed",
|
|
941
|
-
children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
942
|
-
((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "150", pb: "250", children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: subLink.name, setShowMenu, links: subLink.links }) }),
|
|
943
|
-
((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", setShowMenu, links: subLink.highlightedLinks }) })
|
|
944
|
-
] }) })
|
|
988
|
+
colored: true,
|
|
989
|
+
listName: "Nyttige snarveier",
|
|
990
|
+
setShowMenu,
|
|
991
|
+
links: subLink.highlightedLinks
|
|
945
992
|
}
|
|
946
993
|
)
|
|
947
|
-
]
|
|
948
|
-
}
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
|
|
957
|
-
]
|
|
958
|
-
},
|
|
959
|
-
link.name
|
|
960
|
-
);
|
|
994
|
+
] }) })
|
|
995
|
+
}
|
|
996
|
+
)
|
|
997
|
+
]
|
|
998
|
+
},
|
|
999
|
+
subLink.name
|
|
1000
|
+
);
|
|
1001
|
+
}
|
|
1002
|
+
) }, link.name);
|
|
961
1003
|
})
|
|
962
1004
|
] });
|
|
963
1005
|
});
|
|
964
1006
|
Desktop.displayName = "Desktop";
|
|
965
|
-
const HightlightedLinksDesktop = ({ links, listName, setShowMenu }) => {
|
|
1007
|
+
const HightlightedLinksDesktop = ({ links, listName, colored, setShowMenu }) => {
|
|
966
1008
|
const rootContext = React__default.useContext(RootContext);
|
|
967
1009
|
if (!rootContext)
|
|
968
1010
|
return null;
|
|
969
1011
|
const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
|
|
970
1012
|
const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
|
|
971
|
-
|
|
1013
|
+
const firstPart = links.slice(0, 4);
|
|
1014
|
+
const secondPart = links.slice(4);
|
|
1015
|
+
return /* @__PURE__ */ jsxs(Box, { pt: "40px", pb: "40px", className: colored ? styles[`${rootClassName}__colored-box`] : "", children: [
|
|
972
1016
|
/* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
subSubLink.
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
subSubLink.
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
1017
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "400", children: [
|
|
1018
|
+
/* @__PURE__ */ jsx(Box, { children: firstPart == null ? void 0 : firstPart.map((subSubLink) => {
|
|
1019
|
+
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
1020
|
+
NavigationMenu.Link,
|
|
1021
|
+
{
|
|
1022
|
+
asChild: true,
|
|
1023
|
+
variant: "small",
|
|
1024
|
+
active: getActiveSubLink(currentLocation, links || []) === subSubLink.link,
|
|
1025
|
+
onClick: () => {
|
|
1026
|
+
rootContext.setPathname(subSubLink.link);
|
|
1027
|
+
setSpecifiedLink("");
|
|
1028
|
+
setSelectedMenuItem("", true);
|
|
1029
|
+
setShowMenu(false);
|
|
1030
|
+
},
|
|
1031
|
+
children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
|
|
1032
|
+
subSubLink.name,
|
|
1033
|
+
/* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
|
|
1034
|
+
] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
|
|
1035
|
+
subSubLink.name,
|
|
1036
|
+
/* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
|
|
1037
|
+
] }) })
|
|
1038
|
+
}
|
|
1039
|
+
) }, subSubLink.name);
|
|
1040
|
+
}) }),
|
|
1041
|
+
/* @__PURE__ */ jsx(Box, { children: secondPart.map((subSubLink) => {
|
|
1042
|
+
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
1043
|
+
NavigationMenu.Link,
|
|
1044
|
+
{
|
|
1045
|
+
asChild: true,
|
|
1046
|
+
variant: "small",
|
|
1047
|
+
active: getActiveSubLink(currentLocation, links || []) === subSubLink.link,
|
|
1048
|
+
onClick: () => {
|
|
1049
|
+
rootContext.setPathname(subSubLink.link);
|
|
1050
|
+
setSpecifiedLink("");
|
|
1051
|
+
setSelectedMenuItem("", true);
|
|
1052
|
+
setShowMenu(false);
|
|
1053
|
+
},
|
|
1054
|
+
children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
|
|
1055
|
+
subSubLink.name,
|
|
1056
|
+
/* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
|
|
1057
|
+
] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
|
|
1058
|
+
subSubLink.name,
|
|
1059
|
+
/* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
|
|
1060
|
+
] }) })
|
|
1061
|
+
}
|
|
1062
|
+
) }, subSubLink.name);
|
|
1063
|
+
}) })
|
|
1064
|
+
] })
|
|
996
1065
|
] });
|
|
997
1066
|
};
|
|
998
1067
|
function Mobile(props) {
|
|
@@ -1005,82 +1074,115 @@ function Mobile(props) {
|
|
|
1005
1074
|
const classes = clsx([styles[`${rootClassName}__mobile`]], props.className);
|
|
1006
1075
|
const linkClasses = clsx([styles[`${rootClassName}__link`]]);
|
|
1007
1076
|
const headerClasses = clsx([styles[`${rootClassName}__header`]]);
|
|
1008
|
-
return /* @__PURE__ */ jsx(Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
/* @__PURE__ */ jsx(
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
/* @__PURE__ */ jsxs(
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
/* @__PURE__ */ jsx(
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1077
|
+
return /* @__PURE__ */ jsx(Flex, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
|
|
1078
|
+
Flex,
|
|
1079
|
+
{
|
|
1080
|
+
flexGrow: "1",
|
|
1081
|
+
justify: "between",
|
|
1082
|
+
align: "center",
|
|
1083
|
+
gap: "200",
|
|
1084
|
+
className: styles[`${rootClassName}__top-icon-wrapper`],
|
|
1085
|
+
children: [
|
|
1086
|
+
/* @__PURE__ */ jsx(Box, { flexShrink: "0", children: /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: rootContext.appKey === "open-pages" ? /* @__PURE__ */ jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) : /* @__PURE__ */ jsx("a", { href: "/", children: /* @__PURE__ */ jsx(Icon, { size: "lg", name: "telia-logo", "aria-label": "Telia logo" }) }) }) }),
|
|
1087
|
+
/* @__PURE__ */ jsxs(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
|
|
1088
|
+
/* @__PURE__ */ jsx(Search, {}),
|
|
1089
|
+
/* @__PURE__ */ jsx(ShoppingCart, {}),
|
|
1090
|
+
/* @__PURE__ */ jsx(MyPages, {}),
|
|
1091
|
+
/* @__PURE__ */ jsxs(Drawer, { children: [
|
|
1092
|
+
/* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
|
|
1093
|
+
/* @__PURE__ */ jsx(Icon, { name: "menu", size: "sm" }),
|
|
1094
|
+
" Meny"
|
|
1095
|
+
] }) }) }),
|
|
1096
|
+
/* @__PURE__ */ jsxs(Drawer.Content, { gap: "400", size: rootContext.drawerSize, children: [
|
|
1097
|
+
/* @__PURE__ */ jsx(Drawer.Close, { ref: drawerRef, slot: "floating", "aria-label": "Lukk" }),
|
|
1098
|
+
!specifiedLink ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1099
|
+
/* @__PURE__ */ jsx(Drawer.Title, { children: "Meny" }),
|
|
1100
|
+
/* @__PURE__ */ jsxs(
|
|
1101
|
+
Tabs,
|
|
1102
|
+
{
|
|
1103
|
+
value: rootContext.selectedDomainItem,
|
|
1104
|
+
onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
|
|
1105
|
+
children: [
|
|
1106
|
+
/* @__PURE__ */ jsx(Tabs.List, { children: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => /* @__PURE__ */ jsx(Tabs.Trigger, { asChild: true, value: link.name, children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name }) }, link.name)) }),
|
|
1107
|
+
/* @__PURE__ */ jsx(Fragment, { children: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => {
|
|
1108
|
+
var _a, _b;
|
|
1109
|
+
return /* @__PURE__ */ jsxs(Tabs.Content, { value: link.name, children: [
|
|
1110
|
+
/* @__PURE__ */ jsx(Box, { mt: "400", children: (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map(
|
|
1111
|
+
(subLink) => subLink.links.length > 0 ? /* @__PURE__ */ jsxs(Box, { onClick: () => setSpecifiedLink(subLink.name), className: linkClasses, children: [
|
|
1112
|
+
/* @__PURE__ */ jsx(Heading, { asChild: true, variant: "title-300", children: /* @__PURE__ */ jsx(Button, { className: styles[`${rootClassName}__sublink-button--mobile`], children: subLink.name }) }),
|
|
1113
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
|
|
1114
|
+
] }) : /* @__PURE__ */ jsx(Fragment, { children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxs(NavLink, { href: subLink.link, className: linkClasses, children: [
|
|
1115
|
+
/* @__PURE__ */ jsx(Heading, { variant: "title-300", as: "h2", className: headerClasses, children: subLink.name }),
|
|
1116
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
|
|
1117
|
+
] }) : /* @__PURE__ */ jsxs("a", { href: subLink.link, className: linkClasses, children: [
|
|
1118
|
+
/* @__PURE__ */ jsx(Heading, { variant: "title-300", as: "h2", children: subLink.name }),
|
|
1119
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "md" })
|
|
1120
|
+
] }) })
|
|
1121
|
+
) }),
|
|
1122
|
+
((_b = link.highlightedLinks) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsx(Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsx(
|
|
1123
|
+
HighlightedLinks,
|
|
1124
|
+
{
|
|
1125
|
+
item: link,
|
|
1126
|
+
links: link.highlightedLinks,
|
|
1127
|
+
drawerRef,
|
|
1128
|
+
listTitle: "Nyttige snarveier"
|
|
1129
|
+
}
|
|
1130
|
+
) }) })
|
|
1131
|
+
] }, link.name);
|
|
1132
|
+
}) })
|
|
1133
|
+
]
|
|
1134
|
+
}
|
|
1135
|
+
)
|
|
1136
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1137
|
+
/* @__PURE__ */ jsx(Drawer.Title, { children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "secondary", onClick: () => setSpecifiedLink(""), children: [
|
|
1059
1138
|
/* @__PURE__ */ jsx(Icon, { name: "arrow-left" }),
|
|
1060
1139
|
"Tilbake"
|
|
1061
|
-
]
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1140
|
+
] }) }),
|
|
1141
|
+
/* @__PURE__ */ jsx(Box, { mt: "100", children: getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map(
|
|
1142
|
+
(link) => {
|
|
1143
|
+
var _a;
|
|
1144
|
+
return (_a = link.links) == null ? void 0 : _a.filter((l) => l.name !== "Logo").map(
|
|
1145
|
+
(subLink) => {
|
|
1146
|
+
var _a2;
|
|
1147
|
+
return subLink.links.length > 0 && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1148
|
+
/* @__PURE__ */ jsx(
|
|
1149
|
+
HighlightedLinks,
|
|
1150
|
+
{
|
|
1151
|
+
item: subLink,
|
|
1152
|
+
listTitle: subLink.name,
|
|
1153
|
+
links: subLink.links,
|
|
1154
|
+
drawerRef
|
|
1155
|
+
}
|
|
1156
|
+
),
|
|
1157
|
+
((_a2 = subLink.highlightedLinks) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsx(Box, { className: styles[`${rootClassName}__colored-box--mobile`], children: /* @__PURE__ */ jsx(Box, { mt: "400", pt: "250", pb: "250", pl: "300", children: /* @__PURE__ */ jsx(
|
|
1158
|
+
HighlightedLinks,
|
|
1159
|
+
{
|
|
1160
|
+
item: subLink,
|
|
1161
|
+
listTitle: "Nyttige snarveier",
|
|
1162
|
+
links: subLink.highlightedLinks,
|
|
1163
|
+
drawerRef
|
|
1164
|
+
}
|
|
1165
|
+
) }) })
|
|
1166
|
+
] });
|
|
1167
|
+
}
|
|
1168
|
+
);
|
|
1169
|
+
}
|
|
1170
|
+
) })
|
|
1171
|
+
] })
|
|
1172
|
+
] })
|
|
1076
1173
|
] })
|
|
1077
1174
|
] })
|
|
1078
|
-
]
|
|
1079
|
-
|
|
1080
|
-
|
|
1175
|
+
]
|
|
1176
|
+
}
|
|
1177
|
+
) });
|
|
1081
1178
|
}
|
|
1082
1179
|
Mobile.displayName = "Mobile";
|
|
1083
|
-
const HighlightedLinks = ({
|
|
1180
|
+
const HighlightedLinks = ({
|
|
1181
|
+
listTitle,
|
|
1182
|
+
links,
|
|
1183
|
+
item,
|
|
1184
|
+
drawerRef
|
|
1185
|
+
}) => {
|
|
1084
1186
|
const rootContext = React__default.useContext(RootContext);
|
|
1085
1187
|
if (!rootContext)
|
|
1086
1188
|
return null;
|
|
@@ -1116,7 +1218,7 @@ const DesktopSimplified = React__default.forwardRef(() => {
|
|
|
1116
1218
|
return null;
|
|
1117
1219
|
const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
|
|
1118
1220
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1119
|
-
|
|
1221
|
+
getLinks(rootContext.pathname.includes("bedrift/utstyrsavtale")).map((link) => {
|
|
1120
1222
|
var _a;
|
|
1121
1223
|
return /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
|
|
1122
1224
|
(_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsx(NavigationMenu.Item, { value: subLink.name, children: subLink.name === "Logo" && /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
|