From 9e4c529fccfcf3b33af982b522677e3ba39694dc Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Mon, 15 May 2023 18:26:53 +0200 Subject: [PATCH 01/28] add support for custom global status message for input --- .../components/form-status/FormStatus.d.ts | 5 +++ .../src/components/form-status/FormStatus.js | 15 +++++-- .../stories/GlobalStatus.stories.tsx | 44 +++++++++++++++++++ .../src/components/input/Input.d.ts | 9 +++- .../dnb-eufemia/src/components/input/Input.js | 9 ++++ 5 files changed, 78 insertions(+), 4 deletions(-) diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts index 53d2c694645..cbf48b5786f 100644 --- a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts @@ -40,6 +40,11 @@ export interface FormStatusProps * The `text` appears as the status message. Beside plain text, you can send in a React component as well. */ text?: FormStatusText; + /** + * The `global_status_text` appears as the message shown in the associated global status. + * default: The same as `text`if, ´text´ is provided. + */ + global_status_text?: FormStatusText; label?: React.ReactNode; /** diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.js b/packages/dnb-eufemia/src/components/form-status/FormStatus.js index 75049070256..54611795005 100644 --- a/packages/dnb-eufemia/src/components/form-status/FormStatus.js +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.js @@ -40,6 +40,12 @@ export default class FormStatus extends React.PureComponent { PropTypes.func, PropTypes.node, ]), + global_status_text: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), label: PropTypes.node, icon: PropTypes.oneOfType([ PropTypes.string, @@ -80,6 +86,7 @@ export default class FormStatus extends React.PureComponent { title: null, show: true, text: null, + global_status_text: null, label: null, icon: 'error', icon_size: 'medium', @@ -180,13 +187,14 @@ export default class FormStatus extends React.PureComponent { (provider) => { // gets called once ready if (this.props.state === 'error' && this.isReadyToGetVisible()) { - const { state, text, label } = this.props + const { state, text, global_status_text, label } = this.props provider.add({ state, status_id: this.getStatusId(), item: { item_id: this.state.id, text, + global_status_text: global_status_text || text, status_anchor_label: label, status_anchor_url: true, }, @@ -251,7 +259,8 @@ export default class FormStatus extends React.PureComponent { } componentDidUpdate(prevProps) { - const { state, show, text, children, label } = this.props + const { state, show, text, global_status_text, children, label } = + this.props if ( prevProps.text !== text || @@ -273,7 +282,7 @@ export default class FormStatus extends React.PureComponent { status_id, item: { item_id: this.state.id, - text, + text: global_status_text || text, status_anchor_label: label, status_anchor_url: true, }, diff --git a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx index da2442ca50d..dbd565390f3 100644 --- a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx +++ b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx @@ -73,6 +73,50 @@ export const ComponentAsLabel = () => { ) } +export const TestStatus = () => { + const [status, setStatus] = React.useState(null) + + const Component = (): JSX.Element => { + return <>my label + } + + return ( + <> + + + + setStatus((s) => (!s ? 'min status' : null))} + > + set status + + + + } + status={status ? status + '1' : undefined} + global_status={status ? status + 'global 1' : undefined} + /> + + } + status={status ? status + '2' : undefined} + /> + } + status={status ? status + '3' : undefined} + /> + } + show_input + status={status ? status + '4' : undefined} + /> + + + ) +} + const CustomStatus = () => ( <>

Custom Status

diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts index d2daa97f9cf..021f371a477 100644 --- a/packages/dnb-eufemia/src/components/input/Input.d.ts +++ b/packages/dnb-eufemia/src/components/input/Input.d.ts @@ -66,7 +66,10 @@ export interface InputProps * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */ status?: FormStatusText; - + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + global_status?: FormStatusText; /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ @@ -254,6 +257,10 @@ export interface SubmitButtonProps extends React.HTMLProps { * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */ status?: FormStatusText; + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + global_status?: FormStatusText; /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. diff --git a/packages/dnb-eufemia/src/components/input/Input.js b/packages/dnb-eufemia/src/components/input/Input.js index 8dcbe22108e..1c55d5e204a 100644 --- a/packages/dnb-eufemia/src/components/input/Input.js +++ b/packages/dnb-eufemia/src/components/input/Input.js @@ -57,6 +57,12 @@ export const inputPropTypes = { PropTypes.func, PropTypes.node, ]), + global_status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), status_state: PropTypes.string, status_props: PropTypes.object, status_no_animation: PropTypes.oneOfType([ @@ -143,6 +149,7 @@ export default class Input extends React.PureComponent { label_direction: null, label_sr_only: null, status: null, + global_status: null, status_state: 'error', status_props: null, status_no_animation: null, @@ -335,6 +342,7 @@ export default class Input extends React.PureComponent { label_direction, label_sr_only, status, + global_status, status_state, status_props, status_no_animation, @@ -506,6 +514,7 @@ export default class Input extends React.PureComponent { global_status_id={global_status_id} label={label} text={status} + global_status_text={global_status} state={status_state} text_id={id + '-status'} // used for "aria-describedby" no_animation={status_no_animation} From b941adcb9501dbfed05915875f5921c5a1d6f084 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Tue, 16 May 2023 12:03:36 +0200 Subject: [PATCH 02/28] make new globalStatus prop in object form --- .../src/components/form-row/FormRow.d.ts | 5 ++- .../src/components/form-row/FormRow.js | 16 ++++++--- .../src/components/form-set/FormSet.d.ts | 5 ++- .../src/components/form-set/FormSet.js | 3 +- .../components/form-status/FormStatus.d.ts | 10 ++---- .../src/components/form-status/FormStatus.js | 36 +++++++++---------- .../stories/GlobalStatus.stories.tsx | 19 ++++++---- .../src/components/input/Input.d.ts | 14 +++----- .../dnb-eufemia/src/components/input/Input.js | 25 +++++++------ 9 files changed, 70 insertions(+), 63 deletions(-) diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts index 16687db88d4..e2abbd4f59b 100644 --- a/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts +++ b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts @@ -75,7 +75,10 @@ export interface FormRowProps * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to `null`. */ section_spacing?: SectionSpacing; - global_status_id?: string; + /** + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus + */ + globalStatus?: { id?: string; message?: FormStatusText }; /** * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.js b/packages/dnb-eufemia/src/components/form-row/FormRow.js index 3c359965301..ee6e3665882 100644 --- a/packages/dnb-eufemia/src/components/form-row/FormRow.js +++ b/packages/dnb-eufemia/src/components/form-row/FormRow.js @@ -43,7 +43,15 @@ export const formRowPropTypes = { centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), section_style: PropTypes.string, section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -77,7 +85,7 @@ export const formRowDefaultProps = { centered: null, section_style: null, section_spacing: null, - global_status_id: null, + globalStatus: null, responsive: null, disabled: null, skeleton: null, @@ -150,7 +158,7 @@ export default class FormRow extends React.PureComponent { centered, section_style, section_spacing, - global_status_id, + globalStatus, responsive, disabled, skeleton, @@ -215,7 +223,7 @@ export default class FormRow extends React.PureComponent { }, itsMeAgain: true, hasLabel, - global_status_id, + globalStatus, direction, vertical, label_direction: isTrue(vertical) ? 'vertical' : label_direction, diff --git a/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts index 89a8e7541bc..1daf3aa3cab 100644 --- a/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts +++ b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts @@ -99,7 +99,10 @@ export interface FormSetProps * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to `null`. */ section_spacing?: SectionSpacing; - global_status_id?: string; + /** + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus + */ + globalStatus?: { id?: string; message?: FormStatusText }; /** * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/form-set/FormSet.js b/packages/dnb-eufemia/src/components/form-set/FormSet.js index 44a7b319247..f2117b62b76 100644 --- a/packages/dnb-eufemia/src/components/form-set/FormSet.js +++ b/packages/dnb-eufemia/src/components/form-set/FormSet.js @@ -128,7 +128,8 @@ export default class FormSet extends React.PureComponent { }) const Element = isTrue(no_form) ? 'div' : element - + console.log('Proppy', this.props, content, Element) + console.log('Context', providerContext) return ( {content} diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts index cbf48b5786f..ebcf8d0878c 100644 --- a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts @@ -41,11 +41,9 @@ export interface FormStatusProps */ text?: FormStatusText; /** - * The `global_status_text` appears as the message shown in the associated global status. - * default: The same as `text`if, ´text´ is provided. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_text?: FormStatusText; - label?: React.ReactNode; + globalStatus?: { id?: string; message?: FormStatusText }; /** * The `icon` show before the status text. Defaults to `exclamation`. @@ -72,10 +70,6 @@ export interface FormStatusProps */ size?: FormStatusSize; - /** - * The `status_id` used for the target GlobalStatus. - */ - global_status_id?: string; attributes?: FormStatusAttributes; text_id?: string; width_selector?: string; diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.js b/packages/dnb-eufemia/src/components/form-status/FormStatus.js index 54611795005..74c335cb3a0 100644 --- a/packages/dnb-eufemia/src/components/form-status/FormStatus.js +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.js @@ -40,12 +40,6 @@ export default class FormStatus extends React.PureComponent { PropTypes.func, PropTypes.node, ]), - global_status_text: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - PropTypes.func, - PropTypes.node, - ]), label: PropTypes.node, icon: PropTypes.oneOfType([ PropTypes.string, @@ -60,7 +54,15 @@ export default class FormStatus extends React.PureComponent { ]), variant: PropTypes.oneOf(['flat', 'outlined']), size: PropTypes.oneOf(['default', 'large']), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), text_id: PropTypes.string, width_selector: PropTypes.string, @@ -86,14 +88,13 @@ export default class FormStatus extends React.PureComponent { title: null, show: true, text: null, - global_status_text: null, + globalStatus: null, label: null, icon: 'error', icon_size: 'medium', size: 'default', variant: null, state: 'error', - global_status_id: null, attributes: null, text_id: null, width_selector: null, @@ -103,7 +104,6 @@ export default class FormStatus extends React.PureComponent { skeleton: null, stretch: null, role: null, - className: null, children: null, } @@ -180,21 +180,20 @@ export default class FormStatus extends React.PureComponent { this.state.id = props.id || makeUniqueId() this._globalStatus = GlobalStatusProvider.init( - props?.global_status_id || - context?.FormStatus?.global_status_id || - context?.FormRow?.global_status_id || + props?.globalStatus?.id || + context?.FormStatus?.globalStatus?.id || + context?.FormRow?.globalStatus?.id || 'main', (provider) => { // gets called once ready if (this.props.state === 'error' && this.isReadyToGetVisible()) { - const { state, text, global_status_text, label } = this.props + const { state, text, globalStatus, label } = this.props provider.add({ state, status_id: this.getStatusId(), item: { item_id: this.state.id, - text, - global_status_text: global_status_text || text, + text: globalStatus?.message || text, status_anchor_label: label, status_anchor_url: true, }, @@ -259,8 +258,7 @@ export default class FormStatus extends React.PureComponent { } componentDidUpdate(prevProps) { - const { state, show, text, global_status_text, children, label } = - this.props + const { state, show, text, globalStatus, children, label } = this.props if ( prevProps.text !== text || @@ -282,7 +280,7 @@ export default class FormStatus extends React.PureComponent { status_id, item: { item_id: this.state.id, - text: global_status_text || text, + text: globalStatus?.message || text, status_anchor_label: label, status_anchor_url: true, }, diff --git a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx index dbd565390f3..89fc6bee239 100644 --- a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx +++ b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx @@ -41,7 +41,7 @@ export const ComponentAsLabel = () => { <> - + setStatus((s) => (!s ? 'min status' : null))} @@ -73,7 +73,7 @@ export const ComponentAsLabel = () => { ) } -export const TestStatus = () => { +export const CustomGlobalStatusMessage = () => { const [status, setStatus] = React.useState(null) const Component = (): JSX.Element => { @@ -84,7 +84,10 @@ export const TestStatus = () => { <> - + setStatus((s) => (!s ? 'min status' : null))} @@ -96,7 +99,9 @@ export const TestStatus = () => { } status={status ? status + '1' : undefined} - global_status={status ? status + 'global 1' : undefined} + globalStatus={{ + message: status ? status + ' global 1' : undefined, + }} /> { return ( <> { label="Label A:" placeholder="Placeholder A" status={errorA} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorA(value) }} @@ -574,7 +579,7 @@ const UpdateDemoStatus = () => { label="Label B:" placeholder="Placeholder B" status={errorB} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorB(value) }} diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts index 021f371a477..323c1d63823 100644 --- a/packages/dnb-eufemia/src/components/input/Input.d.ts +++ b/packages/dnb-eufemia/src/components/input/Input.d.ts @@ -67,9 +67,10 @@ export interface InputProps */ status?: FormStatusText; /** - * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status?: FormStatusText; + globalStatus?: { id?: string; message?: FormStatusText }; + /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ @@ -86,11 +87,6 @@ export interface InputProps */ input_state?: string; - /** - * The `status_id` used for the target GlobalStatus. - */ - global_status_id?: string; - /** * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `
` element, 3. and have a submit button inside the form. */ @@ -258,9 +254,9 @@ export interface SubmitButtonProps extends React.HTMLProps { */ status?: FormStatusText; /** - * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status?: FormStatusText; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. diff --git a/packages/dnb-eufemia/src/components/input/Input.js b/packages/dnb-eufemia/src/components/input/Input.js index 1c55d5e204a..f7872ed03a3 100644 --- a/packages/dnb-eufemia/src/components/input/Input.js +++ b/packages/dnb-eufemia/src/components/input/Input.js @@ -57,12 +57,15 @@ export const inputPropTypes = { PropTypes.func, PropTypes.node, ]), - global_status: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - PropTypes.func, - PropTypes.node, - ]), + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), status_state: PropTypes.string, status_props: PropTypes.object, status_no_animation: PropTypes.oneOfType([ @@ -70,7 +73,6 @@ export const inputPropTypes = { PropTypes.bool, ]), input_state: PropTypes.string, - global_status_id: PropTypes.string, autocomplete: PropTypes.string, submit_button_title: PropTypes.string, clear_button_title: PropTypes.string, @@ -149,12 +151,11 @@ export default class Input extends React.PureComponent { label_direction: null, label_sr_only: null, status: null, - global_status: null, + globalStatus: null, status_state: 'error', status_props: null, status_no_animation: null, input_state: null, - global_status_id: null, autocomplete: 'off', placeholder: null, clear: null, @@ -342,11 +343,10 @@ export default class Input extends React.PureComponent { label_direction, label_sr_only, status, - global_status, + globalStatus, status_state, status_props, status_no_animation, - global_status_id, disabled, skeleton, placeholder, @@ -511,10 +511,9 @@ export default class Input extends React.PureComponent { Date: Tue, 16 May 2023 12:33:15 +0200 Subject: [PATCH 03/28] add globalStatus prop to other input elements --- .../uilib/components/global-status/Examples.tsx | 10 +++++----- .../components/autocomplete/Autocomplete.d.ts | 4 ++-- .../src/components/autocomplete/Autocomplete.js | 16 ++++++++++++---- .../autocomplete/__tests__/Autocomplete.test.tsx | 2 +- .../src/components/button/Button.d.ts | 4 ++-- .../dnb-eufemia/src/components/button/Button.js | 16 ++++++++++++---- .../components/button/__tests__/Button.test.tsx | 2 +- .../src/components/checkbox/Checkbox.d.ts | 4 ++-- .../src/components/checkbox/Checkbox.js | 16 ++++++++++++---- .../src/components/date-picker/DatePicker.d.ts | 4 ++-- .../src/components/date-picker/DatePicker.js | 16 ++++++++++++---- .../src/components/dropdown/Dropdown.d.ts | 4 ++-- .../src/components/dropdown/Dropdown.js | 16 ++++++++++++---- .../dropdown/__tests__/Dropdown.test.tsx | 2 +- .../form-row/__tests__/FormRow.test.tsx | 2 +- .../form-status/__tests__/FormStatus.test.tsx | 2 +- .../__tests__/GlobalStatus.test.tsx | 14 +++++++------- .../stories/GlobalStatus.stories.tsx | 14 ++++++++------ .../src/components/input-masked/InputMasked.d.ts | 4 ++-- .../dnb-eufemia/src/components/radio/Radio.d.ts | 4 ++-- .../dnb-eufemia/src/components/radio/Radio.js | 16 ++++++++++++---- .../src/components/radio/RadioGroup.d.ts | 4 ++-- .../src/components/radio/RadioGroup.js | 16 ++++++++++++---- .../components/radio/__tests__/Radio.test.tsx | 2 +- .../src/components/slider/SliderInstance.tsx | 2 +- .../src/components/switch/Switch.d.ts | 4 ++-- .../dnb-eufemia/src/components/switch/Switch.js | 16 ++++++++++++---- .../components/switch/__tests__/Switch.test.tsx | 2 +- .../src/components/textarea/Textarea.d.ts | 4 ++-- .../src/components/textarea/Textarea.js | 16 ++++++++++++---- .../components/toggle-button/ToggleButton.d.ts | 6 +++--- .../src/components/toggle-button/ToggleButton.js | 16 ++++++++++++---- .../toggle-button/ToggleButtonGroup.d.ts | 4 ++-- .../toggle-button/ToggleButtonGroup.js | 16 ++++++++++++---- .../__tests__/ToggleButton.test.tsx | 2 +- 35 files changed, 186 insertions(+), 96 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx index 792e739862b..87dce310f5e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx @@ -67,7 +67,7 @@ export const GlobalStatusCoupling = () => ( value.length <= 4 ? 'With a message shown' : null ) }} - global_status_id="main-status" + globalStatus={{ id: 'main-status' }} /> ) } @@ -201,7 +201,7 @@ export const GlobalStatusUpdate = () => ( label="Label A:" placeholder="Placeholder A" status={errorA} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorA(value) }} @@ -211,7 +211,7 @@ export const GlobalStatusUpdate = () => ( label="Label B:" placeholder="Placeholder B" status={errorB} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorB(value) }} @@ -305,14 +305,14 @@ export const GlobalStatusInfoExample1 = () => ( export const GlobalStatusInfoExample2 = () => ( - + ) export const GlobalStatusInfoExample3 = () => ( - + diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts index 5cc4a0ccab3..8aecd9b88de 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts @@ -170,9 +170,9 @@ export interface AutocompleteProps status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js index 9adf95481bf..685c4ab49a4 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js @@ -117,7 +117,15 @@ export default class Autocomplete extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -274,7 +282,7 @@ export default class Autocomplete extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, disable_filter: false, disable_reorder: false, @@ -1678,7 +1686,7 @@ class AutocompleteInstance extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, scrollable, focusable, @@ -1904,7 +1912,7 @@ class AutocompleteInstance extends React.PureComponent { GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; id?: string; /** diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js index ff3d31b1eb4..f451d60e21b 100644 --- a/packages/dnb-eufemia/src/components/button/Button.js +++ b/packages/dnb-eufemia/src/components/button/Button.js @@ -108,7 +108,7 @@ export default class Button extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, id, // eslint-disable-line disabled, text: _text, // eslint-disable-line @@ -248,7 +248,7 @@ export default class Button extends React.PureComponent { { jest.spyOn(global.console, 'log') diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts index 879bc19596f..d5569ab8bbc 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts @@ -68,9 +68,9 @@ export interface CheckboxProps status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js index 64a5cec7c2c..9c9ba96a0c9 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js @@ -64,7 +64,15 @@ export default class Checkbox extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -99,7 +107,7 @@ export default class Checkbox extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, value: null, attributes: null, @@ -184,7 +192,7 @@ export default class Checkbox extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, size, label, @@ -253,7 +261,7 @@ export default class Checkbox extends React.PureComponent { GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component. diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js index ca4da0f0d74..ba723c0d4be 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js @@ -160,7 +160,15 @@ export default class DatePicker extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -236,7 +244,7 @@ export default class DatePicker extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, opened: false, prevent_close: null, @@ -504,7 +512,7 @@ export default class DatePicker extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, mask_order, mask_placeholder, @@ -629,7 +637,7 @@ export default class DatePicker extends React.PureComponent { GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/dropdown/Dropdown.js b/packages/dnb-eufemia/src/components/dropdown/Dropdown.js index 71ec2ffe672..f0646ef52e6 100644 --- a/packages/dnb-eufemia/src/components/dropdown/Dropdown.js +++ b/packages/dnb-eufemia/src/components/dropdown/Dropdown.js @@ -75,7 +75,15 @@ export default class Dropdown extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -174,7 +182,7 @@ export default class Dropdown extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, scrollable: true, focusable: false, @@ -420,7 +428,7 @@ class DropdownInstance extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, scrollable, focusable, @@ -573,7 +581,7 @@ class DropdownInstance extends React.PureComponent { { const Comp = mount() diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx index d7424af54cf..8a4c8c6c030 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx @@ -25,7 +25,7 @@ props.id = 'form-status' props.text = 'text' props.state = 'error' props.status = null -props.global_status_id = 'main' +props.globalStatus = 'main' props.hidden = false props.icon = 'exclamation' diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx b/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx index acbe3357679..3c8215fc98d 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx @@ -367,7 +367,7 @@ describe('GlobalStatus component', () => { delay={0} no_animation={true} /> - + @@ -446,7 +446,7 @@ describe('GlobalStatus component', () => { id="switch" status={status} status_no_animation={true} - global_status_id="scroll-to-test" + globalStatus={{ id: 'scroll-to-test' }} on_change={({ checked }) => { setStatus(checked ? 'error-message' : null) }} @@ -507,7 +507,7 @@ describe('GlobalStatus component', () => { id="switch" status={status} status_no_animation={true} - global_status_id="esc-test" + globalStatus={{ id: 'esc-test' }} on_change={({ checked }) => { setStatus(checked ? 'error-message' : null) }} @@ -550,7 +550,7 @@ describe('GlobalStatus component', () => { id="switch" status={status} status_no_animation={true} - global_status_id="height-test" + globalStatus={{ id: 'height-test' }} on_change={({ checked }) => { setStatus(checked ? 'error-message' : null) }} @@ -583,7 +583,7 @@ describe('GlobalStatus component', () => { id="switch" status={status} status_no_animation={true} - global_status_id="main-to-be-empty" + globalStatus={{ id: 'main-to-be-empty' }} on_change={({ checked }) => { setStatus(checked ? 'error-message' : null) }} @@ -702,7 +702,7 @@ describe('GlobalStatus component', () => { label={} status={status} status_no_animation={true} - global_status_id="main-to-be-empty" + globalStatus={{ id: 'main-to-be-empty' }} on_change={({ checked }) => { setStatus(checked ? : null) }} @@ -914,7 +914,7 @@ describe('GlobalStatus snapshot', () => { id="switch" label={Label} status="error-message" - global_status_id="linked" + globalStatus={{ id: 'linked' }} /> ) diff --git a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx index 89fc6bee239..adecec455a9 100644 --- a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx +++ b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx @@ -86,7 +86,7 @@ export const CustomGlobalStatusMessage = () => { { } - status={status ? status + '1' : undefined} + status={'Input status'} globalStatus={{ - message: status ? status + ' global 1' : undefined, + message: 'Input global status', }} /> } - status={status ? status + '2' : undefined} + status="Input status withough global" /> } - status={status ? status + '3' : undefined} + status={'Autocomplete status'} + globalStatus={{ message: 'Autocomplete global status' }} /> } show_input - status={status ? status + '4' : undefined} + status="Datepicekr status" + globalStatus={{ message: 'Datepicker global status' }} /> diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts index e1b829c865d..cc1740514bf 100644 --- a/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts +++ b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts @@ -195,9 +195,9 @@ export interface InputMaskedProps input_state?: string; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `` element, 3. and have a submit button inside the form. diff --git a/packages/dnb-eufemia/src/components/radio/Radio.d.ts b/packages/dnb-eufemia/src/components/radio/Radio.d.ts index be24e868afa..41fce54c64a 100644 --- a/packages/dnb-eufemia/src/components/radio/Radio.d.ts +++ b/packages/dnb-eufemia/src/components/radio/Radio.d.ts @@ -72,9 +72,9 @@ export interface RadioProps status_no_animation?: RadioStatusNoAnimation; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; suffix?: RadioSuffix; /** diff --git a/packages/dnb-eufemia/src/components/radio/Radio.js b/packages/dnb-eufemia/src/components/radio/Radio.js index 4ef3e9544f1..638a3890f23 100644 --- a/packages/dnb-eufemia/src/components/radio/Radio.js +++ b/packages/dnb-eufemia/src/components/radio/Radio.js @@ -66,7 +66,15 @@ export default class Radio extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -101,7 +109,7 @@ export default class Radio extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, value: '', attributes: null, @@ -278,7 +286,7 @@ export default class Radio extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, element, label, @@ -386,7 +394,7 @@ export default class Radio extends React.PureComponent { GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; suffix?: RadioGroupSuffix; layout_direction?: RadioGroupLayoutDirection; vertical?: boolean; diff --git a/packages/dnb-eufemia/src/components/radio/RadioGroup.js b/packages/dnb-eufemia/src/components/radio/RadioGroup.js index 588ead47f80..ccec8ee5106 100644 --- a/packages/dnb-eufemia/src/components/radio/RadioGroup.js +++ b/packages/dnb-eufemia/src/components/radio/RadioGroup.js @@ -61,7 +61,15 @@ export default class RadioGroup extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -101,7 +109,7 @@ export default class RadioGroup extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, vertical: null, layout_direction: 'row', @@ -163,7 +171,7 @@ export default class RadioGroup extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, label, label_direction, @@ -269,7 +277,7 @@ export default class RadioGroup extends React.PureComponent { { // then test the state management diff --git a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx index bb0b7adb0a3..a53e4eaf523 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx @@ -99,7 +99,7 @@ export function SliderInstance() { ; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; status_no_animation?: boolean; /** diff --git a/packages/dnb-eufemia/src/components/switch/Switch.js b/packages/dnb-eufemia/src/components/switch/Switch.js index e740a26b78e..0464380d5c2 100644 --- a/packages/dnb-eufemia/src/components/switch/Switch.js +++ b/packages/dnb-eufemia/src/components/switch/Switch.js @@ -59,7 +59,15 @@ export default class Switch extends React.PureComponent { ]), status_state: PropTypes.string, status_props: PropTypes.object, - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), status_no_animation: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool, @@ -97,7 +105,7 @@ export default class Switch extends React.PureComponent { status: null, status_state: 'error', status_props: null, - global_status_id: null, + globalStatus: null, status_no_animation: null, suffix: null, value: null, @@ -204,7 +212,7 @@ export default class Switch extends React.PureComponent { status, status_state, status_props, - global_status_id, + globalStatus, status_no_animation, suffix, label, @@ -289,7 +297,7 @@ export default class Switch extends React.PureComponent { { // then test the state management diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts index b9cd08cf8aa..c5e4dd20825 100644 --- a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts +++ b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts @@ -69,9 +69,9 @@ export interface TextareaProps status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component. diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.js b/packages/dnb-eufemia/src/components/textarea/Textarea.js index 5e7b0b07224..4b28f01733d 100644 --- a/packages/dnb-eufemia/src/components/textarea/Textarea.js +++ b/packages/dnb-eufemia/src/components/textarea/Textarea.js @@ -62,7 +62,15 @@ export default class Textarea extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -116,7 +124,7 @@ export default class Textarea extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, placeholder: null, align: null, @@ -348,7 +356,7 @@ export default class Textarea extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, disabled, skeleton, @@ -490,7 +498,7 @@ export default class Textarea extends React.PureComponent { GlobalStatus. + /** + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component. diff --git a/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js b/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js index b6bd47d1946..71acc58176b 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js +++ b/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js @@ -71,7 +71,15 @@ export default class ToggleButton extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -120,7 +128,7 @@ export default class ToggleButton extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, value: '', icon: null, @@ -292,7 +300,7 @@ export default class ToggleButton extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, label, label_direction, @@ -447,7 +455,7 @@ export default class ToggleButton extends React.PureComponent { GlobalStatus. + * An object containing the `id` used for the target GlobalStatus, and the option for adding a custom `message` shown in GlobalStatus */ - global_status_id?: string; + globalStatus?: { id?: string; message?: FormStatusText }; /** * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component. diff --git a/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js index 63ee3af6182..a4f0872e378 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js +++ b/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js @@ -60,7 +60,15 @@ export default class ToggleButtonGroup extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.func, + PropTypes.node, + ]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -107,7 +115,7 @@ export default class ToggleButtonGroup extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, vertical: null, layout_direction: 'row', @@ -200,7 +208,7 @@ export default class ToggleButtonGroup extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, label_direction, label_sr_only, @@ -320,7 +328,7 @@ export default class ToggleButtonGroup extends React.PureComponent { { // mount compare the snapshot From d457da4b7747dd638a529a8dc85b07af98fa0935 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Tue, 16 May 2023 12:38:38 +0200 Subject: [PATCH 04/28] update story to toggle status --- .../stories/GlobalStatus.stories.tsx | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx index adecec455a9..ae82271e009 100644 --- a/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx +++ b/packages/dnb-eufemia/src/components/global-status/stories/GlobalStatus.stories.tsx @@ -74,7 +74,7 @@ export const ComponentAsLabel = () => { } export const CustomGlobalStatusMessage = () => { - const [status, setStatus] = React.useState(null) + const [showStatus, setShowStatus] = React.useState(false) const Component = (): JSX.Element => { return <>my label @@ -88,36 +88,37 @@ export const CustomGlobalStatusMessage = () => { label_direction="vertical" globalStatus={{ id: 'test-test', message: 'Hva skjer nå' }} > - setStatus((s) => (!s ? 'min status' : null))} - > + setShowStatus((s) => !s)}> set status } - status={'Input status'} + status={showStatus ? 'Input status' : ''} globalStatus={{ - message: 'Input global status', + message: showStatus ? 'Input global status' : '', }} /> } - status="Input status withough global" + status={showStatus ? 'Input status withough global' : ''} /> } - status={'Autocomplete status'} - globalStatus={{ message: 'Autocomplete global status' }} + status={showStatus ? 'Autocomplete status' : ''} + globalStatus={{ + message: showStatus ? 'Autocomplete global status' : '', + }} /> } show_input - status="Datepicekr status" - globalStatus={{ message: 'Datepicker global status' }} + status={showStatus ? 'Datepicekr status' : ''} + globalStatus={{ + message: showStatus ? 'Datepicker global status' : '', + }} /> From b6328206c92b708a134d29ce783a6982996c1d8e Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Tue, 16 May 2023 13:07:12 +0200 Subject: [PATCH 05/28] update tests --- .../__tests__/Autocomplete.test.tsx | 2 +- .../__snapshots__/Autocomplete.test.tsx.snap | 43 ++++++--- .../button/__tests__/Button.test.tsx | 2 +- .../__snapshots__/Button.test.tsx.snap | 36 ++++++-- .../__snapshots__/Checkbox.test.tsx.snap | 9 +- .../__snapshots__/DatePicker.test.tsx.snap | 16 ++-- .../__snapshots__/Dialog.test.tsx.snap | 12 +-- .../__snapshots__/Drawer.test.tsx.snap | 12 +-- .../dropdown/__tests__/Dropdown.test.tsx | 2 +- .../__snapshots__/Dropdown.test.tsx.snap | 39 ++++++-- .../form-row/__tests__/FormRow.test.tsx | 2 +- .../__snapshots__/FormRow.test.tsx.snap | 6 +- .../form-status/__tests__/FormStatus.test.tsx | 2 +- .../__snapshots__/FormStatus.test.tsx.snap | 16 +++- .../__snapshots__/GlobalError.test.tsx.snap | 6 +- .../__snapshots__/GlobalStatus.test.tsx.snap | 29 ++++-- .../__snapshots__/InputMasked.test.tsx.snap | 6 +- .../__snapshots__/Input.test.tsx.snap | 29 +++--- .../__snapshots__/InputPassword.test.tsx.snap | 12 +-- .../__snapshots__/Modal.test.tsx.snap | 6 +- .../__snapshots__/Pagination.test.tsx.snap | 36 ++++---- .../components/radio/__tests__/Radio.test.tsx | 2 +- .../__snapshots__/Radio.test.tsx.snap | 30 ++++--- .../__snapshots__/Skeleton.test.tsx.snap | 4 +- .../__snapshots__/StepIndicator.test.tsx.snap | 90 +++++++++---------- .../switch/__tests__/Switch.test.tsx | 2 +- .../__snapshots__/Switch.test.tsx.snap | 16 +++- .../__snapshots__/Tabs.test.tsx.snap | 24 ++--- .../__snapshots__/Textarea.test.tsx.snap | 9 +- .../__tests__/ToggleButton.test.tsx | 2 +- .../__snapshots__/ToggleButton.test.tsx.snap | 72 ++++++++------- 31 files changed, 359 insertions(+), 215 deletions(-) diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx index 0646f3e97ba..f0a76faee5d 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx @@ -52,7 +52,7 @@ const snapshotProps = { no_animation: true, input_ref: null, skip_portal: true, - globalStatus: 'main', + globalStatus: { id: 'main' }, } // use no_animation so we don't need to wait diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 0551d8dd0a7..837f6bc8d03 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -28,7 +28,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` drawer_class="drawer_class" enable_body_lock={true} focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="icon" icon_position={null} icon_size="icon_size" @@ -121,7 +125,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` enable_body_lock={true} fixed_position={false} focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } handle_dismiss_focus={null} icon="icon" icon_position={null} @@ -225,7 +233,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` drawer_class="drawer_class" enable_body_lock={true} focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="icon" icon_position={null} icon_size="icon_size" @@ -331,7 +343,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="autocomplete-id-form-status" @@ -352,6 +368,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` > @@ -446,7 +467,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` clear={false} clear_button_title={null} disabled="disabled" - global_status_id={null} + globalStatus={null} icon="input_icon" icon_position={null} icon_size="icon_size" @@ -535,7 +556,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="autocomplete-id-form-status" @@ -667,7 +688,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon="submit_button_icon" icon_position="right" @@ -723,7 +744,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon="submit_button_icon" icon_position="right" @@ -785,7 +806,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="autocomplete-id-submit-button-form-status" @@ -1399,7 +1420,9 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` "drawer_class": "drawer_class", "enable_body_lock": true, "focusable": "focusable", - "global_status_id": "main", + "globalStatus": { + "id": "main", + }, "icon": "icon", "icon_position": null, "icon_size": "icon_size", diff --git a/packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx b/packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx index 98a2fe6b17c..692f5e1261b 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx +++ b/packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx @@ -31,7 +31,7 @@ props.to = null props.custom_content = null props.text = null props.icon_position = 'right' -props.globalStatus = 'main' +props.globalStatus = { id: 'main' } beforeAll(() => { jest.spyOn(global.console, 'log') diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap index beb234e3500..36e8c77c6ce 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap @@ -8,7 +8,11 @@ exports[`Button component have to match default button snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href={null} icon="question" icon_position="right" @@ -142,7 +146,11 @@ exports[`Button component have to match default button snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href={null} icon="question" icon_position="right" @@ -320,7 +328,11 @@ exports[`Button component have to match default button snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="button-form-status" @@ -350,7 +362,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href="https://url" icon="question" icon_position="right" @@ -678,7 +694,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href="https://url" icon="question" icon_position="right" @@ -862,7 +882,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="button-form-status" diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index 899cf2f35a7..e3c97babf7b 100644 --- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -13,7 +13,10 @@ exports[`Checkbox component have to match snapshot 1`] = ` "className": "className", "disabled": "disabled", "element": "element", - "global_status_id": "global_status_id", + "globalStatus": { + "id": "globalStatus.id", + "message": "globalStatus.message", + }, "id": "id", "label": "label", "label_position": "'left'", @@ -47,7 +50,7 @@ exports[`Checkbox component have to match snapshot 1`] = ` className={null} disabled={null} element="input" - global_status_id={null} + globalStatus={null} id="checkbox" label="checkbox" label_position="left" @@ -109,7 +112,7 @@ exports[`Checkbox component have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="checkbox-form-status" diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap index d45b55cd063..18d14c71a38 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -16,7 +16,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` enable_keyboard_nav={false} end_date="2019-02-15T00:00:00.000Z" first_day="monday" - global_status_id={null} + globalStatus={null} hide_days={false} hide_last_week={false} hide_navigation={false} @@ -117,7 +117,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` } } first_day="monday" - global_status_id={null} + globalStatus={null} hide_days={false} hide_last_week={false} hide_navigation={false} @@ -220,7 +220,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="date-picker-id-form-status" @@ -427,7 +427,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` clear={null} clear_button_title={null} disabled={false} - global_status_id={null} + globalStatus={null} hidden={true} icon={null} icon_position="left" @@ -509,7 +509,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="date-picker-id__input-form-status" @@ -1438,7 +1438,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` custom_content={null} disabled={false} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="calendar" icon_position="right" @@ -1526,7 +1526,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` custom_content={null} disabled={false} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="calendar" icon_position="right" @@ -1648,7 +1648,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="date-picker-id-form-status" diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index cc24b46f930..c9f46fbf542 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -167,7 +167,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} hidden={false} href={null} icon="question" @@ -255,7 +255,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} hidden={false} href={null} icon="question" @@ -379,7 +379,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="dialog_id-form-status" @@ -1117,7 +1117,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="close" icon_position="left" @@ -1157,7 +1157,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="close" icon_position="left" @@ -1245,7 +1245,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="null-form-status" diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index d9b72bb65fc..de9fb500323 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -165,7 +165,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} hidden={false} href={null} icon="question" @@ -253,7 +253,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} hidden={false} href={null} icon="question" @@ -377,7 +377,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="drawer_id-form-status" @@ -1131,7 +1131,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="close" icon_position="left" @@ -1171,7 +1171,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` custom_content={null} disabled={null} element={null} - global_status_id={null} + globalStatus={null} href={null} icon="close" icon_position="left" @@ -1259,7 +1259,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="null-form-status" diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx index f947c1fd5f1..b1f011327a4 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx @@ -46,7 +46,7 @@ const snapshotProps = { skip_portal: true, no_animation: true, variant: 'secondary', - globalStatus: 'main', + globalStatus: { id: 'main' }, } // use no_animation so we don't need to wait diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index f3d6baaa096..7c40fc1b1dd 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -61,7 +61,11 @@ exports[`Dropdown markup have to match snapshot 1`] = ` direction="bottom" disabled="disabled" focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="icon" icon_position={null} icon_size="icon_size" @@ -165,7 +169,11 @@ exports[`Dropdown markup have to match snapshot 1`] = ` enable_body_lock={false} fixed_position={false} focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } handle_dismiss_focus={null} icon="icon" icon_position={null} @@ -282,7 +290,11 @@ exports[`Dropdown markup have to match snapshot 1`] = ` direction="bottom" disabled="disabled" focusable="focusable" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="icon" icon_position={null} icon_size="icon_size" @@ -366,7 +378,11 @@ exports[`Dropdown markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="dropdown-id-form-status" @@ -387,6 +403,11 @@ exports[`Dropdown markup have to match snapshot 1`] = ` > @@ -507,7 +528,7 @@ exports[`Dropdown markup have to match snapshot 1`] = ` } disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon={false} icon_position="right" @@ -597,7 +618,7 @@ exports[`Dropdown markup have to match snapshot 1`] = ` } disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon={false} icon_position="right" @@ -663,7 +684,7 @@ exports[`Dropdown markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="dropdown-id-form-status" @@ -1264,7 +1285,9 @@ exports[`Dropdown markup have to match snapshot 1`] = ` "direction": "bottom", "disabled": "disabled", "focusable": "focusable", - "global_status_id": "main", + "globalStatus": { + "id": "main", + }, "icon": "icon", "icon_position": null, "icon_size": "icon_size", diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.tsx b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.tsx index ffc073f4832..e1c7d13d542 100644 --- a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.tsx +++ b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.tsx @@ -22,7 +22,7 @@ const props = fakeProps(require.resolve('../FormRow'), { props.id = 'form-row' props.direction = 'horizontal' props.label_direction = 'horizontal' -props.globalStatus = 'main' +props.globalStatus = { id: 'main' } describe('FormRow component', () => { const Comp = mount() diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.tsx.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.tsx.snap index 667e64148e8..4a29d110c59 100644 --- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.tsx.snap @@ -7,7 +7,11 @@ exports[`FormRow component have to match snapshot 1`] = ` className="className" direction="horizontal" disabled="disabled" - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } id="form-row" label="label" label_class="label_class" diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx index 8a4c8c6c030..2f06e0b49e8 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx @@ -25,7 +25,7 @@ props.id = 'form-status' props.text = 'text' props.state = 'error' props.status = null -props.globalStatus = 'main' +props.globalStatus = { id: 'main' } props.hidden = false props.icon = 'exclamation' diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap index 011fd134dbd..89081a3fe01 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap @@ -10,7 +10,10 @@ exports[`FormStatus component have to match snapshot 1`] = ` "children": "children", "class": "class", "className": "className", - "global_status_id": "global_status_id", + "globalStatus": { + "id": "globalStatus.id", + "message": "globalStatus.message", + }, "icon": "icon", "icon_size": "icon_size", "id": "id", @@ -66,7 +69,11 @@ exports[`FormStatus component have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } hidden={false} icon="exclamation" icon_size="medium" @@ -89,6 +96,11 @@ exports[`FormStatus component have to match snapshot 1`] = ` >