Merge pull request #6163 from Sage/test_docs_decimal

docs: update action reports
Sage · Jun 30, 2023 · cf2b6fe · cf2b6fe
2 parents 8e38294 + e2efc31
commit cf2b6fe
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 25 deletions.
diff --git a/src/components/decimal/decimal-test.stories.tsx b/src/components/decimal/decimal-test.stories.tsx
@@ -13,7 +13,6 @@ import CarbonProvider from "../carbon-provider/carbon-provider.component";
 
 export default {
   title: "Decimal Input/Test",
-  includeStories: ["DecimalStory", "UncontrolledDecimalStory"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -49,14 +48,17 @@ const commonArgs = {
 export const DecimalStory = (args: CommonTextboxArgs) => {
   const [state, setState] = useState("0.05");
   const handleChange = (ev: CustomEvent) => {
-    action("onChange")(ev);
+    action("onChange")(ev.target.value);
     setState(ev.target.value.rawValue);
   };
+  const handleBlur = (event: CustomEvent) => {
+    action("onBlur")(event.target.value);
+  };
   return (
     <Decimal
       value={state}
       onChange={handleChange}
-      onBlur={action("onBlur")}
+      onBlur={handleBlur}
       {...getCommonTextboxArgsWithSpecialCaracters(args)}
     />
   );
@@ -66,13 +68,17 @@ DecimalStory.args = commonArgs;
 
 export const UncontrolledDecimalStory = (args: CommonTextboxArgs) => {
   const handleChange = (ev: CustomEvent) => {
-    action("onChange")(ev);
+    action("onChange")(ev.target.value);
+  };
+
+  const handleBlur = (event: CustomEvent) => {
+    action("onBlur")(event.target.value);
   };
   return (
     <Decimal
       defaultValue="0.03"
       onChange={handleChange}
-      onBlur={action("onBlur")}
+      onBlur={handleBlur}
       {...getCommonTextboxArgsWithSpecialCaracters(args)}
     />
   );
@@ -103,9 +109,12 @@ export const PostStory = ({
 }: CommonTextboxArgs & { action: string }) => {
   const [state, setState] = useState("0.00");
   const handleChange = (ev: CustomEvent) => {
-    action("onChange")(ev);
+    action("onChange")(ev.target.value);
     setState(ev.target.value.rawValue);
   };
+  const handleBlur = (event: CustomEvent) => {
+    action("onBlur")(event.target.value);
+  };
   return (
     <form method="POST" action={actionArg} target="_blank">
       <p>
@@ -116,7 +125,7 @@ export const PostStory = ({
       <Decimal
         value={state}
         onChange={handleChange}
-        onBlur={action("onBlur")}
+        onBlur={handleBlur}
         {...getCommonTextboxArgsWithSpecialCaracters(args)}
       />
       <button type="submit">Submit</button>
@@ -129,16 +138,19 @@ PostStory.args = { ...commonArgs, action: "" };
 export const NewValidationStory = (args: CommonTextboxArgs) => {
   const [state, setState] = useState("0.05");
   const handleChange = (ev: CustomEvent) => {
-    action("onChange")(ev);
+    action("onChange")(ev.target.value);
     setState(ev.target.value.rawValue);
   };
+  const handleBlur = (event: CustomEvent) => {
+    action("onBlur")(event.target.value);
+  };
   return (
     <CarbonProvider validationRedesignOptIn>
       <Decimal
         value={state}
         m={2}
         onChange={handleChange}
-        onBlur={action("onBlur")}
+        onBlur={handleBlur}
         {...getCommonTextboxArgsWithSpecialCaracters(args)}
       />
     </CarbonProvider>
@@ -152,9 +164,12 @@ export const DecimalCustomOnChangeStory = (args: CommonTextboxArgs) => {
   const handleChange = (e: CustomEvent) => {
     let newValue = e.target.value.rawValue;
     if (newValue.startsWith("22.22")) newValue = "22.22";
-    action("onChange")(e, newValue);
+    action("onChange")(e.target.value, newValue);
     setState(newValue);
   };
+  const handleBlur = (event: CustomEvent) => {
+    action("onBlur")(event.target.value);
+  };
   return (
     <div>
       If you try to type `22.222`, the onChange should block the last `2` from
@@ -165,7 +180,7 @@ export const DecimalCustomOnChangeStory = (args: CommonTextboxArgs) => {
         mt={2}
         value={state}
         onChange={handleChange}
-        onBlur={action("onBlur")}
+        onBlur={handleBlur}
         {...getCommonTextboxArgsWithSpecialCaracters(args)}
       />
     </div>

diff --git a/src/components/grouped-character/grouped-character-test.stories.tsx b/src/components/grouped-character/grouped-character-test.stories.tsx
@@ -35,7 +35,7 @@ export const Default = ({ separator, groups, ...args }: StoryArgs) => {
   const [state, setState] = useState("");
   const onChange = (ev: CustomEvent) => {
     setState(ev.target.value.rawValue);
-    action("change")(ev);
+    action("change")(ev.target.value);
   };
   return (
     <GroupedCharacter
@@ -59,7 +59,7 @@ export const NewValidation = ({ separator, groups, ...args }: StoryArgs) => {
   const [state, setState] = useState("");
   const onChange = (ev: CustomEvent) => {
     setState(ev.target.value.rawValue);
-    action("change")(ev);
+    action("change")(ev.target.value);
   };
   return (
     <CarbonProvider validationRedesignOptIn>

diff --git a/src/components/number/number-test.stories.tsx b/src/components/number/number-test.stories.tsx
@@ -38,7 +38,7 @@ export const Default = ({
 }) => {
   const [state, setState] = useState("");
   const setValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-    action("onChange")(event);
+    action("onChange")(event.target.value);
     setState(event.target.value);
   };
   return (

diff --git a/src/components/numeral-date/numeral-date-test.stories.tsx b/src/components/numeral-date/numeral-date-test.stories.tsx
@@ -31,10 +31,10 @@ export const Default = (args: NumeralDateProps) => {
   });
   const handleChange = (event: NumeralDateEvent) => {
     setDateValue(event.target.value as FullDate);
-    action("change")(event);
+    action("change")(event.target.value);
   };
   const handleBlur = (event: NumeralDateEvent) => {
-    action("blur")(event);
+    action("blur")(event.target.value);
   };
   return (
     <Box mt="120px">
@@ -64,10 +64,10 @@ export const DefaultWithOtherInputs = (args: NumeralDateProps) => {
   });
   const handleChange = (event: NumeralDateEvent) => {
     setDateValue(event.target.value as FullDate);
-    action("change")(event);
+    action("change")(event.target.value);
   };
   const handleBlur = (event: NumeralDateEvent) => {
-    action("blur")(event);
+    action("blur")(event.target.value);
   };
   return (
     <Box display="flex" margin="56px 25px">
@@ -107,10 +107,10 @@ export const Validations = (args: NumeralDateProps<DayMonthDate>) => {
   const [dateValue, setDateValue] = useState({ dd: "", mm: "" });
   const handleChange = (event: NumeralDateEvent<DayMonthDate>) => {
     setDateValue({ ...dateValue });
-    action("change")(event);
+    action("change")(event.target.value);
   };
   const handleBlur = (event: NumeralDateEvent<DayMonthDate>) => {
-    action("blur")(event);
+    action("blur")(event.target.value);
   };
   return (
     <>

diff --git a/src/components/search/search-test.stories.tsx b/src/components/search/search-test.stories.tsx
@@ -26,19 +26,19 @@ export const Default = ({ placeholder, ...args }: { placeholder?: string }) => {
   const [value, setValue] = useState("");
   const handleChange = (event: SearchEvent) => {
     setValue(event.target.value);
-    action("change")(event);
+    action("change")(event.target.value);
   };
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    action("blur")(event);
+    action("blur")(event.target.value);
   };
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    action("focus")(event);
+    action("focus")(event.target.value);
   };
   const handleClick = (event: SearchEvent) => {
-    action("click")(event);
+    action("click")(event.target.value);
   };
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    action("keydown")(event);
+    action("keydown")(event.target);
   };
 
   return (