feat: Add dismissible callout variant (#442)

pluralsh · Mar 29, 2023 · e405a3e · e405a3e
1 parent 7260ee8
commit e405a3e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 5 deletions.
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -11,7 +11,7 @@ import { ColorKey, Severity } from 'src/types'
 import { Flex } from 'honorable'
 import AnimateHeight from 'react-animate-height'
 
-import { CaretDownIcon } from '../icons'
+import { CaretDownIcon, CloseIcon } from '../icons'
 
 import {
   FillLevel,
@@ -77,6 +77,9 @@ export type CalloutProps = PropsWithChildren<{
   expandable?: boolean
   expanded?: boolean
   onExpand?: Dispatch<boolean>
+  closeable?: boolean
+  closed?: boolean
+  onClose?: Dispatch<boolean>
 }>
 
 export function CalloutButton(props: ButtonProps) {
@@ -95,12 +98,19 @@ const Callout = forwardRef<HTMLDivElement, CalloutProps>(({
   expandable = false,
   expanded = false,
   onExpand,
+  closeable = false,
+  closed = false,
+  onClose,
   fillLevel,
   className,
   buttonProps,
   children,
 },
 ref) => {
+  if (expandable && closeable) {
+    throw new Error('Callout component cannot be expandable and closable at the same time')
+  }
+
   severity = useMemo(() => {
     if (!severityToIconColorKey[severity]) {
       console.warn(`Callout: Incorrect severity (${severity}) specified. Valid values are ${SEVERITIES.map(s => `"${s}"`).join(', ')}. Defaulting to "${DEFAULT_SEVERITY}".`)
@@ -129,6 +139,10 @@ ref) => {
     iconTopMargin += 2
   }
 
+  if (closed) {
+    return null
+  }
+
   return (
     <FillLevelProvider value={fillLevel}>
       <CalloutWrap
@@ -162,7 +176,7 @@ ref) => {
             )}
           </AnimateHeight>
         </div>
-        {expandable && (
+        {(expandable || closeable) && (
           <Flex
             grow={1}
             justify="flex-end"
@@ -172,8 +186,11 @@ ref) => {
               display="flex"
               size="small"
               clickable
-              onClick={() => onExpand && onExpand(!expanded)}
-              icon={<CaretDownIcon className="expandIcon" />}
+              onClick={() => {
+                if (expandable && onExpand) onExpand(!expanded)
+                if (closeable && onClose) onClose(!closed)
+              }}
+              icon={expandable ? <CaretDownIcon className="expandIcon" /> : <CloseIcon />}
             />
           </Flex>
         )}

diff --git a/src/stories/Callout.stories.tsx b/src/stories/Callout.stories.tsx
@@ -3,7 +3,12 @@ import { Div, Flex } from 'honorable'
 import { useState } from 'react'
 
 import { FillLevel } from '../components/contexts/FillLevelContext'
-import { Callout, CalloutProps, Card } from '..'
+import {
+  Button,
+  Callout,
+  CalloutProps,
+  Card,
+} from '..'
 
 export default {
   title: 'Callout',
@@ -120,6 +125,40 @@ function ExpandableTemplate({ title }: CalloutProps) {
   )
 }
 
+function CloseableTemplate({ title }: CalloutProps) {
+  const [closed, setClosed] = useState(false)
+
+  return (
+    <Flex
+      flexDirection="column"
+      gap="large"
+      maxWidth={600}
+    >
+      {styles.map(style => (
+        <Callout
+          key={style}
+          severity={style}
+          title={title}
+          buttonProps={{ children: 'Learn more' }}
+          closeable
+          closed={closed}
+          onClose={setClosed}
+        >
+          {fullContent}
+        </Callout>
+      ))}
+      {closed && (
+        <Button
+          secondary
+          onClick={() => setClosed(false)}
+        >
+          Reset
+        </Button>
+      )}
+    </Flex>
+  )
+}
+
 export const Default = Template.bind({})
 Default.args = {
   title: '',
@@ -157,6 +196,11 @@ Expandable.args = {
   title: 'Why do I need to authenticate with GitHub/GitLab?',
 }
 
+export const Closeable = CloseableTemplate.bind({})
+Expandable.args = {
+  title: 'Why do I need to authenticate with GitHub/GitLab?',
+}
+
 export const KitchenSink = Template.bind({})
 KitchenSink.args = {
   title: 'Title text - How to write a dummy title',