feat(panel): support collapsible panel without header/title

Render collapse toggle in card body if header/title missing, also create ColorVariant shared
interface

Author: MatthewDorner

src/components/Alert/Alert.tsx

@@ -1,13 +1,14 @@
 import React, { Component, ReactNode } from 'react'
 import BootstrapAlert from 'react-bootstrap/Alert'
+import { ColorVariant } from '../../interfaces'
 import { Button } from '../Button'
 
 interface Props {
   /**
    * Defines the color of the alert. Defaults to primary.
    * @default "primary"
    */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'
+  color?: ColorVariant
   /** Defines the title of the alert. */
   title?: string
   /** Defines the message of the alert. */

src/components/Badge/Badge.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import BootstrapBadge from 'react-bootstrap/Badge'
+import { ColorVariant } from '../../interfaces'
 
 interface Props {
   /** Defines the color of the badge. Defaults to primary. */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'
+  color?: ColorVariant
   /** The children to render */
   children?: React.ReactNode
 }

src/components/Button/Button.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import BootstrapButton from 'react-bootstrap/Button'
-import { ButtonType, ButtonColor } from './interfaces'
+import { ButtonType } from './interfaces'
+import { ColorVariant } from '../../interfaces'
 import { IconType } from '../Icon/interfaces'
 import { Icon } from '../Icon'
 
 export interface Props {
   /** Determines if the button should be outlined and not filled. By defaut is false */
   outlined?: boolean
   /** Defines the button variant. By default is primary */
-  color?: ButtonColor
+  color?: ColorVariant
   /** Determines whether or not the button should be a block button or not. By default false */
   block?: boolean
   /** Determines whether or not the button should be disabled or not. By default is false. */

src/components/List/ListItem.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import ListGroupItem from 'react-bootstrap/ListGroupItem'
+import { ColorVariant } from '../../interfaces'
 
 interface Props {
   /** Defines the color of the list item. */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'
+  color?: ColorVariant
   /** Applies additional hover, active and disabled styles to the list item. */
   action?: boolean
   /** Indicates the list group's current active selection. */

src/components/Navbar/Navbar.tsx

@@ -7,6 +7,7 @@ import NavDropdown from 'react-bootstrap/NavDropdown'
 
 import { Button } from '../Button'
 import { NavLink, Brand, NavLinkElement } from './interfaces'
+import { ColorVariant } from '../../interfaces'
 
 interface Props extends React.Props<any> {
   /** Determines the navbar background color */
@@ -18,15 +19,7 @@ interface Props extends React.Props<any> {
   /** Determines the hospital/clinic name to be shown at the navbar */
   brand: Brand
   /** Defines the button variant. By default is primary */
-  buttonColor?:
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'info'
-    | 'light'
-    | 'dark'
+  buttonColor?: ColorVariant
   /** Handles the on click search button event */
   onSearchButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   /** Handles the on change search form event */

src/components/Panel/Panel.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
 import { Card, Collapse } from 'react-bootstrap'
 import { Icon } from '../Icon'
+import { ColorVariant } from '../../interfaces'
 
 interface Props {
   /** Defines the color of the panel */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'
+  color?: ColorVariant
   /** The body for the panel */
   children?: React.ReactNode
   /** The title for the Panel */
@@ -21,24 +22,27 @@ const Panel = (props: Props) => {
   const { color, children, footer, title, collapsible, collapsed } = props
   const [open, setOpen] = useState(!collapsed)
 
+  const collapseIcon = (
+    <span style={{ float: 'right' }}>
+      <Icon
+        icon={open ? 'up-arrow' : 'down-arrow'}
+        onClick={() => setOpen(!open)}
+        aria-controls="collapse-body"
+        aria-expanded={open}
+      />
+    </span>
+  )
+
   return (
     <Card border={color}>
       {title && (
         <Card.Header style={{ textAlign: 'left' }}>
           {title}
-          {collapsible && (
-            <span style={{ float: 'right' }}>
-              <Icon
-                icon={open ? 'up-arrow' : 'down-arrow'}
-                onClick={() => setOpen(!open)}
-                aria-controls="collapse-body"
-                aria-expanded={open}
-              />
-            </span>
-          )}
+          {collapsible && collapseIcon}
         </Card.Header>
       )}
       <Card.Body style={{ textAlign: 'left' }}>
+        {collapsible && !title && collapseIcon}
         <Collapse in={open}>
           <div id="collapse-body">{children}</div>
         </Collapse>

src/components/Pill/Pill.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import Badge from 'react-bootstrap/Badge'
+import { ColorVariant } from '../../interfaces'
 
 interface Props {
   /** Defines the color of the pill. Defaults to primary. */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'
+  color?: ColorVariant
   /** The children to render */
   children?: React.ReactNode
 }

src/index.tsx

@@ -9,6 +9,7 @@ export * from './components/Button'
 export * from './components/Icon'
 export * from './components/Image'
 export * from './components/Badge'
+export * from './components/Panel'
 export * from './components/Pill'
 export * from './components/Checkbox'
 export * from './components/Navbar'

src/interfaces/index.tsx

@@ -0,0 +1,9 @@
+export type ColorVariant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'light'
+  | 'dark'

stories/panel.stories.tsx

@@ -18,19 +18,14 @@ storiesOf('Panel', module)
       </Panel>
     </div>
   ))
-  .add('Empty Panel', () => (
-    <div>
-      <Panel />
-    </div>
-  ))
-  .add('Header Panel', () => (
+  .add('Title Panel', () => (
     <div>
       <Panel title="Panel Title">
         <p>You can add stuff here!</p>
       </Panel>
     </div>
   ))
-  .add('Header and Footer Panel', () => (
+  .add('Title and Footer Panel', () => (
     <div>
       <Panel title="Panel Title" footer="Panel Footer">
         <p>You can add stuff here!</p>
@@ -73,6 +68,14 @@ storiesOf('Panel', module)
       </Panel>
     </div>
   ))
+  .add('Collapsible Panel Without Title', () => (
+    <div>
+      <Panel collapsible>
+        <p>You can add stuff here!</p>
+        <p>You can open and close me!</p>
+      </Panel>
+    </div>
+  ))
   .add('Collapsed Collapsible Panel', () => (
     <div>
       <Panel collapsible title="Panel Title" collapsed>