📝 Document Chip on the website

Adds a Chip section with neutral, action and removable examples, plus
changelog entries for the new component.

aksel.nav.no/website/src/App.tsx

@@ -4,6 +4,7 @@ import {
   Alert,
   BodyShort,
   Button,
+  Chip,
   Heading,
   Modal,
   TextField,
@@ -86,6 +87,19 @@ export function App() {
         </Accordion>
       </section>
 
+      <section className="example">
+        <Heading level="2" size="medium">
+          Chip
+        </Heading>
+        <div className="example__preview">
+          <Chip>Filter</Chip>
+          <Chip variant="action">Oslo</Chip>
+          <Chip removable onDelete={() => console.log("Slettet")}>
+            Fjernbar
+          </Chip>
+        </div>
+      </section>
+
       <section className="example">
         <Heading level="2" size="medium">
           Modal

packages/core/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- :sparkles: Add Chip styles.
+
 ## 0.2.0
 
 - :bug: Fix focus ring on Button — use a box-shadow ring so the indicator renders correctly in Safari.

packages/core/css/src/chip.css

@@ -0,0 +1,50 @@
+/**
+ * Chip
+ */
+
+.navds-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  border: 1px solid var(--a-border-default);
+  border-radius: var(--a-border-radius-full);
+  background-color: var(--a-bg-default);
+  color: var(--a-text-default);
+  font-family: var(--a-font-family);
+  font-size: var(--a-font-size-xs);
+}
+
+.navds-chip--action {
+  border-color: var(--a-border-action);
+  background-color: var(--a-surface-action);
+  color: var(--a-text-on-action);
+}
+
+.navds-chip--action:hover {
+  background-color: var(--a-surface-action-hover);
+}
+
+.navds-chip--removable {
+  padding-right: var(--a-spacing-1);
+}
+
+.navds-chip__delete {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border: none;
+  border-radius: var(--a-border-radius-full);
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.navds-chip__delete:hover {
+  background-color: rgb(35 38 42 / 15%);
+}
+
+.navds-chip:focus-within {
+  outline: 2px solid var(--a-border-focus);
+  outline-offset: 2px;
+}

packages/core/css/src/index.css

@@ -6,3 +6,4 @@
 @import "./alert.css";
 @import "./accordion.css";
 @import "./modal.css";
+@import "./chip.css";

packages/core/react/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- :sparkles: Add Chip component with neutral and action variants.
+
 ## 0.2.0
 
 - Add Accordion and Modal components.

packages/core/react/src/chip/Chip.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { cn } from "../util/cn";
+
+export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Chip variant.
+   * @default "neutral"
+   */
+  variant?: "neutral" | "action";
+  /**
+   * Renders a delete button next to the label.
+   * @default false
+   */
+  removable?: boolean;
+  /** Called when the delete button is clicked. Requires `removable`. */
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+}
+
+export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(
+  { variant = "neutral", removable = false, onDelete, className, children, ...rest },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        "navds-chip",
+        `navds-chip--${variant}`,
+        removable && "navds-chip--removable",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="navds-chip__label">{children}</span>
+      {removable ? (
+        <button
+          type="button"
+          className="navds-chip__delete"
+          aria-label="Slett"
+          onClick={onDelete}
+        >
+          <XMarkIcon />
+        </button>
+      ) : null}
+    </span>
+  );
+});

packages/core/react/src/chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from "./Chip";
+export type { ChipProps } from "./Chip";

packages/core/react/src/index.ts

@@ -12,3 +12,5 @@ export { Accordion, AccordionItem } from "./accordion";
 export type { AccordionProps, AccordionItemProps } from "./accordion";
 export { Modal } from "./modal";
 export type { ModalProps } from "./modal";
+export { Chip } from "./chip";
+export type { ChipProps } from "./chip";