@conduction/components 2.1.16 → 2.1.18

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.18: Add default value to Textarea component.
+  - 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

package/lib/components/formFields/textarea.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextArea } from "@gemeente-denhaag/textarea";
-export const Textarea = ({ name, validation, register, errors, disabled, }) => _jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled }, invalid: errors[name] });
+export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, }) => _jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] });

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/package.json

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

package/src/components/formFields/textarea.tsx

@@ -14,4 +14,5 @@ export const Textarea: React.FC<ITextAreaProps & IReactHookFormProps> = ({
   register,
   errors,
   disabled,
-}) => <TextArea {...register(name, { ...validation })} {...{ disabled }} invalid={errors[name]} />;
+  defaultValue,
+}) => <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />;

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>