refactor: 💡 alert component storybook (#337)

* refactor: 💡 alert component storybook * refactor: 💡 refactor alert component to use new markup
seb-oss · Jan 25, 2022 · 6cdee71 · 6cdee71
1 parent c6d6189
commit 6cdee71
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 62 deletions.
diff --git a/libs/react/src/lib/alert/alert.spec.tsx b/libs/react/src/lib/alert/alert.spec.tsx
@@ -1,7 +1,12 @@
 import { render, screen } from '@testing-library/react'
 import Alert from './alert'
+import Button from '../form/button/button'
 
 describe('Alert', () => {
+  const Header = () => <h3>Card Headline</h3>
+
+  const Footer = () => <Button>Default Button</Button>
+
   it('renders', () => {
     render(<Alert type="info">Alert</Alert>)
 
@@ -19,11 +24,21 @@ describe('Alert', () => {
   })
   it('renders heading', () => {
     render(
-      <Alert type="info" heading="Heading">
+      <Alert type="info" header={<Header />}>
+        Alert
+      </Alert>
+    )
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Card Headline')
+  })
+
+  it('renders footer', () => {
+    render(
+      <Alert type="info" footer={<Footer />}>
         Alert
       </Alert>
     )
 
-    expect(screen.getByRole('heading')).toHaveTextContent('Heading')
+    expect(screen.getByRole('contentinfo')).toHaveTextContent('Default Button')
   })
 })
diff --git a/libs/react/src/lib/alert/alert.stories.mdx b/libs/react/src/lib/alert/alert.stories.mdx
@@ -6,65 +6,92 @@ export const Template = ({ children, ...props }) => (
   <Alert {...props}>{children}</Alert>
 )
 
+export const Footer = () => (
+  <>
+    <Button>Default button</Button>
+    <Button variant="primary">Primary Button</Button>
+  </>
+)
+
 <Meta title="Components/Alert" component={Alert} />
 
 # Alerts
 
-<Alert
-  type="info"
-  heading="Info"
-  buttons={[
-    <Button>Button</Button>,
-    <Button variant="primary">Primary</Button>,
-  ]}
->
-  This is an alert <a href="#">with a link</a>.
-</Alert>
-
-<Alert
-  type="success"
-  heading="Success"
-  buttons={[
-    <Button>Button</Button>,
-    <Button variant="primary">Primary</Button>,
-  ]}
->
-  This is an alert <a href="#">with a link</a>.
-</Alert>
-
-<Alert
-  type="warning"
-  heading="Warning"
-  buttons={[
-    <Button>Button</Button>,
-    <Button variant="primary">Primary</Button>,
-  ]}
->
-  This is an alert <a href="#">with a link</a>.
-</Alert>
-
-<Alert
-  type="danger"
-  heading="Danger"
-  buttons={[
-    <Button>Button</Button>,
-    <Button variant="primary">Primary</Button>,
-  ]}
+Simple Alert Component
+
+<Story
+  name="Alert"
+  args={{
+    type: 'info',
+    header: 'Heading',
+    footer: <Footer />,
+    children: 'Alert',
+    isCloseable: false,
+    closeText: '',
+  }}
 >
-  This is an alert <a href="#">with a link</a>.
-</Alert>
+  {Template.bind({})}
+</Story>
+
+#
+
+## Types
+
+Set a alert type for color coded alerts.
+
+<Canvas>
+  <Alert type="info" header="Info" isCloseable={false}>
+    Alert content placed inside a paragraph. Inline <a href="#">links</a> will
+    inherit color from alert to make sure contrast is applied.
+  </Alert>
+  <Alert type="success" header="Success" isCloseable={false}>
+    Alert content placed inside a paragraph. Inline <a href="#">links</a> will
+    inherit color from alert to make sure contrast is applied.
+  </Alert>
+  <Alert type="warning" header="Warning" isCloseable={false}>
+    Alert content placed inside a paragraph. Inline <a href="#">links</a> will
+    inherit color from alert to make sure contrast is applied.
+  </Alert>
+  <Alert type="danger" header="Danger" isCloseable={false}>
+    Alert content placed inside a paragraph. Inline <a href="#">links</a> will
+    inherit color from alert to make sure contrast is applied.
+  </Alert>
+</Canvas>
+
+## Alert with Close button
+
+Close button icon
+
+<Canvas>
+  <Alert type="info" header="Info" isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="success" header="Success" isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="warning" header="Warning" isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="danger" header="Danger" isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+</Canvas>
+
+## Alert with Footer Buttons
+
+Button components can be passed in as a footer
 
 <Canvas>
-  <Story
-    name="Alert"
-    args={{
-      type: 'info',
-      heading: 'Heading',
-      children: 'Alert',
-      isCloseable: true,
-      closeText: '',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Alert type="info" header="Info" footer={<Footer />} isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="success" header="Success" footer={<Footer />} isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="warning" header="Warning" footer={<Footer />} isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
+  <Alert type="danger" header="Danger" footer={<Footer />} isCloseable={true}>
+    This is an alert <a href="#">with a link</a>.
+  </Alert>
 </Canvas>
diff --git a/libs/react/src/lib/alert/alert.tsx b/libs/react/src/lib/alert/alert.tsx
@@ -1,18 +1,20 @@
 import { AlertType } from '@sebgroup/extract'
-import { ReactNode, useEffect, useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import Button from '../form/button/button'
 
 export interface AlertProps {
   children: ReactNode
   type: AlertType
-  heading?: string
+  header?: ReactNode
+  footer?: ReactNode
   isCloseable?: boolean
   closeText?: string
 }
 
 export function Alert({
   type,
-  heading,
+  header,
+  footer,
   children,
   closeText,
   isCloseable = true,
@@ -22,16 +24,26 @@ export function Alert({
     if (!isCloseable) {
       setCloseButton(null)
     } else {
-      if (closeText) setCloseButton(<Button>{closeText}</Button>)
+      if (closeText)
+        setCloseButton(
+          <Button variant="ghost">
+            <span className="sr-only">{closeText}</span>
+          </Button>
+        )
       else setCloseButton(<button className="close" />)
     }
   }, [isCloseable, closeText])
 
   return (
     <div role="alert" className={type}>
-      {heading && <h3>{heading}</h3>}
+      {header && (
+        <header>
+          {React.isValidElement(header) ? header : <h3>{header}</h3>}
+          {closeButton}
+        </header>
+      )}
       <p>{children}</p>
-      {closeButton}
+      {footer && <footer>{footer}</footer>}
     </div>
   )
 }