feat: use state instead of status on #form-status (but status w…

…ill still work in future)
dnbexperience · Jul 24, 2019 · e0c9da5 · e0c9da5
1 parent 524ea39
commit e0c9da5
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 17 deletions.
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
@@ -28,7 +28,7 @@ class Example extends PureComponent {
 <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"
+  state="info"
 />
           `}
         </ComponentBox>
@@ -76,7 +76,7 @@ const myHTML = \`
 \`
 const CustomStatus = () => <span dangerouslySetInnerHTML={{ __html: myHTML }} />
 render(
-  <FormStatus status="info">
+  <FormStatus state="info">
     <CustomStatus />
   </FormStatus>
 )

diff --git a/...n-system-portal/src/docs/uilib/components/form-status/form-status-properties.md b/...n-system-portal/src/docs/uilib/components/form-status/form-status-properties.md
@@ -6,6 +6,6 @@ draft: true
 | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `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`. |
+| `state`         | _(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/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -761,6 +761,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
           icon="exclamation"
           icon_size="medium"
           render_content={null}
+          state="error"
           status="error"
           text="status"
           text_id="date-picker-id-status"

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
@@ -167,6 +167,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
         icon="exclamation"
         icon_size="medium"
         render_content={null}
+        state="error"
         status="error"
         text="status"
         text_id="dropdown-id-status"

diff --git a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js
@@ -33,7 +33,8 @@ export const propTypes = {
     PropTypes.node
   ]),
   icon_size: PropTypes.string,
-  status: PropTypes.oneOf(['error', 'info']),
+  state: PropTypes.oneOf(['error', 'info']),
+  status: PropTypes.oneOf(['error', 'info']), // Deprecated
   hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   text_id: PropTypes.string,
   class: PropTypes.string,
@@ -56,7 +57,8 @@ export const defaultProps = {
   text: null,
   icon: 'exclamation',
   icon_size: 'medium',
-  status: 'error',
+  state: 'error',
+  status: null, // Deprecated
   hidden: false,
   text_id: null,
   class: null,
@@ -87,11 +89,11 @@ export default class FormStatus extends PureComponent {
     return processChildren(props)
   }
 
-  static getIcon({ status, icon, icon_size }) {
+  static getIcon({ state, icon, icon_size }) {
     if (typeof icon === 'string') {
       let iconToLoad = icon
 
-      switch (status) {
+      switch (state) {
         case 'info':
         case 'information':
           iconToLoad = 'information'
@@ -107,13 +109,13 @@ export default class FormStatus extends PureComponent {
     return icon
   }
 
-  correctStatus(status) {
-    switch (status) {
+  correctStatus(state) {
+    switch (state) {
       case 'information':
-        status = 'info'
+        state = 'info'
         break
     }
-    return status
+    return state
   }
 
   render() {
@@ -126,6 +128,7 @@ export default class FormStatus extends PureComponent {
     const {
       title,
       status: rawStatus,
+      state: rawState,
       hidden,
       className,
       animation,
@@ -138,9 +141,9 @@ export default class FormStatus extends PureComponent {
       ...attributes
     } = props
 
-    const status = this.correctStatus(rawStatus)
+    const state = this.correctStatus(rawStatus || rawState)
     const iconToRender = FormStatus.getIcon({
-      status,
+      state,
       icon,
       icon_size
     })
@@ -152,7 +155,7 @@ export default class FormStatus extends PureComponent {
       hidden,
       className: classnames(
         'dnb-form-status',
-        `dnb-form-status--${status}`,
+        `dnb-form-status--${state}`,
         animation ? `dnb-form-status--${animation}` : null,
         hasStringContent ? 'dnb-form-status--has-content' : null,
         createSpacingClasses(props),

diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js
@@ -21,7 +21,8 @@ import dnb_form_status_theme_ui from '../style/themes/dnb-form-status-theme-ui.s
 const props = fakeProps(require.resolve('../FormStatus'), {
   optional: true
 })
-props.status = 'error'
+props.state = 'error'
+props.status = null
 props.hidden = false
 props.icon = 'exclamation'
 

diff --git a/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -9,7 +9,8 @@ exports[`FormStatus component have to match snapshot 1`] = `
   icon="exclamation"
   icon_size="icon_size"
   render_content={[Function]}
-  status="error"
+  state="error"
+  status={null}
   text="text"
   text_id="text_id"
   title="title"

diff --git a/packages/dnb-ui-lib/stories/components/FormStatus.js b/packages/dnb-ui-lib/stories/components/FormStatus.js
@@ -24,7 +24,7 @@ export default [
         <FormStatus>Status</FormStatus>
       </Box>
       <Box>
-        <FormStatus status="info">
+        <FormStatus state="info">
           Long info text Ipsum habitant enim ullamcorper elit sit elementum
           platea rutrum eu condimentum erat risus lacinia viverra magnis
           lobortis nibh mollis suspendisse