Improve example of Alert and remove info-dark type

vtex · Mar 23, 2018 · e234a94 · e234a94
1 parent 960c63d
commit e234a94
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 55 deletions.
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -1,53 +1,40 @@
-Info
+Default
 
 ```js
-<Alert>
-  Congrats! Your recovery code was printed and the app authenticator was
-  sucessfully validated.
-</Alert>
+<div>
+  <div className="mb5">
+    <Alert
+      autoClose={3000}
+      onClose={() => console.log("Auto closed after 3000ms!")}
+    >
+      Congrats! Your recovery code was printed and the app authenticator was
+      sucessfully validated.
+    </Alert>
+  </div>
+</div>
 ```
 
-Warning
+Alerts
 
 ```js
-<Alert type="warning" onClose={() => console.log("Closed!")}>
-  This action is irreversible!
-</Alert>
+<div>
+  <div className="mb5">
+    <Alert type="success" onClose={() => console.log("Closed!")}>
+      Your action was complete!
+    </Alert>
+  </div>
+
+  <div className="mb5">
+    <Alert type="warning" onClose={() => console.log("Closed!")}>
+      This action is irreversible!
+    </Alert>
+  </div>
+
+  <div>
+    <Alert type="error" onClose={() => console.log("Closed!")}>
+      You can't delete this item.
+    </Alert>
+  </div>
+</div>
 ```
 
-Error
-
-```js
-<Alert type="error" onClose={() => console.log("Closed!")}>
-  You can't delete this item.
-</Alert>
-```
-
-Success
-
-```js
-<Alert type="success" onClose={() => console.log("Closed!")}>
-  Your action was complete!
-</Alert>
-```
-
-Info Dark
-
-```js
-<Alert type="info-dark" onClose={() => console.log("Closed!")}>
-  Congrats! Your recovery code was printed and the app authenticator was
-  sucessfully validated.
-</Alert>
-```
-
-Auto Close
-
-```js
-<Alert
-  autoClose={3000}
-  onClose={() => console.log("Auto closed after 3000ms!")}
->
-  Congrats! Your recovery code was printed and the app authenticator was
-  sucessfully validated.
-</Alert>
-```
diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js
@@ -23,7 +23,6 @@ class Alert extends Component {
     let showIcon = false
     let Icon = 'div'
     let color = config.colors['serious-black']
-    let closeBtnColor = 'near-black'
 
     switch (type) {
       case 'success': {
@@ -47,20 +46,14 @@ class Alert extends Component {
         color = config.colors['yellow']
         break
       }
-      case 'info-dark': {
-        classes += 'bg-serious-black light-silver '
-        color = config.colors['white']
-        closeBtnColor = config.colors['white']
-        break
-      }
       default: {
         classes += 'bg-washed-blue '
         break
       }
     }
 
     return (
-      <div className={`flex justify-between f6 near-black ${classes}`}>
+      <div className={`flex justify-between f5 near-black ${classes}`}>
         <div className="flex items-center">
           {showIcon && <Icon color={color} size={18} />}
 
@@ -71,7 +64,7 @@ class Alert extends Component {
 
         {onClose &&
           <div className="pointer flex items-center pv2" onClick={onClose}>
-            <CloseIcon color={closeBtnColor} size={10} />
+            <CloseIcon color={config.colors['near-black']} size={10} />
           </div>}
       </div>
     )
@@ -80,7 +73,7 @@ class Alert extends Component {
 
 Alert.propTypes = {
   /** Style of the alert */
-  type: PropTypes.oneOf(['success', 'error', 'warning', 'info', 'info-dark']),
+  type: PropTypes.oneOf(['success', 'error', 'warning', 'info']),
   /** Content of the alert */
   children: PropTypes.node.isRequired,
   /** If this function is defined, a close icon will appear and this function will be called when alert is closed. */