fix(CToast): add missing color prop

Author: xidedix

src/index.d.ts

@@ -951,6 +951,7 @@ interface CToast extends HTMLPropsNoClassName {
   show?: boolean;
   autohide?: number | boolean;
   fade?: boolean;
+  color?: string;
   onStateChange?: Function;
 }
 

src/toast/CToast.js

@@ -19,6 +19,7 @@ const CToast = props => {
     show,
     autohide,
     fade,
+    color,
     onStateChange,
     ...attributes
   } = props
@@ -83,7 +84,13 @@ const CToast = props => {
   }
 
   // render
-  const classes = classNames('toast', className)
+  const classes = classNames(
+    {
+      toast: true,
+      [`toast-${color}`]: !!color
+    },
+    className
+  )
 
   const fadeClasses = classNames(
     fade && (state === 'hiding' ? 'toast-fade-slow' : 'toast-fade')
@@ -120,6 +127,7 @@ CToast.propTypes = {
   show: PropTypes.bool,
   autohide: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
   fade: PropTypes.bool,
+  color: PropTypes.string,
   onStateChange: PropTypes.func
 };
 

src/toast/CToastHeader.js

@@ -28,7 +28,7 @@ const CToastHeader = props => {
     <div className={classes} {...attributes} ref={innerRef}>
       { children }
       { closeButton && 
-        <CButtonClose className="ml-auto" onClick={close}/>}
+        <CButtonClose className="mfs-auto" onClick={close}/>}
     </div>
   )
 }

src/toast/tests/CToast.test.js

@@ -23,6 +23,7 @@ describe('CToast', () => {
         show
         autohide
         fade
+        color={'danger'}
       >
         CToast
       </CToast>

src/toast/tests/__snapshots__/CToast.test.js.snap

@@ -6,7 +6,7 @@ exports[`CToast renders customized wrapper correctly 1`] = `
 <div
   aria-atomic="true"
   aria-live="assertive"
-  className="toast class-name toast-fade"
+  className="toast toast-danger class-name toast-fade"
   onMouseOut={[Function]}
   onMouseOver={[Function]}
   role="alert"

src/toast/tests/__snapshots__/CToastHeader.test.js.snap

@@ -6,7 +6,7 @@ exports[`CToastHeader renders basic wrapper correctly 1`] = `
 >
   <button
     aria-label="Close"
-    className="close ml-auto"
+    className="close mfs-auto"
   >
     ×
   </button>
@@ -20,7 +20,7 @@ exports[`CToastHeader renders customized wrapper correctly 1`] = `
   CToastHeader
   <button
     aria-label="Close"
-    className="close ml-auto"
+    className="close mfs-auto"
   >
     ×
   </button>

stories/CToast.stories.js

@@ -24,7 +24,18 @@ export const basic = () => {
   const autohide = boolean('Autohide', false, 'Other')
   const fade = boolean('Fade', true, 'Other')
   const closeButton = boolean('Close button', true, 'Other')
-
+  const colorOptions = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'light',
+    'dark',
+    ''
+  ]
+  const color = select('Color', colorOptions, '', 'Other')
 
   return <>
     <CCol lg="6" md="8" xs="12">
@@ -37,6 +48,7 @@ export const basic = () => {
               show={show}
               autohide={autohide}
               fade={fade}
+              color={color}
             >
               <CToastHeader closeButton={closeButton}>
                 Toast title