@conduction/components 2.1.15 → 2.1.17

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.17: Refactor to NotificationPopUp to include layoutClassName.
+  - 2.1.16: Refactor ToolTip layoutClassName placement.
   - 2.1.15: Add InputDate component based on react-datepicker.
   - 2.1.14: Refactor checkbox to remove svg errors
   - 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -8,11 +8,13 @@ export interface NotificationPopUpProps {
         label: string;
         icon?: JSX.Element;
         handleClick: () => any;
+        layoutClassName?: string;
     };
     secondaryButton?: {
         label: string;
         icon?: JSX.Element;
         handleClick: () => any;
+        layoutClassName?: string;
     };
     layoutClassName?: string;
 }

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -16,7 +16,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: secondaryButton.icon ?? _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
+    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsx(Link, { icon: secondaryButton.icon ?? _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), className: primaryButton.layoutClassName, children: primaryButton.label })] })] }) }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

package/lib/components/notificationPopUp/NotificationPopUp.module.css

@@ -39,7 +39,7 @@
 @keyframes fadeInBottom {
   from {
     opacity: 0;
-    transform: translateY(100%);
+    transform: translateY(50%);
   }
   to {
     opacity: 1;
@@ -56,6 +56,6 @@
   }
   to {
     opacity: 0;
-    transform: translateY(100%);
+    transform: translateY(50%);
   }
 }

package/lib/components/toolTip/ToolTip.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./ToolTip.module.css";
 export const ToolTip = ({ children, layoutClassName, tooltip }) => {
-    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
+    return (_jsxs("div", { className: clsx(styles.wrapper, layoutClassName && layoutClassName), children: [_jsx("div", { "data-tip": tooltip, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
 };
 export { ReactTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.15",
+  "version": "2.1.17",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/notificationPopUp/NotificationPopUp.module.css

@@ -39,7 +39,7 @@
 @keyframes fadeInBottom {
   from {
     opacity: 0;
-    transform: translateY(100%);
+    transform: translateY(50%);
   }
   to {
     opacity: 1;
@@ -56,6 +56,6 @@
   }
   to {
     opacity: 0;
-    transform: translateY(100%);
+    transform: translateY(50%);
   }
 }

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -14,11 +14,13 @@ export interface NotificationPopUpProps {
     label: string;
     icon?: JSX.Element;
     handleClick: () => any;
+    layoutClassName?: string;
   };
   secondaryButton?: {
     label: string;
     icon?: JSX.Element;
     handleClick: () => any;
+    layoutClassName?: string;
   };
   layoutClassName?: string;
 }
@@ -52,18 +54,22 @@ export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
         className={clsx(styles.modal, animationVisible && styles.visible, layoutClassName)}
       >
         <Heading3>{title}</Heading3>
+
         <Paragraph>{description}</Paragraph>
+
         <div className={styles.buttons}>
           {secondaryButton && (
-            <div onClick={() => handleClick(secondaryButton.handleClick)}>
+            <div onClick={() => handleClick(secondaryButton.handleClick)} className={secondaryButton.layoutClassName}>
               <Link icon={secondaryButton.icon ?? <CloseIcon />} iconAlign="start">
                 {secondaryButton.label}
               </Link>
             </div>
           )}
+
           <Button
             icon={primaryButton.icon ?? <ArrowRightIcon />}
             onClick={() => handleClick(primaryButton.handleClick)}
+            className={primaryButton.layoutClassName}
           >
             {primaryButton.label}
           </Button>

package/src/components/toolTip/ToolTip.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import _ from "lodash";
 import * as React from "react";
 import ReactTooltip from "react-tooltip";
@@ -11,10 +12,8 @@ interface ToolTipProps {
 
 export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, tooltip }) => {
   return (
-    <div className={styles.wrapper}>
-      <div data-tip={tooltip} className={layoutClassName && layoutClassName}>
-        {children}
-      </div>
+    <div className={clsx(styles.wrapper, layoutClassName && layoutClassName)}>
+      <div data-tip={tooltip}>{children}</div>
 
       <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
     </div>