update stories

dnbexperience · Oct 10, 2024 · 78e921d · 78e921d
1 parent 6db499e
commit 78e921d
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 1 deletion.
diff --git a/.../extensions/forms/Field/NationalIdentityNumber/stories/NationalIdentityNumber.stories.tsx b/.../extensions/forms/Field/NationalIdentityNumber/stories/NationalIdentityNumber.stories.tsx
@@ -294,6 +294,7 @@ export function AdultValidatorAndDefaultOnBlurValidator() {
     </>
   )
 }
+
 export function AdultValidatorAndDefaultValidator() {
   return (
     <>
@@ -354,3 +355,121 @@ export function AdultValidatorAndDefaultValidator() {
     </>
   )
 }
+
+export function CustomValidator() {
+  const simpleValidator = (value) => {
+    return value?.length < 4 ? Error('At least 4 characters') : undefined
+  }
+
+  return (
+    <>
+      <Field.NationalIdentityNumber
+        validator={simpleValidator}
+        onBlurValidator={false}
+      />
+      <Field.NationalIdentityNumber
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="12345678901"
+      />
+      <Field.NationalIdentityNumber
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="42345678901"
+      />
+      <Field.NationalIdentityNumber
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="29082499936"
+      />
+      <Field.NationalIdentityNumber
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="44011957371"
+      />
+      <h2>Validate Initially:</h2>
+      <Field.NationalIdentityNumber
+        validateInitially
+        validator={simpleValidator}
+        onBlurValidator={false}
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="12345678901"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="42345678901"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="29082499936"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        validator={simpleValidator}
+        onBlurValidator={false}
+        value="44011957371"
+      />
+    </>
+  )
+}
+
+export function CustomOnBlurValidator() {
+  const simpleValidator = (value) => {
+    return value?.length < 4 ? Error('At least 4 characters') : undefined
+  }
+
+  return (
+    <>
+      <Field.NationalIdentityNumber onBlurValidator={simpleValidator} />
+      <Field.NationalIdentityNumber
+        onBlurValidator={simpleValidator}
+        value="12345678901"
+      />
+      <Field.NationalIdentityNumber
+        onBlurValidator={simpleValidator}
+        value="42345678901"
+      />
+      <Field.NationalIdentityNumber
+        onBlurValidator={simpleValidator}
+        value="29082499936"
+      />
+      <Field.NationalIdentityNumber
+        onBlurValidator={simpleValidator}
+        value="44011957371"
+      />
+      <h2>Validate Initially:</h2>
+      <Field.NationalIdentityNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="12345678901"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="42345678901"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="29082499936"
+      />
+      <Field.NationalIdentityNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="44011957371"
+      />
+    </>
+  )
+}
diff --git a/...emia/src/extensions/forms/Field/OrganizationNumber/stories/OrganizationNumber.stories.tsx b/...emia/src/extensions/forms/Field/OrganizationNumber/stories/OrganizationNumber.stories.tsx
@@ -132,7 +132,7 @@ export function OrganizationNumberValidator() {
   )
 }
 
-export function OrganizationNumberValidatorSimple() {
+export function CustomValidator() {
   const simpleValidator = (value) => {
     return value?.length < 4 ? Error('At least 4 characters') : undefined
   }
@@ -175,6 +175,41 @@ export function OrganizationNumberValidatorSimple() {
   )
 }
 
+export function CustomOnBlurValidator() {
+  const simpleValidator = (value) => {
+    return value?.length < 4 ? Error('At least 4 characters') : undefined
+  }
+
+  return (
+    <Wrapper>
+      <Field.OrganizationNumber onBlurValidator={simpleValidator} />
+      <Field.OrganizationNumber
+        onBlurValidator={simpleValidator}
+        value="123123123"
+      />
+      <Field.OrganizationNumber
+        onBlurValidator={simpleValidator}
+        value="321321321"
+      />
+      <h2>Validate Initially:</h2>
+      <Field.OrganizationNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+      />
+      <Field.OrganizationNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="123123123"
+      />
+      <Field.OrganizationNumber
+        validateInitially
+        onBlurValidator={simpleValidator}
+        value="321321321"
+      />
+    </Wrapper>
+  )
+}
+
 export function StringValidatorSimple() {
   const simpleValidator = (value) => {
     return value?.length < 4 ? Error('At least 4 characters') : undefined