@telia/teddy 0.7.64 → 0.7.66

package/dist/components/notification/notification-dismiss.cjs

@@ -27,7 +27,9 @@ function _interopNamespaceDefault(e) {
 const CollapsiblePrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CollapsiblePrimitive);
 const Dismiss = React.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
+    const context = React.useContext(components_notification_notificationRoot.NotificationContext);
     const classes = clsx([components_notification_notificationRoot.styles[`${components_notification_notificationRoot.rootClassName}__dismiss`]], className);
+    if ((context == null ? void 0 : context.dismissible) === false) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       components_button_button.Button,
       {

package/dist/components/notification/notification-dismiss.js

@@ -5,10 +5,12 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { Button } from "../button/button.js";
 import "../../assets/sprite.44b293a1-teddy.svg";
 import { Icon } from "../icon/icon.js";
-import { s as styles, rootClassName } from "./notification-root.js";
+import { NotificationContext, s as styles, rootClassName } from "./notification-root.js";
 const Dismiss = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
+    const context = React__default.useContext(NotificationContext);
     const classes = clsx([styles[`${rootClassName}__dismiss`]], className);
+    if ((context == null ? void 0 : context.dismissible) === false) return null;
     return /* @__PURE__ */ jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {

package/dist/components/notification/notification-root.cjs

@@ -6,6 +6,7 @@ const clsx = require("clsx");
 const CollapsiblePrimitive = require("@radix-ui/react-collapsible");
 const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
 const components_card_index = require("../card/index.cjs");
+const components_grid_grid = require("../grid/grid.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -41,9 +42,11 @@ const styles = {
   "teddy-notification__heading": "_teddy-notification__heading_1x0q6_80"
 };
 const rootClassName = "teddy-notification";
-const NotificationContext = React.createContext(void 0);
+const NotificationContext = React.createContext(
+  void 0
+);
 const Root = React.forwardRef(
-  ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, ...props }, forwardRef) => {
+  ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, dismissible = true, ...props }, forwardRef) => {
     const classes = clsx(
       [styles[`${rootClassName}`]],
       styles[`${rootClassName}--${variant}`],
@@ -55,7 +58,11 @@ const Root = React.forwardRef(
       defaultProp: defaultOpen,
       onChange: onOpenChange
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: { variant, type }, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant: "white", as: void 0, ...props, ref: forwardRef, className: classes }) }) }) });
+    const contextValue = React.useMemo(() => ({ variant, type, dismissible }), [variant, type, dismissible]);
+    if (!dismissible) {
+      return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(components_grid_grid.Grid, { ...props, as: "div", asChild: false, ref: forwardRef, className: classes }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant: "white", as: void 0, ...props, ref: forwardRef, className: classes }) }) }) });
   }
 );
 Root.displayName = "Root";

package/dist/components/notification/notification-root.d.ts

@@ -17,8 +17,16 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, 'varia
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     role?: 'alert';
+    /**
+     * Whether the notification can be dismissed by the user.
+     * Set to `false` when using Notification inside another interactive container (e.g. a collapsible card)
+     * to prevent the Notification from capturing and stopping click propagation.
+     * When `false`, `Notification.Dismiss` will not render.
+     * @default true
+     */
+    dismissible?: boolean;
 };
-export declare const NotificationContext: React.Context<Pick<RootProps, "type" | "variant"> | undefined>;
+export declare const NotificationContext: React.Context<Pick<RootProps, "type" | "variant" | "dismissible"> | undefined>;
 /** Groups Icon and Text parts. This component is based on the div element */
 export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
     display?: import('../../utils/generate-styling').DisplayChildren;
@@ -83,4 +91,12 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<R
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     role?: "alert";
+    /**
+     * Whether the notification can be dismissed by the user.
+     * Set to `false` when using Notification inside another interactive container (e.g. a collapsible card)
+     * to prevent the Notification from capturing and stopping click propagation.
+     * When `false`, `Notification.Dismiss` will not render.
+     * @default true
+     */
+    dismissible?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/notification/notification-root.js

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Card } from "../card/index.js";
+import { Grid } from "../grid/grid.js";
 const styles = {
   "teddy-notification": "_teddy-notification_1x0q6_3",
   "teddy-notification--success": "_teddy-notification--success_1x0q6_11",
@@ -22,9 +23,11 @@ const styles = {
   "teddy-notification__heading": "_teddy-notification__heading_1x0q6_80"
 };
 const rootClassName = "teddy-notification";
-const NotificationContext = React__default.createContext(void 0);
+const NotificationContext = React__default.createContext(
+  void 0
+);
 const Root = React__default.forwardRef(
-  ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, ...props }, forwardRef) => {
+  ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, dismissible = true, ...props }, forwardRef) => {
     const classes = clsx(
       [styles[`${rootClassName}`]],
       styles[`${rootClassName}--${variant}`],
@@ -36,7 +39,11 @@ const Root = React__default.forwardRef(
       defaultProp: defaultOpen,
       onChange: onOpenChange
     });
-    return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { variant, type }, children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { asChild: true, children: /* @__PURE__ */ jsx(Card, { variant: "white", as: void 0, ...props, ref: forwardRef, className: classes }) }) }) });
+    const contextValue = React__default.useMemo(() => ({ variant, type, dismissible }), [variant, type, dismissible]);
+    if (!dismissible) {
+      return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Grid, { ...props, as: "div", asChild: false, ref: forwardRef, className: classes }) });
+    }
+    return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { open, onOpenChange: setOpen, asChild: true, children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { asChild: true, children: /* @__PURE__ */ jsx(Card, { variant: "white", as: void 0, ...props, ref: forwardRef, className: classes }) }) }) });
   }
 );
 Root.displayName = "Root";

package/dist/components/shopping-cart/shopping-cart-payment.cjs

@@ -9,16 +9,22 @@ const components_progressBar_progressBar = require("../progress-bar/progress-bar
 const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
 const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
 const components_box_box = require("../box/box.cjs");
-const HighlightedLine = ({ icon, heading, price, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLine, children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineTop, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineLeft, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, className: shoppingCart_module.styles.highlightedLineIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLineHeading, children: heading })
+const HighlightedLine = ({ icon, heading, price, description }) => {
+  const hasHeading = heading || price;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLine, children: [
+    hasHeading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineTop, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineLeft, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, className: shoppingCart_module.styles.highlightedLineIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLineHeading, children: heading })
+      ] }),
+      price && /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLinePrice, children: price })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLinePrice, children: price })
-  ] }),
-  description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: shoppingCart_module.styles.highlightedLineDescription, children: description })
-] });
+    description && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineLeft, children: [
+      !hasHeading && icon && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, className: shoppingCart_module.styles.highlightedLineIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: shoppingCart_module.styles.highlightedLineDescription, children: description })
+    ] })
+  ] });
+};
 const MonthlyPriceDetailsDisplay = ({
   monthlyPriceDetails,
   totalPriceMonthly,

package/dist/components/shopping-cart/shopping-cart-payment.d.ts

@@ -3,8 +3,8 @@ import { CartDelivery } from './types';
 
 export interface HighlightedLineProps {
     icon?: IconName;
-    heading: string;
-    price: string;
+    heading?: string;
+    price?: string;
     description?: string;
     isMonthly: boolean;
 }

package/dist/components/shopping-cart/shopping-cart-payment.js

@@ -7,16 +7,22 @@ import { ProgressBar } from "../progress-bar/progress-bar.js";
 import { useShoppingCart } from "./shopping-cart-context.js";
 import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
 import { Box } from "../box/box.js";
-const HighlightedLine = ({ icon, heading, price, description }) => /* @__PURE__ */ jsxs("div", { className: styles.highlightedLine, children: [
-  /* @__PURE__ */ jsxs("div", { className: styles.highlightedLineTop, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.highlightedLineLeft, children: [
-      icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: styles.highlightedLineIcon }),
-      /* @__PURE__ */ jsx("span", { className: styles.highlightedLineHeading, children: heading })
+const HighlightedLine = ({ icon, heading, price, description }) => {
+  const hasHeading = heading || price;
+  return /* @__PURE__ */ jsxs("div", { className: styles.highlightedLine, children: [
+    hasHeading && /* @__PURE__ */ jsxs("div", { className: styles.highlightedLineTop, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.highlightedLineLeft, children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: styles.highlightedLineIcon }),
+        /* @__PURE__ */ jsx("span", { className: styles.highlightedLineHeading, children: heading })
+      ] }),
+      price && /* @__PURE__ */ jsx("span", { className: styles.highlightedLinePrice, children: price })
     ] }),
-    /* @__PURE__ */ jsx("span", { className: styles.highlightedLinePrice, children: price })
-  ] }),
-  description && /* @__PURE__ */ jsx("p", { className: styles.highlightedLineDescription, children: description })
-] });
+    description && /* @__PURE__ */ jsxs("div", { className: styles.highlightedLineLeft, children: [
+      !hasHeading && icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: styles.highlightedLineIcon }),
+      /* @__PURE__ */ jsx("p", { className: styles.highlightedLineDescription, children: description })
+    ] })
+  ] });
+};
 const MonthlyPriceDetailsDisplay = ({
   monthlyPriceDetails,
   totalPriceMonthly,

package/package.json

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