[Darkside] Added hook for renaming className-prefix from navds-> aksel- (#3585)

* ✨ MVP replacement function

* ✨ Updated className replace function

Author: KenAJoh

@navikt/core/react/package.json

@@ -620,7 +620,7 @@
     "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
-    "test:watch": "vitest watch"
+    "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts"
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",

@navikt/core/react/src/theme/RenameCSS.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from "vitest";
+import { compositeClassFunction } from "./Theme";
+
+const start = "navds-accordion testclass navds-heading endclass";
+const end =
+  "startclass navds-accordion navds-heading endclass navds-accordion__header";
+
+const both = start + " " + end;
+
+describe("RenameCSS", () => {
+  test("String starts with navds", () => {
+    expect(compositeClassFunction(start)).toBe(
+      "aksel-accordion testclass aksel-heading endclass",
+    );
+  });
+
+  test("String ends with navds", () => {
+    expect(compositeClassFunction(end)).toBe(
+      "startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String starts and ends with navds", () => {
+    expect(compositeClassFunction(both)).toBe(
+      "aksel-accordion testclass aksel-heading endclass startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String does not contain navds", () => {
+    expect(compositeClassFunction("startclass endclass")).toBe(
+      "startclass endclass",
+    );
+  });
+
+  test("String is empty", () => {
+    expect(compositeClassFunction("")).toBe("");
+  });
+
+  test("String contains navds as a substring", () => {
+    expect(compositeClassFunction("startclass test-navds-class endclass")).toBe(
+      "startclass test-navds-class endclass",
+    );
+  });
+
+  test("String contains multiple navds occurrences", () => {
+    const input = "navds-button navds-icon navds-label";
+    const expected = "aksel-button aksel-icon aksel-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with special characters", () => {
+    const input = "navds-button! navds-icon@ navds-#label navds#-label";
+    const expected = "aksel-button! aksel-icon@ aksel-#label navds#-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains mixed navds and non-navds classes", () => {
+    const input = "navds-button custom-class navds-icon";
+    const expected = "aksel-button custom-class aksel-icon";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains only navds", () => {
+    const input = "navds";
+    const expected = "navds";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with numbers", () => {
+    const input = "navds-1 navds-2 navds-3";
+    const expected = "aksel-1 aksel-2 aksel-3";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains different casings", () => {
+    const input = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    const expected = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+});

@navikt/core/react/src/theme/Theme.tsx

@@ -4,6 +4,43 @@ import { Slot } from "../slot/Slot";
 import { createContext } from "../util/create-context";
 import { AsChildProps } from "../util/types";
 
+/* -------------------------------------------------------------------------- */
+/*                               CSS Trsnalation                              */
+/* -------------------------------------------------------------------------- */
+type RenameCSSContext = {
+  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
+};
+
+const [RenameCSSProvider, useRenameCSS] = createContext<RenameCSSContext>({
+  hookName: "useRenameCSS",
+  name: "RenameCSS",
+  providerName: "RenameCSSProvider",
+  defaultValue: { cn: cl },
+});
+
+export const compositeClassFunction = (
+  ...inputs: Parameters<typeof cl>
+): string => {
+  const classes = cl(inputs)
+    /* Replaces only if start of string  "navds- navds-"*/
+    .replace(/^navds-/g, "aksel-")
+    /* Replaces all " navds-" hits */
+    .replace(/\snavds-/g, " aksel-");
+
+  return classes.trim();
+};
+
+const RenameCSS = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RenameCSSProvider cn={compositeClassFunction}>
+      {children}
+    </RenameCSSProvider>
+  );
+};
+
+/* -------------------------------------------------------------------------- */
+/*                               Theme provider                               */
+/* -------------------------------------------------------------------------- */
 type ThemeContext = {
   /**
    * Color theme
@@ -45,16 +82,18 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
 
     return (
       <ThemeProvider theme={theme}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-        >
-          {children}
-        </SlotElement>
+        <RenameCSS>
+          <SlotElement
+            ref={ref}
+            className={cl("navds-theme", className, theme)}
+            data-background={hasBackground}
+          >
+            {children}
+          </SlotElement>
+        </RenameCSS>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };