Using SVG icon and styling

amundsen_application/static/js/components/common/Alert/AlertIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const STROKE_COLOR = '#b8072c'; // $red70
+const SIZE = 16;
+
+const AlertIcon: React.FC = () => {
+  return (
+    <svg
+      width={SIZE}
+      height={SIZE}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={STROKE_COLOR}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="alert-triangle-svg-icon"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h0" />
+    </svg>
+  );
+};
+
+export default AlertIcon;

amundsen_application/static/js/components/common/Alert/alert.story.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import { ImageIconType } from 'interfaces/Enums';
 import StorySection from '../StorySection';
 import Alert from '.';
 
@@ -13,17 +12,38 @@ stories.add('Alert', () => (
       <Alert
         message="Alert text that can be short"
         onAction={() => {
-          alert('message closed!');
+          alert('action executed!');
         }}
       />
     </StorySection>
+    <StorySection title="Alert with text link">
+      <Alert
+        message={
+          <span>
+            Alert text that has a <a href="https://lyft.com">link</a>
+          </span>
+        }
+      />
+    </StorySection>
     <StorySection title="Alert with Action">
       <Alert
         message="Alert text that can be short"
         actionText="Action Text"
         onAction={() => {
-          alert('message closed!');
+          alert('action executed!');
+        }}
+      />
+    </StorySection>
+    <StorySection title="Alert with long text">
+      <Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!" />
+    </StorySection>
+    <StorySection title="Alert with long text and action">
+      <Alert
+        actionText="Action Text"
+        onAction={() => {
+          alert('action executed!');
         }}
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!"
       />
     </StorySection>
   </>

amundsen_application/static/js/components/common/Alert/index.spec.tsx

@@ -4,7 +4,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 
-import { ImageIconType } from 'interfaces/Enums';
 import Alert, { AlertProps } from '.';
 
 const setup = (propOverrides?: Partial<AlertProps>) => {
@@ -23,7 +22,7 @@ describe('Alert', () => {
     it('should render an alert icon', () => {
       const { wrapper } = setup();
       const expected = 1;
-      const actual = wrapper.find(`.${ImageIconType.ALERT}`).length;
+      const actual = wrapper.find('.alert-triangle-svg-icon').length;
 
       expect(actual).toEqual(expected);
     });

amundsen_application/static/js/components/common/Alert/index.tsx

@@ -3,14 +3,14 @@
 
 import * as React from 'react';
 
-import { ImageIconType } from 'interfaces/Enums';
+import AlertIcon from './AlertIcon';
 
 import './styles.scss';
 
 export interface AlertProps {
-  message: string;
+  message: string | React.ReactNode;
   actionText?: string;
-  onAction: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Alert: React.FC<AlertProps> = ({
@@ -21,7 +21,7 @@ const Alert: React.FC<AlertProps> = ({
   return (
     <div className="alert">
       <div>
-        <img className={`icon ${ImageIconType.ALERT}`} alt="" />
+        <AlertIcon />
         <p className="alert-message">{message}</p>
       </div>
       {actionText && onAction && (

amundsen_application/static/js/components/common/Alert/styles.scss

@@ -4,33 +4,30 @@
 @import 'variables';
 @import 'typography';
 
-$alert-height: 56px;
 $alert-border-radius: 4px;
 $alert-message-line-height: 24px;
 
 .alert {
-  background-color: $body-bg-dark;
+  background-color: $body-bg;
   border-radius: $alert-border-radius;
-  color: $white;
   display: flex;
-  height: $alert-height;
-  padding: $spacer-2;
-  padding-right: $spacer-1 * 1.5;
+  padding: $spacer-1 $spacer-1 * 1.5 $spacer-1 $spacer-2;
   justify-content: space-between;
+  box-shadow: $elevation-level2;
 
-  .message {
-    @extend %text-body-w3;
+  .alert-message {
+    @extend %text-body-w2;
 
-    line-height: $alert-message-line-height;
+    // line-height: $alert-message-line-height;
     margin: 0;
     display: inline;
   }
 
-  .icon {
-    margin: 0 $spacer-1 0 0;
+  .alert-triangle-svg-icon {
+    margin: 0 $spacer-1 -2px 0;
   }
 
-  .btn-close {
+  .btn-link {
     margin: auto 0 auto $spacer-3;
   }
 }

amundsen_application/static/js/components/common/StorySection/index.tsx

@@ -11,10 +11,10 @@ const StorySection: React.FC<BlockProps> = ({
   text,
   title,
 }: BlockProps) => (
-  <div style={{ padding: '2em', maxWidth: 600 }}>
+  <div style={{ padding: '2em 2em 1em', maxWidth: 600 }}>
     <h1 className="text-headline-w1">{title}</h1>
     {text && <p className="text-body-w1">{text}</p>}
-    {children}
+    <div style={{ paddingTop: '1em' }}>{children}</div>
   </div>
 );