Version Packages (#2160 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Fikset hardkodet border-radius i diverse komponenter (#2159 )
2026-10-14 17:52:02 +00:00 · 2023-08-14 14:43:22 +02:00 · 2023-08-14 14:40:47 +02:00 · 2023-08-14 13:40:10 +02:00 · 2023-08-13 20:56:42 +02:00 · 2023-08-13 20:50:54 +02:00
36 changed files with 905 additions and 921 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 4.11.1
+
 ## 4.11.0

 ## 4.10.2
@@ -58,7 +58,7 @@
 .icon-button {
  min-height: 3rem;
  min-width: 3rem;
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  display: grid;
  place-content: center;
  background-color: var(--a-surface-default);
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 4.11.1
+
 ## 4.11.0

 ## 4.10.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^4.11.0",
-    "@navikt/ds-tokens": "^4.11.0",
+    "@navikt/ds-css": "^4.11.1",
+    "@navikt/ds-tokens": "^4.11.1",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 4.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`e68ab5cb2`](https://github.com/navikt/aksel/commit/e68ab5cb2cd91c2f0234c864ee71821ed07a8203)]:
+  - @navikt/ds-css@4.11.1
+
 ## 4.11.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "4.11.0",
+    "@navikt/ds-css": "4.11.1",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-css

+## 4.11.1
+
+### Patch Changes
+
+- Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. ([#2159](https://github.com/navikt/aksel/pull/2159))
+
 ## 4.11.0

 ### Minor Changes
@@ -233,7 +233,7 @@
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: 3px;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
  padding: var(--a-spacing-3);
  align-items: center;
  justify-content: center;
@@ -283,7 +283,7 @@

 .navds-combobox__list-item__new-option--focus {
  box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
-  border-radius: 3px;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
 }

 /* Mobile */
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.11.0",
+    "@navikt/ds-tokens": "^4.11.1",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -34,7 +34,7 @@
  cursor: pointer;
  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  min-width: fit-content;
  font-weight: var(--a-font-weight-regular);
 }
@@ -1,5 +1,12 @@
 # @navikt/ds-react

+## 4.11.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@4.11.1
+
 ## 4.11.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.11.0",
+    "@navikt/aksel-icons": "^4.11.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 4.11.1
+
 ## 4.11.0

 ## 4.10.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^4.11.0",
+    "@navikt/ds-tokens": "^4.11.1",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 4.11.1
+
 ## 4.11.0

 ## 4.10.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "4.11.0",
+  "version": "4.11.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # Changelog

+## 4.11.1
+
+### @navikt/ds-css
+
+- Border-radius: Fikset hardkodet border-radius i Datepicker, ToggleGroup og Combobox. ([#2159](https://github.com/navikt/aksel/pull/2159))
+
 ## 4.11.0

 ### @navikt/ds-css
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^4.11.0",
-    "@navikt/ds-css": "^4.11.0",
-    "@navikt/ds-react": "^4.11.0",
-    "@navikt/ds-tailwind": "^4.11.0",
-    "@navikt/ds-tokens": "^4.11.0"
+    "@navikt/aksel-icons": "^4.11.1",
+    "@navikt/ds-css": "^4.11.1",
+    "@navikt/ds-react": "^4.11.1",
+    "@navikt/ds-tailwind": "^4.11.1",
+    "@navikt/ds-tokens": "^4.11.1"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,4 +1,5 @@
 import { PencilIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
 import { getParameters } from "codesandbox/lib/api/define";

 const indexTsx = `import React from 'react';
@@ -50,16 +51,18 @@ export const CodeSandbox = ({ code }: { code: string }) => {
      action="https://codesandbox.io/api/v1/sandboxes/define"
      method="POST"
      target="_blank"
+      className="h-8"
    >
      <input type="hidden" name="parameters" value={parameters} />
      <input type="hidden" name="query" value="module=App.js" />
-      <button
+      <Button
+        variant="tertiary-neutral"
+        size="small"
        type="submit"
-        className="focus-visible:shadow-focus-inset flex items-center justify-center gap-1 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none active:bg-gray-200"
+        icon={<PencilIcon aria-hidden fontSize="1.5rem" />}
      >
-        <PencilIcon aria-hidden fontSize="1.5rem" />
        CodeSandbox
-      </button>
+      </Button>
    </form>
  );
 };
@@ -1,11 +1,16 @@
 import { capitalize, Snippet } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
 import { CodeExapmplesT } from "@/types";
-import { BodyLong, Chips, Link } from "@navikt/ds-react";
+import {
+  ExternalLinkIcon,
+  LaptopIcon,
+  MobileSmallIcon,
+} from "@navikt/aksel-icons";
+import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import cl from "clsx";
-import { useEffect, useState } from "react";
-import { CodeSandbox } from "./CodeSandbox";
 import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import { CodeSandbox } from "./CodeSandbox";

 const iframePadding = 192;
 const iframeId = "example-iframe";
@@ -15,6 +20,7 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
  const [frameState, setFrameState] = useState(300);
  const [unloaded, setUnloaded] = useState(true);
  const router = useRouter();
+  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleExampleLoad = () => {
    let attempts = 0;
@@ -139,10 +145,11 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
                    id={iframeId}
                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                    className={cl(
-                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                      "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                      { invisible: unloaded }
                    )}
                    title="Kode-eksempler"
+                    ref={iframeRef}
                  />
                  {unloaded && (
                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
@@ -153,18 +160,50 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
                    </div>
                  )}
                </div>
-                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
-                  <CodeSandbox code={fil.innhold.trim()} />
-                  <Link
-                    href={`/eksempler/${node.dir.title}/${fil.navn.replace(
-                      ".tsx",
-                      ""
-                    )}`}
-                    className="si-ignore text-gray-900"
-                    target="_blank"
-                  >
-                    Åpne i nytt vindu
-                  </Link>
+                <div className="mb-2 rounded-b border border-gray-300 p-1">
+                  <HStack gap="4" justify="space-between">
+                    <div className="hidden sm:block">
+                      <HStack gap="2">
+                        <Button
+                          variant="tertiary-neutral"
+                          size="small"
+                          icon={
+                            <MobileSmallIcon title="Sett eksempel til mobilbredde" />
+                          }
+                          onClick={() =>
+                            (iframeRef.current.style.width = "360px")
+                          }
+                        />
+
+                        <Button
+                          variant="tertiary-neutral"
+                          size="small"
+                          icon={
+                            <LaptopIcon title="Sett eksempel til desktopbredde" />
+                          }
+                          onClick={() => (iframeRef.current.style.width = "")}
+                        />
+                      </HStack>
+                    </div>
+
+                    <HStack gap="2">
+                      <CodeSandbox code={fil.innhold.trim()} />
+                      <Button
+                        variant="tertiary-neutral"
+                        size="small"
+                        icon={
+                          <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                        }
+                        target="_blank"
+                        className="si-ignore"
+                        as="a"
+                        href={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                          ".tsx",
+                          ""
+                        )}`}
+                      />
+                    </HStack>
+                  </HStack>
                </div>

                <Snippet
@@ -30,15 +30,15 @@
  "dependencies": {
    "@amplitude/analytics-browser": "^2.0.0",
    "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^6.1.5",
+    "@sanity/client": "^6.4.6",
    "@sanity/code-input": "4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/icons": "2.4.1",
    "@sanity/image-url": "1.0.2",
    "@sanity/preview-kit": "^2.3.0",
    "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.7.0",
-    "@sanity/vision": "3.14.1",
+    "@sanity/ui": "^1.7.4",
+    "@sanity/vision": "3.15.1",
    "@svgr/webpack": "^5.5.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
@@ -48,7 +48,7 @@
    "lodash": "^4.17.21",
    "next": "^13.2.1",
    "next-logger": "^3.0.2",
-    "next-sanity": "^5.1.0",
+    "next-sanity": "^5.2.7",
    "pino": "^8.14.1",
    "prism-react-renderer": "^1.3.0",
    "prismjs": "^1.27.0",
@@ -56,14 +56,14 @@
    "react-dom": "^18.0.0",
    "react-modal": "3.15.1",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.14.1",
+    "sanity": "3.15.1",
    "sanity-plugin-asset-source-unsplash": "^1.1.0",
    "sanity-plugin-media": "^2.0.5",
    "sharp": "0.31.3",
    "sitemap": "^7.0.0",
    "styled-components": "^5.2",
    "swr": "^1.1.2",
-    "tailwindcss": "^3.2.0",
+    "tailwindcss": "^3.3.3",
    "tinycolor2": "^1.6.0"
  },
  "devDependencies": {
@@ -72,8 +72,8 @@
    "@next/bundle-analyzer": "^12.1.0",
    "@next/eslint-plugin-next": "^12.2.0",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.12.2",
-    "@sanity/schema": "^3.12.2",
+    "@sanity/block-tools": "^3.15.1",
+    "@sanity/schema": "^3.15.1",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -41,5 +41,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 4,
 };
@@ -40,5 +40,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 1,
 };
@@ -59,5 +59,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -40,5 +40,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 3,
 };
@@ -95,7 +95,6 @@ export const structure = async (
  );

  outdated = outdated.filter((x) => isAfter(x.updateInfo?.lastVerified));
-  console.log(outdated.length);

  return S.list()
    .title("Innholdstyper")
@@ -125,7 +124,7 @@ export const structure = async (
        ? [
            S.listItem()
              .title(
-                `Nye tilbakemeldinger (${
+                `Tilbakemeldinger (${
                  feedback.filter(
                    (x) => !x._id.includes("draft") && x.behandlet === false
                  ).length
@@ -134,7 +133,7 @@ export const structure = async (
              .icon(CommentIcon)
              .child(
                S.list()
-                  .title("Tilbakemeldinger")
+                  .title("Tilbakemeldinger.")
                  .items([
                    S.listItem()
                      .title(
@@ -3,7 +3,7 @@ import { codeInput } from "@sanity/code-input";
 import { colorInput } from "@sanity/color-input";
 import { table } from "@sanity/table";
 import { visionTool } from "@sanity/vision";
-import { createAuthStore, defineConfig } from "sanity";
+import { defineConfig } from "sanity";
 import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 import { media } from "sanity-plugin-media";
 import { deskTool } from "sanity/desk";
@@ -94,9 +94,9 @@ function defaultConfig() {
 }

 function authStore(dataset: string) {
-  return createAuthStore({
+  return {
    redirectOnSingle: false,
-    mode: "replace",
+    mode: "replace" as const,
    projectId,
    dataset,
    providers: [
@@ -111,5 +111,5 @@ function authStore(dataset: string) {
        url: "https://api.sanity.io/v1/auth/login/github",
      },
    ],
-  });
+  };
 }
@@ -28,7 +28,7 @@ export const GodPraksisArtikkel = defineType({
    defineField({
      title: "Kobling til tema",
      description:
-        "Gjør det mulig for temaredaktør å vise artikkelen på en temaside",
+        "Lenker artikkel til Tema og tilgjengeliggjør den for tema-redaktører.",
      name: "tema",
      type: "array",
      of: [{ type: "reference", to: [{ type: "aksel_tema" }] }],
@@ -4,7 +4,7 @@ export const ingressField = defineField({
  title: "Ingress",
  name: "ingress",
  description:
-    "Brukes til ingress, card description og seo description-tag. Bør bære konsis og oppsummerende.",
+    "Brukes til diverse metadata-felt. Bør bære konsis og oppsummere for hva artikkel innebærer.",
  type: "text",
  group: "innhold",
  rows: 3,
@@ -7,8 +7,11 @@ export const titleField = defineField({
  type: "string",
  group: "innhold",
  description: "Bruk en kort og konsis tittel om mulig.",
-  validation: (Rule) =>
-    Rule.required().max(60).error("Sidetittel kan ikke være over 60 tegn"),
+
+  validation: (Rule) => [
+    Rule.required().min(8).error("Sidetittel må være på minst 8 tegn"),
+    Rule.max(60).error("Sidetittel kan ikke være over 60 tegn"),
+  ],
  options: {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
@@ -30,7 +30,7 @@ p.override-text-no-max {
  position: absolute;
  width: 8px;
  height: 8px;
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
  background-color: var(--a-deepblue-500);
  transform: translateY(10px) translateX(2px) rotate(45deg);
  left: 0;
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "4.11.0",
-    "@navikt/ds-react": "4.11.0",
+    "@navikt/ds-css": "4.11.1",
+    "@navikt/ds-react": "4.11.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -211,22 +211,22 @@
  },
  "devDependencies": {
    "@changesets/cli": "2.26.2",
-    "@storybook/addon-a11y": "7.2.0",
-    "@storybook/addon-actions": "7.2.0",
-    "@storybook/addon-essentials": "7.2.0",
-    "@storybook/addon-interactions": "7.2.0",
-    "@storybook/addon-storysource": "7.2.0",
-    "@storybook/addons": "7.2.0",
-    "@storybook/csf-tools": "7.2.0",
+    "@storybook/addon-a11y": "7.2.3",
+    "@storybook/addon-actions": "7.2.3",
+    "@storybook/addon-essentials": "7.2.3",
+    "@storybook/addon-interactions": "7.2.3",
+    "@storybook/addon-storysource": "7.2.3",
+    "@storybook/addons": "7.2.3",
+    "@storybook/csf-tools": "7.2.3",
    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "7.2.0",
-    "@storybook/react-vite": "7.2.0",
+    "@storybook/react": "7.2.3",
+    "@storybook/react-vite": "7.2.3",
    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "7.2.0",
+    "@storybook/theming": "7.2.3",
    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
    "@typescript-eslint/parser": "^5.41.0",
    "@whitespace/storybook-addon-html": "^5.1.6",
-    "chromatic": "6.5.4",
+    "chromatic": "6.21.0",
    "concurrently": "7.2.1",
    "cross-env": "^7.0.0",
    "eslint": "^8.16.0",
@@ -244,7 +244,7 @@
    "react": "^18.0.0",
    "react-docgen-typescript": "2.2.2",
    "react-dom": "^18.0.0",
-    "storybook": "7.2.0",
+    "storybook": "7.2.3",
    "stylelint": "^14.8.5",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	44da7fcdc6	Version Packages (#2160 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-08-14 14:43:22 +02:00
Ken	e68ab5cb2c	🎨 Fikset hardkodet border-radius i diverse komponenter (#2159 )	2023-08-14 14:40:47 +02:00
Ken	c721b392f9	♻️ Chores Sanity, Storybook - Oppdatert Storybook, Sanity - Fikset validering for InputWithCounter i Sanity - Fikset Accordion-stories rekkefølge - La til egne knapper for Desktop/mobil-view for eksempler - Bruker DS-knapper i kode-eksempler på Aksel	2023-08-14 13:40:10 +02:00
Ken	1d0d0ce665	Merge branch 'main' of https://github.com/navikt/aksel	2023-08-13 20:56:42 +02:00
Ken	9d02940543	🔥 Fjernet console.log	2023-08-13 20:50:54 +02:00
Ken	7ff63a2c63	🐛 Fikset validering for sidetittel i sanity	2023-08-13 20:50:13 +02:00