@telia/teddy 0.7.47 → 0.7.49

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

@@ -1,12 +1,27 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import "../../assets/sprite.44b293a1-teddy.svg";
 import { Icon } from "../icon/icon.js";
 import { Tooltip } from "../tooltip/index.js";
 import { ProgressBar } from "../progress-bar/progress-bar.js";
 import { useShoppingCart } from "./shopping-cart-context.js";
-import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
-const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly }) => {
+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 })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: styles.highlightedLinePrice, children: price })
+  ] }),
+  description && /* @__PURE__ */ jsx("p", { className: styles.highlightedLineDescription, children: description })
+] });
+const MonthlyPriceDetailsDisplay = ({
+  monthlyPriceDetails,
+  totalPriceMonthly,
+  highlightedLine
+}) => {
   const { formatPrice } = useShoppingCart();
   if (!monthlyPriceDetails || monthlyPriceDetails.length === 0) {
     return null;
@@ -22,6 +37,10 @@ const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly })
         formatPrice(totalPriceMonthly || 0),
         "/md."
       ] })
+    ] }),
+    (highlightedLine == null ? void 0 : highlightedLine.isMonthly) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: styles.horizontalRule }),
+      /* @__PURE__ */ jsx(HighlightedLine, { ...highlightedLine })
     ] })
   ] });
 };
@@ -34,85 +53,90 @@ const Payment = ({
   monthlyPriceDetails,
   totalVAT,
   totalPriceWithoutVAT,
+  highlightedLine,
   className
 }) => {
   const { formatPrice, hasPaid } = useShoppingCart();
   const hasDelivery = delivery && Object.keys(delivery).length > 0;
-  return /* @__PURE__ */ jsxs("section", { className: clsx(styles.section, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.sectionInner, children: [
-      hasDelivery && /* @__PURE__ */ jsxs("div", { className: styles.deliveryContainer, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.deliveryLeft, children: [
-          /* @__PURE__ */ jsx(Icon, { name: delivery.icon || "delivery", className: styles.deliveryIcon }),
-          delivery.label || "Levering"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("section", { className: clsx(styles.section, className), children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.sectionInner, children: [
+        hasDelivery && /* @__PURE__ */ jsxs("div", { className: styles.deliveryContainer, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.deliveryLeft, children: [
+            /* @__PURE__ */ jsx(Icon, { name: delivery.icon || "delivery", className: styles.deliveryIcon }),
+            delivery.label || "Levering"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: delivery.value })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: delivery.value })
-      ] }),
-      hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbar, children: [
-        delivery.progressBar.text || /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbarText, children: [
-          "Du har",
-          " ",
-          /* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
-            Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
-            ",-"
+        hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbar, children: [
+          delivery.progressBar.text || /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbarText, children: [
+            "Du har",
+            " ",
+            /* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
+              Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
+              ",-"
+            ] }),
+            " ",
+            "igjen til ",
+            /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "fri frakt" })
           ] }),
-          " ",
-          "igjen til ",
-          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "fri frakt" })
+          /* @__PURE__ */ jsx("div", { className: styles.progressBarWrapper, children: /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              colorTheme: "light",
+              progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: styles.progressBarWrapper, children: /* @__PURE__ */ jsx(
-          ProgressBar,
-          {
-            colorTheme: "light",
-            progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
-          }
-        ) })
-      ] }),
-      hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsx("hr", { className: styles.horizontalRule }),
-      !!totalPriceMonthly && /* @__PURE__ */ jsxs("div", { className: styles.priceMonthlyContainer, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.flexRow, children: [
-            /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale pr md:" }),
-            paymentTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
-              /* @__PURE__ */ jsx(Tooltip.Content, { className: styles.tooltipContent, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
+        hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsx("hr", { className: styles.horizontalRule }),
+        !!totalPriceMonthly && /* @__PURE__ */ jsxs("div", { className: styles.priceMonthlyContainer, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.flexRow, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale pr md:" }),
+              paymentTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
+                /* @__PURE__ */ jsx(Tooltip.Content, { className: styles.tooltipContent, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
+              ] })
+            ] }),
+            (!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
+              formatPrice(totalPriceMonthly),
+              "/md."
             ] })
           ] }),
-          (!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
-            formatPrice(totalPriceMonthly),
-            "/md."
-          ] })
+          /* @__PURE__ */ jsx(
+            MonthlyPriceDetailsDisplay,
+            {
+              monthlyPriceDetails,
+              totalPriceMonthly,
+              highlightedLine
+            }
+          )
+        ] })
+      ] }),
+      (!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxs("div", { className: styles.priceUpfrontContainer, children: [
+        !!totalPriceWithoutVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Sum:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
         ] }),
-        /* @__PURE__ */ jsx(
-          MonthlyPriceDetailsDisplay,
-          {
-            monthlyPriceDetails,
-            totalPriceMonthly
-          }
-        )
+        !!totalVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "MVA:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalVAT) })
+        ] }),
+        !!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale nå:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
+        ] }),
+        !!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betalt:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
+        ] }),
+        !!totalPriceFirstInvoice && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Å betale på første faktura:" }),
+          /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
+        ] })
       ] })
     ] }),
-    (!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxs("div", { className: styles.priceUpfrontContainer, children: [
-      !!totalPriceWithoutVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Sum:" }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
-      ] }),
-      !!totalVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "MVA:" }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalVAT) })
-      ] }),
-      !!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale nå:" }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
-      ] }),
-      !!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betalt:" }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
-      ] }),
-      !!totalPriceFirstInvoice && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Å betale på første faktura:" }),
-        /* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
-      ] })
-    ] })
+    highlightedLine && !highlightedLine.isMonthly && /* @__PURE__ */ jsx(Box, { p: "200", children: /* @__PURE__ */ jsx(HighlightedLine, { ...highlightedLine }) })
   ] });
 };
 Payment.displayName = "Payment";

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

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const components_heading_heading = require("../heading/heading.cjs");
 const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
-const shoppingCart_module = require("../../shopping-cart.module-BCoLrcMI.cjs");
-const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartContext.ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(shoppingCart_module.styles.shoppingCart, className), children: [
+const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
+const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartContext.ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete, readonly }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(shoppingCart_module.styles.shoppingCart, className), children: [
     heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.sectionInner, children: /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { className: shoppingCart_module.styles.heading, as: "h2", variant: "title-100", children: heading }) }),
     children
   ] }) });

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

@@ -6,6 +6,6 @@ export interface RootProps extends ShoppingCartContextValue {
     className?: string;
 }
 export declare const Root: {
-    ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }: RootProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }: RootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Heading } from "../heading/heading.js";
 import { ShoppingCartProvider } from "./shopping-cart-context.js";
-import { s as styles } from "../../shopping-cart.module-DA25l2hr.js";
-const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, className }) => {
-  return /* @__PURE__ */ jsx(ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete }, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.shoppingCart, className), children: [
+import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
+const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }) => {
+  return /* @__PURE__ */ jsx(ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete, readonly }, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.shoppingCart, className), children: [
     heading && /* @__PURE__ */ jsx("div", { className: styles.sectionInner, children: /* @__PURE__ */ jsx(Heading, { className: styles.heading, as: "h2", variant: "title-100", children: heading }) }),
     children
   ] }) });

package/dist/shopping-cart.module-C9EOksct.cjs

@@ -0,0 +1,62 @@
+"use strict";
+const shoppingCart = "_shoppingCart_ct6d7_1";
+const section = "_section_ct6d7_8";
+const sectionBody = "_sectionBody_ct6d7_14";
+const sectionInner = "_sectionInner_ct6d7_22";
+const horizontalRule = "_horizontalRule_ct6d7_26";
+const heading = "_heading_ct6d7_43";
+const continueContainer = "_continueContainer_ct6d7_47";
+const deliveryContainer = "_deliveryContainer_ct6d7_63";
+const deliveryProgressbar = "_deliveryProgressbar_ct6d7_69";
+const deliveryProgressbarText = "_deliveryProgressbarText_ct6d7_77";
+const deliveryLeft = "_deliveryLeft_ct6d7_81";
+const labelMedium = "_labelMedium_ct6d7_87";
+const deliveryIcon = "_deliveryIcon_ct6d7_93";
+const priceUpfrontContainer = "_priceUpfrontContainer_ct6d7_99";
+const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_ct6d7_107";
+const priceRow = "_priceRow_ct6d7_111";
+const tooltipContent = "_tooltipContent_ct6d7_133";
+const priceMonthlyContainer = "_priceMonthlyContainer_ct6d7_142";
+const priceMonthlyDetails = "_priceMonthlyDetails_ct6d7_107";
+const flexRow = "_flexRow_ct6d7_150";
+const tooltipTrigger = "_tooltipTrigger_ct6d7_155";
+const progressBarWrapper = "_progressBarWrapper_ct6d7_163";
+const highlightedLine = "_highlightedLine_ct6d7_167";
+const highlightedLineTop = "_highlightedLineTop_ct6d7_171";
+const highlightedLineLeft = "_highlightedLineLeft_ct6d7_178";
+const highlightedLineIcon = "_highlightedLineIcon_ct6d7_184";
+const highlightedLineHeading = "_highlightedLineHeading_ct6d7_190";
+const highlightedLinePrice = "_highlightedLinePrice_ct6d7_195";
+const highlightedLineDescription = "_highlightedLineDescription_ct6d7_201";
+const styles = {
+  shoppingCart,
+  section,
+  sectionBody,
+  sectionInner,
+  horizontalRule,
+  heading,
+  continueContainer,
+  deliveryContainer,
+  deliveryProgressbar,
+  deliveryProgressbarText,
+  deliveryLeft,
+  labelMedium,
+  deliveryIcon,
+  priceUpfrontContainer,
+  priceMonthlyDetailsTotal,
+  priceRow,
+  tooltipContent,
+  priceMonthlyContainer,
+  priceMonthlyDetails,
+  flexRow,
+  tooltipTrigger,
+  progressBarWrapper,
+  highlightedLine,
+  highlightedLineTop,
+  highlightedLineLeft,
+  highlightedLineIcon,
+  highlightedLineHeading,
+  highlightedLinePrice,
+  highlightedLineDescription
+};
+exports.styles = styles;

package/dist/shopping-cart.module-ClaAAxQV.js

@@ -0,0 +1,63 @@
+const shoppingCart = "_shoppingCart_ct6d7_1";
+const section = "_section_ct6d7_8";
+const sectionBody = "_sectionBody_ct6d7_14";
+const sectionInner = "_sectionInner_ct6d7_22";
+const horizontalRule = "_horizontalRule_ct6d7_26";
+const heading = "_heading_ct6d7_43";
+const continueContainer = "_continueContainer_ct6d7_47";
+const deliveryContainer = "_deliveryContainer_ct6d7_63";
+const deliveryProgressbar = "_deliveryProgressbar_ct6d7_69";
+const deliveryProgressbarText = "_deliveryProgressbarText_ct6d7_77";
+const deliveryLeft = "_deliveryLeft_ct6d7_81";
+const labelMedium = "_labelMedium_ct6d7_87";
+const deliveryIcon = "_deliveryIcon_ct6d7_93";
+const priceUpfrontContainer = "_priceUpfrontContainer_ct6d7_99";
+const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_ct6d7_107";
+const priceRow = "_priceRow_ct6d7_111";
+const tooltipContent = "_tooltipContent_ct6d7_133";
+const priceMonthlyContainer = "_priceMonthlyContainer_ct6d7_142";
+const priceMonthlyDetails = "_priceMonthlyDetails_ct6d7_107";
+const flexRow = "_flexRow_ct6d7_150";
+const tooltipTrigger = "_tooltipTrigger_ct6d7_155";
+const progressBarWrapper = "_progressBarWrapper_ct6d7_163";
+const highlightedLine = "_highlightedLine_ct6d7_167";
+const highlightedLineTop = "_highlightedLineTop_ct6d7_171";
+const highlightedLineLeft = "_highlightedLineLeft_ct6d7_178";
+const highlightedLineIcon = "_highlightedLineIcon_ct6d7_184";
+const highlightedLineHeading = "_highlightedLineHeading_ct6d7_190";
+const highlightedLinePrice = "_highlightedLinePrice_ct6d7_195";
+const highlightedLineDescription = "_highlightedLineDescription_ct6d7_201";
+const styles = {
+  shoppingCart,
+  section,
+  sectionBody,
+  sectionInner,
+  horizontalRule,
+  heading,
+  continueContainer,
+  deliveryContainer,
+  deliveryProgressbar,
+  deliveryProgressbarText,
+  deliveryLeft,
+  labelMedium,
+  deliveryIcon,
+  priceUpfrontContainer,
+  priceMonthlyDetailsTotal,
+  priceRow,
+  tooltipContent,
+  priceMonthlyContainer,
+  priceMonthlyDetails,
+  flexRow,
+  tooltipTrigger,
+  progressBarWrapper,
+  highlightedLine,
+  highlightedLineTop,
+  highlightedLineLeft,
+  highlightedLineIcon,
+  highlightedLineHeading,
+  highlightedLinePrice,
+  highlightedLineDescription
+};
+export {
+  styles as s
+};