chore: tweaks notices icon color, storybook and spacing (amundsen-io#2106)

Signed-off-by: Marcos Iglesias <[email protected]>

Author: Golodhros

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

@@ -10,26 +10,43 @@ import { NoticeSeverity } from 'config/config-types';
 import StorySection from '../StorySection';
 import { Alert, AlertList } from '.';
 
+const ALERT_CONTAINER_WIDTH = 425;
+
 export const AlertStory = (): React.ReactNode => (
   <>
-    <StorySection title="Alert">
+    <StorySection title="Alert" width={ALERT_CONTAINER_WIDTH}>
       <Alert
         message="Alert text that can be short"
         onAction={() => {
           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 title="Alert with long text" width={ALERT_CONTAINER_WIDTH}>
+      <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!" />
+    </StorySection>
+    <StorySection
+      title="Alert with medium long text and action"
+      width={ALERT_CONTAINER_WIDTH}
+    >
+      <Alert
+        actionText="Action Text"
+        onAction={() => {
+          alert('action executed!');
+        }}
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis"
+      />
     </StorySection>
-    <StorySection title="Alert with long text and action">
+    <StorySection
+      title="Alert with long text and action"
+      width={ALERT_CONTAINER_WIDTH}
+    >
       <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!"
+        message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum!"
       />
     </StorySection>
   </>

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

@@ -21,7 +21,7 @@ $alert-alert-background: #ffe4dd;
 .alert {
   border-radius: $alert-border-radius;
   display: flex;
-  padding: $spacer-1 $spacer-1 * 1.5 $spacer-1 $spacer-2;
+  padding: $spacer-1 $spacer-1 $spacer-1 $spacer-2;
   justify-content: flex-start;
   box-shadow: $elevation-level2;
   border: none;
@@ -49,7 +49,7 @@ $alert-alert-background: #ffe4dd;
   .info-svg-icon {
     flex-shrink: 0;
     align-self: center;
-    margin-right: $spacer-1;
+    margin-right: $spacer-2;
   }
 
   .alert-action {

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

@@ -3,20 +3,24 @@
 
 import * as React from 'react';
 
+const DEFAULT_WIDTH = 600;
+
 export type BlockProps = {
   children: React.ReactNode;
   title: string;
   text?: string | React.ReactNode;
+  width?: number;
 };
 
 const StorySection: React.FC<BlockProps> = ({
   children,
   text,
   title,
+  width = DEFAULT_WIDTH,
 }: BlockProps) => (
   <div
     className="story-section"
-    style={{ padding: '2em 2em 1em', maxWidth: 600 }}
+    style={{ padding: '2em 2em 1em', maxWidth: width }}
   >
     <h1 className="text-headline-w1">{title}</h1>
     {text && <p className="text-body-w1">{text}</p>}