Info Card -> PROD-2321 Bug Hunt Intake

src-ts/lib/index.ts

@@ -23,6 +23,7 @@ export {
     xhrPatchAsync,
     xhrPostAsync,
 } from './functions'
+export * from './info-card'
 export * from './loading-spinner'
 export * from './modals'
 export * from './page-footer'

src-ts/lib/info-card/InfoCard.module.scss

@@ -0,0 +1,61 @@
+@import '../styles/includes';
+
+.card {
+    width: 100%;
+    margin-top: 32px;
+    padding: 16px;
+
+    &.collapsible {
+        border-radius: 4px;
+    }
+
+    &.notCollapsible {
+        border-radius: 8px;
+    }
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &.collapsible {
+            cursor: pointer;
+        }
+
+        span {
+            @include font-black-100;
+            font-size: 18px;
+            line-height: 22px;
+            text-transform: uppercase;
+            font-weight: 600;
+        }
+
+        .arrowIcon {
+
+            &.up {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .spacing {
+        padding-bottom: 17px;
+    }
+
+    .content {
+        @include font-black-100;
+        @include font-roboto;
+    }
+}
+
+.info {
+    background-color: $black-5;
+}
+
+.success {
+    background-color: $turq-15;
+}
+
+.warn {
+    background-color: $orange-25;
+}

src-ts/lib/info-card/InfoCard.tsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames'
+import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+
+import { ArrowIcon } from '../svgs'
+
+import styles from './InfoCard.module.scss'
+
+interface InfoCardProps {
+    children: ReactNode,
+    color: 'info' | 'success' | 'warn',
+    defaultOpen: boolean,
+    isCollapsible: boolean,
+    title?: string,
+}
+
+const InfoCard: FC<InfoCardProps> = ({
+    children,
+    color = 'info',
+    defaultOpen = true,
+    isCollapsible = false,
+    title,
+}: InfoCardProps) => {
+
+    const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(defaultOpen)
+    const collapsibleClass: string = isCollapsible ? styles.collapsible : styles.notCollapsible
+    const showSpacing: boolean = isOpen && !!title && !!children
+
+    return (
+        <div className={classNames(styles.card, styles[color], collapsibleClass)}>
+            {renderHeader(isCollapsible, isOpen, setIsOpen, title || '')}
+
+            {showSpacing && (
+                <div className={styles.spacing}></div>
+            )}
+
+            {isOpen &&
+                <div className={styles.content}>{children}</div>
+            }
+        </div>
+    )
+}
+
+function renderHeader(
+    isCollapsible: boolean,
+    isOpen: boolean,
+    setIsOpen: Dispatch<SetStateAction<boolean>>,
+    title: string
+): JSX.Element {
+
+    const arrowClass: string = isOpen ? styles.up : undefined
+
+    if (isCollapsible) {
+        return (
+            <div
+                className={classNames(styles.title, styles.collapsible)}
+                onClick={() => setIsOpen(!isOpen)}
+                role='button'
+                tabIndex={0}
+            >
+                <span>{title}</span>
+
+                <div className={classNames(styles.arrowIcon, arrowClass)}>
+                    <ArrowIcon />
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.title}>
+            <span>{title}</span>
+        </div>
+    )
+}
+
+export default InfoCard

src-ts/lib/info-card/index.ts

@@ -0,0 +1 @@
+export { default as InfoCard } from './InfoCard'

src-ts/lib/svgs/index.ts

@@ -3,6 +3,7 @@ import * as IconOutline from '@heroicons/react/outline'
 import * as IconSolid from '@heroicons/react/solid'
 
 import { ReactComponent as ActiveTabTipIcon } from './activetab-tip-icon.svg'
+import { ReactComponent as ArrowIcon } from './icon-arrow.svg'
 import { ReactComponent as LogoIcon } from './logo.svg'
 import { ReactComponent as SocialIconFacebook } from './social-fb-icon.svg'
 import { ReactComponent as SocialIconInstagram } from './social-insta-icon.svg'
@@ -12,6 +13,7 @@ import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
 
 export { ActiveTabTipIcon }
+export { ArrowIcon }
 export { IconOutline }
 export { IconSolid }
 export { LogoIcon }