@conduction/components 2.2.25 → 2.2.26

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.26: Updated NotificationPopUp secondary button to have hover and href.
   - 2.2.25:
     - Added box-shadow to CardWrapper.
     - Added item border-radius to PrimaryTopNav.

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

@@ -6,14 +6,15 @@ export interface NotificationPopUpProps {
     hide: () => void;
     primaryButton: {
         label: string;
-        icon?: JSX.Element;
         handleClick: () => any;
+        icon?: JSX.Element;
         layoutClassName?: string;
     };
     secondaryButton?: {
         label: string;
-        icon?: JSX.Element;
         handleClick: () => any;
+        href: string;
+        icon?: JSX.Element;
         layoutClassName?: string;
     };
     layoutClassName?: string;

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -17,7 +17,9 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_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: _jsxs(Link, { className: styles.link, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
+    const modal = (_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", { className: secondaryButton.layoutClassName, children: _jsxs(Link, { onClick: (e) => {
+                                e.preventDefault(), handleClick(secondaryButton.handleClick);
+                            }, className: styles.link, href: secondaryButton.href, children: [secondaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faClose }), secondaryButton.label] }) })), _jsxs(Button, { onClick: () => handleClick(primaryButton.handleClick), className: clsx(styles.button, primaryButton.layoutClassName), children: [primaryButton.icon ?? _jsx(FontAwesomeIcon, { icon: faArrowRight }), primaryButton.label] })] })] }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.25",
+  "version": "2.2.26",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@utrecht/component-library-react": "^1.0.0-alpha.319",
+    "@utrecht/component-library-react": "1.0.0-alpha.394",
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",
     "react": "^18.2.0",

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -13,14 +13,15 @@ export interface NotificationPopUpProps {
   hide: () => void;
   primaryButton: {
     label: string;
-    icon?: JSX.Element;
     handleClick: () => any;
+    icon?: JSX.Element;
     layoutClassName?: string;
   };
   secondaryButton?: {
     label: string;
-    icon?: JSX.Element;
     handleClick: () => any;
+    href: string;
+    icon?: JSX.Element;
     layoutClassName?: string;
   };
   layoutClassName?: string;
@@ -59,8 +60,14 @@ export const NotificationPopUp = ({
 
       <div className={styles.buttons}>
         {secondaryButton && (
-          <div onClick={() => handleClick(secondaryButton.handleClick)} className={secondaryButton.layoutClassName}>
-            <Link className={styles.link}>
+          <div className={secondaryButton.layoutClassName}>
+            <Link
+              onClick={(e) => {
+                e.preventDefault(), handleClick(secondaryButton.handleClick);
+              }}
+              className={styles.link}
+              href={secondaryButton.href}
+            >
               {secondaryButton.icon ?? <FontAwesomeIcon icon={faClose} />}
               {secondaryButton.label}
             </Link>