SAP
diff --git a/‎package-lock.json
Copy file name to clipboard
+31-11Lines changed: 31 additions & 11 deletions b/‎package-lock.json
Copy file name to clipboard
+31-11Lines changed: 31 additions & 11 deletions
diff --git a/‎package.json
Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions b/‎package.json
Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions
diff --git a/‎src/Alert/Alert.js
Copy file name to clipboard
+7-4Lines changed: 7 additions & 4 deletions b/‎src/Alert/Alert.js
Copy file name to clipboard
+7-4Lines changed: 7 additions & 4 deletions
diff --git a/‎src/Alert/__snapshots__/Alert.test.js.snap
Copy file name to clipboard
+10-8Lines changed: 10 additions & 8 deletions b/‎src/Alert/__snapshots__/Alert.test.js.snap
Copy file name to clipboard
+10-8Lines changed: 10 additions & 8 deletions
diff --git a/‎src/Alert/__stories__/Alert.stories.js
Copy file name to clipboard
+21-11Lines changed: 21 additions & 11 deletions b/‎src/Alert/__stories__/Alert.stories.js
Copy file name to clipboard
+21-11Lines changed: 21 additions & 11 deletions
diff --git a/‎src/Button/Button.Component.js
Copy file name to clipboard
+1-3Lines changed: 1 addition & 3 deletions b/‎src/Button/Button.Component.js
Copy file name to clipboard
+1-3Lines changed: 1 addition & 3 deletions
@@ -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",
 
@@ -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>
 
@@ -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>
 `;
@@ -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>
     ));
@@ -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>