🔖 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

@@ -5,6 +5,7 @@ import {
   BodyShort,
   Button,
   Heading,
+  Link,
   Modal,
   TextField,
 } from "@navikt/ds-react";
@@ -72,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

packages/core/css/CHANGELOG.md

@@ -1,8 +1,8 @@
 # Changelog
 
-## Unreleased
+## 0.3.0
 
-- :bug: Strengthen TextField error styling with a wider error ring and matching error text color.
+- :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/index.css

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

@@ -51,12 +51,6 @@
   box-shadow: 0 0 0 1px var(--a-border-danger);
 }
 
-/* Increase the error ring so it reads at a glance on light backgrounds. */
-.navds-text-field--error {
-  box-shadow: 0 0 0 2px #c30000;
-  border-color: #c30000;
-}
-
 .navds-form-field__error {
   display: flex;
   align-items: center;
@@ -64,7 +58,7 @@
   margin: 0;
   font-size: var(--a-font-size-xs);
   font-weight: var(--a-font-weight-bold);
-  color: #c30000;
+  color: var(--a-icon-danger);
 }
 
 .navds-sr-only {

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,9 +1,16 @@
 # Changelog
 
+## 0.3.0
+
+- :sparkles: Add Link component with action and neutral variants and an
+  inlineText mode for links embedded in body text.
+
 ## 0.2.0
 
 - Add Accordion and Modal components.
 
 ## 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/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 { 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",