@norges-domstoler/dds-components 0.0.0-dev-20240226121339 → 0.0.0-dev-20240227093735

package/dist/index.d.mts

@@ -1527,8 +1527,20 @@ declare const BackLink: react.ForwardRefExoticComponent<BackLinkProps & react.Re
 type BreadcrumbProps = HTMLAttributes<HTMLSpanElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
 declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
 
-type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElement>;
-declare const Breadcrumbs: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLElement>, "className" | "id"> & object & {
+type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElement, {
+    /**
+     * Om variant for mindre skjerm skal vises.
+     * Trunkerer barn unntatt første og siste; trunkerte barn er tigjengelige ved å trykke på trukeringsknappen.
+     */
+    smallScreen?: boolean;
+}>;
+declare const Breadcrumbs: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLElement>, "className" | "id"> & {
+    /**
+     * Om variant for mindre skjerm skal vises.
+     * Trunkerer barn unntatt første og siste; trunkerte barn er tigjengelige ved å trykke på trukeringsknappen.
+     */
+    smallScreen?: boolean | undefined;
+} & {
     children?: react.ReactNode;
 } & {
     htmlProps?: react.HTMLAttributes<HTMLElement> | undefined;

package/dist/index.d.ts

@@ -1527,8 +1527,20 @@ declare const BackLink: react.ForwardRefExoticComponent<BackLinkProps & react.Re
 type BreadcrumbProps = HTMLAttributes<HTMLSpanElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
 declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
 
-type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElement>;
-declare const Breadcrumbs: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLElement>, "className" | "id"> & object & {
+type BreadcrumbsProps = BaseComponentPropsWithChildren<HTMLElement, {
+    /**
+     * Om variant for mindre skjerm skal vises.
+     * Trunkerer barn unntatt første og siste; trunkerte barn er tigjengelige ved å trykke på trukeringsknappen.
+     */
+    smallScreen?: boolean;
+}>;
+declare const Breadcrumbs: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLElement>, "className" | "id"> & {
+    /**
+     * Om variant for mindre skjerm skal vises.
+     * Trunkerer barn unntatt første og siste; trunkerte barn er tigjengelige ved å trykke på trukeringsknappen.
+     */
+    smallScreen?: boolean | undefined;
+} & {
     children?: react.ReactNode;
 } & {
     htmlProps?: react.HTMLAttributes<HTMLElement> | undefined;

package/dist/index.js

@@ -5337,7 +5337,10 @@ var icon2 = {
   color: colors12.DdsColorInteractiveBase
 };
 var listItem = {
-  gap: spacing11.SizesDdsSpacingX05
+  gap: spacing11.SizesDdsSpacingX05,
+  notSmallScreen: {
+    padding: `${spacing11.SizesDdsSpacingX0125} 0`
+  }
 };
 var list = {
   gap: spacing11.SizesDdsSpacingX05
@@ -5359,11 +5362,14 @@ var List = import_styled_components26.default.ol`
   gap: ${list2.gap};
 `;
 List.displayName = "List";
-var ListItem = import_styled_components26.default.li`
+var ListItem = import_styled_components26.default.li.withConfig({
+  shouldForwardProp: (prop) => prop !== "smallScreen"
+})`
   align-items: center;
   display: flex;
   gap: ${listItem2.gap};
   ${getFontStyling(typographyType2)}
+  padding: ${({ smallScreen }) => smallScreen ? "0" : listItem2.notSmallScreen.padding};
 `;
 ListItem.displayName = "ListItem";
 var StyledIcon = (0, import_styled_components26.default)(Icon)`
@@ -5371,21 +5377,51 @@ var StyledIcon = (0, import_styled_components26.default)(Icon)`
 `;
 var Breadcrumbs = (0, import_react30.forwardRef)(
   (props, ref) => {
-    const { children, id, className, htmlProps, ...rest } = props;
+    const { children, smallScreen, id, className, htmlProps, ...rest } = props;
+    const chevronIcon = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(StyledIcon, { iconSize: "inherit", icon: ChevronRightIcon });
     const childrenArray = import_react30.Children.toArray(children);
     const breadcrumbChildren = childrenArray.map((item, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(ListItem, { children: [
-        index !== 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(StyledIcon, { icon: ChevronRightIcon }),
+      return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(ListItem, { smallScreen, children: [
+        index !== 0 && chevronIcon,
         item
       ] }, `breadcrumb-${index}`);
     });
+    const breadcrumbChildrenTruncated = childrenArray.length > 2 ? childrenArray.slice(1, childrenArray.length - 1).map((item) => {
+      if ((0, import_react30.isValidElement)(item))
+        return {
+          title: item.props.children,
+          href: item.props.href
+        };
+    }).filter((item) => item) : [];
+    const breadcrumbChildrenSmallScreen = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(import_jsx_runtime184.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(ListItem, { smallScreen, children: childrenArray[0] }),
+      breadcrumbChildrenTruncated.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(ListItem, { smallScreen, children: [
+        chevronIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(OverflowMenuGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+            Button,
+            {
+              size: "tiny",
+              icon: MoreHorizontalIcon,
+              appearance: "borderless",
+              "aria-label": `Vis br\xF8dsmulesti br\xF8dsmule 2 ${breadcrumbChildrenTruncated.length > 1 && `til ${breadcrumbChildren.length - 1}`}`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(OverflowMenu, { items: breadcrumbChildrenTruncated })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(ListItem, { smallScreen, children: [
+        chevronIcon,
+        childrenArray[childrenArray.length - 1]
+      ] })
+    ] });
     return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
       "nav",
       {
         ...getBaseHTMLProps(id, className, htmlProps, rest),
         ref,
         "aria-label": "br\xF8dsmulesti",
-        children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(List, { children: breadcrumbChildren })
+        children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(List, { children: smallScreen ? breadcrumbChildrenSmallScreen : breadcrumbChildren })
       }
     );
   }