📝 Changeset versions

🐛 Date-fns import feilet fra ESM
Merge branch 'next'
2026-10-13 09:12:03 +00:00 · 2023-01-31 11:09:43 +01:00 · 2023-01-31 11:08:45 +01:00 · 2023-01-31 10:57:00 +01:00 · 2023-01-31 10:55:24 +01:00 · 2023-01-31 10:49:41 +01:00
46 changed files with 536 additions and 105 deletions
@@ -1,7 +1,7 @@
 name: Innspill til komponent
 description: Send inn innspill til komponent
 title: "[Innspill til komponent]: "
-labels: ["forespørsel 🥰", "komponenter 🧩"]
+labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
 assignees:
  - olejorgenbakken
 body:
@@ -1,7 +1,7 @@
 name: Innspill til ikon
 description: Send inn innspill til ikon
 title: "[Innspill til ikon]: "
-labels: ["forespørsel 🥰"]
+labels: ["forespørsel 🥰", "nytt ✨"]
 assignees:
  - olejorgenbakken
 body:
@@ -1,5 +1,11 @@
 # @navikt/ds-codemod

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ## 2.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.1.2",
-    "@navikt/ds-react": "^2.1.2",
+    "@navikt/ds-icons": "^2.1.5",
+    "@navikt/ds-react": "^2.1.5",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,11 @@
 # @navikt/ds-css

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.2",
+    "@navikt/ds-tokens": "^2.1.5",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -1,5 +1,32 @@
 # @navikt/ds-react

+## 2.1.5
+
+### Patch Changes
+
+- Hotfix: ESM import fra date-fns feilet
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.5
+
+## 2.1.4
+
+### Patch Changes
+
+- [`87f194c1d`](https://github.com/navikt/Designsystemet/commit/87f194c1dc29b10a604de676b358d117e2dbf52f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset edgecase i useRangepicker der valg av startdato etter sluttdato ga feil output
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.4
+
+## 2.1.3
+
+### Patch Changes
+
+- [#1771](https://github.com/navikt/Designsystemet/pull/1771) [`494566e60`](https://github.com/navikt/Designsystemet/commit/494566e604e958363f75ebfa2adbc1669397636a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Monthpicker håndterer nå visning av År riktig
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.3
+
 ## 2.1.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.2",
+    "@navikt/ds-icons": "^2.1.5",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -164,6 +164,7 @@ export const UseRangedDatepicker = () => {
    UNSAFE_useRangeDatepicker({
      fromDate: new Date("Aug 23 2019"),
      onRangeChange: console.log,
+      onValidate: console.log,
    });

  return (
@@ -191,6 +191,8 @@ export const useMonthpicker = (
    if (isValidDate(day)) {
      setYear(day);
      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
+    } else {
+      setYear(defaultSelected ?? defaultYear ?? today);
    }
  };

@@ -211,12 +213,14 @@ export const useMonthpicker = (
    if (month) {
      setOpen(false);
      inputRef.current && inputRef.current.focus();
+      setYear(month);
    }

    if (!required && !month) {
      updateMonth(undefined);
      updateValidation({ isValidMonth: false, isEmpty: true });
      setInputValue("");
+      setYear(defaultYear ?? today);
      return;
    }
    updateMonth(month);
@@ -1,4 +1,5 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
@@ -371,24 +372,26 @@ export const useRangeDatepicker = (
    if (range?.from && range?.to) {
      setOpen(false);
    }
-    const prevToRange =
+    let prevToRange =
      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;

+    const resetTo = isBefore(prevToRange, range?.from);
+
    range?.from
      ? setFromInputValue(
          formatDateForInput(range?.from, locale, "date", inputFormat)
        )
      : setFromInputValue("");
-    prevToRange
+    prevToRange && !resetTo
      ? setToInputValue(
          formatDateForInput(prevToRange, locale, "date", inputFormat)
        )
      : setToInputValue("");
    updateValidation(
      { isValidDate: !!range?.from, isEmpty: !range?.from },
-      { isValidDate: !!range?.to, isEmpty: !prevToRange }
+      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
    );
-    updateRange({ from: range?.from, to: prevToRange });
+    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
  };

  const fromChange = (
@@ -134,7 +134,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
    );

    const handleSelect = (month?: Date) => {
-      setSelectedMonth(month);
+      !onMonthSelect && setSelectedMonth(month);
      onMonthSelect?.(month);
      month && (onClose?.() ?? setOpen(false));
    };
@@ -175,7 +175,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
            >
              <RootProvider
                locale={getLocaleFromString(locale)}
-                selected={selected}
+                selected={selected ?? selectedMonth}
                toDate={toDate}
                fromDate={fromDate}
                month={selected ?? selectedMonth}
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ## 2.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "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": "^2.1.2",
+    "@navikt/ds-tokens": "^2.1.5",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ## 2.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # @navikt/ds-icons

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ## 2.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal

+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
 ## 2.1.2

 ## 2.1.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal

+## 2.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.1.5
+  - @navikt/ds-icons@2.1.5
+
+## 2.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`87f194c1d`](https://github.com/navikt/Designsystemet/commit/87f194c1dc29b10a604de676b358d117e2dbf52f)]:
+  - @navikt/ds-react@2.1.4
+  - @navikt/ds-icons@2.1.4
+
+## 2.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`494566e60`](https://github.com/navikt/Designsystemet/commit/494566e604e958363f75ebfa2adbc1669397636a)]:
+  - @navikt/ds-react@2.1.3
+  - @navikt/ds-icons@2.1.3
+
 ## 2.1.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.1.2",
+  "version": "2.1.5",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.1.2",
-    "@navikt/ds-react": "^2.1.2",
+    "@navikt/ds-icons": "^2.1.5",
+    "@navikt/ds-react": "^2.1.5",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -40,7 +40,7 @@
 aksel.nav.no/
 ├── website        # NEXT.JS app (v12)
 ├── website/sanity # Sanity CMS-app (v3)
-└── sanity # Sanity CMS-app (deprecated v2)
+└── sanity         # Sanity CMS-app (deprecated v2)
 ```

 ## Commands
@@ -15,14 +15,14 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.1.2",
-    "@navikt/ds-css": "^2.1.2",
-    "@navikt/ds-css-internal": "^2.1.2",
-    "@navikt/ds-icons": "^2.1.2",
-    "@navikt/ds-react": "^2.1.2",
-    "@navikt/ds-react-internal": "^2.1.2",
-    "@navikt/ds-tailwind": "^2.1.2",
-    "@navikt/ds-tokens": "^2.1.2"
+    "@navikt/ds-codemod": "^2.1.5",
+    "@navikt/ds-css": "^2.1.5",
+    "@navikt/ds-css-internal": "^2.1.5",
+    "@navikt/ds-icons": "^2.1.5",
+    "@navikt/ds-react": "^2.1.5",
+    "@navikt/ds-react-internal": "^2.1.5",
+    "@navikt/ds-tailwind": "^2.1.5",
+    "@navikt/ds-tokens": "^2.1.5"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.1.13"
@@ -182,6 +182,9 @@ const serializers = {
      mark: any;
      children: any;
    }) => {
+      if (!href) {
+        return children;
+      }
      if (href && href.startsWith("mailto:")) {
        return (
          <NextLink href={href} passHref>
@@ -3,7 +3,6 @@ import { SanityBlockContent } from "@/sanity-block";
 import { ExternalLink } from "@navikt/ds-icons";
 import { BodyShort, Heading } from "@navikt/ds-react";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import Head from "next/head";
 import { dateStr, Feedback, TableOfContents } from "../..";

@@ -126,7 +125,6 @@ const KomponentArtikkelTemplate = ({
        <TableOfContents changedState={data["content"]} hideToc={false} />
        <div className="content-box">
          <div className="mt-12">
-            {data?.status && data.status?.tag === "beta" && <BetaWarning />}
            <IntroSeksjon node={data.intro} />
            <SanityBlockContent blocks={data["content"]} />
          </div>
@@ -62,6 +62,9 @@ const NavItem = ({
                    ? "neutral"
                    : "info"
                }
+                className={cl({
+                  "border-violet-300 bg-violet-50": link.tag === "beta",
+                })}
              >
                {link.tag === "new"
                  ? "ny"
@@ -88,7 +88,7 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
                </>
              ) : (
                <>
-                  <CopyIcon aria-hidden />
+                  <CopyIcon aria-hidden role="img" />
                  <span className="sr-only">Kopier formarterte tokens</span>
                </>
              )}
@@ -58,6 +58,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
          <CopyIcon
            className="text-[2rem] opacity-90 group-hover:opacity-100"
            aria-label="Kopier kodesnutt"
+            role="img"
          />
        )}
      </button>
@@ -32,7 +32,8 @@ const Filter = ({
      >
        <Search
          variant="simple"
-          label="Søk i alle NAV-ikoner"
+          hideLabel={false}
+          label="Søk"
          value={value}
          onChange={(e) => {
            setValue(e);
@@ -1,7 +1,7 @@
 import * as Icons from "@navikt/ds-icons";
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyShort, Button, Detail, Heading } from "@navikt/ds-react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { renderToString } from "react-dom/server";

 import {
@@ -11,6 +11,7 @@ import {
  Snippet,
 } from "@/components";
 import { SanityT } from "@/lib";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { downloadSvg } from "./downloads";

 const ModalContent = ({ icon }: { icon: string }) => {
@@ -118,6 +119,11 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
          <Icon />
        </div>
      </div>
+      {isNew(doc?.created_at) ? (
+        <SuggestionBlock variant="ikon-ny" reference={`<${icon} />`} />
+      ) : (
+        <SuggestionBlock variant="ikon" reference={`<${icon} />`} />
+      )}
    </div>
  );
 };
@@ -1,6 +1,14 @@
-import { AmplitudeEvents, isNew, logAmplitudeEvent } from "@/components";
+import {
+  AmplitudeEvents,
+  FigmaIcon,
+  GithubIcon,
+  isNew,
+  logAmplitudeEvent,
+  YarnIcon,
+} from "@/components";
 import meta from "@navikt/ds-icons/meta.json";
-import { BodyLong, Heading, Link, Modal } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Heading, Link, Modal } from "@navikt/ds-react";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useState } from "react";
@@ -148,6 +156,8 @@ const IconSearch = () => {

  return (
    <div className="relative flex w-full max-w-full flex-col md:w-[1000px] md:max-w-[62vw]">
+      <Links />
+      <SuggestionBlock variant="ikoner" />
      <div className="flex w-full flex-wrap justify-between gap-x-8 gap-y-4">
        <Filter onFilterChange={handleFilterChange} />
      </div>
@@ -177,4 +187,62 @@ const IconSearch = () => {
    </div>
  );
 };
+
 export default IconSearch;
+
+function Links() {
+  return (
+    <BodyShort
+      as="span"
+      size="small"
+      className="text-text-subtle mb-6 flex flex-wrap gap-4"
+    >
+      <>
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href="https://github.com/navikt/Designsystemet/tree/master/%40navikt/icons"
+          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+          onClick={() =>
+            logAmplitudeEvent("link", {
+              kilde: "intro-lenker ikonside",
+              til: "github",
+            })
+          }
+        >
+          <GithubIcon /> Github
+        </a>
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href="https://yarnpkg.com/package/@navikt/ds-icons"
+          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+          onClick={() =>
+            logAmplitudeEvent("link", {
+              kilde: "intro-lenker ikonside",
+              til: "yarn",
+            })
+          }
+        >
+          <YarnIcon />
+          Yarn
+        </a>
+      </>
+
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://www.figma.com/@nav_aksel"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "figma",
+          })
+        }
+      >
+        <FigmaIcon /> Figma
+      </a>
+    </BodyShort>
+  );
+}
@@ -1,21 +0,0 @@
-import { BodyLong, Heading } from "@navikt/ds-react";
-
-export const BetaWarning = () => {
-  return (
-    <div className="bg-surface-alt-1-subtle mb-7 rounded p-4">
-      <Heading level="2" size="small" spacing>
-        Beta
-      </Heading>
-      <BodyLong className="override-text-no-max mb-2">
-        Komponenten er under utvikling. Dette kan medføre breaking-changes i
-        patch/minor versjon av kodepakker. Teamet ditt må selv ta stilling til
-        om dere ønsker å bruke denne i produksjon.
-      </BodyLong>
-      <BodyLong className="override-text-no-max">
-        Har du innspill eller funnet en bug? Send oss en melding her eller på
-        slack! Beta-versjon er ment for rask iterering, så alle innspill
-        hjelper.
-      </BodyLong>
-    </div>
-  );
-};
@@ -10,7 +10,11 @@ export const StatusTag = ({
  switch (status) {
    case "beta":
      return (
-        <Tag variant="alt1" size="small">
+        <Tag
+          variant="alt1"
+          size="small"
+          className="border-violet-300 bg-violet-50"
+        >
          Beta
        </Tag>
      );
@@ -0,0 +1,185 @@
+import { LightBulb } from "@navikt/ds-icons";
+import { BodyLong, BodyShort, Heading } from "@navikt/ds-react";
+import cl from "classnames";
+
+const SuggestionBlockComponent = ({
+  variant,
+  reference = "",
+}: {
+  variant: "komponent-beta" | "komponent-ny";
+  reference?: string;
+}) => {
+  return (
+    <div
+      className={cl("mb-12 flex gap-3 rounded-lg px-6 py-4 ring-1 ring-inset", {
+        "bg-surface-info-subtle ring-border-subtle": variant === "komponent-ny",
+        "bg-violet-50 ring-violet-300": variant === "komponent-beta",
+      })}
+    >
+      <span className="shrink-0 text-2xl">{options[variant]?.icon}</span>
+      <div className="grid">
+        <Heading size="small" level="2">
+          {options[variant]?.heading}
+        </Heading>
+        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
+        <a
+          href={options[variant].link + reference}
+          className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus mt-4 w-fit rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+        >
+          Send innspill
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export const SuggestionBlock = ({
+  variant,
+  reference = "",
+}: {
+  variant:
+    | "ikoner"
+    | "komponenter"
+    | "komponent"
+    | "komponent-ny"
+    | "komponent-beta"
+    | "ikon-ny"
+    | "ikon";
+  reference?: string;
+}) => {
+  if (variant === "komponent-ny" || variant === "komponent-beta") {
+    return <SuggestionBlockComponent variant={variant} reference={reference} />;
+  }
+
+  return (
+    <div
+      className={cl(
+        "ring-border-subtle flex justify-between rounded-lg px-6 py-4 ring-1",
+        {
+          "mb-0 mt-5": variant === "ikon" || variant === "ikon-ny",
+          "mb-12": variant !== "ikon" && variant !== "ikon-ny",
+          "bg-surface-info-subtle": variant === "ikon-ny",
+        }
+      )}
+    >
+      <BodyShort className="flex items-center gap-2">
+        <LightBulb aria-hidden className="shrink-0 text-2xl" />
+        {options[variant]?.text}
+      </BodyShort>
+      <a
+        href={options[variant]?.link + reference}
+        className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+      >
+        Send forslag
+      </a>
+    </div>
+  );
+};
+
+const issueUrl =
+  "https://github.com/navikt/Designsystemet/issues/new?assignees=olejorgenbakken";
+
+const options: {
+  [key: string]: {
+    text: string;
+    link: string;
+    heading?: string;
+    icon?: React.ReactNode;
+  };
+} = {
+  ikoner: {
+    text: "Har du forslag til nye ikoner, eller endringer?",
+    link:
+      issueUrl +
+      "&labels=nytt+✨%2Cikoner+🖼%2Cforespørsel+🥰&template&template=new-icon.yaml&title=%5BNytt+ikon%5D%3A+",
+  },
+  komponenter: {
+    text: "Har du forslag til nye komponenter, eller endringer?",
+    link:
+      issueUrl +
+      "&labels=nytt+✨%2Cforespørsel+🥰%2Ckomponenter+🧩&template=new-component.yml&title=%5BNy+komponent%5D%3A+",
+  },
+  komponent: {
+    text: "Har du innspill til komponenten?",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+  },
+  ikon: {
+    text: "Har du innspill til ikonet?",
+    link:
+      issueUrl +
+      "&labels=forespørsel+🥰&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+  },
+  "ikon-ny": {
+    text: "Har du innspill til ikonet?",
+    link:
+      issueUrl +
+      "&labels=forespørsel+🥰%2Cnytt+✨&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+  },
+  "komponent-ny": {
+    text: "Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cnytt+✨&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Ny",
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M6.93936 14.0081C7.08779 13.7367 7.47756 13.7367 7.62599 14.0081L8.61115 15.8094C8.64706 15.875 8.70104 15.929 8.7667 15.9649L10.568 16.9501C10.8394 17.0985 10.8394 17.4883 10.568 17.6367L8.7667 18.6219C8.70104 18.6578 8.64706 18.7118 8.61115 18.7774L7.62599 20.5787C7.47756 20.8501 7.08779 20.8501 6.93936 20.5787L5.9542 18.7774C5.91829 18.7118 5.86431 18.6578 5.79865 18.6219L3.99735 17.6367C3.72596 17.4883 3.72596 17.0985 3.99735 16.9501L5.79865 15.9649C5.86431 15.929 5.91829 15.875 5.9542 15.8094L6.93936 14.0081Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.2871 3.42118C13.4355 3.14979 13.8253 3.14979 13.9737 3.42118L16.0502 7.21803C16.0862 7.28369 16.1401 7.33767 16.2058 7.37358L20.0026 9.45014C20.274 9.59857 20.274 9.98834 20.0026 10.1368L16.2058 12.2133C16.1401 12.2492 16.0862 12.3032 16.0502 12.3689L13.9737 16.1657C13.8253 16.4371 13.4355 16.4371 13.2871 16.1657L11.2105 12.3689C11.1746 12.3032 11.1206 12.2492 11.0549 12.2133L7.25809 10.1368C6.98671 9.98834 6.98671 9.59857 7.25809 9.45014L11.0549 7.37358C11.1206 7.33767 11.1746 7.28369 11.2105 7.21803L13.2871 3.42118Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+  "komponent-beta": {
+    text: "Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Beta",
+    icon: (
+      <svg
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M14.5471 3.99994H10.4528V9.48408L4.83594 17.1731C3.94768 18.3891 4.92474 19.9999 6.55053 19.9999H18.4495C20.0753 19.9999 21.0523 18.3891 20.1641 17.1731L14.5471 9.48408V3.99994Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 4H15.5"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8.75 12L16.25 12"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+};
@@ -5,7 +5,6 @@ import { getClient } from "@/sanity-client";
 import { Detail } from "@navikt/ds-react";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
@@ -74,7 +73,6 @@ const Page = ({
        pageProps={page}
        variant="page"
      >
-        {page?.status?.tag === "beta" && <BetaWarning />}
        <IntroSeksjon node={page?.intro} />
        <SanityBlockContent blocks={page["content"]} />
      </WithSidebar>
@@ -59,7 +59,7 @@ const IntroCards = () => {
          <Link href={href} passHref>
            <a className="focus-visible:shadow-focus bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 hover:ring-1 focus:outline-none">
              <span className="xs:flex items-center gap-2">
-                <Icon aria-hidden className="shrink-0 text-2xl" />
+                <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
                <span className="text-xl font-semibold group-hover:underline">
                  {title}
                </span>
@@ -120,12 +120,12 @@ const GetStarted = ({
        >
          {pause ? (
            <>
-              <PlayIcon aria-hidden />
+              <PlayIcon aria-hidden role="img" />
              <span className="sr-only">Start animasjon</span>
            </>
          ) : (
            <>
-              <PauseIcon aria-hidden />
+              <PauseIcon aria-hidden role="img" />
              <span className="sr-only">Stopp animasjon</span>
            </>
          )}
@@ -13,8 +13,8 @@ import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
 import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
-import { BetaWarning } from "components/website-modules/BetaWarning";
 import { StatusTag } from "components/website-modules/StatusTag";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
@@ -90,6 +90,13 @@ const Page = ({
    ? page.publishedAt
    : page._updatedAt;

+  const tag =
+    page?.status?.tag === "beta"
+      ? "komponent-beta"
+      : page?.status?.tag === "new"
+      ? "komponent-ny"
+      : null;
+
  return (
    <>
      <Head>
@@ -227,8 +234,16 @@ const Page = ({
            </>
          )}
        </BodyShort>
-        {page?.status?.tag === "beta" && <BetaWarning />}
+        {tag && (
+          <SuggestionBlock variant={tag} reference={`<${page?.heading} />`} />
+        )}
        <IntroSeksjon node={page?.intro} />
+        {page?.status?.tag === "ready" && (
+          <SuggestionBlock
+            variant="komponent"
+            reference={`<${page?.heading} />`}
+          />
+        )}
        <SanityBlockContent blocks={page["content"]} />
      </WithSidebar>
    </>
@@ -1,14 +1,15 @@
-import { komponentLandingQuery, SidebarT, SanityT, urlFor } from "@/lib";
+import { komponentLandingQuery, SanityT, SidebarT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
 import { Heading, Ingress } from "@navikt/ds-react";
+import cl from "clsx";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
+import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import { lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
-import cl from "clsx";

 const Page = ({
  page,
@@ -57,6 +58,7 @@ const Page = ({
        intro={<Ingress className="text-text-on-action">{page?.intro}</Ingress>}
        pageProps={page}
      >
+        <SuggestionBlock variant="komponenter" />
        {komponentKategorier
          .filter(
            (kat) => links?.filter((x) => x.kategori === kat.value).length > 0
@@ -81,15 +81,75 @@ export const structure = async (
    (x: Role) => x.name === "god-praksis-forfatter"
  ); */

+  const feedback = await getClient({ apiVersion: "2021-06-07" }).fetch(
+    `*[_type == "aksel_feedback" && $id in doc_ref->contributors[]->user_id.current]{_id, behandlet}`,
+    { id: currentUser?.id }
+  );
+
  return S.list()
    .title("Innholdstyper")
    .items([
      ...(editor
+        ? [S.documentListItem().schemaType(`editor`).id(editor._id)]
+        : []),
+      ...(feedback.length > 0
        ? [
-            S.documentListItem().schemaType(`editor`).id(editor._id),
+            S.listItem()
+              .title(
+                `Nye tilbakemeldinger (${
+                  feedback.filter(
+                    (x) => !x._id.includes("draft") && x.behandlet === false
+                  ).length
+                })`
+              )
+              .icon(CommentIcon)
+              .child(
+                S.list()
+                  .title("Tilbakemeldinger")
+                  .items([
+                    S.listItem()
+                      .title(
+                        `Nye tilbakemeldinger (${
+                          feedback.filter(
+                            (x) =>
+                              !x._id.includes("draft") && x.behandlet === false
+                          ).length
+                        })`
+                      )
+                      .child(
+                        S.documentList()
+                          .title(`Nye tilbakemeldinger`)
+                          .filter(
+                            `_type == 'aksel_feedback' && behandlet == false && _id in $ids`
+                          )
+                          .params({
+                            ids: feedback.map((x) => x?._id),
+                          })
+                      ),
+                    S.listItem()
+                      .title(
+                        `Ferdig behandlet (${
+                          feedback.filter(
+                            (x) =>
+                              !x._id.includes("draft") && x.behandlet === true
+                          ).length
+                        })`
+                      )
+                      .child(
+                        S.documentList()
+                          .title("Ferdig")
+                          .filter(
+                            `_type == 'aksel_feedback' && behandlet == true && _id in $ids`
+                          )
+                          .params({
+                            ids: feedback.map((x) => x?._id),
+                          })
+                      ),
+                  ])
+              ),
            S.divider(),
          ]
-        : []),
+        : [S.divider()]),
      S.listItem()
        .title("God Praksis")
        .icon(OkHandIcon)
@@ -218,8 +218,6 @@ export const EditorPage = () => {
    (query) => client.fetch(query)
  );

-  console.log(data);
-
  const {
    data: fbData,
    error: fbError,
@@ -42,9 +42,9 @@ export const Accordion = defineType({
  ],
  components: {
    preview: (val: any) => {
-      return val.value?.list ? (
+      return val?.list ? (
        <div>
-          {val.value.list.map((x) => (
+          {val.list.map((x) => (
            <div
              key={x._key}
              className="border-b-border flex w-full justify-between border-b py-2 px-4 "
@@ -63,8 +63,8 @@ export const Accordion = defineType({
    select: {
      list: "list",
    },
-    prepare() {
-      return { title: "Accordion", media: StackCompactIcon };
+    prepare({ ...props }) {
+      return { title: "Accordion", media: StackCompactIcon, list: props?.list };
    },
  },
 });
@@ -18,6 +18,21 @@ module.exports = {
      "2xl": "1440px",
    },
    extend: {
+      /* https://www.figma.com/file/KNxjfHdXUvlx1LVWpp3iJj/Aksel-UI-kit?node-id=1705%3A49825 */
+      colors: {
+        violet: {
+          50: "#F5EDFF",
+          100: "#E9DEF8",
+          200: "#D6C3EE",
+          300: "#BD9FE4",
+          400: "#A575E1",
+          500: "#9862DB",
+          600: "#7B42C2",
+          700: "#642BAB",
+          800: "#471487",
+          900: "#2C0162",
+        },
+      },
      fontFamily: {
        sans: ["Source Sans Pro", "Arial", "sans-serif"],
      },
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.1.2",
-    "@navikt/ds-react": "2.1.2",
+    "@navikt/ds-css": "2.1.5",
+    "@navikt/ds-react": "2.1.5",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -3457,7 +3457,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/ds-codemod@^2.1.1, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.1.3, @navikt/ds-codemod@workspace:@navikt/codemod":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
  dependencies:
@@ -3484,7 +3484,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css-internal@^2.1.1, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.1.3, @navikt/ds-css-internal@workspace:@navikt/internal/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
  dependencies:
@@ -3495,11 +3495,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@2.1.1, @navikt/ds-css@^2.1.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.1.3, @navikt/ds-css@^2.1.3, @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": ^2.1.1
+    "@navikt/ds-tokens": ^2.1.3
    normalize.css: ^8.0.1
    postcss: ^8.4.0
    postcss-cli: ^9.0.0
@@ -3508,7 +3508,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-icons@^2.1.1, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.1.3, @navikt/ds-icons@workspace:@navikt/icons":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-icons@workspace:@navikt/icons"
  dependencies:
@@ -3544,8 +3544,8 @@ __metadata:
    "@babel/preset-env": 7.19.4
    "@babel/preset-react": 7.18.6
    "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.1.1
-    "@navikt/ds-react": ^2.1.1
+    "@navikt/ds-icons": ^2.1.3
+    "@navikt/ds-react": ^2.1.3
    "@rollup/plugin-babel": 6.0.2
    "@rollup/plugin-commonjs": 23.0.2
    "@rollup/plugin-node-resolve": ^15.0.1
@@ -3570,12 +3570,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react-internal@^2.1.1, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.1.3, @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": ^2.1.1
-    "@navikt/ds-react": ^2.1.1
+    "@navikt/ds-icons": ^2.1.3
+    "@navikt/ds-react": ^2.1.3
    clsx: ^1.1.1
    concurrently: 7.2.1
    copy-to-clipboard: ^3.3.1
@@ -3591,12 +3591,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@2.1.1, @navikt/ds-react@^2.1.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.1.3, @navikt/ds-react@^2.1.3, @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": 0.17.0
-    "@navikt/ds-icons": ^2.1.1
+    "@navikt/ds-icons": ^2.1.3
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3632,11 +3632,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^2.1.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.1.3, @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": ^2.1.1
+    "@navikt/ds-tokens": ^2.1.3
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3647,7 +3647,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^2.1.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.1.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8177,14 +8177,14 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/ds-codemod": ^2.1.1
-    "@navikt/ds-css": ^2.1.1
-    "@navikt/ds-css-internal": ^2.1.1
-    "@navikt/ds-icons": ^2.1.1
-    "@navikt/ds-react": ^2.1.1
-    "@navikt/ds-react-internal": ^2.1.1
-    "@navikt/ds-tailwind": ^2.1.1
-    "@navikt/ds-tokens": ^2.1.1
+    "@navikt/ds-codemod": ^2.1.3
+    "@navikt/ds-css": ^2.1.3
+    "@navikt/ds-css-internal": ^2.1.3
+    "@navikt/ds-icons": ^2.1.3
+    "@navikt/ds-react": ^2.1.3
+    "@navikt/ds-react-internal": ^2.1.3
+    "@navikt/ds-tailwind": ^2.1.3
+    "@navikt/ds-tokens": ^2.1.3
    prettier-plugin-tailwindcss: ^0.1.13
  languageName: unknown
  linkType: soft
@@ -24115,8 +24115,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "shadow-dom@workspace:examples/shadow-dom"
  dependencies:
-    "@navikt/ds-css": 2.1.1
-    "@navikt/ds-react": 2.1.1
+    "@navikt/ds-css": 2.1.3
+    "@navikt/ds-react": 2.1.3
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^2.1.0
Author	SHA1	Message	Date
Ken	bcfd6747d9	📝 Changeset versions	2023-01-31 11:09:43 +01:00
Ken	122bbf0090	🐛 Date-fns import feilet fra ESM	2023-01-31 11:08:45 +01:00
Ken	b60d047b95	Merge branch 'next'	2023-01-31 10:57:00 +01:00
github-actions[bot]andgithub-actions[bot]	98dbc155fe	Version Packages (#1774 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-01-31 10:55:24 +01:00
Ken	87f194c1dc	📝 Changeset	2023-01-31 10:49:41 +01:00
Ken	7f73315264	🐛 useRangepicker edgecase ved valg av start etter slutt	2023-01-31 10:48:42 +01:00
Ken	1399f6f084	Merge branch 'next' of https://github.com/navikt/Designsystemet into next	2023-01-30 13:10:56 +01:00
Kai Erik SchierenandKen	1cf90c1753	Feature/suggestion box (#1773 ) * 🎨 SuggestionBlock * ✨ SuggestionBlock for grunnleggende/komponentsider * 🎨 Flyttet options ut til eget object * 🎨 optional chain suggestion block * 🎨 add issue url to new icon * 🎨 add urls for updates requests * 🎨 add labels to links * 🎨 add cml label to href * 🎨 url to new and beta * 🎨 add fitting labels to hrefs * fix reference 🐛 * 💄 Oppdatert ikoner/heading for beta og Ny --------- Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-01-30 13:02:20 +01:00
Ken	c027c2e464	♿ role=img på ikoner fra sanity	2023-01-30 12:35:13 +01:00
Ken	92dd582d68	🐛 Bedre error-handling for feilede lenker	2023-01-30 11:34:18 +01:00
Ken	bb302bbbd6	Merge branch 'master' of https://github.com/navikt/Designsystemet	2023-01-30 10:55:58 +01:00
Ken	55005c80f3	🐛 Fiket sanity-preview av Accordion	2023-01-30 09:58:02 +01:00
Ken	27e6423b54	Update README.md	2023-01-30 09:32:53 +01:00
Ken	21a842d419	🎨 Tilbakemeldingsvisning på 'forsiden' i sanity	2023-01-27 15:27:15 +01:00
github-actions[bot]andgithub-actions[bot]	e7a62a9082	Version Packages (#1772 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-01-27 13:20:54 +01:00
Ken	494566e604	🐛 Monthpicker oppdaterte ikke år riktig (#1771 )	2023-01-27 12:33:17 +01:00
Kai Erik Schieren	1c492fda56	🎨 add labels (#1770 )	2023-01-27 11:53:01 +01:00