From a6179b468aa189b584b98b10bf1c7fb0c105dbdb Mon Sep 17 00:00:00 2001 From: -l Date: Mon, 7 Oct 2024 13:34:53 +0200 Subject: [PATCH] docs(OrganizationNumber): adds docs about validation --- .../OrganizationNumber/info.mdx | 1 + .../OrganizationNumber/properties.mdx | 8 +++----- .../OrganizationNumberDocs.tsx | 19 +++++++++++++++++++ 3 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/info.mdx index 4e8f50e97b6..5ae39b8bdef 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/info.mdx @@ -8,6 +8,7 @@ showTabs: true This input expects a 9-digit number as its value. This is because Norwegian organization numbers are 9-digits long, based on info from [Brønnøysundregisteret](https://www.brreg.no/en/about-us-2/our-registers/about-the-central-coordinating-register-for-legal-entities-ccr/about-the-organisation-number/?nocache=1701776533136) It validates input for Norwegian organization numbers, as described by [Brønnøysundregistrene](https://www.brreg.no/om-oss/registrene-vare/om-enhetsregisteret/organisasjonsnummeret/). +The validation happens on blur, internally using the `onBlurValidator` [property](/uilib/extensions/forms/feature-fields/OrganizationNumber/properties/#field-specific-properties). ```jsx import { Field } from '@dnb/eufemia/extensions/forms' diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx index 3be76bc5c7a..8db85d4f5e7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx @@ -5,19 +5,17 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { OrganizationNumberProperties } from '@dnb/eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs' ## Properties ### Field-specific properties -| Property | Type | Description | -| ---------- | --------- | ------------------------------------------------------------------------------- | -| `validate` | `boolean` | _(optional)_ Using this property you can disable the default validation. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. | + ### General properties - + ## Translations diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx new file mode 100644 index 00000000000..ebb41c37e04 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx @@ -0,0 +1,19 @@ +import { PropertiesTableProps } from '../../../../shared/types' + +export const OrganizationNumberProperties: PropertiesTableProps = { + validate: { + doc: 'Using this prop you can disable the default validation.', + type: 'boolean', + status: 'optional', + }, + help: { + doc: 'Provide a help button. Object consisting of `title` and `content`.', + type: 'object', + status: 'optional', + }, + onBlurValidator: { + doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation.', + type: 'function', + status: 'optional', + }, +}