@norges-domstoler/dds-components 0.0.0-dev-20240220114533 → 0.0.0-dev-20240222090730

package/dist/index.d.mts

@@ -3030,6 +3030,10 @@ type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false
@@ -3049,6 +3053,10 @@ declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTM
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean | undefined;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false

package/dist/index.d.ts

@@ -3030,6 +3030,10 @@ type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false
@@ -3049,6 +3053,10 @@ declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTM
      * Formål med status eller kategorisering. Påvirker styling.
      * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Variant med sterkere visuelt uttrykk. Hver `purpose` har en sterk variant.
+     */
+    strong?: boolean | undefined;
     /**
      * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
      * @default false

package/dist/index.js

@@ -9239,9 +9239,11 @@ var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
 var { border: border10, colors: colors23, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
 var bar = {
   backgroundColor: colors23.DdsColorNeutralsWhite,
-  itemGap: spacing24.SizesDdsSpacingX1,
+  itemGap: spacing24.SizesDdsSpacingX15,
   minHeight: "57px",
-  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`
+  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`,
+  paddingLeft: spacing24.SizesDdsSpacingX15,
+  paddingRight: spacing24.SizesDdsSpacingX15
 };
 var separator = {
   color: border10.BordersDdsBorderStyleLightStroke,
@@ -9264,6 +9266,8 @@ var Bar2 = import_styled_components61.default.div`
   align-items: center;
   min-height: ${bar2.minHeight};
   border-bottom: ${bar2.borderBottom};
+  padding-left: ${bar2.paddingLeft};
+  padding-right: ${bar2.paddingRight};
 
   ${({ $hasNavigation }) => $hasNavigation ? import_styled_components61.css`
           ${ContextMenuGroup} {
@@ -9440,7 +9444,7 @@ var InternalHeader = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }),
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
+        (hasContextMenu || navigation2 !== null) && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
         navigation2,
         hasContextMenu && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(ContextMenuGroup, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -9634,23 +9638,23 @@ var container9 = {
   },
   purpose: {
     info: {
-      borderColor: colors24.DdsColorInfoLighter,
+      borderColor: colors24.DdsColorInfoBase,
       backgroundColor: colors24.DdsColorInfoLightest
     },
     warning: {
-      borderColor: colors24.DdsColorWarningLighter,
+      borderColor: colors24.DdsColorWarningBase,
       backgroundColor: colors24.DdsColorWarningLightest
     },
     danger: {
-      borderColor: colors24.DdsColorDangerLighter,
+      borderColor: colors24.DdsColorDangerBase,
       backgroundColor: colors24.DdsColorDangerLightest
     },
     success: {
-      borderColor: colors24.DdsColorSuccessLighter,
+      borderColor: colors24.DdsColorSuccessBase,
       backgroundColor: colors24.DdsColorSuccessLightest
     },
     tips: {
-      borderColor: colors24.DdsColorPrimaryLighter,
+      borderColor: colors24.DdsColorPrimaryBase,
       backgroundColor: colors24.DdsColorPrimaryLightest
     },
     confidential: {
@@ -13703,49 +13707,93 @@ var typographyType5 = "bodySans01";
 var wrapper7 = {
   border: "1px solid",
   borderRadius: borderRadius10.RadiiDdsBorderRadius1Radius,
-  padding: `${spacing37.SizesDdsSpacingX0125} ${spacing37.SizesDdsSpacingX025}`,
+  padding: `${spacing37.SizesDdsSpacingX0125} ${spacing37.SizesDdsSpacingX05}`,
   icon: {
     padding: [
       spacing37.SizesDdsSpacingX0125,
-      spacing37.SizesDdsSpacingX025,
+      spacing37.SizesDdsSpacingX05,
       spacing37.SizesDdsSpacingX0125,
-      spacing37.SizesDdsSpacingX0125
+      spacing37.SizesDdsSpacingX025
     ].join(" "),
-    gap: spacing37.SizesDdsSpacingX0125,
+    gap: spacing37.SizesDdsSpacingX025,
     size: "small"
   },
   purpose: {
     default: {
-      backgroundColor: colors33.DdsColorNeutralsGray1,
-      borderColor: colors33.DdsColorNeutralsGray3,
-      icon: void 0
+      icon: void 0,
+      base: {
+        backgroundColor: colors33.DdsColorNeutralsGray1,
+        borderColor: colors33.DdsColorNeutralsGray3,
+        icon: void 0
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorNeutralsGray3,
+        borderColor: colors33.DdsColorNeutralsGray3,
+        icon: void 0
+      }
     },
     success: {
-      ...localMessageTokens.container.purpose.success,
-      icon: {
-        icon: CheckCircledIcon,
-        color: colors33.DdsColorSuccessDarkest
+      icon: CheckCircledIcon,
+      base: {
+        ...localMessageTokens.container.purpose.success,
+        icon: {
+          color: colors33.DdsColorSuccessDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorSuccessLight,
+        borderColor: colors33.DdsColorSuccessLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     danger: {
-      ...localMessageTokens.container.purpose.danger,
-      icon: {
-        icon: ErrorIcon,
-        color: colors33.DdsColorDangerDarkest
+      icon: ErrorIcon,
+      base: {
+        ...localMessageTokens.container.purpose.danger,
+        icon: {
+          color: colors33.DdsColorDangerDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorDangerLight,
+        borderColor: colors33.DdsColorDangerLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     warning: {
-      ...localMessageTokens.container.purpose.warning,
-      icon: {
-        icon: WarningIcon,
-        color: colors33.DdsColorWarningDarkest
+      icon: WarningIcon,
+      base: {
+        ...localMessageTokens.container.purpose.warning,
+        icon: {
+          color: colors33.DdsColorWarningDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorWarningLight,
+        borderColor: colors33.DdsColorWarningLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     },
     info: {
-      ...localMessageTokens.container.purpose.info,
-      icon: {
-        icon: InfoIcon,
-        color: colors33.DdsColorInfoDarkest
+      icon: InfoIcon,
+      base: {
+        ...localMessageTokens.container.purpose.info,
+        icon: {
+          color: colors33.DdsColorInfoDarkest
+        }
+      },
+      strong: {
+        backgroundColor: colors33.DdsColorInfoLight,
+        borderColor: colors33.DdsColorInfoLight,
+        icon: {
+          color: colors33.DdsColorNeutralsGray9
+        }
       }
     }
   }
@@ -13765,21 +13813,22 @@ var Wrapper7 = (0, import_styled_components94.default)(TextOverflowEllipsisWrapp
   border-radius: ${wrapper8.borderRadius};
   padding: ${({ $withIcon }) => $withIcon ? wrapper8.icon.padding : wrapper8.padding};
   ${getFontStyling(typographyType5)}
-  ${({ $purpose }) => import_styled_components94.css`
-    background-color: ${wrapper8.purpose[$purpose].backgroundColor};
-    border-color: ${wrapper8.purpose[$purpose].borderColor};
+  ${({ $purpose, $strong }) => import_styled_components94.css`
+    background-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].backgroundColor};
+    border-color: ${wrapper8.purpose[$purpose][$strong ? "strong" : "base"].borderColor};
   `}
 `;
 var StyledIcon5 = (0, import_styled_components94.default)(Icon)`
-  color: ${({ $purpose }) => {
+  color: ${({ $purpose, $strong }) => {
   var _a;
-  return (_a = wrapper8.purpose[$purpose].icon) == null ? void 0 : _a.color;
+  return (_a = wrapper8.purpose[$purpose][$strong ? "strong" : "base"].icon) == null ? void 0 : _a.color;
 }};
 `;
 var Tag = (0, import_react114.forwardRef)((props, ref) => {
   const {
     text,
     purpose = "default",
+    strong,
     id,
     className,
     children,
@@ -13794,13 +13843,15 @@ var Tag = (0, import_react114.forwardRef)((props, ref) => {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       ref,
       $purpose: purpose,
+      $strong: strong,
       $withIcon: Boolean(withIcon && icon12),
       children: [
         withIcon && icon12 && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
           StyledIcon5,
           {
             $purpose: purpose,
-            icon: icon12.icon,
+            $strong: strong,
+            icon: icon12,
             iconSize: tagTokens.wrapper.icon.size
           }
         ),