fabric-ds · trygvea · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/.linguirc b/.linguirc
@@ -0,0 +1,24 @@
+{
+   "catalogs": [{
+       "path": "locale/{locale}/{name}",
+       "include": ["packages/{name}/"],
+         "exclude": [
+            "packages/affix",
+            "packages/attention",
+            "packages/box",
+            "packages/breadcrumbs",
+            "packages/broadcast",
+            "packages/button",
+            "packages/card",
+            "packages/expandable",
+            "packages/select",
+            "packages/textfield",
+            "packages/toast",
+            "packages/utils"
+         ]
+   }],
+   "compileNamespace": "es",
+   "format": "po",
+   "locales": ["en","nb","fi"],
+   "sourceLocale": "en"
+}
diff --git a/locale/en/alert.mjs b/locale/en/alert.mjs
@@ -0,0 +1 @@
+/*eslint-disable*/export const messages=JSON.parse("{\"alert.positive.svg.aria-label\":\"Green checkmark\",\"alert.info.svg.aria-label\":\"Info\",\"alert.negative.svg.aria-label\":\"Red exclamation mark\",\"alert.warning.svg.aria-label\":\"Yellow exclamation mark\"}");
diff --git a/locale/en/alert.po b/locale/en/alert.po
@@ -0,0 +1,34 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-27 10:38+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: packages/alert/svgs.js:11
+#, explicit-id
+msgid "alert.positive.svg.aria-label"
+msgstr "Green checkmark"
+
+#: packages/alert/svgs.js:16
+#, explicit-id
+msgid "alert.info.svg.aria-label"
+msgstr "Info"
+
+#: packages/alert/svgs.js:8
+#, explicit-id
+msgid "alert.negative.svg.aria-label"
+msgstr "Red exclamation mark"
+
+#: packages/alert/svgs.js:14
+#, explicit-id
+msgid "alert.warning.svg.aria-label"
+msgstr "Yellow exclamation mark"
diff --git a/locale/fi/alert.mjs b/locale/fi/alert.mjs
@@ -0,0 +1 @@
+/*eslint-disable*/export const messages=JSON.parse("{\"alert.positive.svg.aria-label\":\"Green checkmark\",\"alert.info.svg.aria-label\":\"Info\",\"alert.negative.svg.aria-label\":\"Red exclamation mark\",\"alert.warning.svg.aria-label\":\"Yellow exclamation mark\"}");
diff --git a/locale/fi/alert.po b/locale/fi/alert.po
@@ -0,0 +1,34 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-27 10:38+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: fi\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: packages/alert/svgs.js:11
+#, explicit-id
+msgid "alert.positive.svg.aria-label"
+msgstr ""
+
+#: packages/alert/svgs.js:16
+#, explicit-id
+msgid "alert.info.svg.aria-label"
+msgstr ""
+
+#: packages/alert/svgs.js:8
+#, explicit-id
+msgid "alert.negative.svg.aria-label"
+msgstr ""
+
+#: packages/alert/svgs.js:14
+#, explicit-id
+msgid "alert.warning.svg.aria-label"
+msgstr ""
diff --git a/locale/nb/alert.mjs b/locale/nb/alert.mjs
@@ -0,0 +1 @@
+/*eslint-disable*/export const messages=JSON.parse("{\"alert.positive.svg.aria-label\":\"Grønn hake\",\"alert.info.svg.aria-label\":\"Info\",\"alert.negative.svg.aria-label\":\"Rødt utropstegn\",\"alert.warning.svg.aria-label\":\"Gult utropstegn\"}");
diff --git a/locale/nb/alert.po b/locale/nb/alert.po
@@ -0,0 +1,34 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-27 10:38+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: nb\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: packages/alert/svgs.js:11
+#, explicit-id
+msgid "alert.positive.svg.aria-label"
+msgstr "Grønn hake"
+
+#: packages/alert/svgs.js:16
+#, explicit-id
+msgid "alert.info.svg.aria-label"
+msgstr "Info"
+
+#: packages/alert/svgs.js:8
+#, explicit-id
+msgid "alert.negative.svg.aria-label"
+msgstr "Rødt utropstegn"
+
+#: packages/alert/svgs.js:14
+#, explicit-id
+msgid "alert.warning.svg.aria-label"
+msgstr "Gult utropstegn"
diff --git a/package.json b/package.json
@@ -14,13 +14,16 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build:api": "npx esbuild ./packages/toast/api.js --outdir=dist --target=es2017 --bundle --sourcemap --format=esm --minify",
-    "build:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify",
-    "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch",
+    "build:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2022 --bundle --sourcemap --format=esm --minify",
+    "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2022 --bundle --sourcemap --format=esm --minify --watch",
     "build": "rimraf dist && npm run build:elements && tsc && npm run build:npm && npm run build:api",
     "format": "prettier --write . --ignore-path .gitignore",
     "lint": "npm run lint:format && npm run lint:eslint",
     "lint:format": "prettier --check . --ignore-path .gitignore",
     "lint:eslint": "eslint . --ext js,cjs,mjs --ignore-path .gitignore",
+    "locale:extract": "lingui extract --overwrite --clean",
+    "locale:compile": "lingui compile",
+    "locale": "npm run locale:extract && npm run locale:compile",
     "dev": "vite",
     "build:docs": "vite build && cp CNAME site",
     "eik:login": "eik login",
@@ -45,6 +48,7 @@
     "@eik/cli": "2.0.22",
     "@fabric-ds/css": "1.2.0",
     "@finn-no/browserslist-config": "3.0.0",
+    "@lingui/cli": "^4.0.0-next.4",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/git": "10.0.1",
     "@stylelint/postcss-css-in-js": "0.38.0",
@@ -84,6 +88,7 @@
   "dependencies": {
     "@fabric-ds/core": "0.0.15",
     "@fabric-ds/icons": "0.6.7",
+    "@lingui/core": "^4.0.0-next.4",
     "@open-wc/testing": "3.1.7",
     "glob": "8.1.0",
     "html-format": "1.0.2",

diff --git a/packages/alert/svgs.js b/packages/alert/svgs.js
@@ -1,7 +1,22 @@
 import { html, svg } from 'lit';
+import { i18n } from '@lingui/core';
+import { initLocale } from '../utils/locale.js';
+
+await initLocale('alert');
+
+const negativeAria = i18n._(
+  /*i18n*/ { message: 'Red exclamation mark', id: 'alert.negative.svg.aria-label' },
+);
+const positiveAria = i18n._(
+  /*i18n*/ { message: 'Green checkmark', id: 'alert.positive.svg.aria-label' },
+);
+const warningAria = i18n._(
+  /*i18n*/ { message: 'Yellow exclamation mark', id: 'alert.warning.svg.aria-label' },
+);
+const infoAria = i18n._(/*i18n*/ { message: 'Info', id: 'alert.info.svg.aria-label' });
 
 export const negativeSvg = () => html`<svg
-  aria-label="Rødt utropstegn"
+  aria-label="${negativeAria}"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   width="16"
@@ -12,7 +27,7 @@ export const negativeSvg = () => html`<svg
 </svg>`;
 
 export const positiveSvg = () => html`<svg
-  aria-label="Grønt hake"
+  aria-label="${positiveAria}"
   role="img"
   width="16"
   height="16"
@@ -23,7 +38,7 @@ export const positiveSvg = () => html`<svg
 </svg> `;
 
 export const warningSvg = () => html`<svg
-  aria-label="Gult utropstegn"
+  aria-label="${warningAria}"
   role="img"
   width="16"
   height="16"
@@ -34,7 +49,7 @@ export const warningSvg = () => html`<svg
 </svg> `;
 
 export const infoSvg = () => html`<svg
-  aria-label="Info"
+  aria-label="${infoAria}"
   role="img"
   width="16"
   height="16"

diff --git a/packages/utils/locale.js b/packages/utils/locale.js
@@ -0,0 +1,27 @@
+import { i18n } from '@lingui/core';
+
+/**
+ * Load locale messages for specified component.
+ * @param pkg The package/component you want to dynamic activate for.
+ * @param locale The locale you want to activate, or undefined to detect from document.
+ */
+export async function initLocale(pkg, locale = undefined) {
+  const resolvedLocale = locale ?? detectLocale();
+  await dynamicActivateI18n(pkg, resolvedLocale);
+}
+
+function detectLocale() {
+  try {
+    return document.documentElement.lang;
+  } catch (e) {
+    console.warn('could not detect locale, falling back to source locale', e);
+    return 'en';
+  }
+}
+
+async function dynamicActivateI18n(pkg, locale) {
+  const { messages } = await import(`../../locale/${locale}/${pkg}.mjs`);
+
+  i18n.load(locale, messages);
+  i18n.activate(locale);
+}
diff --git a/pages/components/alert.html b/pages/components/alert.html
@@ -1,4 +1,4 @@
-<html lang="en">
+<html lang="nb">
   <%- include('head.html'); -%>
   <body>
     <f-docs-template>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/eslint-disable/export const messages=JSON.parse("{\"alert.positive.svg.aria-label\":\"Green checkmark\",\"alert.info.svg.aria-label\":\"Info\",\"alert.negative.svg.aria-label\":\"Red exclamation mark\",\"alert.warning.svg.aria-label\":\"Yellow exclamation mark\"}");