From 075114aa4420abbadbbb6b9bffdb259ab324a8d4 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 23 Jul 2019 08:46:55 +0200 Subject: [PATCH] feat: make it possible to send in a custom component as the #form-status content instead of only plain text --- .../src/docs/uilib/components/form-status.md | 19 +++-- .../uilib/components/form-status/Examples.js | 71 ++++++++++++++++++ .../form-status/form-status-info.md | 16 ++++ .../form-status/form-status-properties.md | 11 +++ .../src/uilib/components/demos/FormStatus.js | 44 ----------- .../uilib/components/examples/FormStatus.txt | 5 -- .../src/components/checkbox/Checkbox.js | 6 +- .../__snapshots__/Checkbox.test.js.snap | 1 - .../src/components/date-picker/DatePicker.js | 6 +- .../components/date-picker/DatePickerInput.js | 6 +- .../__snapshots__/DatePicker.test.js.snap | 1 - .../src/components/dropdown/Dropdown.js | 6 +- .../__snapshots__/Dropdown.test.js.snap | 1 - .../src/components/form-status/Example.js | 47 ------------ .../src/components/form-status/FormStatus.js | 6 +- .../__tests__/FormStatus.screenshot.test.js | 12 +++ .../__snapshots__/FormStatus.test.js.snap | 1 - ...e-to-match-custom-content-1-f2fd5.snap.png | Bin 0 -> 11231 bytes ...e-to-match-the-info-state-1-8d514.snap.png | Bin 0 -> 11352 bytes .../src/components/form-status/description.md | 4 - .../src/components/form-status/details.md | 7 -- .../form-status/style/_form-status.scss | 2 - .../__snapshots__/InputMasked.test.js.snap | 1 - .../dnb-ui-lib/src/components/input/Input.js | 6 +- .../__snapshots__/Input.test.js.snap | 1 - .../dnb-ui-lib/src/components/radio/Radio.js | 6 +- .../src/components/radio/RadioGroup.js | 6 +- .../__snapshots__/Radio.test.js.snap | 1 - .../src/components/slider/Slider.js | 6 +- .../__snapshots__/Slider.test.js.snap | 1 - .../src/components/switch/Switch.js | 6 +- .../__snapshots__/Switch.test.js.snap | 1 - .../src/components/textarea/Textarea.js | 6 +- .../__snapshots__/Textarea.test.js.snap | 1 - .../components/toggle-button/ToggleButton.js | 6 +- .../toggle-button/ToggleButtonGroup.js | 6 +- .../__snapshots__/ToggleButton.test.js.snap | 1 - .../stories/components/FormStatus.js | 43 +++++++++++ .../dnb-ui-lib/stories/componentsStories.js | 2 + 39 files changed, 233 insertions(+), 139 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-info.md create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md delete mode 100644 packages/dnb-design-system-portal/src/uilib/components/demos/FormStatus.js delete mode 100644 packages/dnb-design-system-portal/src/uilib/components/examples/FormStatus.txt delete mode 100644 packages/dnb-ui-lib/src/components/form-status/Example.js create mode 100644 packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png create mode 100644 packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-the-info-state-1-8d514.snap.png delete mode 100644 packages/dnb-ui-lib/src/components/form-status/description.md delete mode 100644 packages/dnb-ui-lib/src/components/form-status/details.md create mode 100644 packages/dnb-ui-lib/stories/components/FormStatus.js diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status.md index 4e963f64de2..a0f95b6dff4 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status.md @@ -5,11 +5,18 @@ status: null order: 4 --- - +import Tabs from 'Tags/Tabs' -import FormStatusPage from 'Src/uilib/components/demos/FormStatus' +import FormStatusInfo from 'Pages/uilib/components/form-status/form-status-info' +import FormStatusProperties from 'Pages/uilib/components/form-status/form-status-properties' - +# FormStatus + + + + + + + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js new file mode 100644 index 00000000000..5f66c02c88c --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js @@ -0,0 +1,71 @@ +/** + * UI lib Component Example + * + */ + +import React, { PureComponent, Fragment } from 'react' +import ComponentBox from 'Src/shared/tags/ComponentBox' + +class Example extends PureComponent { + render() { + return ( + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` +const CustomStatus = () => ( + <> + My info with a link and more text + +) +render( + } + status_state="info" + value="Input value" + /> +) + `} + + + ) + } +} + +export { Example } +export default () => diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-info.md new file mode 100644 index 00000000000..f7121222f9e --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-info.md @@ -0,0 +1,16 @@ +--- +draft: true +--- + +import Examples from 'Pages/uilib/components/form-status/Examples' + +## Description + +The `FormStatus` is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. ) +The `FormStatus` component should be positioned relative to the form or form input to which it referring to. + +Also, the `FormStatus` is used inside of many other form components. + +## Demos + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md new file mode 100644 index 00000000000..e912c000d1c --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md @@ -0,0 +1,11 @@ +--- +draft: true +--- + +| Properties | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `text|children` | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well. | +| `title` | _(optional)_ the `title` attribute in the status. | +| `status` | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. | +| `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. | +| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. | diff --git a/packages/dnb-design-system-portal/src/uilib/components/demos/FormStatus.js b/packages/dnb-design-system-portal/src/uilib/components/demos/FormStatus.js deleted file mode 100644 index 452717865eb..00000000000 --- a/packages/dnb-design-system-portal/src/uilib/components/demos/FormStatus.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * ATTENTION: This file is auto generated by using "makeDemosFactory". - * Do not change the content! - * - * "Component" Demo setup - * Ready for imporing in page - * - */ - -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import ItemWrapper from '../../../shared/parts/uilib/ItemWrapper' -import DemoComponent, { - Example as CodeComponent -} from 'dnb-ui-lib/src/components/form-status/Example' -import Description from 'dnb-ui-lib/src/components/form-status/description.md' -import Details from 'dnb-ui-lib/src/components/form-status/details.md' -import ExampleCode from 'raw-loader!../examples/FormStatus.txt' - -export default class FormStatusDemo extends PureComponent { - static propTypes = { - title: PropTypes.string, - id: PropTypes.string, - Description: PropTypes.func, - Details: PropTypes.func, - DemoComponent: PropTypes.func, - CodeComponent: PropTypes.func, - hideTabs: PropTypes.bool - } - static defaultProps = { - title: 'FormStatus', - id: 'form-status', - ExampleCode, - Description, - Details, - DemoComponent, - CodeComponent, - callback: CodeComponent.AdditionalCallback || null, - hideTabs: false - } - render() { - return - } -} diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/FormStatus.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/FormStatus.txt deleted file mode 100644 index 33e19009cf8..00000000000 --- a/packages/dnb-design-system-portal/src/uilib/components/examples/FormStatus.txt +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js index 4c078899ebc..cc5a6712ac2 100644 --- a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js +++ b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js @@ -33,7 +33,11 @@ export const propTypes = { checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, value: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index f9ab8caed56..5e21c9ceae5 100644 --- a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -391,7 +391,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js index 858730994ee..a14bab82d74 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js @@ -96,7 +96,11 @@ export const propTypes = { label: PropTypes.string, label_direction: PropTypes.oneOf(['horizontal', 'vertical']), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, opened: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js index e2d29580976..5aacaafa130 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js @@ -31,7 +31,11 @@ export const propTypes = { maxDate: PropTypes.instanceOf(Date), submitAttributes: PropTypes.object, range: PropTypes.bool, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, disabled: PropTypes.bool, diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 61a14dee868..c999f877cbf 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -1327,7 +1327,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js index cd79f324b5f..5fa531684c7 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js +++ b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js @@ -38,7 +38,11 @@ export const propTypes = { icon_position: PropTypes.string, label: PropTypes.string, label_direction: PropTypes.oneOf(['horizontal', 'vertical']), - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, scrollable: PropTypes.bool, diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index eece4442118..bfc3b2086bf 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -597,7 +597,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/form-status/Example.js b/packages/dnb-ui-lib/src/components/form-status/Example.js deleted file mode 100644 index 95e18559320..00000000000 --- a/packages/dnb-ui-lib/src/components/form-status/Example.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * UI lib Component Example - * - */ - -import React, { PureComponent, Fragment } from 'react' -import ComponentBox from '../../../../dnb-design-system-portal/src/shared/tags/ComponentBox' - -class Example extends PureComponent { - render() { - return ( - - - {/* @jsx */ ` - - `} - - - {/* @jsx */ ` - - `} - - - {/* @jsx */ ` - - `} - - - ) - } -} - -export { Example } -export default () => diff --git a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js index fa4aa76c6ac..042ddfc929e 100644 --- a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js +++ b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js @@ -22,7 +22,11 @@ const renderProps = { export const propTypes = { title: PropTypes.string, - text: PropTypes.string, + text: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), icon: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.screenshot.test.js b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.screenshot.test.js index 68198c94415..4c22f4ea3b6 100644 --- a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.screenshot.test.js +++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.screenshot.test.js @@ -16,4 +16,16 @@ describe('FormStatus screenshot', () => { }) expect(screenshot).toMatchImageSnapshot() }) + it('have to match the info state', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="form-status-info"] .dnb-form-status' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match custom content', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="form-status-custom"]' + }) + expect(screenshot).toMatchImageSnapshot() + }) }) diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap index f4766396c37..e0709beb4db 100644 --- a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap +++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap @@ -149,7 +149,6 @@ exports[`FormStatus scss have to match snapshot 1`] = ` * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba640cbe4e01cfb18fbf922240ef77fb44f39a5 GIT binary patch literal 11231 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 literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-the-info-state-1-8d514.snap.png b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-the-info-state-1-8d514.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2a8cf4f39bec172e3f4c6396b54d3c38194e42da GIT binary patch literal 11352 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 CO8dS5 literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/form-status/description.md b/packages/dnb-ui-lib/src/components/form-status/description.md deleted file mode 100644 index a1b96f0a9b9..00000000000 --- a/packages/dnb-ui-lib/src/components/form-status/description.md +++ /dev/null @@ -1,4 +0,0 @@ -## Description - -The form-status is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. ) -The form-status component should be positioned relative to the form or form input to which it referring to. diff --git a/packages/dnb-ui-lib/src/components/form-status/details.md b/packages/dnb-ui-lib/src/components/form-status/details.md deleted file mode 100644 index 1e58c62c40b..00000000000 --- a/packages/dnb-ui-lib/src/components/form-status/details.md +++ /dev/null @@ -1,7 +0,0 @@ -| Properties | Description | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| `text` | _(optional)_ the `text` appears as the status message. | -| `title` | _(optional)_ the `title` attribute in the status. | -| `status` | _(optional)_ defines the visual appearance of the status. There are two main statuses `[error, info]`. The default status is `info`. | -| `icon` | _(optional)_ the `icon` show before the status text. Defaults to exclamation. | -| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to medium. | diff --git a/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss b/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss index 6384318ec9d..c90110b3b25 100644 --- a/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss +++ b/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss @@ -4,8 +4,6 @@ */ .dnb-form-status { - width: auto; - display: flex; &__shell { diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 6ca42a83bd7..7e2af1b70ef 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -506,7 +506,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js index 4974e8535c7..11e06d6300a 100644 --- a/packages/dnb-ui-lib/src/components/input/Input.js +++ b/packages/dnb-ui-lib/src/components/input/Input.js @@ -38,7 +38,11 @@ export const propTypes = { id: PropTypes.string, label: PropTypes.string, label_direction: PropTypes.oneOf(['horizontal', 'vertical']), - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), input_state: PropTypes.string, status_state: PropTypes.string, status_animation: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index efa5580bb49..0b03663bc6a 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -926,7 +926,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/radio/Radio.js b/packages/dnb-ui-lib/src/components/radio/Radio.js index 37b7e821dc4..24923a9a38c 100644 --- a/packages/dnb-ui-lib/src/components/radio/Radio.js +++ b/packages/dnb-ui-lib/src/components/radio/Radio.js @@ -35,7 +35,11 @@ export const propTypes = { disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, group: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, value: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js index 48e3ef82bb7..60f22e33457 100644 --- a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js +++ b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js @@ -32,7 +32,11 @@ export const propTypes = { disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, name: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, layout_direction: PropTypes.oneOf(['column', 'row']), diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap index 5b449c5a907..42a7fdcbcad 100644 --- a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap +++ b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap @@ -662,7 +662,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js index cef4aaec486..b3b5556c3a8 100644 --- a/packages/dnb-ui-lib/src/components/slider/Slider.js +++ b/packages/dnb-ui-lib/src/components/slider/Slider.js @@ -34,7 +34,11 @@ export const propTypes = { id: PropTypes.string, label: PropTypes.string, label_direction: PropTypes.oneOf(['horizontal', 'vertical']), - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, thump_title: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap index b7834829f6a..5ae598f7845 100644 --- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap +++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap @@ -749,7 +749,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/switch/Switch.js b/packages/dnb-ui-lib/src/components/switch/Switch.js index a5f5329c429..a5b0234c20b 100644 --- a/packages/dnb-ui-lib/src/components/switch/Switch.js +++ b/packages/dnb-ui-lib/src/components/switch/Switch.js @@ -33,7 +33,11 @@ export const propTypes = { checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, value: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index ace70f6d8fc..ad91b0a944f 100644 --- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -386,7 +386,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js index eb8f5d17897..7192c232b6d 100644 --- a/packages/dnb-ui-lib/src/components/textarea/Textarea.js +++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js @@ -32,7 +32,11 @@ export const propTypes = { id: PropTypes.string, label: PropTypes.string, label_direction: PropTypes.oneOf(['horizontal', 'vertical']), - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), textarea_state: PropTypes.string, status_state: PropTypes.string, status_animation: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap index 08d26df8f5b..3db944eb461 100644 --- a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap +++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap @@ -338,7 +338,6 @@ legend.dnb-form-label { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js index 253c76e3f02..dd2ca44ca0c 100644 --- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js +++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js @@ -41,7 +41,11 @@ export const propTypes = { disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, // group: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, value: PropTypes.string, diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js index 7a280925ef0..5f798b68015 100644 --- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js +++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js @@ -35,7 +35,11 @@ export const propTypes = { disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), id: PropTypes.string, name: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.node + ]), status_state: PropTypes.string, status_animation: PropTypes.string, vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), diff --git a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap index 9c1066a3985..b0940c39797 100644 --- a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap +++ b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap @@ -1098,7 +1098,6 @@ a.dnb-button .dnb-button__text { * */ .dnb-form-status { - width: auto; display: flex; } .dnb-form-status__shell { display: flex; diff --git a/packages/dnb-ui-lib/stories/components/FormStatus.js b/packages/dnb-ui-lib/stories/components/FormStatus.js new file mode 100644 index 00000000000..b72af4d2b17 --- /dev/null +++ b/packages/dnb-ui-lib/stories/components/FormStatus.js @@ -0,0 +1,43 @@ +/** + * dnb-ui-lib Component Story + * + */ + +import React /* , { useState, useEffect } */ from 'react' +import { Wrapper, Box } from '../helpers' +// import styled from '@emotion/styled' + +import { Input, FormStatus } from '../../src/components' +import { H2, Link } from '../../src/elements' + +const CustomStatus = () => ( + <> +

Custom Status

+ Goto more text + +) +export default [ + 'FormStatus', + () => ( + + + Status + + + + Long info text Ipsum habitant enim ullamcorper elit sit elementum + platea rutrum eu condimentum erat risus lacinia viverra magnis + lobortis nibh mollis suspendisse + + + + + + + + + }>Value + + + ) +] diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js index 055c6b5fb1d..3dc711e6715 100644 --- a/packages/dnb-ui-lib/stories/componentsStories.js +++ b/packages/dnb-ui-lib/stories/componentsStories.js @@ -25,6 +25,7 @@ import FormSetStory from './components/FormSet' import Dropdown from './components/Dropdown' import Space from './components/Space' import Tabs from './components/Tabs' +import FormStatus from './components/FormStatus' import { Button, Icon, IconPrimary, Logo } from '../src/components' const stories = [] @@ -48,6 +49,7 @@ stories.push(FormSetStory) stories.push(Dropdown) stories.push(Space) stories.push(Tabs) +stories.push(FormStatus) stories.push([ 'Logo',