GlobalValidation

The GlobalValidation component is used to easily display the validation state to the consumer with an accompanied headline, message, and icon indicator.

Import

React

// with @dhl-official/react-library:
import { DhlGlobalValidation } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlGlobalValidation } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-global-validation></dhl-global-validation>

Vue.js

// with @dhl-official/vue-library:
import { DhlGlobalValidation } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlGlobalValidation } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlGlobalValidation
  headlineText="Success!"
  headlineTag="h1"
  message="Offers were found that match your selection"
  variant="valid"
></DhlGlobalValidation>

Angular

<dhl-global-validation
  headlineText="Success!"
  headlineTag="h1"
  message="Offers were found that match your selection"
  variant="valid"
></dhl-global-validation>

Vue.js

<dhl-global-validation
  headlineText="Success!"
  headlineTag="h1"
  message="Offers were found that match your selection"
  variant="valid"
></dhl-global-validation>

Interactive Demo

Migrating from DUIL 1.0

• Separated into two components - DhlGlobalValidation & DhlIllustratedValidation for the icon variant and illustration variant
• The variant prop now refers to valid and invalid states
• Rename type to variant
• Remove iconSize. The icon automatically scales in mobile viewport.
• Rename text to message
• To use illustrated variant, use GlobalIllustratedValidation component

Readme

Properties

Property	Attribute	Description	Type	Default
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-global-validation-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
headlineTag	headline-tag	This is an optional prop. Defines which headline tag to use. (h1-h6) defaults to H1. For a special case in which the element should not appear semantically as a headline; but should still get rendered in the same layout; it can additionally be rendered as a <p> tag.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_GLOBAL_VALIDATION.HEADLINE_TAG.H1
headlineText	headline-text	An optional prop used to set the headline text	string	undefined
message	message	An optional prop used to set the validation message	string	undefined
variant	variant	An optional prop to select a component design variant.	"invalid" \| "valid"	DHL_GLOBAL_VALIDATION.VARIANT.VALID

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon
• dhl-headline
• dhl-text

Graph

---

Built by DHL User Interface Library Team!