feat: make it possible to send in a custom component as the #form-sta…

…tus content instead of only plain text

packages/dnb-design-system-portal/src/docs/uilib/components/form-status.md

@@ -5,11 +5,18 @@ status: null
 order: 4
 ---
 
-<!--
-  ATTENTION: This file is auto generated by using "makeDemosFactory".
-  Do not change the content!
--->
+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'
 
-<FormStatusPage />
+# FormStatus
+
+<Tabs>
+  <Tabs.Content>
+    <FormStatusInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <FormStatusProperties />
+  </Tabs.Content>
+</Tabs>

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 (
+      <Fragment>
+        <ComponentBox
+          caption="FormStatus displaying error status"
+          data-dnb-test="form-status"
+        >
+          {/* @jsx */ `
+<FormStatus
+  text="Failure text"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="FormStatus displaying info status"
+          data-dnb-test="form-status-info"
+        >
+          {/* @jsx */ `
+<FormStatus
+  title="Hover title"
+  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
+  status="info"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="A form status, used by the Input Component">
+          {/* @jsx */ `
+<Input
+  label="Input with status:"
+  status="You have to fill in this field"
+  value="Input value"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="A form status, with a custom styled content"
+          data-dnb-test="form-status-custom"
+          useRender
+        >
+          {/* @jsx */ `
+const CustomStatus = () => (
+  <>
+    My info <Link href="/">with a link</Link> and more text
+  </>
+)
+render(
+  <Input
+    label="Input with custom content:"
+    status={ <CustomStatus /> }
+    status_state="info"
+    value="Input value"
+  />
+)
+          `}
+        </ComponentBox>
+      </Fragment>
+    )
+  }
+}
+
+export { Example }
+export default () => <Example />

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
+
+<Examples />

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`.                                                                      |

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,

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;

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]),

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,

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;

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,

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;

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,

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()
+  })
 })

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;

packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss

@@ -4,8 +4,6 @@
  */
 
 .dnb-form-status {
-  width: auto;
-
   display: flex;
 
   &__shell {

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;

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,

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;