From 1b8356408883af7f13bf836bc8875ee7fa0fbd4a Mon Sep 17 00:00:00 2001
From: Nemobot <nemobot@buildo.io>
Date: Mon, 14 Feb 2022 10:20:00 +0100
Subject: [PATCH] add NumberField stories

---
 src/Field/createFormFields.tsx             |  4 +--
 stories/Components/NumberField.stories.tsx | 37 ++++++++++++++++++++++
 stories/index.tsx                          |  2 +-
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 stories/Components/NumberField.stories.tsx

diff --git a/src/Field/createFormFields.tsx b/src/Field/createFormFields.tsx
index f0b9f5631..eb357d250 100644
--- a/src/Field/createFormFields.tsx
+++ b/src/Field/createFormFields.tsx
@@ -7,8 +7,8 @@ import {
   createRadioGroupField,
   RadioGroupFieldConfig,
 } from "../RadioGroupField/createRadioGroupField";
-import { createNumberInput } from "src/NumberInput/createNumberInput";
-import { createNumberField } from "src/NumberField/createNumberField";
+import { createNumberInput } from "../NumberInput/createNumberInput";
+import { createNumberField } from "../NumberField/createNumberField";
 
 type FieldsConfig = {
   labelSize: ComponentProps<typeof Label>["size"];
diff --git a/stories/Components/NumberField.stories.tsx b/stories/Components/NumberField.stories.tsx
new file mode 100644
index 000000000..634f90dc3
--- /dev/null
+++ b/stories/Components/NumberField.stories.tsx
@@ -0,0 +1,37 @@
+import { NumberField } from "../";
+import { createComponentStories, fieldArgTypes, formatMessage, textArgType } from "../util";
+
+const { defaultExport, createControlledStory } = createComponentStories({
+  component: NumberField,
+  args: {
+    name: "applications",
+    label: formatMessage("Applications"),
+    placeholder: formatMessage("Number of target applications"),
+    assistiveText: formatMessage("The number of applications this campaign is targeting"),
+  },
+  argTypes: {
+    ...fieldArgTypes,
+    placeholder: textArgType,
+  },
+});
+
+export default defaultExport;
+
+export const Default = createControlledStory<number | undefined>(undefined, {});
+
+export const Disabled = createControlledStory(0, {
+  disabled: true,
+});
+
+export const Error = createControlledStory(0, {
+  issues: [formatMessage("Please insert a number greater than 2")],
+});
+
+export const Currency = createControlledStory(0, {
+  kind: "currency",
+  currency: "EUR",
+});
+
+export const Percentage = createControlledStory(0, {
+  kind: "percentage",
+});
diff --git a/stories/index.tsx b/stories/index.tsx
index 6068cecea..6cb8d4427 100644
--- a/stories/index.tsx
+++ b/stories/index.tsx
@@ -18,7 +18,7 @@ import { sprinkles } from "./sprinkles.css";
 export * from "../src";
 export const Box = createBentoBox(sprinkles);
 export const { Stack, Column, Columns, Inline, Inset } = createLayoutComponents(Box);
-export const { TextField, CheckboxField, RadioGroupField } = createFormFields();
+export const { CheckboxField, NumberField, RadioGroupField, TextField } = createFormFields();
 export const Button = createButton({});
 export const Banner = createBanner({});
 export const { Toast, ToastProvider } = createToast(Button, {});