@fremtind/jokul 5.0.0-next.13 → 5.0.0-next.14

package/codemods/__tests__/import-paths.test.mjs

@@ -1,5 +1,5 @@
-import test from "node:test";
 import assert from "node:assert/strict";
+import test from "node:test";
 import { transformImportPaths } from "../import-paths.mjs";
 
 test("migrates core, styles and utilities imports", () => {
@@ -16,7 +16,9 @@ import type { WithChildren } from "@fremtind/jokul/core";
         true,
     );
     assert.equal(
-        result.text.includes('import "@fremtind/jokul/styles/components.scss";'),
+        result.text.includes(
+            'import "@fremtind/jokul/styles/components.scss";',
+        ),
         true,
     );
     assert.equal(
@@ -64,9 +66,7 @@ import "@fremtind/jokul/styles/components/select";
     const result = transformImportPaths(source, "/tmp/MyForm.tsx");
 
     assert.equal(
-        result.text.includes(
-            '@fremtind/jokul/styles/components/beta/select',
-        ),
+        result.text.includes("@fremtind/jokul/styles/components/beta/select"),
         true,
     );
     assert.deepEqual(result.warnings, []);
@@ -114,13 +114,14 @@ test("removes css @import of webfonts.css", () => {
 
     assert.equal(result.text.includes("webfonts"), false);
     assert.equal(
-        result.text.includes('@import "@fremtind/jokul/styles/components.css";'),
+        result.text.includes(
+            '@import "@fremtind/jokul/styles/components.css";',
+        ),
         true,
     );
     assert.deepEqual(result.warnings, []);
 });
 
-
 test("renames Fremtind Material Symbols font-family", () => {
     const source = `.icon {
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
@@ -129,10 +130,7 @@ test("renames Fremtind Material Symbols font-family", () => {
 
     const result = transformImportPaths(source, "/tmp/icons.scss");
 
-    assert.equal(
-        result.text.includes("Fremtind Material Symbols"),
-        false,
-    );
+    assert.equal(result.text.includes("Fremtind Material Symbols"), false);
     assert.equal(
         result.text.includes(
             '"Jokul Icons", "Jokul Icons Fallback", sans-serif',
@@ -150,10 +148,7 @@ test("renames Fremtind Material Symbols inside CSS files too", () => {
 
     const result = transformImportPaths(source, "/tmp/icons.css");
 
-    assert.equal(
-        result.text.includes("Fremtind Material Symbols"),
-        false,
-    );
+    assert.equal(result.text.includes("Fremtind Material Symbols"), false);
     assert.equal(result.text.includes("'Jokul Icons'"), true);
 });
 
@@ -196,8 +191,14 @@ test("renames CSS container-high and container-low tokens", () => {
 
     const result = transformImportPaths(source, "/tmp/card.css");
 
-    assert.equal(result.text.includes("--jkl-color-background-container-high"), false);
-    assert.equal(result.text.includes("--jkl-color-background-container-low"), false);
+    assert.equal(
+        result.text.includes("--jkl-color-background-container-high"),
+        false,
+    );
+    assert.equal(
+        result.text.includes("--jkl-color-background-container-low"),
+        false,
+    );
     assert.equal(
         result.text.split("--jkl-color-background-container").length - 1,
         2,
@@ -215,10 +216,22 @@ test("renames CSS alert tokens to feedback tokens", () => {
     const result = transformImportPaths(source, "/tmp/alerts.css");
 
     assert.equal(result.text.includes("--jkl-color-background-alert-"), false);
-    assert.equal(result.text.includes("--jkl-color-info-background-container"), true);
-    assert.equal(result.text.includes("--jkl-color-warning-background-container"), true);
-    assert.equal(result.text.includes("--jkl-color-error-background-container"), true);
-    assert.equal(result.text.includes("--jkl-color-success-background-container"), true);
+    assert.equal(
+        result.text.includes("--jkl-color-info-background-container"),
+        true,
+    );
+    assert.equal(
+        result.text.includes("--jkl-color-warning-background-container"),
+        true,
+    );
+    assert.equal(
+        result.text.includes("--jkl-color-error-background-container"),
+        true,
+    );
+    assert.equal(
+        result.text.includes("--jkl-color-success-background-container"),
+        true,
+    );
 });
 
 test("warns about removed interactive tokens", () => {
@@ -297,7 +310,10 @@ test("renames container-inverted to background-contrast", () => {
 
     const result = transformImportPaths(source, "/tmp/inverted.css");
 
-    assert.equal(result.text.includes("--jkl-color-background-container-inverted"), false);
+    assert.equal(
+        result.text.includes("--jkl-color-background-container-inverted"),
+        false,
+    );
     assert.equal(result.text.includes("--jkl-color-background-contrast"), true);
     assert.deepEqual(result.warnings, []);
 });
@@ -364,15 +380,25 @@ test("renames container-high but leaves sibling container-low and base container
 
     const result = transformImportPaths(source, "/tmp/x.css");
 
-    assert.equal(result.text.includes("--jkl-color-background-container-high"), false);
-    assert.equal(result.text.includes("--jkl-color-background-container-low"), false);
-    assert.equal(result.text.includes("var(--jkl-color-background-container)"), true,
-        "base container token must survive unchanged");
+    assert.equal(
+        result.text.includes("--jkl-color-background-container-high"),
+        false,
+    );
+    assert.equal(
+        result.text.includes("--jkl-color-background-container-low"),
+        false,
+    );
+    assert.equal(
+        result.text.includes("var(--jkl-color-background-container)"),
+        true,
+        "base container token must survive unchanged",
+    );
     assert.equal(result.replacements, 2);
 });
 
 test("does not rename alert-info token that has a longer suffix", () => {
-    const source = ".x { background: var(--jkl-color-background-alert-info-extra); }";
+    const source =
+        ".x { background: var(--jkl-color-background-alert-info-extra); }";
 
     const result = transformImportPaths(source, "/tmp/x.css");
 
@@ -392,7 +418,10 @@ test("renames token used as a custom property definition, not just inside var()"
 
     assert.equal(result.text.includes("--jkl-color-background-action:"), false);
     assert.equal(result.text.includes("--jkl-color-text-inverted:"), false);
-    assert.equal(result.text.includes("--jkl-color-background-contrast:"), true);
+    assert.equal(
+        result.text.includes("--jkl-color-background-contrast:"),
+        true,
+    );
     assert.equal(result.text.includes("--jkl-color-text-on-contrast:"), true);
 });
 
@@ -430,7 +459,10 @@ test("renames only the fallback font-family if primary is absent", () => {
 
     const result = transformImportPaths(source, "/tmp/icons.css");
 
-    assert.equal(result.text.includes("Fremtind Material Symbols Fallback"), false);
+    assert.equal(
+        result.text.includes("Fremtind Material Symbols Fallback"),
+        false,
+    );
     assert.equal(result.text.includes("Jokul Icons Fallback"), true);
     assert.equal(result.replacements, 1);
 });
@@ -618,8 +650,14 @@ test("warns about bg-background-interactive Tailwind class", () => {
 
     const result = transformImportPaths(source, "/tmp/cmp.tsx");
 
-    assert.equal(result.warnings.some((w) => /background-interactive/.test(w)), true);
-    assert.equal(result.warnings.filter((w) => /background-interactive/.test(w)).length, 1);
+    assert.equal(
+        result.warnings.some((w) => /background-interactive/.test(w)),
+        true,
+    );
+    assert.equal(
+        result.warnings.filter((w) => /background-interactive/.test(w)).length,
+        1,
+    );
 });
 
 test("warns about border-border-separator Tailwind class", () => {
@@ -627,7 +665,12 @@ test("warns about border-border-separator Tailwind class", () => {
 
     const result = transformImportPaths(source, "/tmp/cmp.tsx");
 
-    assert.equal(result.warnings.some((w) => /border-border-separator/.test(w) || /kantklasser/.test(w)), true);
+    assert.equal(
+        result.warnings.some(
+            (w) => /border-border-separator/.test(w) || /kantklasser/.test(w),
+        ),
+        true,
+    );
 });
 
 // --- does not warn about valid 5.0 patterns ---
@@ -646,3 +689,59 @@ test("does not warn about valid 5.0 patterns", () => {
 
     assert.deepEqual(result.warnings, []);
 });
+
+test('ExpandablePanel: fjerner variant="fill" prop (fill er nå default)', () => {
+    const source = `<ExpandablePanel variant="fill" open={open}>`;
+    const result = transformImportPaths(source, "/tmp/MyPage.tsx");
+    assert.equal(result.text, "<ExpandablePanel open={open}>");
+    assert.equal(result.changed, true);
+});
+
+test("ExpandablePanel: fjerner variant={'fill'} prop", () => {
+    const source = `<ExpandablePanel variant={'fill'}>`;
+    const result = transformImportPaths(source, "/tmp/MyPage.tsx");
+    assert.equal(result.text, "<ExpandablePanel>");
+    assert.equal(result.changed, true);
+});
+
+test('ExpandablePanel: endrer variant="stroke" til outlined', () => {
+    const source = `<ExpandablePanel variant="stroke" className="my-panel">`;
+    const result = transformImportPaths(source, "/tmp/MyPage.tsx");
+    assert.equal(
+        result.text,
+        `<ExpandablePanel outlined className="my-panel">`,
+    );
+    assert.equal(result.changed, true);
+});
+
+test("ExpandablePanel: endrer variant={'stroke'} til outlined", () => {
+    const source = `<ExpandablePanel variant={'stroke'}>`;
+    const result = transformImportPaths(source, "/tmp/MyPage.tsx");
+    assert.equal(result.text, "<ExpandablePanel outlined>");
+    assert.equal(result.changed, true);
+});
+
+test("ExpandablePanel: endrer CSS-klasse jkl-expandable--stroke til jkl-expandable-panel--outlined", () => {
+    const source = ".jkl-expandable--stroke { border-color: red; }";
+    const result = transformImportPaths(source, "/tmp/custom.scss");
+    assert.equal(
+        result.text,
+        ".jkl-expandable-panel--outlined { border-color: red; }",
+    );
+    assert.equal(result.changed, true);
+});
+
+test("ExpandablePanel: håndterer flerlinjet JSX korrekt", () => {
+    const source = `<ExpandablePanel
+    variant="fill"
+    open={open}
+>`;
+    const result = transformImportPaths(source, "/tmp/MyPage.tsx");
+    assert.equal(
+        result.text,
+        `<ExpandablePanel
+    open={open}
+>`,
+    );
+    assert.equal(result.changed, true);
+});

package/codemods/import-paths.mjs

@@ -1,15 +1,19 @@
-import { readdir, readFile, stat, writeFile } from "node:fs/promises";
+import { readFile, readdir, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 
 import {
-    applyDirectReplacements,
+    applyCssTokenRenames,
+    applyTailwindColorRenames,
+} from "./transforms/color-tokens.mjs";
+import { applyExpandablePanelTransforms } from "./transforms/expandable-panel.mjs";
+import { applyFontFamilyReplacements } from "./transforms/font-family.mjs";
+import {
+    BASE_OR_COMPONENT_CSS_PATTERN,
     applyBetaStyleReplacements,
+    applyDirectReplacements,
     removeRedundantWebfontsCssImport,
     reorderConfiguredFontImport,
-    BASE_OR_COMPONENT_CSS_PATTERN,
 } from "./transforms/import-specifiers.mjs";
-import { applyCssTokenRenames, applyTailwindColorRenames } from "./transforms/color-tokens.mjs";
-import { applyFontFamilyReplacements } from "./transforms/font-family.mjs";
 import { collectManualMigrationWarnings } from "./transforms/warnings.mjs";
 
 const TEXT_EXTENSIONS = new Set([
@@ -51,7 +55,9 @@ const IGNORED_FILE_PATTERNS = [
 
 function shouldIgnoreFile(filePath) {
     const normalizedPath = filePath.split(path.sep).join("/");
-    return IGNORED_FILE_PATTERNS.some((pattern) => normalizedPath.includes(pattern));
+    return IGNORED_FILE_PATTERNS.some((pattern) =>
+        normalizedPath.includes(pattern),
+    );
 }
 
 function shouldIgnoreDirectory(directoryPath) {
@@ -65,7 +71,8 @@ export function transformImportPaths(text, filePath = "") {
     const beta = applyBetaStyleReplacements(direct.text);
     const cssTokens = applyCssTokenRenames(beta.text);
     const tailwindColors = applyTailwindColorRenames(cssTokens.text);
-    let next = tailwindColors.text;
+    const expandablePanel = applyExpandablePanelTransforms(tailwindColors.text);
+    let next = expandablePanel.text;
     let reordered = false;
 
     if (/\.(sass|scss)$/i.test(filePath)) {
@@ -79,7 +86,10 @@ export function transformImportPaths(text, filePath = "") {
         ...collectManualMigrationWarnings(text),
     ];
 
-    if (webfontsRemoval.count > 0 && !BASE_OR_COMPONENT_CSS_PATTERN.test(next)) {
+    if (
+        webfontsRemoval.count > 0 &&
+        !BASE_OR_COMPONENT_CSS_PATTERN.test(next)
+    ) {
         warnings.push(
             "Manuell vurdering: fjernet import av `styles/fonts/webfonts.css`. `@font-face`-definisjonene ligger nå i `@fremtind/jokul/styles/base.css`, så den må importeres for at fontene skal lastes.",
         );
@@ -94,7 +104,8 @@ export function transformImportPaths(text, filePath = "") {
             webfontsRemoval.count +
             fontFamily.count +
             cssTokens.count +
-            tailwindColors.count,
+            tailwindColors.count +
+            expandablePanel.count,
         warnings,
         reordered,
     };
@@ -109,7 +120,9 @@ async function collectFiles(targetPath, collected) {
         }
 
         const entries = await readdir(targetPath, { withFileTypes: true });
-        const sortedEntries = [...entries].sort((a, b) => a.name.localeCompare(b.name));
+        const sortedEntries = [...entries].sort((a, b) =>
+            a.name.localeCompare(b.name),
+        );
 
         for (const entry of sortedEntries) {
             if (entry.isDirectory() && IGNORED_DIRECTORIES.has(entry.name)) {
@@ -121,7 +134,10 @@ async function collectFiles(targetPath, collected) {
         return collected;
     }
 
-    if (TEXT_EXTENSIONS.has(path.extname(targetPath)) && !shouldIgnoreFile(targetPath)) {
+    if (
+        TEXT_EXTENSIONS.has(path.extname(targetPath)) &&
+        !shouldIgnoreFile(targetPath)
+    ) {
         collected.push(targetPath);
     }
 
@@ -133,8 +149,14 @@ function parseArguments(rawArgs) {
     const targets = [];
 
     for (const arg of rawArgs) {
-        if (arg === "--dry-run") { options.dryRun = true; continue; }
-        if (arg === "--verbose") { options.verbose = true; continue; }
+        if (arg === "--dry-run") {
+            options.dryRun = true;
+            continue;
+        }
+        if (arg === "--verbose") {
+            options.verbose = true;
+            continue;
+        }
         if (arg === "--help" || arg === "-h") {
             throw new Error(
                 "Bruk: jokul codemod [import-paths] [sti ...] [--dry-run] [--verbose]",
@@ -181,7 +203,9 @@ export async function runImportPathsCodemod(rawArgs = []) {
         }
 
         if (options.verbose || options.dryRun) {
-            console.log(`${options.dryRun ? "Ville endret" : "Endret"} ${filePath}`);
+            console.log(
+                `${options.dryRun ? "Ville endret" : "Endret"} ${filePath}`,
+            );
         }
     }
 

package/codemods/transforms/expandable-panel.mjs

@@ -0,0 +1,41 @@
+// Variant-prop-endringer i ExpandablePanel:
+//   variant="fill"   → fjernet (fill er default-atferd, prop eksisterer ikke lenger)
+//   variant="stroke" → outlined (boolean prop)
+//
+// CSS-klasseendring:
+//   jkl-expandable--stroke → jkl-expandable--outlined
+
+const STROKE_PROP_PATTERN =
+    /variant=(?:"stroke"|'stroke'|\{"stroke"}|\{'stroke'})/;
+
+const FILL_PROP_PATTERN = /\s+variant=(?:"fill"|'fill'|\{"fill"}|\{'fill'})/;
+
+const CSS_CLASS_PATTERN = /\bjkl-expandable--stroke\b/g;
+
+// Matches an ExpandablePanel opening or self-closing tag.
+// [^>]* is safe for JSX since > in prop values must be escaped ({">"}  or >).
+const EXPANDABLE_PANEL_TAG = /<ExpandablePanel\b[^>]*>/g;
+
+export function applyExpandablePanelTransforms(text) {
+    let next = text;
+    let count = 0;
+
+    next = next.replace(CSS_CLASS_PATTERN, () => {
+        count++;
+        return "jkl-expandable-panel--outlined";
+    });
+
+    next = next.replace(EXPANDABLE_PANEL_TAG, (tag) =>
+        tag
+            .replace(FILL_PROP_PATTERN, () => {
+                count++;
+                return "";
+            })
+            .replace(STROKE_PROP_PATTERN, () => {
+                count++;
+                return "outlined";
+            }),
+    );
+
+    return { text: next, count };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.0-next.13",
+  "version": "5.0.0-next.14",
   "type": "module",
   "publishConfig": {
     "access": "public"