From 6910bfa7c03b1ce5684b031900afade935631e08 Mon Sep 17 00:00:00 2001
From: Dexter <dexter.edwards93@gmail.com>
Date: Tue, 14 Dec 2021 10:16:53 +0000
Subject: [PATCH] update callout

---
 src/components/callout/callout.scss        | 7 +++++++
 src/components/callout/callout.stories.tsx | 5 +++++
 src/components/callout/callout.tsx         | 6 +++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/callout/callout.scss b/src/components/callout/callout.scss
index 8ee2065f9..00648849e 100644
--- a/src/components/callout/callout.scss
+++ b/src/components/callout/callout.scss
@@ -5,6 +5,7 @@
   padding: 14px;
   border: 1px solid $white;
   box-shadow: 3px 3px 0px $white;
+  margin: 12px 0;
 
   p {
     margin: 0 0 10px 0;
@@ -24,10 +25,16 @@
   }
 
   &--warn {
+    box-shadow: 5px 5px 0px $vega-orange3;
+  }
+
+  &--action {
     box-shadow: 5px 5px 0px $vega-yellow3;
   }
 
   &__content {
+    width: 100%;
+
     > :last-child {
       margin-bottom: 0;
     }
diff --git a/src/components/callout/callout.stories.tsx b/src/components/callout/callout.stories.tsx
index 5869c71d4..219cf2e41 100644
--- a/src/components/callout/callout.stories.tsx
+++ b/src/components/callout/callout.stories.tsx
@@ -29,3 +29,8 @@ export const Warning = Template.bind({});
 Warning.args = {
   intent: "warn",
 };
+
+export const Action = Template.bind({});
+Action.args = {
+  intent: "action",
+};
diff --git a/src/components/callout/callout.tsx b/src/components/callout/callout.tsx
index 3571c2aa6..18ea1dae2 100644
--- a/src/components/callout/callout.tsx
+++ b/src/components/callout/callout.tsx
@@ -6,9 +6,9 @@ export const Callout = ({
   intent,
   icon,
 }: {
-  children: React.ReactNode;
-  title?: string;
-  intent?: "success" | "error" | "warn";
+  children?: React.ReactNode;
+  title?: React.ReactElement | string;
+  intent?: "success" | "error" | "warn" | "action";
   icon?: React.ReactNode;
 }) => {
   const className = ["callout", intent ? `callout--${intent}` : ""].join(" ");