Changing className var keyword

src/Components/About/Content/__snapshots__/Content.test.jsx.snap

@@ -38,7 +38,7 @@ exports[`Content matches snapshot 1`] = `
       positions at the right time.
   </p>
   <Alert
-    className=""
+    customClassName=""
     isAriaLive={false}
     isDivided={false}
     messages={

src/Components/Alert/Alert.tsx

@@ -14,7 +14,7 @@ type Props = {
   messages: Array<Message>;
   isAriaLive?: boolean;
   isDivided?: boolean;
-  className?: string;
+  customClassName?: string;
 };
 
 class Alert extends React.Component<Props> {
@@ -26,7 +26,7 @@ class Alert extends React.Component<Props> {
     }],
     isAriaLive: false,
     isDivided: false,
-    className: '',
+    customClassName: '',
   };
 
   // prevent unneeded rerenders, which can cause accessibility issues
@@ -35,7 +35,7 @@ class Alert extends React.Component<Props> {
   }
 
   render(): React.ReactNode {
-    const { type, title, messages, isAriaLive, isDivided, className } = this.props;
+    const { type, title, messages, isAriaLive, isDivided, customClassName } = this.props;
     // 'type' is injected into the class name
     // type 'error' requires an ARIA role
 
@@ -56,7 +56,7 @@ class Alert extends React.Component<Props> {
     );
 
     return (
-      <div className={`usa-alert usa-alert-${type} ${className}`} role={type === 'error' ? 'alert' : undefined} {...ariaLiveProps}>
+      <div className={`usa-alert usa-alert-${type} ${customClassName}`} role={type === 'error' ? 'alert' : undefined} {...ariaLiveProps}>
         {isDivided ?
           <div>
             <div className="usa-alert-body">

src/Components/BidderPortfolio/BidderPortfolioContainer/__snapshots__/BidderPortfolioContainer.test.jsx.snap

@@ -9,7 +9,7 @@ exports[`BidderPortfolioContainerComponent matches snapshot when the all propert
     className="usa-width-two-thirds"
   >
     <Alert
-      className=""
+      customClassName=""
       isAriaLive={false}
       isDivided={false}
       messages={
@@ -35,7 +35,7 @@ exports[`BidderPortfolioContainerComponent matches snapshot when the all propert
     className="usa-width-two-thirds"
   >
     <Alert
-      className=""
+      customClassName=""
       isAriaLive={false}
       isDivided={false}
       messages={

src/Components/GlossaryEditor/GlossaryEditorCardList/__snapshots__/GlossaryEditorCardList.test.jsx.snap

@@ -109,7 +109,7 @@ exports[`GlossaryEditorCardListComponent matches snapshot when there are no term
     terms={Object {}}
   />
   <Alert
-    className=""
+    customClassName=""
     isAriaLive={false}
     isDivided={false}
     messages={

src/Components/GlossaryEditor/GlossaryEditorPageHeader/__snapshots__/GlossaryEditorPageHeader.test.jsx.snap

@@ -52,7 +52,7 @@ exports[`GlossaryEditorPageHeaderComponent matches snapshot when glossaryPostSuc
     </div>
   </div>
   <Alert
-    className=""
+    customClassName=""
     isAriaLive={true}
     isDivided={false}
     messages={

src/Components/SaveNewSearchAlert/__snapshots__/SaveNewSearchAlert.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`SaveNewSearchAlertComponent matches snapshot 1`] = `
   className="usa-grid-full saved-search-alert"
 >
   <Alert
-    className=""
+    customClassName=""
     isAriaLive={true}
     isDivided={false}
     messages={

src/Containers/Toast/Toast.jsx

@@ -13,7 +13,7 @@ export class Toast extends Component {
     }
   }
 
-  notify = ({ type = 'success', message = 'Message', title = '', id, isUpdate, className, options }) => {
+  notify = ({ type = 'success', message = 'Message', title = '', id, isUpdate, customClassName, options }) => {
     let options$ = {
       autoClose: true,
     };
@@ -36,7 +36,7 @@ export class Toast extends Component {
       <Alert
         type={type}
         title={title$}
-        className={className}
+        customClassName={customClassName}
         messages={[{ body: message }]}
         isDivided
       />, options$,
@@ -57,15 +57,15 @@ Toast.propTypes = {
     title: PropTypes.string,
     id: PropTypes.string,
     isUpdate: PropTypes.bool,
-    className: PropTypes.string,
+    customClassName: PropTypes.string,
     options: PropTypes.shape({}),
   }),
 };
 
 Toast.defaultProps = {
   toastData: {
     isUpdate: false,
-    className: '',
+    customClassName: '',
     options: {},
   },
 };

src/actions/handshake.js

@@ -285,7 +285,7 @@ export function handshakeOffered(name, message, options) {
   };
 }
 
-export function handshakeRevoked(name, message, className, options) {
+export function handshakeRevoked(name, message, customClassName, options) {
   return (dispatch) => {
     dispatch(handshakeRevokedNotification({
       title: SystemMessages.HANDSHAKE_REVOKED_TITLE,
@@ -294,7 +294,7 @@ export function handshakeRevoked(name, message, className, options) {
     dispatch(toastHandshakeRevoke(
       SystemMessages.HANDSHAKE_REVOKED_BODY({ name, message }),
       SystemMessages.HANDSHAKE_REVOKED_TITLE,
-      className,
+      customClassName,
       options,
     ));
   };

src/actions/toast.js

@@ -51,12 +51,12 @@ export function toastHandshake(toast, title, options) {
   };
 }
 
-export function toastHandshakeRevoke(toast, title, className, options) {
+export function toastHandshakeRevoke(toast, title, customClassName, options) {
   return {
     type: 'TOAST_NOTIFICATION_REVOKE_HANDSHAKE',
     toast,
     title,
-    className,
+    customClassName,
     options,
   };
 }

src/reducers/toast/toast.js

@@ -1,5 +1,5 @@
-export default function toast(state = { type: 'success', message: '', title: '', className: '', options: {} }, action) {
-  const { toast: message, title, id, isUpdate, className, options } = action;
+export default function toast(state = { type: 'success', message: '', title: '', customClassName: '', options: {} }, action) {
+  const { toast: message, title, id, isUpdate, customClassName, options } = action;
   switch (action.type) {
     case 'TOAST_NOTIFICATION_SUCCESS':
       return { type: 'success', message, title, id, isUpdate, options };
@@ -12,7 +12,7 @@ export default function toast(state = { type: 'success', message: '', title: '',
     case 'TOAST_NOTIFICATION_HANDSHAKE':
       return { type: 'dark', message, title, options };
     case 'TOAST_NOTIFICATION_REVOKE_HANDSHAKE':
-      return { type: 'error', message, title, className, options };
+      return { type: 'error', message, title, customClassName, options };
     default:
       return state;
   }