fix: change and enhance properties for #input component and #form-input

packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -644,24 +644,22 @@ a.dnb-button {
     color: var(--color-black);
     font-size: 0.75em;
     line-height: 1.25rem; }
-  .dnb-form-label ~ .dnb-input__extra-information {
+  > .dnb-form-label ~ .dnb-input__extra-information {
     padding: 0.5em 0; }
   .dnb-input__search-submit {
     transform: translateX(var(--button-border-width)); }
-  .dnb-input .dnb-form-label {
+  .dnb-input > .dnb-form-label {
     margin-right: 1rem; }
-  .dnb-input .dnb-form-status {
+  .dnb-input > .dnb-form-status {
     margin-top: 0.5rem; }
-  .dnb-input__status--error .dnb-input__shell {
-    border-color: red; }
 
 .dnb-form-row {
   display: inline-flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%; }
-  .dnb-form-row .dnb-form-label {
+  .dnb-form-row > .dnb-form-label {
     margin-right: 1rem; }
 
 .dnb-dropdown {

packages/dnb-ui-lib/src/components/form-status/FormStatus.js

@@ -26,9 +26,9 @@ export const propTypes = {
     PropTypes.node
   ]),
   icon_size: PropTypes.string,
-  status: PropTypes.string,
+  status: PropTypes.oneOf(['error', 'info']),
   class: PropTypes.string,
-  fade_in: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  animation: PropTypes.string,
   /** React props */
   className: PropTypes.string,
   children: PropTypes.oneOfType([
@@ -44,10 +44,10 @@ export const defaultProps = {
   title: null,
   text: null,
   icon: 'exclamation',
-  icon_size: 'medium',
+  icon_size: 'default',
   status: 'error',
   class: null,
-  fade_in: true,
+  animation: null, // could be 'fade-in'
   /** React props */
   className: null,
   children: null,
@@ -71,31 +71,42 @@ export default class FormStatus extends PureComponent {
     return processChildren(props)
   }
 
+  static getIcon({ status, icon, icon_size }) {
+    if (typeof icon === 'string') {
+      let iconToLoad = icon
+
+      switch (status) {
+        case 'info':
+          iconToLoad = 'info'
+          break
+        case 'error':
+        default:
+          iconToLoad = 'exclamation'
+      }
+
+      icon = <IconPrimary icon={iconToLoad} size={icon_size} />
+    }
+
+    return icon
+  }
+
   render() {
     const {
       title,
-      icon,
-      icon_size,
       status,
       className,
-      fade_in,
+      animation,
       class: _className
     } = this.props
 
+    const iconToRender = FormStatus.getIcon(this.props)
     const contentToRender = FormStatus.getContent(this.props)
-    const iconToRender =
-      typeof icon === 'string' ? (
-        <IconPrimary icon={icon} size={icon_size} />
-      ) : (
-        // React.isValidElement(icon)
-        icon
-      )
 
     const params = {
       className: classnames(
         'dnb-form-status',
-        fade_in ? 'dnb-form-status--fade-in' : null,
         `dnb-form-status--${status}`,
+        animation ? `dnb-form-status--${animation}` : null,
         className,
         _className
       ),

packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js

@@ -15,6 +15,7 @@ import Component from '../FormStatus'
 const props = fakeProps(require.resolve('../FormStatus'), {
   optional: true
 })
+props.status = 'error'
 props.icon = 'exclamation'
 
 describe('FormStatus component', () => {

packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`FormStatus component have to match snapshot 1`] = `
 <FormStatus
+  animation="animation"
   class="class"
   className="className"
-  fade_in="fade_in"
   icon="exclamation"
   icon_size="icon_size"
   render_content={[Function]}
-  status="status"
+  status="error"
   text="text"
   title="title"
 >
   <span
-    className="dnb-form-status dnb-form-status--fade-in dnb-form-status--status className class"
+    className="dnb-form-status dnb-form-status--error dnb-form-status--animation className class"
     title="title"
   >
     <IconPrimary

packages/dnb-ui-lib/src/components/form-status/details.md

@@ -1,7 +1,7 @@
-| Properties  | Description                                                                   |
-| ----------- | ----------------------------------------------------------------------------- |
-| `title`     | _(optional)_ the `title` attribute in the status.                             |
-| `text`      | _(optional)_ the `text` visual of the status.                                 |
-| `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.             |
-| `status`    | _(optional)_ defaults to error.                                               |
+| 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.                                                                    |

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

@@ -15,11 +15,12 @@
 
   height: var(--input-height);
   border-radius: var(--input-border-radius);
+  border-color: var(--color-emerald-green);
 
   line-height: var(--input-height);
 
   &--text {
-    padding: 0.5em 0;
+    padding: 0.5em 1em;
 
     cursor: text;
     color: var(--color-emerald-green);
@@ -28,7 +29,11 @@
     transform: translateY(1px);
   }
 
-  .dnb-icon {
+  .dnb-icon + &--text {
+    padding: 0.5em;
+  }
+
+  > .dnb-icon {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -37,11 +42,13 @@
     height: 1.5em;
 
     margin: 0.5em;
+    margin-right: 0;
 
     color: inherit;
 
     border-radius: 50%;
-    border: 1px solid var(--color-emerald-green);
+    border: 1px solid;
+    border-color: currentColor;
   }
 
   // &--error {

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

@@ -4,16 +4,12 @@
 * ======================================================================== */
 
 .dnb-form-status {
-  background-color: var(--color-cherry-red-80);
-
-  .dnb-icon {
-    border-color: var(--color-emerald-green);
-  }
-
   &--error {
     color: var(--color-cherry-red);
-    .dnb-icon {
-      border-color: var(--color-cherry-red);
-    }
+    background-color: var(--color-cherry-red-80);
+  }
+  &--info {
+    color: var(--color-summer-green);
+    background-color: var(--color-sea-green-4);
   }
 }

packages/dnb-ui-lib/src/components/icon/Icon.js

@@ -16,8 +16,8 @@ import {
 export const DefaultIconSize = 16
 export const DefaultIconSizes = {
   default: 16,
-  medium: 24,
-  large: 32
+  medium: 24
+  // large: 32 // currently not in use
 }
 export const ListDefaultIconSizes = Object.entries(DefaultIconSizes)
 
@@ -231,7 +231,7 @@ export const loadSVG = (icon, size = null, listOfIcons = null) => {
   // for importing react component
   try {
     icon = iconCase(icon)
-    if (size && !/[0-9]/.test(size)) {
+    if (size && size !== 'default' && !/[0-9]/.test(size)) {
       icon = `${icon}_${size}`
     }
     const mod = (listOfIcons.dnbIcons

packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap

@@ -11,11 +11,9 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
   custom_method={null}
   description={null}
   disabled={false}
-  extra_information={null}
   id={null}
   inputElement={[Function]}
   input_class={null}
-  input_typo="dnb-typo-number--lining"
   label={null}
   mask={Array []}
   on_blur={null}
@@ -29,6 +27,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
   show_mask="show_mask"
   size={null}
   status={null}
+  status_animation={null}
   status_state="error"
   type="text"
   value="test"
@@ -502,24 +501,22 @@ a.dnb-button {
     color: var(--color-black);
     font-size: 0.75em;
     line-height: 1.25rem; }
-  .dnb-form-label ~ .dnb-input__extra-information {
+  > .dnb-form-label ~ .dnb-input__extra-information {
     padding: 0.5em 0; }
   .dnb-input__search-submit {
     transform: translateX(var(--button-border-width)); }
-  .dnb-input .dnb-form-label {
+  .dnb-input > .dnb-form-label {
     margin-right: 1rem; }
-  .dnb-input .dnb-form-status {
+  .dnb-input > .dnb-form-status {
     margin-top: 0.5rem; }
-  .dnb-input__status--error .dnb-input__shell {
-    border-color: red; }
 
 .dnb-form-row {
   display: inline-flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%; }
-  .dnb-form-row .dnb-form-label {
+  .dnb-form-row > .dnb-form-label {
     margin-right: 1rem; }
 
 .dnb-input-masked {

packages/dnb-ui-lib/src/components/input/Example.js

@@ -69,7 +69,6 @@ class Example extends PureComponent {
         </div>
         <div className="example-box">
           <Input
-            type="text"
             label="Medium input:"
             size="medium"
             placeholder="Medium input placeholder"
@@ -78,7 +77,6 @@ class Example extends PureComponent {
         </div>
         <div className="example-box">
           <Input
-            type="text"
             label="Large input:"
             size="large"
             align="right"
@@ -94,25 +92,11 @@ class Example extends PureComponent {
             placeholder="Disabled Input with a placeholder"
           />
         </div>
-        <div className="example-box">
-          <Input
-            label="My Label:"
-            type="text"
-            autocomplete="on"
-            placeholder="Placeholder text"
-            description="Kr"
-            extra_information="Info: numbers are ligned by using dnb-typo-number--lining"
-            ref={this._ref}
-            on_change={this.handleInputChange}
-          >
-            This is the value 1234567890
-          </Input>
-        </div>
         <div className="example-box">
           <Input
             label="Show status:"
-            status="true"
-            value="Shows status on border only"
+            status="error"
+            value="Shows status with border only"
           />
         </div>
         <div className="example-box">
@@ -122,6 +106,21 @@ class Example extends PureComponent {
             value="Input value with error"
           />
         </div>
+        <div className="example-box">
+          <Input
+            label="My Status:"
+            autocomplete="on"
+            placeholder="Placeholder text"
+            description="After info"
+            status="Numbers are ligned by using Proportional Lining"
+            status_state="info"
+            status_animation="fade-in"
+            ref={this._ref}
+            on_change={this.handleInputChange}
+          >
+            This is the value 1234567890
+          </Input>
+        </div>
       </Fragment>
     )
   }