[aksel.nav.no] Adjust exaples of Box and Bleed (#3321)

Co-authored-by: Ken <[email protected]>
navikt · Nov 5, 2024 · ef44f2a · ef44f2a
1 parent 916b383
commit ef44f2a
Show file tree

Hide file tree

Showing 18 changed files with 79 additions and 108 deletions.
diff --git a/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx b/@navikt/core/react/src/layout/bleed/Bleed.stories.tsx
@@ -20,11 +20,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -33,11 +29,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -46,11 +38,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -59,11 +47,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx
@@ -5,7 +5,7 @@ const Example = () => {
   return (
     <DemoWrapper>
       <Bleed marginInline="10" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+        <Box padding="3" background="surface-alt-3-subtle">
           <HStack justify="center">Med asChild</HStack>
         </Box>
       </Bleed>
@@ -24,16 +24,14 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
   render: Example,
 };
 
 export const args = {
-  index: 4,
-  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
+  index: 5,
+  desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer antall DOM-noder og forenkler output. [Les mer om asChild her](https://aksel.nav.no/grunnleggende/kode/layout-primitives#613715c234c8).",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/demo.tsx
@@ -5,7 +5,7 @@ const Example = () => {
   return (
     <DemoWrapper>
       <Bleed marginInline="10" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+        <Box padding="3" background="surface-alt-3-subtle">
           <HStack justify="center">marginInline</HStack>
         </Box>
       </Bleed>
@@ -24,9 +24,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx
@@ -6,28 +6,28 @@ const Example = () => {
     <VStack gap="4">
       <DemoWrapper>
         <Bleed marginInline="10 0" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
             <HStack justify="center">marginInline start</HStack>
           </Box>
         </Bleed>
       </DemoWrapper>
       <DemoWrapper>
         <Bleed marginInline="0 10" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
             <HStack justify="center">marginInline end</HStack>
           </Box>
         </Bleed>
       </DemoWrapper>
       <DemoWrapper>
         <Bleed marginBlock="10 0" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
             <HStack justify="center">marginBlock start</HStack>
           </Box>
         </Bleed>
       </DemoWrapper>
       <DemoWrapper>
         <Bleed marginBlock="0 10" asChild>
-          <Box padding="3" className="p" background="surface-alt-3-subtle">
+          <Box padding="3" background="surface-alt-3-subtle">
             <HStack justify="center">marginBlock end</HStack>
           </Box>
         </Bleed>
@@ -47,15 +47,13 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
   render: Example,
 };
 
 export const args = {
-  index: 1,
+  index: 2,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx
@@ -1,39 +1,41 @@
-import { Bleed, Box, HStack } from "@navikt/ds-react";
+import { Bleed, BodyLong, Box, HStack, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <DemoWrapper>
+    <Page.Block width="text">
+      <BodyLong spacing>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
+        maximus mauris. Sed nec fermentum orci, vel tempus tortor. Praesent
+        lectus neque, hendrerit et sollicitudin quis, imperdiet vel est.
+      </BodyLong>
+
       <Bleed marginInline="full" asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
-          <HStack justify="center">Full</HStack>
+        <Box padding="3" marginBlock="0 7" background="surface-alt-3-subtle">
+          <HStack justify="center">
+            Bleed med marginInline=&quot;full&quot;
+          </HStack>
         </Box>
       </Bleed>
-    </DemoWrapper>
-  );
-};
 
-function DemoWrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <Box background="surface-alt-3" padding="5" borderRadius="large">
-      <Box background="surface-subtle" padding="5" borderRadius="medium">
-        {children}
-      </Box>
-    </Box>
+      <BodyLong>
+        Sed euismod mi nec purus euismod scelerisque. Nam tristique tincidunt
+        nisi ultricies sollicitudin. Etiam maximus ex sit amet turpis vestibulum
+        pharetra.
+      </BodyLong>
+    </Page.Block>
   );
-}
+};
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
   render: Example,
 };
 
 export const args = {
-  index: 3,
-  desc: "I noen tilfeller må du også sette 'overflow-x: hidden;' på body for å unngå horisontal scrollbar. Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout",
+  index: 1,
+  desc: "Med marginInline=full kan du få enkeltelementer til å dekke hele skjermbredden mens resten av innholdet følger bredden satt av parent-container som vanlig. OBS: Du må kanskje sette 'overflow-x: hidden' på body for å unngå horisontal scrollbar.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/optical-alignment.tsx
@@ -35,16 +35,14 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
   render: Example,
 };
 
 export const args = {
-  index: 5,
+  index: 6,
   desc: "Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/reflective-padding.tsx
@@ -5,15 +5,16 @@ const Example = () => {
   return (
     <DemoWrapper>
       <Bleed marginInline="10" asChild reflectivePadding>
-        <Box className="p" background="surface-alt-3-subtle">
+        <Box background="surface-alt-3-subtle">
           reflectivePadding lar innhold forbli der det ville vært uten Bleed
         </Box>
       </Bleed>
       <Bleed marginInline="10" asChild>
-        <Box className="p" background="surface-alt-3-subtle">
-          Uten reflectivePadding
+        <Box background="surface-alt-3-subtle">
+          Bleed uten reflectivePadding
         </Box>
       </Bleed>
+      <Box background="surface-alt-3-subtle">Uten Bleed</Box>
     </DemoWrapper>
   );
 };
@@ -29,15 +30,13 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
 }
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
   render: Example,
 };
 
 export const args = {
-  index: 2,
+  index: 4,
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx b/aksel.nav.no/website/pages/eksempler/primitive-bleed/responsive.tsx
@@ -4,10 +4,10 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <DemoWrapper>
-      <Bleed marginInline={{ xs: "8", md: "12", lg: "16" }} asChild>
-        <Box padding="3" className="p" background="surface-alt-3-subtle">
+      <Bleed marginInline={{ xs: "8", sm: "12", md: "16" }} asChild>
+        <Box padding="3" background="surface-alt-3-subtle">
           <HStack justify="center">
-            <BodyLong>xs: 8, md: 12, lg: 16</BodyLong>
+            <BodyLong>xs: 8, sm: 12, md: 16</BodyLong>
           </HStack>
         </Box>
       </Bleed>
@@ -20,7 +20,7 @@ function DemoWrapper({ children }: { children: React.ReactNode }) {
     <Box
       background="surface-alt-3"
       paddingBlock="4"
-      paddingInline={{ xs: "4", md: "8", lg: "12" }}
+      paddingInline={{ xs: "4", sm: "8", md: "12" }}
       borderRadius="large"
     >
       <Box background="surface-subtle" padding="4" borderRadius="medium">
@@ -41,6 +41,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 1,
-  desc: "Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.",
+  index: 3,
+  desc: "Både marginBlock og marginInline er reponsive, slik at du kan sette negativ margin dynamisk basert på brekkpunkter.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx
@@ -5,25 +5,20 @@ const Example = () => {
   return (
     <VStack gap="4">
       <Box padding="4" background="surface-alt-3-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-alt-3-subtle&quot;
       </Box>
       <Box padding="4" background="surface-info-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-info-subtle&quot;
       </Box>
       <Box padding="4" background="surface-success-subtle">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
-        ipsum!
+        Denne boksen har background=&quot;surface-success-subtle&quot;
       </Box>
     </VStack>
   );
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
@@ -32,5 +27,5 @@ export const Demo = {
 
 export const args = {
   index: 0,
-  desc: "'Background'-prop lar deg endre farge basert på tilgjengelige tokens",
+  desc: "Propen 'background' lar deg sette bakgrunnsfarge basert på tokens.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx
@@ -5,25 +5,25 @@ const Example = () => {
   return (
     <VStack gap="4">
       <Box
+        padding="4"
         background="surface-alt-3-subtle"
         borderColor="border-alt-3"
-        padding="4"
         borderWidth="4"
       >
         Alt-3
       </Box>
       <Box
+        padding="4"
         background="surface-info-subtle"
         borderColor="border-info"
-        padding="4"
         borderWidth="4"
       >
         Info
       </Box>
       <Box
+        padding="4"
         background="surface-success-subtle"
         borderColor="border-success"
-        padding="4"
         borderWidth="4"
       >
         Success
@@ -33,9 +33,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, {
-  showBreakpoints: true,
-});
+export default withDsExample(Example);
 
 /* Storybook story */
 export const Demo = {
@@ -44,5 +42,5 @@ export const Demo = {
 
 export const args = {
   index: 5,
-  desc: "'borderColor' lar deg endre border-color på Box basert på tokens",
+  desc: "Propen 'borderColor' lar deg endre border-color basert på tokens.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx
@@ -47,5 +47,5 @@ export const Demo = {
 
 export const args = {
   index: 6,
-  desc: "'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
+  desc: "Propen 'borderRadius' lar deg sette border-radius basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
 };