From c941af9de58a99030eaffcb0fcdbd7cd366752cf Mon Sep 17 00:00:00 2001
From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:15:08 +0200
Subject: [PATCH] Refactor examples of Vstack and HStack (#3244)

---
 .../examples/__parts/StackPlaceholder.tsx           | 13 +++++++++++++
 .../website/pages/eksempler/h-stack/demo.tsx        | 12 ++----------
 .../pages/eksempler/h-stack/responsive-gap.tsx      | 12 ++----------
 .../website/pages/eksempler/h-stack/wrap.tsx        | 11 +----------
 .../website/pages/eksempler/v-stack/demo.tsx        | 12 ++----------
 .../pages/eksempler/v-stack/responsive-gap.tsx      | 12 ++----------
 6 files changed, 22 insertions(+), 50 deletions(-)
 create mode 100644 aksel.nav.no/website/components/website-modules/examples/__parts/StackPlaceholder.tsx

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
new file mode 100644
index 0000000000..363dcf0445
--- /dev/null
+++ 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
index 17e5098848..1247fc8df2 100644
--- 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
index 042559c538..77df682320 100644
--- 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
index 269a34c3df..515db8a78b 100644
--- 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
index 5c90871907..dc9d0311bb 100644
--- 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
index 95c9c841b9..c5914e1174 100644
--- 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 });