<Notification/>- migrating from sass to stylable (#5484)

Author: TalZa1810

src/Notification/ActionButton/ActionButton.js

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../Button';
 import TextButton from '../../TextButton';
+import { dataHooks } from '../constants';
 
 const ActionButton = ({ children, onClick, type, link, target }) => {
   const commonProps = {
-    dataHook: 'notification-cta-button',
+    dataHook: dataHooks.notificationCtaButton,
     onClick,
   };
 

src/Notification/Notification.driver.d.ts

@@ -9,8 +9,6 @@ export interface NotificationDriver extends BaseDriver {
   isSuccessNotification: () => boolean;
   isWarningNotification: () => boolean;
   isPremiumNotification: () => boolean;
-  isSmallSize: () => boolean;
-  isBigSize: () => boolean;
   getLabelText: () => string;
   hasActionButton: () => boolean;
   getActionButtonText: () => string;

src/Notification/Notification.driver.js

@@ -1,46 +1,39 @@
 import ReactTestUtils from 'react-dom/test-utils';
+import { dataHooks, THEMES, TYPE_POSITIONS_MAP } from './constants';
 
 const notificationDriverFactory = ({ element }) => {
-  const notificationWrapperSelector = '[data-hook="notification-wrapper"]';
-  const labelTextSelector = '[data-hook="notification-label"]';
-  const actionButtonSelector = '[data-hook="notification-cta-button"]';
-  const closeButtonSelector = '[data-hook="notification-close-button"]';
+  const getElementByDataHook = dataHook =>
+    element.querySelector(`[data-hook="${dataHook}"]`);
 
-  const classExists = className =>
-    element
-      .querySelector(notificationWrapperSelector)
-      .classList.contains(className);
+  const notificationWrapper = getElementByDataHook(
+    dataHooks.notificationWrapper,
+  );
+  const labelText = getElementByDataHook(dataHooks.notificationLabel);
+  const actionButton = getElementByDataHook(dataHooks.notificationCtaButton);
+  const closeButton = getElementByDataHook(dataHooks.notificationCloseButton);
+
+  const getTheme = () => element.getAttribute('data-theme');
+  const getType = () => element.getAttribute('data-type');
 
   return {
     exists: () => !!element,
-    visible: () => !!element.querySelector(notificationWrapperSelector),
-    hasTheme: theme => classExists(`${theme}Theme`),
-    isStandardNotification: () => classExists('standardTheme'),
-    isErrorNotification: () => classExists('errorTheme'),
-    isSuccessNotification: () => classExists('successTheme'),
-    isWarningNotification: () => classExists('warningTheme'),
-    isPremiumNotification: () => classExists('premiumTheme'),
-    isSmallSize: () => classExists('smallSize'),
-    isBigSize: () => classExists('bigSize'),
-    getLabelText: () => element.querySelector(labelTextSelector).textContent,
-    hasActionButton: () => !!element.querySelector(actionButtonSelector),
-    getActionButtonText: () =>
-      element.querySelector(actionButtonSelector).textContent,
-    hasCloseButton: () =>
-      !!element.querySelector('[data-hook="notification-close-button"]'),
-    isRelativelyPositioned: () => classExists('relativePosition'),
-    isFixedPositioned: () => classExists('fixedPosition'),
-    isAbsolutePositioned: () => classExists('absolutePosition'),
-    clickOnCloseButton: () =>
-      ReactTestUtils.Simulate.click(element.querySelector(closeButtonSelector)),
-    clickOnActionButton: () =>
-      ReactTestUtils.Simulate.click(
-        element.querySelector(actionButtonSelector),
-      ),
-    getZIndex: () =>
-      Number(
-        element.querySelector(notificationWrapperSelector).style['z-index'],
-      ),
+    visible: () => !!getElementByDataHook(dataHooks.notificationWrapper),
+    hasTheme: () => !!getTheme(),
+    isStandardNotification: () => getTheme() === THEMES.standard,
+    isErrorNotification: () => getTheme() === THEMES.error,
+    isSuccessNotification: () => getTheme() === THEMES.success,
+    isWarningNotification: () => getTheme() === THEMES.warning,
+    isPremiumNotification: () => getTheme() === THEMES.premium,
+    getLabelText: () => labelText.textContent,
+    hasActionButton: () => !!actionButton,
+    getActionButtonText: () => actionButton.textContent,
+    hasCloseButton: () => !!closeButton,
+    isRelativelyPositioned: () => getType() === TYPE_POSITIONS_MAP.relative,
+    isFixedPositioned: () => getType() === TYPE_POSITIONS_MAP.fixed,
+    isAbsolutePositioned: () => getType() === TYPE_POSITIONS_MAP.absolute,
+    clickOnCloseButton: () => ReactTestUtils.Simulate.click(closeButton),
+    clickOnActionButton: () => ReactTestUtils.Simulate.click(actionButton),
+    getZIndex: () => Number(notificationWrapper.style['z-index']),
   };
 };
 

src/Notification/Notification.js

@@ -1,37 +1,31 @@
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import classNames from 'classnames';
 import * as Composite from '../Composite';
 import CloseButton from '../CloseButton';
 import TextLabel from './TextLabel';
 import ActionButton from './ActionButton';
-import css from './Notification.scss';
+import styles from './Notification.st.css';
 import StatusComplete from 'wix-ui-icons-common/StatusComplete';
 import StatusWarning from 'wix-ui-icons-common/StatusWarning';
 import StatusAlert from 'wix-ui-icons-common/StatusAlert';
+import { dataHooks } from './constants';
 
 export const LOCAL_NOTIFICATION = 'local';
 export const GLOBAL_NOTIFICATION = 'global';
 export const STICKY_NOTIFICATION = 'sticky';
 export const DEFAULT_AUTO_HIDE_TIMEOUT = 6000;
 export const DEFAULT_TIMEOUT = DEFAULT_AUTO_HIDE_TIMEOUT;
 
-export const notificationTypeToPosition = {
-  [LOCAL_NOTIFICATION]: 'absolute',
-  [GLOBAL_NOTIFICATION]: 'relative',
-  [STICKY_NOTIFICATION]: 'fixed',
-};
-
 const animationsTimeouts = {
   enter: 500,
   exit: 350,
 };
 
 const themeIcon = {
-  error: <StatusAlert className={css.iconStyling} />,
-  success: <StatusComplete className={css.iconStyling} />,
-  warning: <StatusWarning className={css.iconStyling} />,
+  error: <StatusAlert className={styles.iconStyling} />,
+  success: <StatusComplete className={styles.iconStyling} />,
+  warning: <StatusWarning className={styles.iconStyling} />,
 };
 
 function FirstChild(props) {
@@ -69,26 +63,26 @@ class Notification extends React.PureComponent {
       hideByTimer: false,
     };
 
-    this.startCloseTimer(props);
+    this._startCloseTimer(props);
   }
 
-  startCloseTimer({ autoHideTimeout }) {
+  _startCloseTimer({ autoHideTimeout }) {
     if (autoHideTimeout) {
       this.closeTimeout = setTimeout(
-        () => this.hideNotificationOnTimeout(),
+        () => this._hideNotificationOnTimeout(),
         autoHideTimeout || DEFAULT_AUTO_HIDE_TIMEOUT,
       );
     }
   }
 
-  clearCloseTimeout() {
+  _clearCloseTimeout() {
     if (this.closeTimeout) {
       clearTimeout(this.closeTimeout);
       this.closeTimeout = null;
     }
   }
 
-  hideNotificationOnCloseClick = () => {
+  _hideNotificationOnCloseClick = () => {
     this.setState({ hideByCloseClick: true });
 
     setTimeout(
@@ -97,7 +91,7 @@ class Notification extends React.PureComponent {
     );
   };
 
-  hideNotificationOnTimeout = () => {
+  _hideNotificationOnTimeout = () => {
     this.setState({ hideByTimer: true });
 
     setTimeout(
@@ -106,7 +100,7 @@ class Notification extends React.PureComponent {
     );
   };
 
-  bypassCloseFlags() {
+  _bypassCloseFlags() {
     this.setState({
       hideByCloseClick: false,
       hideByTimer: false,
@@ -115,67 +109,63 @@ class Notification extends React.PureComponent {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.show) {
-      this.bypassCloseFlags();
-      this.clearCloseTimeout();
-      this.startCloseTimer(nextProps);
+      this._bypassCloseFlags();
+      this._clearCloseTimeout();
+      this._startCloseTimer(nextProps);
     }
   }
 
   componentWillUnmount() {
-    this.clearCloseTimeout();
+    this._clearCloseTimeout();
   }
 
-  shouldShowNotification() {
+  _shouldShowNotification() {
     return (
       this.props.show && !this.state.hideByCloseClick && !this.state.hideByTimer
     );
   }
 
-  renderNotification() {
-    const { zIndex, children, type, theme } = this.props;
+  _renderNotification() {
+    const { zIndex, children, theme } = this.props;
     const childrenComponents = mapChildren(children);
 
     return (
       <CSSTransition
         classNames={{
-          enter: css.notificationAnimationEnter,
-          enterActive: css.notificationAnimationEnterActive,
-          exit: css.notificationAnimationExit,
-          exitActive: css.notificationAnimationExitActive,
+          enter: styles.notificationAnimationEnter,
+          enterActive: styles.notificationAnimationEnterActive,
+          exit: styles.notificationAnimationExit,
+          exitActive: styles.notificationAnimationExitActive,
         }}
         timeout={animationsTimeouts}
       >
         <div
-          data-hook="notification-wrapper"
+          data-hook={dataHooks.notificationWrapper}
           style={{ zIndex }}
-          className={classNames(
-            css.notification,
-            css[`${theme}Theme`],
-            css[`${notificationTypeToPosition[type]}Position`],
-          )}
+          className={styles.notification}
           role="alert"
           aria-labelledby="notification-label"
           aria-live="polite"
         >
           {themeIcon[theme]}
           <div
             id="notification-label"
-            className={css.label}
+            className={styles.label}
             children={childrenComponents.label}
           />
 
           {childrenComponents.ctaButton && (
             <div
-              className={css.button}
+              className={styles.button}
               children={childrenComponents.ctaButton}
             />
           )}
 
           {childrenComponents.closeButton && (
             <div
-              data-hook="notification-close-button"
-              className={css.closeButton}
-              onClick={this.hideNotificationOnCloseClick}
+              data-hook={dataHooks.notificationCloseButton}
+              className={styles.closeButton}
+              onClick={this._hideNotificationOnCloseClick}
               children={childrenComponents.closeButton}
             />
           )}
@@ -185,11 +175,16 @@ class Notification extends React.PureComponent {
   }
 
   render() {
-    const { dataHook } = this.props;
+    const { dataHook, theme, type } = this.props;
     return (
-      <div data-hook={dataHook} className={css.root}>
+      <div
+        {...styles('root', { theme, type }, this.props)}
+        data-hook={dataHook}
+        data-theme={theme}
+        data-type={type}
+      >
         <TransitionGroup component={FirstChild}>
-          {this.shouldShowNotification() ? this.renderNotification() : null}
+          {this._shouldShowNotification() ? this._renderNotification() : null}
         </TransitionGroup>
       </div>
     );