add NumberField stories

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"];

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",
+});

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, {});