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