📝 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,8 +4,8 @@ import {
   Alert,
   BodyShort,
   Button,
+  Chip,
   Heading,
-  Link,
   Modal,
   TextField,
 } from "@navikt/ds-react";
@@ -73,18 +73,6 @@ export function App() {
         </div>
       </section>
 
-      <section className="example">
-        <Heading level="2" size="medium">
-          Link
-        </Heading>
-        <div className="example__preview example__preview--column">
-          <BodyShort>
-            Les mer om <Link href="#top" inlineText>hvordan vi behandler data</Link> før du
-            søker, eller gå tilbake til <Link href="#top" variant="neutral">forsiden</Link>.
-          </BodyShort>
-        </div>
-      </section>
-
       <section className="example">
         <Heading level="2" size="medium">
           Accordion
@@ -99,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,8 +1,8 @@
 # Changelog
 
-## 0.3.0
+## Unreleased
 
-- :sparkles: Add Link styles, including the inlineText underline variant.
+- :sparkles: Add Chip styles.
 
 ## 0.2.0
 
@@ -10,6 +10,4 @@
 
 ## 0.1.0
 
-- Initial release with styles for Button (primary, secondary,
-  tertiary and danger variants), BodyShort, Heading and TextField,
-  all built on CSS custom properties from @navikt/ds-tokens.
+- Initial release with styles for Button, BodyShort, Heading, TextField, Alert, Accordion and Modal.

packages/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.3.0",
+  "version": "0.2.0",
   "description": "Component styles for Aksel Mini, built on @navikt/ds-tokens",
   "license": "MIT",
   "type": "module",

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,4 +6,4 @@
 @import "./alert.css";
 @import "./accordion.css";
 @import "./modal.css";
-@import "./link.css";
+@import "./chip.css";

packages/core/css/src/link.css

@@ -1,26 +0,0 @@
-/**
- * Link
- */
-
-.navds-link {
-  color: var(--a-icon-action);
-  text-decoration: none;
-  text-underline-offset: 0.15em;
-}
-
-.navds-link:hover {
-  text-decoration: underline;
-}
-
-.navds-link--neutral {
-  color: var(--a-text-default);
-}
-
-.navds-link--inline-text {
-  text-decoration: underline;
-}
-
-.navds-link:focus-visible {
-  outline: 2px solid var(--a-border-focus);
-  outline-offset: 2px;
-}

packages/core/icons/CHANGELOG.md

@@ -1,15 +1,9 @@
 # Changelog
 
-## 0.3.0
-
-- Maintenance release, version alignment with the other packages.
-
 ## 0.2.0
 
 - Add ChevronDownIcon.
 
 ## 0.1.0
 
-- Initial release with hand-written React icon wrappers for
-  Information, Checkmark, Warning and XMark, with the source SVGs
-  kept under `svg/` for reference.
+- Initial release with Information, Checkmark, Warning and XMark icons.

packages/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "0.3.0",
+  "version": "0.2.0",
   "description": "SVG icons as React components for Aksel Mini",
   "license": "MIT",
   "type": "module",

packages/core/react/CHANGELOG.md

@@ -1,9 +1,8 @@
 # Changelog
 
-## 0.3.0
+## Unreleased
 
-- :sparkles: Add Link component with action and neutral variants and an
-  inlineText mode for links embedded in body text.
+- :sparkles: Add Chip component with neutral and action variants.
 
 ## 0.2.0
 
@@ -11,6 +10,4 @@
 
 ## 0.1.0
 
-- Initial release with Button (primary, secondary, tertiary and
-  danger variants), BodyShort, Heading, TextField and Alert
-  components.
+- Initial release with Button, BodyShort, Heading, TextField and Alert.

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.3.0",
+  "version": "0.2.0",
   "description": "React components for Aksel Mini",
   "license": "MIT",
   "type": "module",

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,5 +12,5 @@ export { Accordion, AccordionItem } from "./accordion";
 export type { AccordionProps, AccordionItemProps } from "./accordion";
 export { Modal } from "./modal";
 export type { ModalProps } from "./modal";
-export { Link } from "./link";
-export type { LinkProps } from "./link";
+export { Chip } from "./chip";
+export type { ChipProps } from "./chip";

packages/core/react/src/link/Link.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes } from "react";
-import { cn } from "../util/cn";
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * Link variant.
-   * @default "action"
-   */
-  variant?: "action" | "neutral";
-  /**
-   * Underlines the link so it reads as part of surrounding body text.
-   * @default false
-   */
-  inlineText?: boolean;
-}
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { variant = "action", inlineText = false, className, ...rest },
-  ref,
-) {
-  return (
-    <a
-      ref={ref}
-      className={cn(
-        "navds-link",
-        `navds-link--${variant}`,
-        inlineText && "navds-link--inline-text",
-        className,
-      )}
-      {...rest}
-    />
-  );
-});

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

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

packages/core/tokens/CHANGELOG.md

@@ -1,15 +1,9 @@
 # Changelog
 
-## 0.3.0
-
-- Maintenance release, version alignment with the other packages.
-
 ## 0.2.0
 
 - Color, spacing, radius and typography tokens generated as CSS custom properties.
 
 ## 0.1.0
 
-- Initial release. Color, spacing, radius and typography tokens are
-  defined in `src/tokens.json` and compiled to CSS custom properties
-  on the `--a-*` namespace.
+- Initial release.

packages/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.3.0",
+  "version": "0.2.0",
   "description": "Design tokens for Aksel Mini, emitted as CSS custom properties",
   "license": "MIT",
   "type": "module",