🔖 Release 0.3.0

- @navikt/ds-react: new Link component with action and neutral
  variants and an inlineText mode.
- @navikt/ds-css: Link styles.
- @navikt/ds-tokens and @navikt/aksel-icons: version alignment.

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,6 +73,18 @@ 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
@@ -87,19 +99,6 @@ 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
 
-## Unreleased
+## 0.3.0
 
-- :sparkles: Add Chip styles.
+- :sparkles: Add Link styles, including the inlineText underline variant.
 
 ## 0.2.0
 
@@ -10,4 +10,6 @@
 
 ## 0.1.0
 
-- Initial release with styles for Button, BodyShort, Heading, TextField, Alert, Accordion and Modal.
+- 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.

packages/core/css/package.json

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

packages/core/css/src/chip.css

@@ -1,50 +0,0 @@
-/**
- * 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 "./chip.css";
+@import "./link.css";

packages/core/css/src/link.css

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

packages/core/icons/package.json

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

packages/core/react/CHANGELOG.md

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

packages/core/react/package.json

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

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

@@ -1,50 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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 { Chip } from "./chip";
-export type { ChipProps } from "./chip";
+export { Link } from "./link";
+export type { LinkProps } from "./link";

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

@@ -0,0 +1,34 @@
+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

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

packages/core/tokens/CHANGELOG.md

@@ -1,9 +1,15 @@
 # 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.
+- Initial release. Color, spacing, radius and typography tokens are
+  defined in `src/tokens.json` and compiled to CSS custom properties
+  on the `--a-*` namespace.

packages/core/tokens/package.json

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