@helsenorge/designsystem-react 11.1.0 → 11.2.0

package/hooks/useBreakpoint.js

@@ -24,42 +24,24 @@ const useBreakpoint = () => {
     typeof window.matchMedia !== "undefined" ? getCurrentBreakpoint() : Breakpoint.xxs
   );
   useEffect(() => {
-    const handleMediaQueryEvent = (event) => {
-      switch (event.media) {
-        case screen.xl:
-          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);
-          return;
-        case screen.lg:
-          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);
-          return;
-        case screen.md:
-          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);
-          return;
-        case screen.sm:
-          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);
-          return;
-        case screen.xs:
-          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);
-          return;
-        default:
-          setBreakpoint(Breakpoint.xxs);
-      }
-    };
-    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {
+    const mediaQueryList = Object.values(screen).map((mediaQuery) => {
       const mq = window.matchMedia(mediaQuery);
+      const handler = () => {
+        setBreakpoint(getCurrentBreakpoint());
+      };
       if (mq.addEventListener) {
-        mq.addEventListener("change", handleMediaQueryEvent);
+        mq.addEventListener("change", handler);
       } else if (mq.addListener) {
-        mq.addListener(handleMediaQueryEvent);
+        mq.addListener(handler);
       }
-      return mq;
+      return { mq, handler };
     });
     return () => {
-      mediaQueryList.forEach((mq) => {
+      mediaQueryList.forEach(({ mq, handler }) => {
         if (mq.removeEventListener) {
-          mq.removeEventListener("change", handleMediaQueryEvent);
+          mq.removeEventListener("change", handler);
         } else if (mq.removeListener) {
-          mq.removeListener(handleMediaQueryEvent);
+          mq.removeListener(handler);
         }
       });
     };

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n    typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n  );\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n    typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n  );\n\n  useEffect(() => {\n    const mediaQueryList = Object.values(screen).map(mediaQuery => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      const handler = (): void => {\n        setBreakpoint(getCurrentBreakpoint());\n      };\n\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handler);\n      } else if (mq.addListener) {\n        mq.addListener(handler);\n      }\n      return { mq, handler };\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(({ mq, handler }) => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handler);\n        } else if (mq.removeListener) {\n          mq.removeListener(handler);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACd,UAAM,iBAAiB,OAAO,OAAO,MAAM,EAAE,IAAI,CAAc,eAAA;AACvD,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,YAAM,UAAU,MAAY;AAC1B,sBAAc,sBAAsB;AAAA,MACtC;AAEA,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,OAAO;AAAA,MAAA,WAC5B,GAAG,aAAa;AACzB,WAAG,YAAY,OAAO;AAAA,MAAA;AAEjB,aAAA,EAAE,IAAI,QAAQ;AAAA,IAAA,CACtB;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAC,EAAE,IAAI,cAAc;AAC1C,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,OAAO;AAAA,QAAA,WAC/B,GAAG,gBAAgB;AAC5B,aAAG,eAAe,OAAO;AAAA,QAAA;AAAA,MAC3B,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/resources/HN.Designsystem.ArticleTeaser.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonClose": "Show more",
+  "expandButtonOpen": "Show less"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.ArticleTeaser.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonClose": "Vis mer",
+  "expandButtonOpen": "Vis mindre"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Dropdown.nb-NO.json.d.ts

@@ -1,6 +1,5 @@
 declare const _default: {
-  "closeText": "Lukk",
-  "testtest": "testtest"
+  "closeText": "Lukk"
 }
 ;
 

package/resources/HN.Designsystem.InfoTeaser.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Show less",
+  "expandButtonClose": "Show more"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.InfoTeaser.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Vis mindre",
+  "expandButtonClose": "Vis mer"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Panel.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "See details",
+  "expandButtonClose": "Hide details"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Panel.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Se detaljer",
+  "expandButtonClose": "Skjul detaljer"
+}
+;
+
+export default _default;

package/scss/supernova/styles/colors.css

@@ -73,7 +73,7 @@
   --color-base-background-dark-cherry: #c83521;
   --color-base-graphics-onlight: #000000;
   --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #989693;
+  --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
   --color-help-background: #efe4fd;
   --color-help-graphics: #5b22a6;
@@ -184,4 +184,6 @@
   /* In a few cases where coloured text is required to stress the semantics of an error notification text */
   --color-notification-text-error: #a31f0e;
   --color-notification-text-success: #078141;
+  --color-base-border-neutral-emphasized: #bdbab9;
+  --color-notification-status-draft: #7d7c79;
 }