Merge branch 'main' into list-tweaks-icon-and-safari

navikt · Sep 12, 2024 · 5fef020 · 5fef020
2 parents 79616a7 + 46a14b1
commit 5fef020
Show file tree

Hide file tree

Showing 26 changed files with 678 additions and 461 deletions.
diff --git a/.changeset/lazy-dryers-do.md b/.changeset/lazy-dryers-do.md
diff --git a/.changeset/silly-cycles-think.md b/.changeset/silly-cycles-think.md
diff --git a/@navikt/aksel-icons/CHANGELOG.md b/@navikt/aksel-icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 6.17.0
+
+### Minor Changes
+
+- Icons: New 'face' icons for 'Engagement'-category. ([#3134](https://github.com/navikt/aksel/pull/3134))
+
 ## 6.16.3
 
 ### Patch Changes

diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

diff --git a/@navikt/aksel-stylelint/CHANGELOG.md b/@navikt/aksel-stylelint/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 6.17.0
+
 ## 6.16.3
 
 ## 6.16.2

diff --git a/@navikt/aksel-stylelint/package.json b/@navikt/aksel-stylelint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^6.16.3",
-    "@navikt/ds-tokens": "^6.16.3",
+    "@navikt/ds-css": "^6.17.0",
+    "@navikt/ds-tokens": "^6.17.0",
     "concurrently": "7.2.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

diff --git a/@navikt/aksel/CHANGELOG.md b/@navikt/aksel/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 6.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@6.17.0
+
 ## 6.16.3
 
 ### Patch Changes

diff --git a/@navikt/aksel/package.json b/@navikt/aksel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "6.16.3",
+    "@navikt/ds-css": "6.17.0",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

diff --git a/@navikt/core/css/CHANGELOG.md b/@navikt/core/css/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 6.17.0
+
 ## 6.16.3
 
 ### Patch Changes

diff --git a/@navikt/core/css/package.json b/@navikt/core/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^6.16.3",
+    "@navikt/ds-tokens": "^6.17.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

diff --git a/@navikt/core/react/CHANGELOG.md b/@navikt/core/react/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @navikt/ds-react
 
+## 6.17.0
+
+### Minor Changes
+
+- Combobox: Add support for `onBlur`, and omit props that have no effect. ([#3125](https://github.com/navikt/aksel/pull/3125))
+
+### Patch Changes
+
+- Updated dependencies [[`1b2dc8896`](https://github.com/navikt/aksel/commit/1b2dc88968ca99d8b24f94ca51843063472dfa95)]:
+  - @navikt/aksel-icons@6.17.0
+  - @navikt/ds-tokens@6.17.0
+
 ## 6.16.3
 
 ### Patch Changes

diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.16.3",
+  "version": "6.17.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.16.3",
-    "@navikt/ds-tokens": "^6.16.3",
+    "@navikt/aksel-icons": "^6.17.0",
+    "@navikt/ds-tokens": "^6.17.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

diff --git a/@navikt/core/react/src/form/form-progress/FormProgress.stories.tsx b/@navikt/core/react/src/form/form-progress/FormProgress.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
 import VStack from "../../layout/stack/VStack";
+import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
 import FormProgress, { FormProgressProps } from "./FormProgress";
 
 export default {
@@ -37,6 +38,97 @@ export const Default: StoryFn<ControllableProps> = (props) => (
 );
 Default.args = { activeStep: 2, totalSteps: 7, interactiveSteps: true };
 
+export const ProvidedTranslations: StoryFn = () => {
+  const translations = {
+    FormProgress: {
+      step: "Step {activeStep} of {totalSteps}",
+      showAllSteps: "Show all steps",
+      hideAllSteps: "Hide all steps",
+    },
+  };
+
+  return (
+    <UNSAFE_AkselLanguageProvider translations={translations}>
+      <FormProgress activeStep={2} totalSteps={7} interactiveSteps>
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
+export const DefaultTranslations: StoryFn = () => {
+  return (
+    <UNSAFE_AkselLanguageProvider>
+      <FormProgress activeStep={2} totalSteps={7} interactiveSteps>
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
+export const ComponentTranslations: StoryFn = () => {
+  const globalTranslations = {
+    FormProgress: {
+      step: "Step {activeStep} of {totalSteps}",
+      showAllSteps: "Show all steps",
+      hideAllSteps: "Hide all steps",
+    },
+  };
+  const translations = {
+    step: "Skref {activeStep} af {totalSteps}",
+    showAllSteps: "Sýndu öll skref",
+    hideAllSteps: "Fela öll skref",
+  };
+  return (
+    <UNSAFE_AkselLanguageProvider translations={globalTranslations}>
+      <FormProgress
+        translations={translations}
+        activeStep={2}
+        totalSteps={7}
+        interactiveSteps
+      >
+        <FormProgress.Step href="#" completed>
+          Start søknad
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Personopplysninger</FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Saksopplysninger
+        </FormProgress.Step>
+        <FormProgress.Step interactive={false}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </FormProgress.Step>
+        <FormProgress.Step href="#">Vedlegg</FormProgress.Step>
+        <FormProgress.Step href="#">Oppsummering</FormProgress.Step>
+        <FormProgress.Step href="#">Innsending</FormProgress.Step>
+      </FormProgress>
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
 export const Controlled: StoryFn = () => {
   const [open, setOpen] = useState(true);
   return (

diff --git a/@navikt/core/react/src/provider/i18n/LanguageProvider.tsx b/@navikt/core/react/src/provider/i18n/LanguageProvider.tsx
@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from "react";
+import { TranslationDictionary } from "../../util/i18n/i18n.types";
+import nb from "../../util/i18n/locales/nb";
+
+export interface LanguageProviderContextType {
+  /**
+   * Merged with the default language translations object (officially provided translations).
+   */
+  translations: TranslationDictionary | TranslationDictionary[];
+}
+
+export const LanguageProviderContext =
+  createContext<LanguageProviderContextType>({
+    translations: nb,
+  });
+
+export interface LanguageProviderProps {
+  children?: React.ReactNode;
+  translations?: TranslationDictionary | TranslationDictionary[];
+}
+
+export const useProvider = () => useContext(LanguageProviderContext);
+
+/**
+ * @private Feature is under development and should not be used in any applications.
+ *
+ * @example
+ * ```jsx
+ * <UNSAFE_AkselLanguageProvider translations={{...}}>
+ *   {app}
+ * </UNSAFE_AkselLanguageProvider>
+ * ```
+ */
+export const UNSAFE_AkselLanguageProvider = ({
+  children,
+  translations,
+  ...rest
+}: LanguageProviderProps) => {
+  return (
+    <LanguageProviderContext.Provider
+      value={{
+        translations: translations ?? nb,
+        ...rest,
+      }}
+    >
+      {children}
+    </LanguageProviderContext.Provider>
+  );
+};
+
+export default UNSAFE_AkselLanguageProvider;
diff --git a/@navikt/core/react/src/util/i18n/i18n.context.test.tsx b/@navikt/core/react/src/util/i18n/i18n.context.test.tsx
@@ -1,7 +1,8 @@
 import { renderHook } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { I18nContext, useI18n } from "./i18n.context";
+import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
+import { useI18n } from "./i18n.context";
 
 describe("useI18n", () => {
   test("should throw error if key is not found", () => {
@@ -15,7 +16,9 @@ describe("useI18n", () => {
     const i18n = { FileUpload: { item: { uploading: "Test translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>
+        <UNSAFE_AkselLanguageProvider translations={i18n}>
+          {children}
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;
@@ -29,9 +32,9 @@ describe("useI18n", () => {
     const i18n2 = { FileUpload: { item: { uploading: "Wrong translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={[i18n1, i18n2]}>
+        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
           {children}
-        </I18nContext.Provider>
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;
@@ -45,9 +48,9 @@ describe("useI18n", () => {
     };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={[i18n1, i18n2]}>
+        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
           {children}
-        </I18nContext.Provider>
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;

diff --git a/@navikt/core/react/src/util/i18n/i18n.context.ts b/@navikt/core/react/src/util/i18n/i18n.context.ts
@@ -1,21 +1,14 @@
-import { createContext, useContext } from "react";
+import { useContext } from "react";
+import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
 import { get } from "./get";
-import {
-  Component,
-  ComponentTranslation,
-  TranslationDictionary,
-} from "./i18n.types";
+import { Component, ComponentTranslation } from "./i18n.types";
 import nb from "./locales/nb";
 
 /**
  * https://regex101.com/r/LYKWi3/1
  */
 const REPLACE_REGEX = /{[^}]*}/g;
 
-export const I18nContext = createContext<
-  TranslationDictionary | TranslationDictionary[]
->(nb);
-
 /* https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3 */
 type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
@@ -27,7 +20,8 @@ export function useI18n<T extends Component>(
   componentName: T,
   ...local: (ComponentTranslation<T> | undefined)[]
 ) {
-  const i18n = useContext(I18nContext);
+  const languageProviderContext = useContext(LanguageProviderContext);
+  const i18n = languageProviderContext.translations;
 
   /**
    * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24

diff --git a/@navikt/core/tailwind/CHANGELOG.md b/@navikt/core/tailwind/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 6.17.0
+
 ## 6.16.3
 
 ## 6.16.2