[aksel.nav.no] Show breakpoints in GuidePanel examples (#3192)

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
navikt · Oct 2, 2024 · 3a239e4 · 3a239e4
1 parent 4fcfaf3
commit 3a239e4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 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
@@ -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
@@ -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
@@ -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 = {