@telia/teddy 0.7.62 → 0.7.63

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.cjs

@@ -905,7 +905,14 @@ const Desktop = React.forwardRef(() => {
     return (((_a = link.links) == null ? void 0 : _a.length) || 0) > 0 && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
   });
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
-  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const {
+    selectedMenuItem,
+    setSelectedMenuItem,
+    linkComponent: Link2,
+    specifiedLink,
+    setSpecifiedLink,
+    hideTopMenuList
+  } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -913,7 +920,7 @@ const Desktop = React.forwardRef(() => {
   };
   const viewPortHeight = shouldShowViewport ? "333px" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsxRuntime.jsx(
+    !hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: utils_generateStyling_index.mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
@@ -940,8 +947,8 @@ const Desktop = React.forwardRef(() => {
     ) }),
     links.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
-        (subLink) => /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.List, { value: link.name, children: [
+        (_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsxRuntime.jsxs(
           NavigationMenu.Item,
           {
             value: subLink.name,
@@ -1045,13 +1052,23 @@ const Desktop = React.forwardRef(() => {
             ]
           },
           subLink.name
-        )
-      ) }, link.name);
+        )),
+        hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
+        ] })
+      ] }, link.name);
     })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName, colored, setShowMenu }) => {
+const HightlightedLinksDesktop = ({
+  links,
+  listName,
+  colored,
+  setShowMenu
+}) => {
   const rootContext = React.useContext(RootContext);
   if (!rootContext) return null;
   const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
@@ -1131,7 +1148,7 @@ function Mobile(props) {
       children: [
         /* @__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" }) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Search, {}),
+          !rootContext.hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx(Search, {}),
           /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}),
           /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}),
           /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { children: [
@@ -1149,7 +1166,7 @@ function Mobile(props) {
                     value: rootContext.selectedDomainItem,
                     onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: links.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)) }),
+                      !rootContext.hideTopMenuList && /* @__PURE__ */ jsxRuntime.jsx(components_tabs_index.Tabs.List, { children: links.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)) }),
                       /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: links.map((link) => {
                         var _a, _b;
                         return /* @__PURE__ */ jsxRuntime.jsxs(components_tabs_index.Tabs.Content, { value: link.name, children: [
@@ -1321,6 +1338,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   customLinks,
+  hideTopMenuList,
   currentPath,
   onSearchInputChange,
   onSearchKeyDown,
@@ -1328,10 +1346,14 @@ function Root({
   onClear,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem(currentPath, customLinks));
+  const [selectedMenuItem, setSelectedMenuItem] = React.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const [selectedDomainItem, setSelectedDomainItem] = React.useState(getInitialDomain(currentPath, customLinks));
   const [pathname, setPathname] = React.useState(currentPath || "");
-  const [specifiedLink, setSpecifiedLink] = React.useState(getInitialMenuItem(currentPath, customLinks));
+  const [specifiedLink, setSpecifiedLink] = React.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const classes = clsx([styles[`${rootClassName}`]], className);
   React.useEffect(() => {
     setPathname(currentPath || "");
@@ -1372,7 +1394,8 @@ function Root({
         onSearchKeyDown,
         searchValue,
         onClear,
-        customLinks
+        customLinks,
+        hideTopMenuList
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,

package/dist/components/checkbox-card-group/checkbox-card-group-indicator.js

@@ -884,7 +884,14 @@ const Desktop = React__default.forwardRef(() => {
     return (((_a = link.links) == null ? void 0 : _a.length) || 0) > 0 && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink) && sameParent;
   });
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
-  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const {
+    selectedMenuItem,
+    setSelectedMenuItem,
+    linkComponent: Link2,
+    specifiedLink,
+    setSpecifiedLink,
+    hideTopMenuList
+  } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -892,7 +899,7 @@ const Desktop = React__default.forwardRef(() => {
   };
   const viewPortHeight = shouldShowViewport ? "333px" : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
+    !hideTopMenuList && /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
       "div",
       {
         style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
@@ -919,8 +926,8 @@ const Desktop = React__default.forwardRef(() => {
     ) }),
     links.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsx(NavigationMenu.List, { value: link.name, children: (_a = link.links) == null ? void 0 : _a.map(
-        (subLink) => /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
+        (_a = link.links) == null ? void 0 : _a.map((subLink) => /* @__PURE__ */ jsxs(
           NavigationMenu.Item,
           {
             value: subLink.name,
@@ -1024,13 +1031,23 @@ const Desktop = React__default.forwardRef(() => {
             ]
           },
           subLink.name
-        )
-      ) }, link.name);
+        )),
+        hideTopMenuList && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
+          /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
+        ] })
+      ] }, link.name);
     })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName, colored, setShowMenu }) => {
+const HightlightedLinksDesktop = ({
+  links,
+  listName,
+  colored,
+  setShowMenu
+}) => {
   const rootContext = React__default.useContext(RootContext);
   if (!rootContext) return null;
   const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
@@ -1110,7 +1127,7 @@ function Mobile(props) {
       children: [
         /* @__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" }) }) }) }),
         /* @__PURE__ */ jsxs(Flex, { flexBasis: "0", gap: { sm: "100", md: "200" }, className: styles[`${rootClassName}__top-menu-icons`], children: [
-          /* @__PURE__ */ jsx(Search, {}),
+          !rootContext.hideTopMenuList && /* @__PURE__ */ jsx(Search, {}),
           /* @__PURE__ */ jsx(ShoppingCart, {}),
           /* @__PURE__ */ jsx(MyPages, {}),
           /* @__PURE__ */ jsxs(Drawer, { children: [
@@ -1128,7 +1145,7 @@ function Mobile(props) {
                     value: rootContext.selectedDomainItem,
                     onValueChange: (v) => rootContext.setSelectedDomainItem(v, true),
                     children: [
-                      /* @__PURE__ */ jsx(Tabs.List, { children: links.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)) }),
+                      !rootContext.hideTopMenuList && /* @__PURE__ */ jsx(Tabs.List, { children: links.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)) }),
                       /* @__PURE__ */ jsx(Fragment, { children: links.map((link) => {
                         var _a, _b;
                         return /* @__PURE__ */ jsxs(Tabs.Content, { value: link.name, children: [
@@ -1300,6 +1317,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   customLinks,
+  hideTopMenuList,
   currentPath,
   onSearchInputChange,
   onSearchKeyDown,
@@ -1307,10 +1325,14 @@ function Root({
   onClear,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath, customLinks));
+  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath, customLinks));
   const [pathname, setPathname] = React__default.useState(currentPath || "");
-  const [specifiedLink, setSpecifiedLink] = React__default.useState(getInitialMenuItem(currentPath, customLinks));
+  const [specifiedLink, setSpecifiedLink] = React__default.useState(
+    getInitialMenuItem(currentPath, customLinks)
+  );
   const classes = clsx([styles[`${rootClassName}`]], className);
   useEffect(() => {
     setPathname(currentPath || "");
@@ -1351,7 +1373,8 @@ function Root({
         onSearchKeyDown,
         searchValue,
         onClear,
-        customLinks
+        customLinks,
+        hideTopMenuList
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,

package/dist/components/navigation-menu/global-navigation/global-navigation-root.d.ts

@@ -20,6 +20,7 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     drawerSize: 'md' | 'lg';
     isSimplified?: boolean;
     customLinks?: CustomLinksConfig;
+    hideTopMenuList?: boolean;
     currentPath: string | undefined;
     onSearchInputChange?: (e: React.ChangeEvent<HTMLInputElement>, value?: string) => void;
     onSearchKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -36,9 +37,10 @@ type RootContext = {
     specifiedLink?: string;
     setSpecifiedLink: (v: string) => void;
     customLinks?: CustomLinksConfig;
+    hideTopMenuList?: boolean;
 } & Pick<RootProps, 'onSearchSubmit' | 'additionalSearchContent' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize' | 'onSearchInputChange' | 'onSearchKeyDown' | 'searchValue' | 'onClear'>;
 export declare const RootContext: React.Context<RootContext | null>;
-export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, customLinks, currentPath, onSearchInputChange, onSearchKeyDown, searchValue, onClear, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, customLinks, hideTopMenuList, currentPath, onSearchInputChange, onSearchKeyDown, searchValue, onClear, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=10"
   },
   "private": false,
-  "version": "0.7.62",
+  "version": "0.7.63",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"