From 3a239e4e17f204086b6497f258367fa209401500 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:23:10 +0200
Subject: [PATCH] [aksel.nav.no] Show breakpoints in GuidePanel examples
 (#3192)

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
---
 .../components/website-modules/examples/withDsExample.tsx    | 5 ++++-
 aksel.nav.no/website/pages/eksempler/guidepanel/demo.tsx     | 2 +-
 aksel.nav.no/website/pages/eksempler/guidepanel/poster.tsx   | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
index 4fe7888485..a2a408d54e 100644
--- a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
+++ b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
@@ -7,7 +7,7 @@ import {
   MonitorIcon,
   TabletIcon,
 } from "@navikt/aksel-icons";
-import { HStack } from "@navikt/ds-react";
+import { Box, HStack } from "@navikt/ds-react";
 import styles from "./examples.module.css";
 
 type withDsT = {
@@ -70,6 +70,9 @@ export const withDsExample = (
           style={{ background: getBg(background) }}
         >
           <Icon aria-hidden fontSize="1.5rem" /> {`${breakpoint}`}
+          <Box marginInline="2 0" className="text-text-subtle">
+            {width}px
+          </Box>
         </HStack>
       );
     };
diff --git a/aksel.nav.no/website/pages/eksempler/guidepanel/demo.tsx b/aksel.nav.no/website/pages/eksempler/guidepanel/demo.tsx
index 973e4c61fb..1d43870a85 100644
--- a/aksel.nav.no/website/pages/eksempler/guidepanel/demo.tsx
+++ b/aksel.nav.no/website/pages/eksempler/guidepanel/demo.tsx
@@ -12,7 +12,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { showBreakpoints: true });
 
 /* Storybook story */
 export const Demo = {
diff --git a/aksel.nav.no/website/pages/eksempler/guidepanel/poster.tsx b/aksel.nav.no/website/pages/eksempler/guidepanel/poster.tsx
index fe54e4ba1e..8e82069ddc 100644
--- a/aksel.nav.no/website/pages/eksempler/guidepanel/poster.tsx
+++ b/aksel.nav.no/website/pages/eksempler/guidepanel/poster.tsx
@@ -12,7 +12,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { showBreakpoints: true });
 
 /* Storybook story */
 export const Demo = {