🔥 Fjernet console.log

🐛 Datepicker funket ikke i shadow-dom

📝 Changeset@

@navikt/codemod/CHANGELOG.md

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

@navikt/codemod/package.json

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

@navikt/core/css/CHANGELOG.md

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

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.5.5",
+  "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.5",
+    "@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,32 @@
 # @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

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.5.5",
+  "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.5",
+    "@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,11 @@
 # @navikt/ds-tailwind
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
 ## 1.5.5
 
 ## 1.5.4

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "1.5.5",
+  "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.5",
+    "@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,11 @@
 # @navikt/ds-tokens
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
 ## 1.5.5
 
 ## 1.5.4

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "1.5.5",
+  "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,11 @@
 # @navikt/ds-icons
 
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
 ## 1.5.5
 
 ### Patch Changes

@navikt/icons/package.json

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

@navikt/internal/css/CHANGELOG.md

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

@navikt/internal/css/package.json

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "1.5.5",
+  "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.5",
-    "@navikt/ds-react": "^1.5.5",
+    "@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.5",
-    "@navikt/ds-css": "^1.5.5",
-    "@navikt/ds-css-internal": "^1.5.5",
-    "@navikt/ds-icons": "^1.5.5",
-    "@navikt/ds-react": "^1.5.5",
-    "@navikt/ds-react-internal": "^1.5.5",
-    "@navikt/ds-tailwind": "^1.5.5",
-    "@navikt/ds-tokens": "^1.5.5"
+    "@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.5",
-    "@navikt/ds-icons": "^1.5.5",
-    "@navikt/ds-react": "^1.5.5",
-    "@navikt/ds-react-internal": "^1.5.5",
+    "@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.5",
+    "@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.4, @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.4, @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.4, @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.4
+    "@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.4, @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.4, @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.4
-    "@navikt/ds-react": ^1.5.4
+    "@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.4, @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.4
+    "@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.4, @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.4
+    "@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.4, @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.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.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.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-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