From afe671f1bdda0269f4f957022f6bbe39eed7181a Mon Sep 17 00:00:00 2001
From: -l <anderslangseth@gmail.com>
Date: Mon, 13 Nov 2023 10:48:34 +0100
Subject: [PATCH] chore: adds Card stories

---
 .../components/card/stories/Card.stories.tsx  | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx

diff --git a/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx
new file mode 100644
index 00000000000..fdfa8e52872
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx
@@ -0,0 +1,100 @@
+/**
+ * @dnb/eufemia Component Story
+ *
+ */
+
+import React from 'react'
+
+import { Field } from '../../../extensions/forms'
+import { Card, Flex } from '../../'
+import { Wrapper, Box } from 'storybook-utils/helpers'
+
+export default {
+  title: 'Eufemia/Components/Card',
+}
+
+const AllFormFields = () => {
+  return (
+    <>
+      <Field.NationalIdentityNumber
+        path="/ssn"
+        label="NationalIdentityNumber"
+      />
+      <Field.Email path="/email" label="Email" />
+      <Field.PhoneNumber path="/phone" label="PhoneNumber" />
+      <Field.BankAccountNumber
+        path="/bankaccount"
+        label="BankAccountNumber"
+      />
+      <Field.Boolean path="/boolean" label="Boolean" />
+      <Field.Currency path="/currency" label="Currency" />
+      <Field.Date path="/data" label="Date" />
+      <Field.NationalIdentityNumber
+        path="/national"
+        label="NationalIdentityNumber"
+      />
+      <Field.Number path="/number" label="Number" />
+      <Field.Option path="/option" label="Option" />
+      <Field.OrganizationNumber path="/org" label="OrganizationNumber" />
+      <Field.PostalCodeAndCity
+        label="PostalCodeAndCity"
+        postalCode={{
+          path: '/postalCode',
+        }}
+        city={{
+          path: '/city',
+        }}
+      />
+      <Field.SelectCountry path="/selectcountry" label="SelectCountry" />
+      <Field.Selection path="/selection" label="Selection" />
+      <Field.String path="/string" label="String" />
+      <Field.Toggle
+        path="/toggle"
+        valueOn="checked"
+        valueOff="unchecked"
+        label="Toggle"
+      />
+    </>
+  )
+}
+
+export const CardSandbox = () => {
+  return (
+    <Wrapper>
+      <Box>
+        <Card>
+          <AllFormFields />
+        </Card>
+      </Box>
+      <Box>
+        <Card direction="horizontal">
+          <AllFormFields />
+        </Card>
+      </Box>
+      <Box>
+        <Card direction="vertical">
+          <AllFormFields />
+        </Card>
+      </Box>
+      <Box>
+        <Card>
+          <Flex.Horizontal>
+            <AllFormFields />
+          </Flex.Horizontal>
+        </Card>
+      </Box>
+      <Box>
+        <Card>
+          <Flex.Vertical>
+            <AllFormFields />
+          </Flex.Vertical>
+        </Card>
+      </Box>
+      <Box>
+        <Card stack>
+          <AllFormFields />
+        </Card>
+      </Box>
+    </Wrapper>
+  )
+}