@norges-domstoler/dds-components 0.0.0-dev-20240122114608 → 0.0.0-dev-20240122135423

package/dist/index.d.mts

@@ -2505,17 +2505,45 @@ type TabPanelsProps = HTMLAttributes<HTMLDivElement>;
 declare const TabPanels: react.ForwardRefExoticComponent<TabPanelsProps & react.RefAttributes<HTMLDivElement>>;
 
 type TagPurpose = 'success' | 'info' | 'danger' | 'warning' | 'default';
-type TagProps = BaseComponentProps<HTMLSpanElement, {
-    /**Tekst som vises i `<Tag />.` */
+type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**
+     * Innholdet til `<Tag>.` Kan brukes istedenfor `text`.
+     */
+    children?: ReactNode;
+    /**
+     * Samme oppførsel som `children`. Er `children` brukt vil denne ignoreres. Tekst som vises i `<Tag>`.
+     */
     text?: string;
-    /**Formål med status eller kategorisering. Påvirker styling. */
+    /**
+     * Formål med status eller kategorisering. Påvirker styling.
+     * */
     purpose?: TagPurpose;
+    /**
+     * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
+     * @default false
+     */
+    withIcon?: boolean;
 }>;
 declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
-    /**Tekst som vises i `<Tag />.` */
+    /**
+     * Innholdet til `<Tag>.` Kan brukes istedenfor `text`.
+     */
+    children?: ReactNode;
+    /**
+     * Samme oppførsel som `children`. Er `children` brukt vil denne ignoreres. Tekst som vises i `<Tag>`.
+     */
     text?: string | undefined;
-    /**Formål med status eller kategorisering. Påvirker styling. */
+    /**
+     * Formål med status eller kategorisering. Påvirker styling.
+     * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
+     * @default false
+     */
+    withIcon?: boolean | undefined;
+} & {
+    children?: ReactNode;
 } & {
     htmlProps?: react.HTMLAttributes<HTMLSpanElement> | undefined;
 } & react.RefAttributes<HTMLSpanElement>>;

package/dist/index.d.ts

@@ -2505,17 +2505,45 @@ type TabPanelsProps = HTMLAttributes<HTMLDivElement>;
 declare const TabPanels: react.ForwardRefExoticComponent<TabPanelsProps & react.RefAttributes<HTMLDivElement>>;
 
 type TagPurpose = 'success' | 'info' | 'danger' | 'warning' | 'default';
-type TagProps = BaseComponentProps<HTMLSpanElement, {
-    /**Tekst som vises i `<Tag />.` */
+type TagProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**
+     * Innholdet til `<Tag>.` Kan brukes istedenfor `text`.
+     */
+    children?: ReactNode;
+    /**
+     * Samme oppførsel som `children`. Er `children` brukt vil denne ignoreres. Tekst som vises i `<Tag>`.
+     */
     text?: string;
-    /**Formål med status eller kategorisering. Påvirker styling. */
+    /**
+     * Formål med status eller kategorisering. Påvirker styling.
+     * */
     purpose?: TagPurpose;
+    /**
+     * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
+     * @default false
+     */
+    withIcon?: boolean;
 }>;
 declare const Tag: react.ForwardRefExoticComponent<Pick<react.HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
-    /**Tekst som vises i `<Tag />.` */
+    /**
+     * Innholdet til `<Tag>.` Kan brukes istedenfor `text`.
+     */
+    children?: ReactNode;
+    /**
+     * Samme oppførsel som `children`. Er `children` brukt vil denne ignoreres. Tekst som vises i `<Tag>`.
+     */
     text?: string | undefined;
-    /**Formål med status eller kategorisering. Påvirker styling. */
+    /**
+     * Formål med status eller kategorisering. Påvirker styling.
+     * */
     purpose?: TagPurpose | undefined;
+    /**
+     * Om `<Tag>` skal ha et ikon til venstre for teksten. Tags med `purpose="default"` har aldri ikon.
+     * @default false
+     */
+    withIcon?: boolean | undefined;
+} & {
+    children?: ReactNode;
 } & {
     htmlProps?: react.HTMLAttributes<HTMLSpanElement> | undefined;
 } & react.RefAttributes<HTMLSpanElement>>;

package/dist/index.js

@@ -11847,15 +11847,50 @@ var wrapper7 = {
   border: "1px solid",
   borderRadius: borderRadius9.RadiiDdsBorderRadius1Radius,
   padding: `${spacing30.SizesDdsSpacingX0125} ${spacing30.SizesDdsSpacingX025}`,
+  icon: {
+    padding: [
+      spacing30.SizesDdsSpacingX0125,
+      spacing30.SizesDdsSpacingX025,
+      spacing30.SizesDdsSpacingX0125,
+      spacing30.SizesDdsSpacingX0125
+    ].join(" "),
+    gap: spacing30.SizesDdsSpacingX0125,
+    size: "small"
+  },
   purpose: {
     default: {
       backgroundColor: colors29.DdsColorNeutralsGray1,
-      borderColor: colors29.DdsColorNeutralsGray3
+      borderColor: colors29.DdsColorNeutralsGray3,
+      icon: void 0
+    },
+    success: {
+      ...localMessageTokens.container.purpose.success,
+      icon: {
+        icon: CheckCircledIcon,
+        color: colors29.DdsColorSuccessDarkest
+      }
+    },
+    danger: {
+      ...localMessageTokens.container.purpose.danger,
+      icon: {
+        icon: ErrorIcon,
+        color: colors29.DdsColorDangerDarkest
+      }
+    },
+    warning: {
+      ...localMessageTokens.container.purpose.warning,
+      icon: {
+        icon: WarningIcon,
+        color: colors29.DdsColorWarningDarkest
+      }
     },
-    success: localMessageTokens.container.purpose.success,
-    danger: localMessageTokens.container.purpose.danger,
-    warning: localMessageTokens.container.purpose.warning,
-    info: localMessageTokens.container.purpose.info
+    info: {
+      ...localMessageTokens.container.purpose.info,
+      icon: {
+        icon: InfoIcon,
+        color: colors29.DdsColorInfoDarkest
+      }
+    }
   }
 };
 var tagTokens = {
@@ -11868,31 +11903,52 @@ var { wrapper: wrapper8 } = tagTokens;
 var Wrapper7 = (0, import_styled_components80.default)(TextOverflowEllipsisWrapper)`
   display: inline-flex;
   align-items: center;
+  gap: ${tagTokens.wrapper.icon.gap};
   border: ${wrapper8.border};
   border-radius: ${wrapper8.borderRadius};
-  padding: ${wrapper8.padding};
+  padding: ${({ $withIcon }) => $withIcon ? wrapper8.icon.padding : wrapper8.padding};
   ${getFontStyling(typographyType5)}
   ${({ $purpose }) => import_styled_components80.css`
     background-color: ${wrapper8.purpose[$purpose].backgroundColor};
     border-color: ${wrapper8.purpose[$purpose].borderColor};
   `}
 `;
+var StyledIcon4 = (0, import_styled_components80.default)(Icon)`
+  color: ${({ $purpose }) => {
+  var _a;
+  return (_a = wrapper8.purpose[$purpose].icon) == null ? void 0 : _a.color;
+}};
+`;
 var Tag = (0, import_react95.forwardRef)((props, ref) => {
   const {
     text,
     purpose = "default",
     id,
     className,
+    children,
     htmlProps,
+    withIcon,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+  const icon12 = tagTokens.wrapper.purpose[purpose].icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
     Wrapper7,
     {
       ...getBaseHTMLProps(id, className, htmlProps, rest),
       ref,
       $purpose: purpose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TextOverflowEllipsisInner, { children: text })
+      $withIcon: Boolean(withIcon && icon12),
+      children: [
+        withIcon && icon12 && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+          StyledIcon4,
+          {
+            $purpose: purpose,
+            icon: icon12.icon,
+            iconSize: tagTokens.wrapper.icon.size
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TextOverflowEllipsisInner, { children: children != null ? children : text })
+      ]
     }
   );
 });
@@ -13964,12 +14020,12 @@ var Nav2 = (0, import_styled_components97.default)("nav")`
   display: flex;
   gap: ${backLinkTokens.nav.gap};
 `;
-var StyledIcon4 = (0, import_styled_components97.default)(Icon)`
+var StyledIcon5 = (0, import_styled_components97.default)(Icon)`
   color: ${backLinkTokens.icon.color};
 `;
 var BackLink = (0, import_react115.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(Nav2, { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(StyledIcon4, { icon: ArrowLeftIcon, iconSize: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(StyledIcon5, { icon: ArrowLeftIcon, iconSize: "small" }),
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Typography, { typographyType: "a", href: props.href, children: props.label })
   ] });
 });