Extracts SVGIcons, adds story, adds link and custom action element to…

… Alert

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

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

@@ -25,7 +25,7 @@ stories.add('Alert', () => (
         }
       />
     </StorySection>
-    <StorySection title="Alert with Action">
+    <StorySection title="Alert with Action as button">
       <Alert
         message="Alert text that can be short"
         actionText="Action Text"
@@ -34,6 +34,23 @@ stories.add('Alert', () => (
         }}
       />
     </StorySection>
+    <StorySection title="Alert with Action as link">
+      <Alert
+        message="Alert text that can be short"
+        actionText="Action Text"
+        actionHref="http://www.lyft.com"
+      />
+    </StorySection>
+    <StorySection title="Alert with Action as custom link">
+      <Alert
+        message="Alert text that can be short"
+        actionLink={
+          <a className="test-action-link" href="http://testSite.com">
+            Custom Link
+          </a>
+        }
+      />
+    </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>

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

@@ -76,6 +76,22 @@ describe('Alert', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when passing a custom action link', () => {
+      it('should render the custom action link', () => {
+        const { wrapper } = setup({
+          actionLink: (
+            <a className="test-action-link" href="http://testSite.com">
+              Custom Link
+            </a>
+          ),
+        });
+        const expected = 1;
+        const actual = wrapper.find('.test-action-link').length;
+
+        expect(actual).toEqual(expected);
+      });
+    });
   });
 
   describe('lifetime', () => {

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

@@ -3,12 +3,15 @@
 
 import * as React from 'react';
 
-import AlertIcon from './AlertIcon';
+import { AlertIcon, IconSizes } from '../SVGIcons';
 
 import './styles.scss';
 
+const STROKE_COLOR = '#b8072c'; // $red70
+
 export interface AlertProps {
   message: string | React.ReactNode;
+  actionLink?: React.ReactNode;
   actionText?: string;
   actionHref?: string;
   onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -19,21 +22,39 @@ const Alert: React.FC<AlertProps> = ({
   onAction,
   actionText,
   actionHref,
+  actionLink,
 }: AlertProps) => {
-  return (
-    <div className="alert">
-      <AlertIcon />
-      <p className="alert-message">{message}</p>
-      {actionText && onAction && (
+  let action = null;
+
+  if (actionText && onAction) {
+    action = (
+      <span className="alert-action">
         <button type="button" className="btn btn-link" onClick={onAction}>
           {actionText}
         </button>
-      )}
-      {actionText && actionHref && (
+      </span>
+    );
+  }
+
+  if (actionText && actionHref) {
+    action = (
+      <span className="alert-action">
         <a className="action-link" href={actionHref}>
           {actionText}
         </a>
-      )}
+      </span>
+    );
+  }
+
+  if (actionLink) {
+    action = <span className="alert-action">{actionLink}</span>;
+  }
+
+  return (
+    <div className="alert">
+      <AlertIcon stroke={STROKE_COLOR} size={IconSizes.SMALL} />
+      <p className="alert-message">{message}</p>
+      {action}
     </div>
   );
 };

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

@@ -18,7 +18,6 @@ $alert-message-line-height: 24px;
   .alert-message {
     @extend %text-body-w2;
 
-    // line-height: $alert-message-line-height;
     margin: 0;
     display: inline;
   }
@@ -29,7 +28,7 @@ $alert-message-line-height: 24px;
     margin-right: $spacer-1;
   }
 
-  .btn-link {
+  .alert-action {
     margin: auto 0 auto auto;
   }
 }

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

@@ -1,16 +1,25 @@
 import * as React from 'react';
 
-const STROKE_COLOR = '#b8072c'; // $red70
-const SIZE = 16;
+import { IconSizes } from '.';
 
-const AlertIcon: React.FC = () => {
+const DEFAULT_STROKE_COLOR = 'currentColor';
+
+export interface IconProps {
+  stroke?: string;
+  size?: number;
+}
+
+export const AlertIcon: React.FC<IconProps> = ({
+  stroke = DEFAULT_STROKE_COLOR,
+  size = IconSizes.REGULAR,
+}: IconProps) => {
   return (
     <svg
-      width={SIZE}
-      height={SIZE}
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       fill="none"
-      stroke={STROKE_COLOR}
+      stroke={stroke}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -20,5 +29,3 @@ const AlertIcon: React.FC = () => {
     </svg>
   );
 };
-
-export default AlertIcon;

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

@@ -0,0 +1,6 @@
+export * from './AlertIcon';
+
+export enum IconSizes {
+  REGULAR = 24,
+  SMALL = 16,
+}

amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import StorySection from '../StorySection';
+import { AlertIcon } from '.';
+
+const stories = storiesOf('Attributes/Icons', module);
+
+stories.add('SVG Icons', () => (
+  <>
+    <StorySection title="Alert">
+      <AlertIcon />
+    </StorySection>
+  </>
+));