[Tag][Feature] Tags med ikon (#2611)

* 🎉 Tag har nå egen icon-prop

* 🎨 Tag.css tilpasset ikoner

* 📝 Storybook-demo for tags + ikoner

* 📝 Aksel-demo for tag

* 📝 Changeset

* 🔥 Fjernet iconPosition-prop fra tag.tsx

* 🧪 Oppdatert stories med nye props

* 🔥 Fjernet iconPosition-demo i Tag fra nettside

* 🔥 Fjernet gammel css for iconPosition right tag.tsx

.changeset/heavy-shrimps-destroy.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Tag: Har nå innebygd støtte for ikoner

@navikt/core/css/tag.css

@@ -1,4 +1,7 @@
 .navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
   border: 1px solid;
   border-radius: var(--a-border-radius-small);
   display: inline-flex;
@@ -12,11 +15,26 @@
 .navds-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
 }
 
 .navds-tag--error {

@navikt/core/react/src/tag/Tag.tsx

@@ -36,6 +36,10 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
+  /**
+   * Tag Icon
+   */
+  icon?: React.ReactNode;
 }
 
 /**
@@ -50,7 +54,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => (
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
     <BodyShort
       {...rest}
       ref={ref}
@@ -62,7 +66,10 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         `navds-tag--${variant}`,
         `navds-tag--${size}`,
       )}
-    />
+    >
+      {icon && <span className="navds-tag__icon--left">{icon}</span>}
+      {children}
+    </BodyShort>
   ),
 );
 

@navikt/core/react/src/tag/tag.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
+import { ComponentIcon } from "@navikt/aksel-icons";
 import { Tag, TagProps } from ".";
+import { HStack } from "../layout/stack";
+
+const sizes: TagProps["size"][] = ["xsmall", "small", "medium"];
 
 const variants: TagProps["variant"][] = [
   "warning",
@@ -52,14 +56,19 @@ export default {
 
 export const Default = {
   render: (props) => (
-    <Tag variant={props.variant} size={props.size}>
+    <Tag
+      variant={props.variant}
+      size={props.size}
+      icon={props.icon && <ComponentIcon aria-hidden />}
+    >
       {props.children}
     </Tag>
   ),
 
   args: {
     children: "Id elit esse",
     variant: "info",
+    icon: false,
   },
 };
 
@@ -98,3 +107,20 @@ export const Variants = () => {
     </div>
   );
 };
+
+export const WithIcons = () => {
+  return (
+    <HStack gap="2" align="start">
+      {sizes.reverse().map((size) => (
+        <Tag
+          key={size}
+          variant="neutral-moderate"
+          size={size}
+          icon={<ComponentIcon aria-hidden />}
+        >
+          {size}
+        </Tag>
+      ))}
+    </HStack>
+  );
+};

aksel.nav.no/website/pages/eksempler/tag/ikon.tsx

@@ -0,0 +1,40 @@
+import { withDsExample } from "@/web/examples/withDsExample";
+import { ComponentIcon } from "@navikt/aksel-icons";
+import { HStack, Tag } from "@navikt/ds-react";
+
+const Example = () => {
+  return (
+    <HStack gap="2" align="start">
+      <Tag variant="neutral-moderate" icon={<ComponentIcon aria-hidden />}>
+        Ikon
+      </Tag>
+      <Tag
+        size="small"
+        variant="neutral-moderate"
+        icon={<ComponentIcon aria-hidden />}
+      >
+        Ikon
+      </Tag>
+      <Tag
+        size="xsmall"
+        variant="neutral-moderate"
+        icon={<ComponentIcon aria-hidden />}
+      >
+        Ikon
+      </Tag>
+    </HStack>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+  desc: "Hvis ikon bare er illustrativt, husk å legge til 'aria-hidden'.",
+};