Justering av eksempler på Button (#2559)

aksel.nav.no/website/pages/eksempler/button/action.tsx

@@ -0,0 +1,48 @@
+import { Button, HStack, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="6" align="center">
+      <HStack gap="2">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary" size="small">
+          Primary
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary
+        </Button>
+        <Button variant="tertiary" size="small">
+          Tertiary
+        </Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary" size="xsmall">
+          Primary
+        </Button>
+        <Button variant="secondary" size="xsmall">
+          Secondary
+        </Button>
+        <Button variant="tertiary" size="xsmall">
+          Tertiary
+        </Button>
+      </HStack>
+    </VStack>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};

aksel.nav.no/website/pages/eksempler/button/default.tsx → aksel.nav.no/website/pages/eksempler/button/danger.tsx

@@ -1,14 +1,17 @@
-import { Button } from "@navikt/ds-react";
+import { Button, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="tertiary">Tertiary</Button>
+    <VStack gap="6" align="center">
       <Button variant="danger">Danger</Button>
-    </div>
+      <Button variant="danger" size="small">
+        Danger
+      </Button>
+      <Button variant="danger" size="xsmall">
+        Danger
+      </Button>
+    </VStack>
   );
 };
 
@@ -21,5 +24,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 0,
+  index: 2,
 };

aksel.nav.no/website/pages/eksempler/button/disabled.tsx

@@ -1,9 +1,9 @@
-import { Button } from "@navikt/ds-react";
+import { Button, HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <HStack gap="2">
       <Button disabled variant="primary">
         Primary
       </Button>
@@ -16,7 +16,7 @@ const Example = () => {
       <Button disabled variant="danger">
         Danger
       </Button>
-    </div>
+    </HStack>
   );
 };
 

aksel.nav.no/website/pages/eksempler/button/nextjs-link.tsx → aksel.nav.no/website/pages/eksempler/button/frameworks.tsx

@@ -10,6 +10,24 @@ const Example = () => {
   );
 };
 
+/*
+
+import { Link as ReactRouterLink } from "react-router-dom";
+const ReactRouterExample = () => (
+  <Button as={ReactRouterLink} to="#">
+    Lenke
+  </Button>
+);
+
+import { Link as RemixLink } from "@remix-run/react";
+const RemixExample = () => (
+  <Button as={RemixLink} to="#">
+    Lenke
+  </Button>
+);
+
+*/
+
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 

aksel.nav.no/website/pages/eksempler/button/icon.tsx

@@ -1,16 +1,16 @@
 import { PencilIcon } from "@navikt/aksel-icons";
-import { Button } from "@navikt/ds-react";
+import { Button, HStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
+    <HStack gap="6">
       <Button icon={<PencilIcon aria-hidden />}>Rediger</Button>
-      <Button icon={<PencilIcon aria-hidden />} />
+      <Button icon={<PencilIcon title="Rediger" />} />
       <Button iconPosition="right" icon={<PencilIcon aria-hidden />}>
         Rediger
       </Button>
-    </div>
+    </HStack>
   );
 };
 

aksel.nav.no/website/pages/eksempler/button/neutral.tsx

@@ -1,13 +1,37 @@
-import { Button } from "@navikt/ds-react";
+import { Button, HStack, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <div className="flex flex-wrap gap-2">
-      <Button variant="primary-neutral">Primary</Button>
-      <Button variant="secondary-neutral">Secondary</Button>
-      <Button variant="tertiary-neutral">Tertiary</Button>
-    </div>
+    <VStack gap="6" align="center">
+      <HStack gap="2">
+        <Button variant="primary-neutral">Primary</Button>
+        <Button variant="secondary-neutral">Secondary</Button>
+        <Button variant="tertiary-neutral">Tertiary</Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary-neutral" size="small">
+          Primary
+        </Button>
+        <Button variant="secondary-neutral" size="small">
+          Secondary
+        </Button>
+        <Button variant="tertiary-neutral" size="small">
+          Tertiary
+        </Button>
+      </HStack>
+      <HStack gap="2">
+        <Button variant="primary-neutral" size="xsmall">
+          Primary
+        </Button>
+        <Button variant="secondary-neutral" size="xsmall">
+          Secondary
+        </Button>
+        <Button variant="tertiary-neutral" size="xsmall">
+          Tertiary
+        </Button>
+      </HStack>
+    </VStack>
   );
 };