update callout

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;
     }

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",
+};

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(" ");