feat: add info variant to CardStatus; refactor to TypeScript

src/Card/CardContext.jsx → src/Card/CardContext.tsx

@@ -1,14 +1,32 @@
 import React, { createContext } from 'react';
 import PropTypes from 'prop-types';
 
-const CardContext = createContext({});
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'light' | 'dark' | 'muted';
+
+interface CardContextProviderProps {
+  /** Specifies which orientation to use. */
+  orientation: Orientation;
+  /** Specifies loading state. */
+  isLoading: boolean;
+  /** Specifies content of the component. */
+  children: React.ReactNode;
+  /** Specifies `Card` style variant */
+  variant: Variant;
+}
+
+const CardContext = createContext({
+  orientation: 'vertical' as Orientation,
+  isLoading: false,
+  variant: 'light' as Variant,
+});
 
 function CardContextProvider({
   orientation,
   children,
   isLoading,
   variant,
-}) {
+}: CardContextProviderProps) {
   return (
     <CardContext.Provider value={{ orientation, isLoading, variant }}>
       {children}

src/Card/CardStatus.jsx → src/Card/CardStatus.tsx

@@ -1,14 +1,31 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { Requireable } from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import Icon from '../Icon';
 import CardContext from './CardContext';
 
-const CardStatus = React.forwardRef(({
+type Variant = 'primary' | 'success' | 'danger' | 'warning' | 'info';
+
+export interface CardStatusProps {
+  /** Specifies the content of the component. */
+  children: React.ReactNode;
+  /** The class to append to the base element. */
+  className?: string;
+  /** Icon that will be shown in the top-left corner. */
+  icon?: React.ComponentType;
+  /** Specifies variant to use. */
+  variant?: Variant;
+  /** Specifies title for the `Card.Status`. */
+  title?: React.ReactNode;
+  /** Specifies any optional actions, e.g. button(s). */
+  actions?: React.ReactNode;
+}
+
+const CardStatus = React.forwardRef<HTMLDivElement, CardStatusProps>(({
   className,
   children,
-  variant,
+  variant = 'warning',
   icon,
   title,
   actions,
@@ -56,10 +73,11 @@ const CardStatus = React.forwardRef(({
     </div>
   );
 });
+CardStatus.displayName = 'CardStatus';
 
 CardStatus.propTypes = {
   /** Specifies the content of the component. */
-  children: PropTypes.node.isRequired,
+  children: (PropTypes.node as unknown as Requireable<React.ReactNode>).isRequired,
   /** The class to append to the base element. */
   className: PropTypes.string,
   /** Icon that will be shown in the top-left corner. */
@@ -70,19 +88,20 @@ CardStatus.propTypes = {
     'success',
     'danger',
     'warning',
+    'info',
   ]),
   /** Specifies title for the `Card.Status`. */
-  title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  title: (PropTypes.node as unknown as Requireable<React.ReactNode>),
   /** Specifies any optional actions, e.g. button(s). */
-  actions: PropTypes.node,
+  actions: (PropTypes.node as unknown as Requireable<React.ReactNode>),
 };
 
 CardStatus.defaultProps = {
   className: undefined,
   icon: undefined,
   variant: 'warning',
   title: undefined,
-  actions: undefined,
+  actions: null,
 };
 
 export default CardStatus;

src/Card/README.md

@@ -525,7 +525,7 @@ An optional `actions` prop may be passed to include call-to-action button(s).
       <ExamplePropsForm
         inputs={[
           { value: orientation, setValue: setOrientation, options: ['horizontal', 'vertical'], name: 'orientation' },
-          { value: variant, setValue: setVariant, options: ['primary', 'warning', 'danger', 'success'], name: 'status-variant' },
+          { value: variant, setValue: setVariant, options: ['primary', 'warning', 'danger', 'success', 'info'], name: 'status-variant' },
           { value: showCardStatusActions, setValue: setCardStatusActions, options: ['true', 'false'], name: 'card-status-actions' },
         ]}
       />