Refactor examples of Vstack and HStack (#3244)

navikt · Oct 16, 2024 · c941af9 · c941af9
1 parent a273a22
commit c941af9
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 50 deletions.
diff --git a/aksel.nav.no/website/components/website-modules/examples/__parts/StackPlaceholder.tsx b/aksel.nav.no/website/components/website-modules/examples/__parts/StackPlaceholder.tsx
@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+const Placeholder = () => (
+  <Box
+    background="surface-alt-3"
+    height="3rem"
+    width="3rem"
+    borderRadius="medium"
+    flexShrink="0"
+  />
+);
+
+export { Placeholder };
diff --git a/aksel.nav.no/website/pages/eksempler/h-stack/demo.tsx b/aksel.nav.no/website/pages/eksempler/h-stack/demo.tsx
@@ -1,5 +1,6 @@
-import { Box, HStack } from "@navikt/ds-react";
+import { HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import { Placeholder } from "../../../components/website-modules/examples/__parts/StackPlaceholder";
 
 const Example = () => {
   return (
@@ -12,15 +13,6 @@ const Example = () => {
   );
 };
 
-const Placeholder = () => (
-  <Box
-    background="surface-alt-3"
-    height="3rem"
-    width="3rem"
-    borderRadius="medium"
-  />
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { showBreakpoints: true });
 

diff --git a/aksel.nav.no/website/pages/eksempler/h-stack/responsive-gap.tsx b/aksel.nav.no/website/pages/eksempler/h-stack/responsive-gap.tsx
@@ -1,5 +1,6 @@
-import { Box, HStack } from "@navikt/ds-react";
+import { HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import { Placeholder } from "../../../components/website-modules/examples/__parts/StackPlaceholder";
 
 const Example = () => {
   return (
@@ -12,15 +13,6 @@ const Example = () => {
   );
 };
 
-const Placeholder = () => (
-  <Box
-    background="surface-alt-3"
-    height="3rem"
-    width="3rem"
-    borderRadius="medium"
-  />
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { showBreakpoints: true });
 

diff --git a/aksel.nav.no/website/pages/eksempler/h-stack/wrap.tsx b/aksel.nav.no/website/pages/eksempler/h-stack/wrap.tsx
@@ -1,5 +1,6 @@
 import { Box, HStack, Heading, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import { Placeholder } from "../../../components/website-modules/examples/__parts/StackPlaceholder";
 
 const Example = () => {
   return (
@@ -35,16 +36,6 @@ const Example = () => {
   );
 };
 
-const Placeholder = () => (
-  <Box
-    background="surface-alt-3"
-    height="3rem"
-    width="3rem"
-    borderRadius="medium"
-    flexShrink="0"
-  />
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { showBreakpoints: true });
 

diff --git a/aksel.nav.no/website/pages/eksempler/v-stack/demo.tsx b/aksel.nav.no/website/pages/eksempler/v-stack/demo.tsx
@@ -1,5 +1,6 @@
-import { Box, VStack } from "@navikt/ds-react";
+import { VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import { Placeholder } from "../../../components/website-modules/examples/__parts/StackPlaceholder";
 
 const Example = () => {
   return (
@@ -12,15 +13,6 @@ const Example = () => {
   );
 };
 
-const Placeholder = () => (
-  <Box
-    background="surface-alt-3"
-    height="3rem"
-    width="3rem"
-    borderRadius="medium"
-  />
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { showBreakpoints: true });
 

diff --git a/aksel.nav.no/website/pages/eksempler/v-stack/responsive-gap.tsx b/aksel.nav.no/website/pages/eksempler/v-stack/responsive-gap.tsx
@@ -1,5 +1,6 @@
-import { Box, VStack } from "@navikt/ds-react";
+import { VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import { Placeholder } from "../../../components/website-modules/examples/__parts/StackPlaceholder";
 
 const Example = () => {
   return (
@@ -12,15 +13,6 @@ const Example = () => {
   );
 };
 
-const Placeholder = () => (
-  <Box
-    background="surface-alt-3"
-    height="3rem"
-    width="3rem"
-    borderRadius="medium"
-  />
-);
-
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { showBreakpoints: true });