@forsakringskassan/devindex-menu 2.1.10 → 2.2.0

package/README.md

@@ -28,8 +28,32 @@ require("@forsakringskassan/devindex-menu")([
 
 When execOnChange is set to a value, the global function with this name will be called on onChange of the dropdown list.
 
+### With options
+
+The menu can have an options object as an optional second parameter.
+
+```js
+require("@forsakringskassan/devindex-menu")(
+    [
+        {
+            key: "example",
+            title: "Example",
+            options: [
+                { title: "Default mock", value: "default" },
+                { title: "Special mock", value: "special" },
+            ],
+        },
+    ],
+    {
+        position: "right",
+    },
+);
+```
+
 ## API
 
+Menu content
+
 ```js
 [
     {
@@ -45,6 +69,16 @@ When execOnChange is set to a value, the global function with this name will be
 ]
 ```
 
+Options
+
+```js
+[
+    {
+        position: "left" | "right" (optional, default: "left"), // Controls if the menu is placed on the left or the right side of the page.
+    },
+]
+```
+
 ## Use mocks directly
 
 It's also possible to use mocks for `@forsakringskassan/apimock-express` directly.

package/dist/cjs/menu.js

@@ -1237,6 +1237,19 @@ var style_default = `.secret-menu {
   color: #efefef;
   position: fixed;
 }
+.secret-menu.secret-menu--right {
+  left: auto;
+  right: 0;
+}
+.secret-menu.secret-menu--right .toggle {
+  left: auto;
+  right: 0px;
+  top: 40px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
 .secret-menu .toggle {
   border: 0;
   position: fixed;
@@ -1269,6 +1282,10 @@ var style_default = `.secret-menu {
   width: 300px;
   overflow: auto;
 }
+.secret-menu.open.secret-menu--right .toggle {
+  left: auto;
+  right: 300px;
+}
 .secret-menu.open .toggle {
   left: 300px;
 }
@@ -1396,7 +1413,11 @@ function entryFromMock(mock) {
 var defaultSetting = {
   type: "select"
 };
-var menu_default = (userSettingsAndMocks) => {
+var defaultOptions = {
+  position: "left"
+};
+var menu_default = (userSettingsAndMocks, menuOptions) => {
+  const options = { ...defaultOptions, ...menuOptions };
   document.head.insertAdjacentHTML("beforeend", `<style>${style_default}</style>`);
   document.body.insertAdjacentHTML(
     "beforeend",
@@ -1415,7 +1436,7 @@ var menu_default = (userSettingsAndMocks) => {
   document.body.insertAdjacentHTML(
     "beforeend",
     `
-    <div class="secret-menu" aria-hidden="true">
+    <div class="secret-menu${options.position === "right" ? " secret-menu--right" : ""}" aria-hidden="true">
         <button type="button" class="toggle" tabindex="-1" onclick="toggleMenu()">
             <span></span>
             <span></span>

package/dist/esm/menu.js

@@ -1212,6 +1212,19 @@ var style_default = `.secret-menu {
   color: #efefef;
   position: fixed;
 }
+.secret-menu.secret-menu--right {
+  left: auto;
+  right: 0;
+}
+.secret-menu.secret-menu--right .toggle {
+  left: auto;
+  right: 0px;
+  top: 40px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
 .secret-menu .toggle {
   border: 0;
   position: fixed;
@@ -1244,6 +1257,10 @@ var style_default = `.secret-menu {
   width: 300px;
   overflow: auto;
 }
+.secret-menu.open.secret-menu--right .toggle {
+  left: auto;
+  right: 300px;
+}
 .secret-menu.open .toggle {
   left: 300px;
 }
@@ -1371,7 +1388,11 @@ function entryFromMock(mock) {
 var defaultSetting = {
   type: "select"
 };
-var menu_default = (userSettingsAndMocks) => {
+var defaultOptions = {
+  position: "left"
+};
+var menu_default = (userSettingsAndMocks, menuOptions) => {
+  const options = { ...defaultOptions, ...menuOptions };
   document.head.insertAdjacentHTML("beforeend", `<style>${style_default}</style>`);
   document.body.insertAdjacentHTML(
     "beforeend",
@@ -1390,7 +1411,7 @@ var menu_default = (userSettingsAndMocks) => {
   document.body.insertAdjacentHTML(
     "beforeend",
     `
-    <div class="secret-menu" aria-hidden="true">
+    <div class="secret-menu${options.position === "right" ? " secret-menu--right" : ""}" aria-hidden="true">
         <button type="button" class="toggle" tabindex="-1" onclick="toggleMenu()">
             <span></span>
             <span></span>

package/dist/types/menu.d.ts

@@ -41,11 +41,14 @@ export interface ScenarioSetting {
 	cookies: Record<string, string | undefined>;
 }
 export type Settings = SelectSettings | LinkSettings | TextSettings | ScenarioSetting;
+export interface MenuOptions {
+	position?: "left" | "right";
+}
 export declare const ONE_MONTH_IN_SECONDS = 2592000;
 /**
  * @param userSettingsAndMocks - An array of user settings and/or mocks to generate the menu from.
  */
-declare const _default: (userSettingsAndMocks: Array<Settings | Mock>) => void;
+declare const _default: (userSettingsAndMocks: Array<Settings | Mock>, menuOptions?: MenuOptions) => void;
 
 export {
 	_default as default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/devindex-menu",
-  "version": "2.1.10",
+  "version": "2.2.0",
   "description": "Menu for local development",
   "keywords": [
     "development",
@@ -36,13 +36,13 @@
     "prebuild": "tsc",
     "build": "node ./scripts/generate.mjs",
     "postbuild": "npm run types:main && npm run types:pageobject",
-    "types:main": "dts-bundle-generator -o dist/types/menu.d.ts temp/types/menu.d.ts",
-    "types:pageobject": "dts-bundle-generator -o dist/types/pageobjects.d.ts temp/types/pageobjects.d.ts",
     "eslint": "eslint --cache .",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
+    "start": "node ./scripts/serve.mjs",
     "test": "npm run prettier:check && npm run eslint",
-    "start": "node ./scripts/serve.mjs"
+    "types:main": "dts-bundle-generator -o dist/types/menu.d.ts temp/types/menu.d.ts",
+    "types:pageobject": "dts-bundle-generator -o dist/types/pageobjects.d.ts temp/types/pageobjects.d.ts"
   },
   "commitlint": {
     "extends": "@forsakringskassan/commitlint-config/no-jira"
@@ -51,34 +51,34 @@
   "release": {
     "extends": "@forsakringskassan/semantic-release-config"
   },
+  "dependencies": {
+    "@fkui/logic": "6.43.0"
+  },
   "devDependencies": {
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.2",
-    "@fkui/tsconfig": "6.42.0",
-    "@forsakringskassan/apimock-express": "2.15.0",
-    "@forsakringskassan/commitlint-config": "3.3.10",
-    "@forsakringskassan/eslint-config": "14.1.2",
-    "@forsakringskassan/eslint-config-cli": "14.1.0",
-    "@forsakringskassan/eslint-config-cypress": "14.1.3",
-    "@forsakringskassan/eslint-config-jest": "14.1.0",
-    "@forsakringskassan/eslint-config-typescript": "14.1.0",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "14.1.0",
-    "@forsakringskassan/prettier-config": "3.3.6",
+    "@fkui/tsconfig": "6.43.0",
+    "@forsakringskassan/apimock-express": "2.15.1",
+    "@forsakringskassan/commitlint-config": "3.3.11",
+    "@forsakringskassan/eslint-config": "14.1.14",
+    "@forsakringskassan/eslint-config-cli": "14.1.11",
+    "@forsakringskassan/eslint-config-cypress": "14.1.12",
+    "@forsakringskassan/eslint-config-jest": "14.1.9",
+    "@forsakringskassan/eslint-config-typescript": "14.1.10",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "14.1.10",
+    "@forsakringskassan/prettier-config": "3.3.9",
     "@tsconfig/node22": "22.0.5",
     "@types/node": "22.19.17",
-    "cypress": "15.13.0",
+    "cypress": "15.14.0",
     "cypress-html-validate": "8.1.0",
     "dts-bundle-generator": "9.5.1",
     "esbuild": "0.28.0",
     "esbuild-sass-plugin": "3.7.0",
-    "npm-pkg-lint": "4.6.4",
+    "npm-pkg-lint": "4.6.5",
     "sass": "1.99.0",
     "typescript": "5.9.3"
   },
   "engines": {
     "node": ">= 22.0.0"
-  },
-  "dependencies": {
-    "@fkui/logic": "6.42.0"
   }
 }