Make Alert title optional (#86) (#89)

* Make title optional * Without title story * Fix link
saleor · Nov 25, 2021 · 67cb115 · 67cb115
1 parent a5433f1
commit 67cb115
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/Alert/Alert.stories.tsx b/src/Alert/Alert.stories.tsx
@@ -1,4 +1,4 @@
-import Typography from "@material-ui/core/Typography";
+import { Link, Typography } from "@material-ui/core";
 import { Meta, Story } from "@storybook/react";
 import React from "react";
 
@@ -34,6 +34,15 @@ export const Custom: Story = () => (
   </AlertBase>
 );
 
+export const WithoutTitle: Story = () => (
+  <Alert close={false} variant="info">
+    <Typography>
+      Gift cards will appear after their order is fullfilled.{" "}
+      <Link>View Orders with Gift Cards</Link>
+    </Typography>
+  </Alert>
+);
+
 export default {
   title: "Alert",
 } as Meta;
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
@@ -10,7 +10,7 @@ import useStyles from "./styles";
 
 export interface AlertProps extends AlertBaseProps {
   close?: boolean;
-  title: string;
+  title?: string;
 }
 const Icon: React.FC<{ variant: AlertVariant }> = ({ variant }) => {
   switch (variant) {
@@ -47,7 +47,7 @@ export const Alert: React.FC<AlertProps> = ({
         </div>
         <div className={classes.content}>
           <div className={classes.titleBar}>
-            <Typography variant="h5">{title}</Typography>
+            {title && <Typography variant="h5">{title}</Typography>}
             {close && (
               <IconButton
                 className={clsx(classes.close, {