feat: upgrade fundamental-styles to 0.4.0-rc.24 (#878)

FormInput
- changed `state` prop options to match new validation states

Checkbox
- new `state` prop: added validation states

FormRadioGroup
- **`div` to Fragment to match html from Fundamental Styles**

FormItem
- new `isHorizontal` prop
- **`isInline` becomes internal only prop as it is only meant for Checkboxes and Radios**

FormRadioItem
- new `compact` prop
- new `state` prop: added validation states
- **`inline` prop becomes internal use only - should only be applied to `FormRadioGroup`**

FormSelect
- new `state` prop: added validation states
- new `compact` prop

FormTextarea
- new `compact`, `disabled` and `readOnly` props
- new `state` prop: added validation states

Combobox Input
- rebuilt with InputGroup
- new `state` prop: added validation states
 
SearchInput
- rebuilt with InputGroup
- new `state` prop: added validation states

InputGroup
- new `disabled` prop
- new `state` prop: added validation states
-  **fixed `compact` prop so that appropriate `fd-input-group__addon—compact` class is added to InputGroup.Addon**

MultiInput
- rebuilt with InputGroup
- **changed `placeHolder` prop to `placeholder`**
- new `state` prop: added validation states

FormLabel
- reworked `required` prop
- new `is-Toggle` prop - internal use only
- new `is-Checkbox` prop - internal use only
- new `is-Radio` prop - internal use only
- new `is-InlineHelp` prop - add this to any labels used with InlineHelp component

FormMessage
- **changed types options: help -> information**

TimePicker
- rebuilt with InputGroup

Alert
- **`div` for text changed to `p`**

package.json

@@ -49,8 +49,7 @@
     "@babel/runtime": "^7.8.0",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
-    "fundamental-styles": "~0.4.0-rc.3",
-    "hoist-non-react-statics": "^3.3.0",
+    "fundamental-styles": "0.4.0-rc.24",
     "keycode": "^2.2.0",
     "moment": "^2.24.0",
     "prop-types": "^15.7.1",

src/Alert/Alert.js

@@ -1,4 +1,5 @@
 import { ALERT_TYPES } from '../utils/constants';
+import Button from '../Button/Button';
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import Icon from '../Icon/Icon';
@@ -56,14 +57,16 @@ const Alert = (props) => {
                     className={alertClasses}
                     role='alert'>
                     {dismissible && (
-                        <button
+                        <Button
                             {...buttonProps}
                             aria-controls='j2ALl423'
                             aria-label={localizedText.close}
                             className='fd-alert__close'
-                            onClick={closeAlertHandler} />
+                            compact
+                            onClick={closeAlertHandler}
+                            option='light' />
                     )}
-                    <div className='fd-alert__text'>
+                    <p className='fd-alert__text'>
                         {type && (
                             <Icon disableStyles={disableStyles} glyph={`message-${type}`} />
                         )}
@@ -76,7 +79,7 @@ const Alert = (props) => {
                                 {linkText}{' '}
                             </Link>
                         )}
-                    </div>
+                    </p>
                 </div>
             )}
         </div>

src/Alert/__snapshots__/Alert.test.js.snap

@@ -9,10 +9,11 @@ exports[`<Alert /> create basic alert 1`] = `
     <button
       aria-controls="j2ALl423"
       aria-label="Close"
-      className="fd-alert__close"
+      className="fd-button--light fd-button--compact fd-alert__close"
       onClick={[Function]}
+      type="button"
     />
-    <div
+    <p
       className="fd-alert__text"
     >
       Default alert with a
@@ -23,7 +24,7 @@ exports[`<Alert /> create basic alert 1`] = `
         link
          
       </a>
-    </div>
+    </p>
   </div>
 </div>
 `;
@@ -37,17 +38,18 @@ exports[`<Alert /> create basic alert 2`] = `
     <button
       aria-controls="j2ALl423"
       aria-label="Close"
-      className="fd-alert__close"
+      className="fd-button--light fd-button--compact fd-alert__close"
       onClick={[Function]}
+      type="button"
     />
-    <div
+    <p
       className="fd-alert__text"
     >
       <span
         className="sap-icon--message-error"
       />
       Error message with a
-    </div>
+    </p>
   </div>
 </div>
 `;
@@ -58,7 +60,7 @@ exports[`<Alert /> create non-dismissible alert 1`] = `
     className="fd-alert blue"
     role="alert"
   >
-    <div
+    <p
       className="fd-alert__text"
     >
       Default alert that cannot be dismissed
@@ -69,7 +71,7 @@ exports[`<Alert /> create non-dismissible alert 1`] = `
         link
          
       </a>
-    </div>
+    </p>
   </div>
 </div>
 `;

src/Alert/__stories__/Alert.stories.js

@@ -2,25 +2,35 @@ import Alert from '../Alert';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import {
+    boolean,
+    select,
+    text,
     withKnobs
 } from '@storybook/addon-knobs';
 
+
+const createProps = (overrides) => ({
+    dismissible: boolean('dismissible', false),
+    type: select('Validation State', {
+        'default': null,
+        'warning': 'warning',
+        'error': 'error',
+        'success': 'success',
+        'information': 'information'
+    }),
+    linkText: text('linkText', 'Default Alert'),
+    link: text('href', ''),
+    ...overrides
+});
+
 storiesOf('Components|Alert', module)
     .addDecorator(withKnobs)
     .add('Default', () => (
-        <Alert
-            dismissible
-            link='#'
-            linkText='link'>
-                    Default alert
-        </Alert>
+        <Alert {...createProps()}>Default alert</Alert>
     ))
     .add('disable styles', () => (
-        <Alert
-            disableStyles
-            dismissible
-            link='#'
-            linkText='link'>
+        <Alert {...createProps()}
+            disableStyles>
                     Default alert
         </Alert>
     ));

src/Button/Button.Component.js

@@ -82,13 +82,11 @@ export const ButtonComponent = () => {
 
                         <Button glyph='cart' option='light' />
 
-                        <Button glyph='filter' option='standard' />
+                        <Button glyph='filter' type='standard' />
 
                         <Button glyph='accept' type='positive' />
 
                         <Button glyph='decline' type='negative' />
-
-                        <Button glyph='alert' type='negative' />
                     </div>
                 </div>
             </Example>