@kvdbil/components 11.11.0 → 12.0.0

package/cjs/components/Dialog/index.js

@@ -1,27 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js"),n=require("../Button/index.js"),l=require("../Modal/index.js"),i=require("../../typography/Heading/index.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("react-dom"),require("react-transition-group"),require("../Icons/Close.js");var a=o(e),u=o(t);const s=u.default.div`
-  padding-top: 1rem;
-`,d=u.default.div`
-  top: 20px;
-  left: 32px;
-  position: absolute;
-`,c=u.default(i.TinyTitleBold)`
-  font-weight: ${({theme:x})=>x.typography.fontAlternativeRegularWeight};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../Modal/index.js"),l=require("../../theme.js"),i=require("../../typography/Heading/index.js");function n(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}require("react-dom"),require("react-transition-group"),require("../Icons/Close.js"),require("../../shared/media-queries.js");var o=n(e),a=n(t);const u=a.default(i.TinyTitleBold)`
+  font-weight: ${l.default.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,f=u.default.div`
+`,d=a.default.div`
   display: flex;
-  justify-content: space-between;
-  ${r.mq("tablet")} {
-    justify-content: flex-start;
-  }
+  justify-content: flex-end;
+  gap: 1rem;
   overflow-x: hidden;
-`,y=u.default(n.Button)`
-  overflow-x: hidden;
-  margin-right: 2rem;
-  justify-content: center;
-  width: 100%;
-  max-width: 110px;
-`,p=u.default(n.Button)`
-  justify-content: center;
-  width: 100%;
-  max-width: 245px;
-`,m=({isOpen:x,title:h,children:g,modalStyles:B,titleStyles:v,primaryButtonText:w,primaryButtonStyles:E,secondaryButtonStyles:S,secondaryButtonText:b,primaryButtonAction:q,secondaryButtonAction:j,onClose:C,withPortal:T,color:A="success"})=>a.default.createElement(l.Modal,{contentStyles:B,isOpen:x,onClose:C,withPortal:T},h&&a.default.createElement(d,null,a.default.createElement(c,{style:v},h)),a.default.createElement(s,null,g),a.default.createElement(f,null,j&&a.default.createElement(y,{style:S,onClick:j,variant:"outline",color:"neutral"},b),q&&a.default.createElement(p,{style:E,onClick:q,variant:"solid",color:A},w)));exports.Dialog=m,exports.default=m;
+`,s=({isOpen:f,title:c,children:h,actions:p,onClose:g,withPortal:y,withCloseIcon:m=!0})=>o.default.createElement(r.Modal,{onClose:g,withPortal:y,isOpen:f,withCloseIcon:m},typeof c=="string"?o.default.createElement(u,null,c):c,o.default.createElement("div",null,h),p&&o.default.createElement(d,null,p));exports.Dialog=s,exports.default=s;

package/cjs/components/Modal/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var a=o(e),d=o(i);const l=i.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}var a=o(e),d=o(i);const l=i.css`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -33,7 +33,7 @@
 `,s=d.default.div`
   position: relative;
   max-width: 512px;
-  padding: 24px 32px 24px 32px;
+  padding: 1rem;
   background-color: white;
   border-radius: 3px;
   box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
@@ -53,8 +53,8 @@
   }
 `,p=d.default.div`
   position: absolute;
-  top: 24px;
-  right: 32px;
+  top: 1rem;
+  right: 1rem;
 
   :hover {
     cursor: pointer;
@@ -74,4 +74,4 @@
   }
 `,f=i.createGlobalStyle`
   ${l}
-`,g=({children:x,isOpen:h,contentStyles:v,withPortal:E=!1,onClose:w})=>{e.useEffect(()=>{const y=T=>{T.key==="Escape"&&h&&w()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[w,h]);const k=!(typeof window=="undefined"||!window.document||!window.document.createElement),b=a.default.createElement(n.CSSTransition,{in:h,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,null,a.default.createElement(c,{"data-testid":"background",onClick:w}),a.default.createElement(s,{style:v},a.default.createElement(p,{onClick:w,"data-testid":"close"},a.default.createElement(r.default,null)),x),a.default.createElement(m,null))));return E&&k?t.createPortal(b,document.body):b};exports.Modal=g,exports.default=g;
+`,g=({children:h,isOpen:w,contentStyles:v,withPortal:E=!1,withCloseIcon:k=!0,onClose:x})=>{e.useEffect(()=>{const y=C=>{C.key==="Escape"&&w&&x()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[x,w]);const T=!(typeof window=="undefined"||!window.document||!window.document.createElement),b=a.default.createElement(n.CSSTransition,{in:w,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,null,a.default.createElement(c,{"data-testid":"background",onClick:x}),a.default.createElement(s,{style:v},k&&a.default.createElement(p,{onClick:x,"data-testid":"close"},a.default.createElement(r.default,null)),h),a.default.createElement(m,null))));return E&&T?t.createPortal(b,document.body):b};exports.Modal=g,exports.default=g;

package/esm/components/Dialog/index.js

@@ -1,27 +1,9 @@
-import t from"react";import e from"styled-components";import{mq as g}from"../../shared/media-queries.js";import{Button as l}from"../Button/index.js";import{Modal as j}from"../Modal/index.js";import{TinyTitleBold as v}from"../../typography/Heading/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";const w=e.div`
-  padding-top: 1rem;
-`,E=e.div`
-  top: 20px;
-  left: 32px;
-  position: absolute;
-`,B=e(v)`
-  font-weight: ${({theme:o})=>o.typography.fontAlternativeRegularWeight};
+import e from"react";import r from"styled-components";import{Modal as d}from"../Modal/index.js";import p from"../../theme.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const f=r(c)`
+  font-weight: ${p.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,C=e.div`
+`,g=r.div`
   display: flex;
-  justify-content: space-between;
-  ${g("tablet")} {
-    justify-content: flex-start;
-  }
+  justify-content: flex-end;
+  gap: 1rem;
   overflow-x: hidden;
-`,T=e(l)`
-  overflow-x: hidden;
-  margin-right: 2rem;
-  justify-content: center;
-  width: 100%;
-  max-width: 110px;
-`,b=e(l)`
-  justify-content: center;
-  width: 100%;
-  max-width: 245px;
-`,a=({isOpen:o,title:n,children:s,modalStyles:m,titleStyles:p,primaryButtonText:c,primaryButtonStyles:d,secondaryButtonStyles:u,secondaryButtonText:f,primaryButtonAction:r,secondaryButtonAction:i,onClose:y,withPortal:x,color:h="success"})=>t.createElement(j,{contentStyles:m,isOpen:o,onClose:y,withPortal:x},n&&t.createElement(E,null,t.createElement(B,{style:p},n)),t.createElement(w,null,s),t.createElement(C,null,i&&t.createElement(T,{style:u,onClick:i,variant:"outline",color:"neutral"},f),r&&t.createElement(b,{style:d,onClick:r,variant:"solid",color:h},c)));export{a as Dialog,a as default};
+`,n=({isOpen:i,title:t,children:l,actions:o,onClose:m,withPortal:a,withCloseIcon:s=!0})=>e.createElement(d,{onClose:m,withPortal:a,isOpen:i,withCloseIcon:s},typeof t=="string"?e.createElement(f,null,t):t,e.createElement("div",null,l),o&&e.createElement(g,null,o));export{n as Dialog,n as default};

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";import{CSSTransition as w}from"react-transition-group";import n,{css as h,createGlobalStyle as a}from"styled-components";import f from"../Icons/Close.js";const d=h`
+import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";import{CSSTransition as x}from"react-transition-group";import n,{css as f,createGlobalStyle as a}from"styled-components";import b from"../Icons/Close.js";const d=f`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,7 +16,7 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,b=n.div`
+`,y=n.div`
   ${d}
   position: fixed;
   width: 100%;
@@ -24,16 +24,16 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
   top: 0;
   left: 0;
   z-index: 200;
-`,y=n.div`
+`,k=n.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,k=n.div`
+`,E=n.div`
   position: relative;
   max-width: 512px;
-  padding: 24px 32px 24px 32px;
+  padding: 1rem;
   background-color: white;
   border-radius: 3px;
   box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
@@ -51,10 +51,10 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     margin-right: auto;
     min-width: 355px;
   }
-`,E=n.div`
+`,v=n.div`
   position: absolute;
-  top: 24px;
-  right: 32px;
+  top: 1rem;
+  right: 1rem;
 
   :hover {
     cursor: pointer;
@@ -64,7 +64,7 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     width: 1rem;
     height: 1rem;
   }
-`,v=a`
+`,T=a`
   body {
     overflow: hidden;
 
@@ -72,6 +72,6 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
         padding-right: 15px !important;
     `}
   }
-`,T=a`
+`,C=a`
   ${d}
-`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,onClose:e})=>{g(()=>{const r=u=>{u.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const p=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(w,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(T,null),t.createElement(b,null,t.createElement(y,{"data-testid":"background",onClick:e}),t.createElement(k,{style:m},t.createElement(E,{onClick:e,"data-testid":"close"},t.createElement(f,null)),s),t.createElement(v,null))));return l&&p?x(i,document.body):i};export{c as Modal,c as default};
+`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,withCloseIcon:u=!0,onClose:e})=>{w(()=>{const r=g=>{g.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const p=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(x,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(C,null),t.createElement(y,null,t.createElement(k,{"data-testid":"background",onClick:e}),t.createElement(E,{style:m},u&&t.createElement(v,{onClick:e,"data-testid":"close"},t.createElement(b,null)),s),t.createElement(T,null))));return l&&p?h(i,document.body):i};export{c as Modal,c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "11.11.0",
+  "version": "12.0.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Dialog/index.d.ts

@@ -1,21 +1,12 @@
 import { ReactNode } from 'react';
-import { Color } from '../../Types';
 export interface DialogProps {
-    title?: string;
-    children: ReactNode;
+    title?: ReactNode;
     isOpen: boolean;
-    hideCloseButton?: boolean;
+    children: ReactNode;
+    actions?: ReactNode;
     withPortal?: boolean;
-    primaryButtonText?: string;
-    secondaryButtonText?: string;
-    modalStyles?: {};
-    titleStyles?: {};
-    primaryButtonStyles?: {};
-    secondaryButtonStyles?: {};
+    withCloseIcon?: boolean;
     onClose(): void;
-    primaryButtonAction?(): void;
-    secondaryButtonAction?(): void;
-    color?: Color;
 }
-export declare const Dialog: ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, withPortal, color, }: DialogProps) => JSX.Element;
+export declare const Dialog: ({ isOpen, title, children, actions, onClose, withPortal, withCloseIcon, }: DialogProps) => JSX.Element;
 export default Dialog;

package/types/components/Modal/index.d.ts

@@ -6,6 +6,7 @@ export interface ModalProps {
     withPortal?: boolean;
     onClose(): void;
     contentStyles?: {};
+    withCloseIcon?: boolean;
 }
-export declare const Modal: ({ children, isOpen, contentStyles, withPortal, onClose, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, }: ModalProps) => JSX.Element;
 export default Modal;