🔥 Fjernet console.log

🐛 Datepicker funket ikke i shadow-dom

📝 Changeset@

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-codemod
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ## 1.5.3

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "NAV designsystem codemods",
   "author": "NAV Designsystem team",
   "license": "MIT",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.5.4",
+    "@navikt/ds-tokens": "^1.5.8",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @navikt/ds-react
 
+## 1.5.8
+
+### Patch Changes
+
+- console.log removed
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.8
+
+## 1.5.7
+
+### Patch Changes
+
+- defaultMonth/Year prop date-komponent
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.7
+
+## 1.5.6
+
+### Patch Changes
+
+- Datepicker fungerte ikke med open shadow-dom
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.6
+
+## 1.5.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.5
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.5.4",
+    "@navikt/ds-icons": "^1.5.8",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -286,3 +286,19 @@ export const UseRangedDatepickerValidation = () => {
     </div>
   );
 };
+
+export const defaultShownMonth = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.log,
+    defaultMonth: new Date("Oct 23 2022"),
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -28,6 +28,10 @@ export interface UseDatepickerOptions
    * The initially selected Date
    */
   defaultSelected?: Date;
+  /**
+   * Default shown month
+   */
+  defaultMonth?: Date;
   /**
    * Make selection of Date required
    */
@@ -107,6 +111,7 @@ export const useDatepicker = (
     onDateChange,
     inputFormat,
     onValidate,
+    defaultMonth,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -117,7 +122,7 @@ export const useDatepicker = (
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
   // Initialize states
-  const [month, setMonth] = useState(defaultSelected ?? today);
+  const [month, setMonth] = useState(defaultSelected ?? defaultMonth ?? today);
   const [selectedDay, setSelectedDay] = useState(defaultSelected);
   const [open, setOpen] = useState(false);
 
@@ -138,14 +143,19 @@ export const useDatepicker = (
 
   const handleFocusIn = useCallback(
     (e) => {
-      if (!e?.target || !e?.target?.nodeType) {
+      /* Workaround for shadow-dom users (open) */
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
         return;
       }
+
       ![
         daypickerRef.current,
         inputRef.current,
         inputRef.current?.nextSibling,
-      ].some((element) => element?.contains(e.target)) &&
+      ].some(
+        (element) => element?.contains(e.target) || element?.contains(composed)
+      ) &&
         open &&
         setOpen(false);
     },
@@ -163,14 +173,14 @@ export const useDatepicker = (
 
   const reset = () => {
     updateDate(defaultSelected);
-    setMonth(defaultSelected ?? today);
+    setMonth(defaultSelected ?? defaultMonth ?? today);
     setInputValue(defaultInputValue ?? "");
     setDefaultSelected(_defaultSelected);
   };
 
   const setSelected = (date: Date | undefined) => {
     updateDate(date);
-    setMonth(date ?? today);
+    setMonth(date ?? defaultMonth ?? today);
     setInputValue(
       date ? formatDateForInput(date, locale, "date", inputFormat) : ""
     );
@@ -178,7 +188,6 @@ export const useDatepicker = (
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
     !open && setOpen(true);
-
     let day = parseDate(e.target.value, today, locale, "date");
     if (isValidDate(day)) {
       setMonth(day);
@@ -253,7 +262,7 @@ export const useDatepicker = (
     }
     updateDate(day);
     updateValidation();
-    setMonth(day);
+    setMonth(defaultMonth ?? day);
   };
 
   const handleClose = useCallback(() => {

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -31,6 +31,10 @@ export interface UseMonthPickerOptions
    * validation-callback
    */
   onValidate?: (val: MonthValidationT) => void;
+  /**
+   * Default shown year
+   */
+  defaultYear?: Date;
 }
 
 interface UseMonthPickerValue {
@@ -89,6 +93,7 @@ export const useMonthpicker = (
     onMonthChange,
     inputFormat,
     onValidate,
+    defaultYear,
   } = opt;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -100,7 +105,7 @@ export const useMonthpicker = (
   const monthpickerRef = useRef<HTMLDivElement>(null);
 
   // Initialize states
-  const [year, setYear] = useState(defaultSelected ?? today);
+  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
   const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
   const [open, setOpen] = useState(false);
 
@@ -122,14 +127,18 @@ export const useMonthpicker = (
 
   const handleFocusIn = useCallback(
     (e) => {
-      if (!e?.target || !e?.target?.nodeType) {
+      /* Workaround for shadow-dom users (open) */
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
         return;
       }
       ![
         monthpickerRef.current,
         inputRef.current,
         inputRef.current?.nextSibling,
-      ].some((element) => element?.contains(e.target)) &&
+      ].some(
+        (element) => element?.contains(e.target) || element?.contains(composed)
+      ) &&
         open &&
         setOpen(false);
     },
@@ -147,14 +156,14 @@ export const useMonthpicker = (
 
   const reset = () => {
     updateMonth(defaultSelected);
-    setYear(defaultSelected ?? today);
+    setYear(defaultSelected ?? defaultYear ?? today);
     setInputValue(defaultInputValue ?? "");
     setDefaultSelected(_defaultSelected);
   };
 
   const setSelected = (date: Date | undefined) => {
     updateMonth(date);
-    setYear(date ?? today);
+    setYear(date ?? defaultYear ?? today);
     setInputValue(
       date ? formatDateForInput(date, locale, "month", inputFormat) : ""
     );

@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx

@@ -201,6 +201,7 @@ export const useRangeDatepicker = (
     onRangeChange,
     inputFormat,
     onValidate,
+    defaultMonth,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -213,7 +214,7 @@ export const useRangeDatepicker = (
 
   // Initialize states
   const [month, setMonth] = useState(
-    defaultSelected ? defaultSelected?.from : today
+    defaultSelected ? defaultSelected?.from : defaultMonth ?? today
   );
   const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(
     defaultSelected ?? { from: undefined, to: undefined }
@@ -253,7 +254,9 @@ export const useRangeDatepicker = (
 
   const handleFocusIn = useCallback(
     (e) => {
-      if (!e?.target || !e?.target?.nodeType) {
+      /* Workaround for shadow-dom users (open) */
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
         return;
       }
       ![
@@ -262,7 +265,9 @@ export const useRangeDatepicker = (
         inputRefFrom.current,
         inputRefTo.current?.nextSibling,
         inputRefFrom.current?.nextSibling,
-      ].some((element) => element?.contains(e.target)) &&
+      ].some(
+        (element) => element?.contains(e.target) || element?.contains(composed)
+      ) &&
         open &&
         setOpen(false);
     },
@@ -280,7 +285,7 @@ export const useRangeDatepicker = (
 
   const reset = () => {
     updateRange(defaultSelected ?? { from: undefined, to: undefined });
-    setMonth(defaultSelected ? defaultSelected?.from : today);
+    setMonth(defaultSelected ? defaultSelected?.from : defaultMonth ?? today);
     setValidation(
       initialValidation(
         defaultSelected ?? { from: undefined, to: undefined },

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tailwind
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ## 1.5.3

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.5.4",
+    "@navikt/ds-tokens": "^1.5.8",
     "@types/jest": "^29.0.0",
     "@types/node": "^17.0.35",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tokens
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ## 1.5.3

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-icons
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
+### Patch Changes
+
+- Error-ikon hadde avrundede kanter
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "Aksel icons",
   "repository": {
     "type": "git",

@navikt/icons/svg/ErrorColored.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.999 0C5.39479 0 0.0125453 5.37181 2.35603e-05 11.976C-0.00623729 15.1815 1.2355 18.1972 3.49775 20.4688C5.76001 22.7394 8.77148 23.9937 11.977 23.9999H12C18.6031 23.9999 23.9864 18.6271 24 12.0219C24.0125 5.40625 18.6396 0.0125217 11.999 0Z" fill="#BA3A26"/>
-<path d="M12 10.6512L15.3719 7.27932C15.7443 6.90687 16.3482 6.90687 16.7206 7.27932C17.0931 7.65177 17.0931 8.25563 16.7206 8.62808L13.3487 12L16.7206 15.3719C17.0931 15.7443 17.0931 16.3482 16.7206 16.7206C16.3482 17.0931 15.7443 17.0931 15.3719 16.7206L12 13.3487L8.62808 16.7206C8.25563 17.0931 7.65177 17.0931 7.27932 16.7206C6.90687 16.3482 6.90687 15.7443 7.27932 15.3719L10.6512 12L7.27932 8.62808C6.90687 8.25563 6.90687 7.65177 7.27932 7.27932C7.65177 6.90687 8.25563 6.90687 8.62808 7.27932L12 10.6512Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5714 6.99998L17 8.42855L13.428 12L17 15.5714L15.5714 17L12 13.428L8.42855 17L6.99998 15.5714L10.572 12L6.99998 8.42855L8.42855 6.99998L12 10.572L15.5714 6.99998Z" fill="white"/>
 </svg>

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css-internal
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ## 1.5.3

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-react-internal
 
+## 1.5.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@1.5.8
+  - @navikt/ds-icons@1.5.8
+
+## 1.5.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@1.5.7
+  - @navikt/ds-icons@1.5.7
+
+## 1.5.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@1.5.6
+  - @navikt/ds-icons@1.5.6
+
+## 1.5.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.5
+  - @navikt/ds-react@1.5.5
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^1.5.4",
-    "@navikt/ds-react": "^1.5.4",
+    "@navikt/ds-icons": "^1.5.8",
+    "@navikt/ds-react": "^1.5.8",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/package.json

@@ -18,14 +18,14 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^1.5.4",
-    "@navikt/ds-css": "^1.5.4",
-    "@navikt/ds-css-internal": "^1.5.4",
-    "@navikt/ds-icons": "^1.5.4",
-    "@navikt/ds-react": "^1.5.4",
-    "@navikt/ds-react-internal": "^1.5.4",
-    "@navikt/ds-tailwind": "^1.5.4",
-    "@navikt/ds-tokens": "^1.5.4"
+    "@navikt/ds-codemod": "^1.5.8",
+    "@navikt/ds-css": "^1.5.8",
+    "@navikt/ds-css-internal": "^1.5.8",
+    "@navikt/ds-icons": "^1.5.8",
+    "@navikt/ds-react": "^1.5.8",
+    "@navikt/ds-react-internal": "^1.5.8",
+    "@navikt/ds-tailwind": "^1.5.8",
+    "@navikt/ds-tokens": "^1.5.8"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.1.13"

aksel.nav.no/sanity/client/actions/publishedAt.ts

@@ -19,8 +19,6 @@ export default function SetAndPublishAction(props) {
     }
   }, [props.draft]);
 
-  console.log(markers);
-
   return {
     disabled:
       publish.disabled ||

aksel.nav.no/sanity/client/desk-structure/admin.tsx

@@ -19,5 +19,6 @@ export const adminPanel = async (roles) =>
           S.listItem()
             .title("Standalone-sider")
             .child(S.documentTypeList("aksel_standalone")),
+          S.listItem().title("Redirects").child(S.documentTypeList("redirect")),
         ])
     );

aksel.nav.no/sanity/schemas/documents/redirects.ts

@@ -0,0 +1,49 @@
+const limits = [
+  "/blogg/",
+  "/artikkel/",
+  "/prinsipper/",
+  "/designsystem/side/",
+  "/designsystem/komponenter/",
+];
+
+export default {
+  name: "redirect",
+  title: "Redirect",
+  type: "document",
+  fields: [
+    {
+      name: "source",
+      title: "Fra",
+      type: "string",
+      validation: (Rule) =>
+        Rule.required().custom((_, { parent }) => {
+          if (!parent?.source?.startsWith?.("/")) {
+            return "Kan bare redirecte fra relativ-url, eks /min/gamle/sideurl";
+          }
+          const valid = limits.find(
+            (x) => parent?.source?.startsWith?.(x) && parent.source > x
+          );
+
+          if (!valid) {
+            return `Kan bare redirecte fra sider som starter med en av disse url-ene ${limits.join(
+              ", "
+            )}`;
+          }
+          return true;
+        }),
+    },
+    {
+      name: "destination",
+      title: "Til",
+      type: "string",
+      validation: (Rule) => Rule.required(),
+    },
+    {
+      name: "permanent",
+      title: "Permanent",
+      type: "boolean",
+      initialValue: () => true,
+    },
+  ],
+  __experimental_omnisearch_visibility: false,
+};

aksel.nav.no/sanity/schemas/schema.ts

@@ -6,6 +6,7 @@ import schemaTypes from "all:part:@sanity/base/schema-type";
 import editors from "./documents/editors";
 import navigation, { dropdown, link } from "./documents/navigation";
 import frontpage from "./documents/frontpage";
+import redirect from "./documents/redirects";
 
 import * as Designsystem from "./documents/designsystem";
 import * as Aksel from "./documents/aksel";
@@ -20,6 +21,7 @@ export default createSchema({
     navigation,
     link,
     dropdown,
+    redirect,
 
     Designsystem.Color,
     Designsystem.ds_header_heading,

aksel.nav.no/website/components/layout/footer/FooterForm.tsx

@@ -1,26 +1,16 @@
-import {
-  BodyLong,
-  Button,
-  Heading,
-  Label,
-  Textarea,
-  TextField,
-} from "@navikt/ds-react";
-import cl from "classnames";
+import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import isEmail from "validator/lib/isEmail";
 import isEmpty from "validator/lib/isEmpty";
 
 const FooterForm = () => {
   const [contactForm, setContactForm] = useState({
     content: "",
-    mail: "",
     hasWritten: false,
   });
 
-  const [contentError, setContentError] = useState({ content: "", mail: "" });
-  const [sent, setSent] = useState({ status: false, hadMail: false });
+  const [contentError, setContentError] = useState({ content: "" });
+  const [sent, setSent] = useState({ status: false });
 
   const { asPath, basePath } = useRouter();
 
@@ -34,36 +24,26 @@ const FooterForm = () => {
       });
       fail = true;
     }
-    if (
-      !isEmpty(contactForm.mail, { ignore_whitespace: true }) &&
-      !isEmail(contactForm.mail)
-    ) {
-      setContentError({
-        ...contentError,
-        mail: "Email ikke gyldig.",
-      });
-      fail = true;
-    }
+
     if (fail) return;
-    setContentError({ content: "", mail: "" });
+    setContentError({ content: "" });
 
     fetch("/api/generalFeedback", {
       method: "POST",
       body: JSON.stringify({
         message: contactForm.content,
-        user: contactForm.mail,
         url: `${basePath}${asPath}`,
       }),
     });
 
-    setSent({ status: true, hadMail: !!contactForm?.mail });
-    setContactForm({ content: "", mail: "", hasWritten: false });
+    setSent({ status: true });
+    setContactForm({ content: "", hasWritten: false });
   };
 
   useEffect(() => {
-    setSent({ status: false, hadMail: false });
-    setContactForm({ content: "", mail: "", hasWritten: false });
-    setContentError({ content: "", mail: "" });
+    setSent({ status: false });
+    setContactForm({ content: "", hasWritten: false });
+    setContentError({ content: "" });
   }, [asPath]);
 
   return (
@@ -72,13 +52,8 @@ const FooterForm = () => {
         {sent.status ? (
           <div>
             <Label spacing as="p">
-              Melding er sendt til designsystemet
+              Meldingen er sendt til Aksel, takk for tilbakemeldingen!
             </Label>
-            <BodyLong>
-              {`Takk skal du ha!${
-                sent.hadMail ? " Vi svarer deg så fort som mulig." : ""
-              }`}
-            </BodyLong>
           </div>
         ) : (
           <form onSubmit={(e) => handleSubmit(e)} className="w-full">
@@ -102,27 +77,9 @@ const FooterForm = () => {
                     !isEmpty(e.target.value, { ignore_whitespace: true }) &&
                     setContentError({ ...contentError, content: "" });
                 }}
+                description="Ikke skriv inn navn eller andre personopplysninger"
                 minRows={2}
               />
-              {contactForm.hasWritten && (
-                <TextField
-                  className={cl("inverted-textfield")}
-                  label="Vi svarer til e-post (valgfritt)"
-                  error={contentError.mail}
-                  value={contactForm.mail}
-                  autoComplete="work email"
-                  onChange={(e) => {
-                    setContactForm({
-                      ...contactForm,
-                      mail: e.target.value,
-                      hasWritten: true,
-                    });
-                    e.target.value &&
-                      isEmail(e.target.value) &&
-                      setContentError({ ...contentError, mail: "" });
-                  }}
-                />
-              )}
             </div>
             {contactForm.hasWritten && (
               <Button className="override-primary-button-dark">

aksel.nav.no/website/components/layout/page-templates/AkselArtikkel.tsx

@@ -35,7 +35,7 @@ const AkselArtikkelTemplate = ({
       <FooterSlope />
       <div className="relative bg-gray-100 pt-12 pb-16">
         <div className="dynamic-wrapper">
-          <Heading level="2" size="medium" className="px-4 text-deepblue-700">
+          <Heading level="2" size="medium" className="text-deepblue-700 px-4">
             {data?.relevante_artikler?.length === 1
               ? `Les også`
               : `Relevante artikler`}
@@ -85,7 +85,7 @@ const AkselArtikkelTemplate = ({
           <Heading
             level="1"
             size="large"
-            className="algolia-index-lvl1 mt-4 text-deepblue-700 md:text-5xl"
+            className="algolia-index-lvl1 text-deepblue-700 mt-4 md:text-5xl"
           >
             {data.heading}
           </Heading>
@@ -98,7 +98,7 @@ const AkselArtikkelTemplate = ({
             <BodyShort
               size="small"
               as="span"
-              className="whitespace-nowrap text-text-muted"
+              className="text-text-muted whitespace-nowrap"
             >
               {dateStr(data?._updatedAt)}
             </BodyShort>
@@ -120,7 +120,7 @@ const AkselArtikkelTemplate = ({
                     <BodyShort
                       size="small"
                       as="a"
-                      className="algolia-index-lvl5 flex min-h-8 items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize text-deepblue-800 no-underline hover:bg-gray-100 hover:underline focus:outline-none focus-visible:shadow-focus"
+                      className="algolia-index-lvl5 min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
                     >
                       {title}
                       <Next aria-hidden />
@@ -141,14 +141,14 @@ const AkselArtikkelTemplate = ({
             <SanityBlockContent blocks={data?.content ?? []} variant="aksel" />
             <div className="mt-12">
               {authors?.length > 0 && (
-                <Label className="mb-2 text-deepblue-700" as="p">
+                <Label className="text-deepblue-700 mb-2" as="p">
                   Bidragsytere
                 </Label>
               )}
               {authors?.length > 0 && (
                 <BodyShort
                   as="div"
-                  className="mb-1 flex flex-wrap gap-1 text-text/80"
+                  className="text-text/80 mb-1 flex flex-wrap gap-1"
                 >
                   {authors.map(abbrName).map((x, y) => (
                     <address className="not-italic" key={x}>
@@ -158,7 +158,7 @@ const AkselArtikkelTemplate = ({
                   ))}
                 </BodyShort>
               )}
-              <BodyShort as="span" className="whitespace-nowrap text-text/80">
+              <BodyShort as="span" className="text-text/80 whitespace-nowrap">
                 Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
               </BodyShort>
             </div>

aksel.nav.no/website/components/sanity-modules/Alert.tsx

@@ -12,7 +12,13 @@ const Alert = ({
     <div className="mb-7 max-w-2xl">
       <DsAlert variant={node.variant}>
         {node.heading && (
-          <Heading spacing size="small" as={node.heading_level} id={node._key}>
+          <Heading
+            spacing
+            size="small"
+            as={node.heading_level}
+            id={node._key}
+            className="scroll-m-20"
+          >
             {node.heading}
           </Heading>
         )}

aksel.nav.no/website/components/sanity-modules/component-overview/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { SanityT, urlFor } from "@/lib";
-import { Heading } from "@navikt/ds-react";
+import { Heading, Tag } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "classnames";
 
@@ -8,25 +8,24 @@ const getStatus = (status?: SanityT.Schema.komponent_artikkel["status"]) => {
   switch (status?.tag) {
     case "beta":
       return (
-        <span className="ml-2 rounded bg-purple-400 px-1 text-sm text-white">
+        <Tag variant="alt1" size="small">
           Beta
-        </span>
+        </Tag>
       );
     case "new":
       return (
-        <span className="ml-2 rounded bg-green-300 px-1 text-sm text-gray-900">
-          Ready
-        </span>
+        <Tag variant="info" size="small">
+          New
+        </Tag>
       );
     case "ready":
       return null;
     case "deprecated":
       return (
-        <span className="ml-2 rounded bg-gray-200 px-1 text-sm text-gray-900">
+        <Tag variant="neutral" size="small">
           Deprecated
-        </span>
+        </Tag>
       );
-
     default:
       return null;
   }
@@ -61,7 +60,7 @@ const ComponentOverview = ({
       <ul className="component-card-grid">
         {sorted.map((x) => (
           <li key={x._id}>
-            <div className="group relative rounded shadow-small ring-1 ring-gray-900/10 focus-within:shadow-focus hover:shadow-medium">
+            <div className="shadow-small focus-within:shadow-focus hover:shadow-medium group relative rounded ring-1 ring-gray-900/10">
               <div
                 className={cl(
                   "flex max-h-64 items-center justify-center overflow-hidden rounded-t bg-gray-50",
@@ -87,7 +86,7 @@ const ComponentOverview = ({
                     aria-hidden
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="-11.5 -10.23174 23 20.46348"
-                    className="aspect-[1.25/1] h-auto max-h-64 min-h-40 p-4"
+                    className="min-h-40 aspect-[1.25/1] h-auto max-h-64 p-4"
                   >
                     <title>React Logo</title>
                     <circle

aksel.nav.no/website/components/website-modules/TOC.tsx

@@ -152,7 +152,7 @@ export function TableOfContents({
       </Heading>
       <div
         id="toc-scroll"
-        className="flex max-h-[80vh] flex-col overflow-y-scroll"
+        className="flex max-h-[80vh] flex-col overflow-y-auto"
       >
         <nav aria-labelledby="toc-heading">
           <ul>

aksel.nav.no/website/components/website-modules/feedback/index.tsx

@@ -172,7 +172,7 @@ const Feedback = ({
           <Button
             variant="secondary"
             className={cl({
-              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-2 ring-inset ring-deepblue-800 focus-visible:shadow-focus focus-visible:ring-1 focus-visible:ring-white":
+              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-deepblue-800 focus-visible:shadow-focus ring-2 ring-inset focus-visible:ring-1 focus-visible:ring-white":
                 activeState === HelpfulArticleEnum.JA,
             })}
             onClick={() =>
@@ -186,7 +186,7 @@ const Feedback = ({
           <Button
             variant="secondary"
             className={cl({
-              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-2 ring-inset ring-deepblue-800 focus-visible:shadow-focus focus-visible:ring-1 focus-visible:ring-white":
+              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-deepblue-800 focus-visible:shadow-focus ring-2 ring-inset focus-visible:ring-1 focus-visible:ring-white":
                 activeState === HelpfulArticleEnum.NEI,
             })}
             onClick={() =>
@@ -200,7 +200,7 @@ const Feedback = ({
           <Button
             variant="secondary"
             className={cl({
-              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-2 ring-inset ring-deepblue-800 focus-visible:shadow-focus focus-visible:ring-1 focus-visible:ring-white":
+              "override-secondary-button-active bg-deepblue-800 text-text-inverted ring-deepblue-800 focus-visible:shadow-focus ring-2 ring-inset focus-visible:ring-1 focus-visible:ring-white":
                 activeState === HelpfulArticleEnum.MISC,
             })}
             onClick={() =>
@@ -215,7 +215,7 @@ const Feedback = ({
         {activeState !== null && (
           <form
             className={cl(
-              "mt-4 flex w-full max-w-sm animate-fadeIn flex-col gap-4",
+              "animate-fadeIn mt-4 flex w-full max-w-sm flex-col gap-4",
               {
                 "override-primary-button": akselFeedback,
               }
@@ -229,6 +229,7 @@ const Feedback = ({
               onChange={(e) => setTextValue(e.target.value)}
               maxLength={600}
               minRows={3}
+              description="Ikke skriv inn navn eller andre personopplysninger"
             />
             <Button className="mr-auto" onClick={handleSend}>
               Send inn svar

aksel.nav.no/website/lib/types/schema.d.ts

@@ -117,6 +117,28 @@ Linker eller dropdowns med linker. Maks dybde på 2 dropdowns er støttet. Sider
       >;
     }
 
+    /**
+     * Redirect
+     */
+    interface redirect extends Sanity.Document {
+      _type: "redirect";
+
+      /**
+       * Fra - `String`
+       */
+      source?: string;
+
+      /**
+       * Til - `String`
+       */
+      destination?: string;
+
+      /**
+       * Permanent - `Boolean`
+       */
+      permanent?: boolean;
+    }
+
     /**
      * Fargekategori
      */
@@ -1546,6 +1568,7 @@ Husk å legge denne til i menyen også, hvis ikke blir den bare tilgjengelig via
       | vk_frontpage
       | editor
       | navigation
+      | redirect
       | ds_color_categories
       | ds_tokens
       | kode_eksempler_fil

aksel.nav.no/website/middleware.ts

@@ -0,0 +1,30 @@
+import { getClient } from "@/sanity-client";
+import { NextResponse } from "next/server";
+
+export async function middleware(req) {
+  try {
+    const redirects = await getClient().fetch(`
+  *[_type == 'redirect'] {
+    destination,
+    source,
+    permanent
+  }
+`);
+
+    const redirect = redirects.find(
+      (redirect) =>
+        decodeURIComponent(req.nextUrl.pathname) === redirect?.source
+    );
+
+    if (redirect) {
+      if (redirect.destination.startsWith("http")) {
+        return NextResponse.redirect(new URL(redirect.destination));
+      }
+      return NextResponse.redirect(new URL(redirect.destination, req.url));
+    }
+
+    return NextResponse.next();
+  } catch (e) {
+    return NextResponse.next();
+  }
+}

aksel.nav.no/website/pages/api/generalFeedback.ts

@@ -19,9 +19,7 @@ export default async function handler(
           return;
         }
 
-        const card = `&name=${data.message}&desc=**Bruker:** %0A ${
-          data.user ? data.user : "Ukjent"
-        } %0A **Side:** %0A ${data.url}`;
+        const card = `&name=${data.message}&desc=**Bruker:** %0A **Side:** %0A ${data.url}`;
         const url = `https://api.trello.com/1/cards?idList=619cc5721924df5816bcc45f&idLabels=${labels}&key=${trelloKey}&token=${trelloToken}${card}`;
 
         const postRes = await fetch(url, {

examples/next/package.json

@@ -9,16 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@navikt/ds-css": "^1.5.4",
-    "@navikt/ds-icons": "^1.5.4",
-    "@navikt/ds-react": "^1.5.4",
-    "@navikt/ds-react-internal": "^1.5.4",
+    "@navikt/ds-css": "^1.5.8",
+    "@navikt/ds-icons": "^1.5.8",
+    "@navikt/ds-react": "^1.5.8",
+    "@navikt/ds-react-internal": "^1.5.8",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@navikt/ds-tailwind": "^1.5.4",
+    "@navikt/ds-tailwind": "^1.5.8",
     "@types/node": "^17.0.35",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

examples/shadow-dom/index.html

@@ -5,7 +5,11 @@
     <title>shadow-dom example</title>
   </head>
   <body>
+    <h2>Closed dom</h2>
     <custom-component></custom-component>
+    <h2>Open dom</h2>
+    <custom-opencomponent></custom-opencomponent>
     <script type="module" src="/main.tsx"></script>
+    <script type="module" src="/open.tsx"></script>
   </body>
 </html>

examples/shadow-dom/main.tsx

@@ -25,10 +25,11 @@ class CustomComponent extends HTMLElement {
           <Checkbox value="tekst">Checkboxtekst</Checkbox>
           <Checkbox value="tekst2">Checkboxtekst</Checkbox>
         </CheckboxGroup>
-        <ModalWrapper />
         <Tooltip content="Skriv ut dokument">
-          <Button>yo!</Button>
+          <Button>Tooltip</Button>
         </Tooltip>
+        <ModalWrapper />
+        <br />
       </Provider>
     );
   }

examples/shadow-dom/open.tsx

@@ -0,0 +1,47 @@
+import ReactDOM from "react-dom/client";
+import {
+  Provider,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Modal,
+  Tooltip,
+  UNSAFE_DatePicker,
+  UNSAFE_useDatepicker,
+} from "@navikt/ds-react";
+import styles from "@navikt/ds-css/dist/index.css?inline";
+import React, { useState } from "react";
+
+class CustomComponent extends HTMLElement {
+  connectedCallback() {
+    const rootElement = document.createElement("div");
+    const appElement = document.createElement("div");
+    rootElement.appendChild(appElement);
+    this.attachShadow({ mode: "open" }).appendChild(rootElement);
+
+    ReactDOM.createRoot(appElement).render(
+      <Provider rootElement={rootElement} appElement={appElement}>
+        <style>{styles}</style>
+        <DateWrapper />
+      </Provider>
+    );
+  }
+}
+
+const DateWrapper = () => {
+  const { datepickerProps, inputProps, selectedDay } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div className="min-h-96">
+      <UNSAFE_DatePicker {...datepickerProps}>
+        <UNSAFE_DatePicker.Input {...inputProps} label="Velg dato" />
+      </UNSAFE_DatePicker>
+      <div className="pt-4">{selectedDay && selectedDay.toDateString()}</div>
+    </div>
+  );
+};
+
+window.customElements.define("custom-opencomponent", CustomComponent);

yarn.lock

@@ -3166,7 +3166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-codemod@^1.5.3, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^1.5.6, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3193,7 +3193,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^1.5.3, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^1.5.6, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3204,11 +3204,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@^1.5.3, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@^1.5.6, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^1.5.3
+    "@navikt/ds-tokens": ^1.5.6
     normalize.css: ^8.0.1
     postcss: ^8.4.0
     postcss-cli: ^9.0.0
@@ -3217,7 +3217,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^1.5.3, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^1.5.6, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -3247,12 +3247,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^1.5.3, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^1.5.6, @navikt/ds-react-internal@workspace:@navikt/internal/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^1.5.3
-    "@navikt/ds-react": ^1.5.3
+    "@navikt/ds-icons": ^1.5.6
+    "@navikt/ds-react": ^1.5.6
     "@types/node": ^17.0.35
     clsx: ^1.1.1
     concurrently: 7.2.1
@@ -3269,12 +3269,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^1.5.3, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^1.5.6, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.9.2
-    "@navikt/ds-icons": ^1.5.3
+    "@navikt/ds-icons": ^1.5.6
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3311,11 +3311,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^1.5.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^1.5.6, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^1.5.3
+    "@navikt/ds-tokens": ^1.5.6
     "@types/jest": ^29.0.0
     "@types/node": ^17.0.35
     jest: ^29.0.0
@@ -3326,7 +3326,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^1.5.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^1.5.6, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8341,14 +8341,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/ds-codemod": ^1.5.3
-    "@navikt/ds-css": ^1.5.3
-    "@navikt/ds-css-internal": ^1.5.3
-    "@navikt/ds-icons": ^1.5.3
-    "@navikt/ds-react": ^1.5.3
-    "@navikt/ds-react-internal": ^1.5.3
-    "@navikt/ds-tailwind": ^1.5.3
-    "@navikt/ds-tokens": ^1.5.3
+    "@navikt/ds-codemod": ^1.5.6
+    "@navikt/ds-css": ^1.5.6
+    "@navikt/ds-css-internal": ^1.5.6
+    "@navikt/ds-icons": ^1.5.6
+    "@navikt/ds-react": ^1.5.6
+    "@navikt/ds-react-internal": ^1.5.6
+    "@navikt/ds-tailwind": ^1.5.6
+    "@navikt/ds-tokens": ^1.5.6
     prettier-plugin-tailwindcss: ^0.1.13
   languageName: unknown
   linkType: soft
@@ -21068,11 +21068,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nextjs-demo@workspace:examples/next"
   dependencies:
-    "@navikt/ds-css": ^1.5.3
-    "@navikt/ds-icons": ^1.5.3
-    "@navikt/ds-react": ^1.5.3
-    "@navikt/ds-react-internal": ^1.5.3
-    "@navikt/ds-tailwind": ^1.5.3
+    "@navikt/ds-css": ^1.5.6
+    "@navikt/ds-icons": ^1.5.6
+    "@navikt/ds-react": ^1.5.6
+    "@navikt/ds-react-internal": ^1.5.6
+    "@navikt/ds-tailwind": ^1.5.6
     "@types/node": ^17.0.35
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0