@cypress-design/react-modal 0.0.3 → 0.1.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 44.5s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 19.2s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @cypress-design/react-modal
 
+## 0.1.0
+
+### Minor Changes
+
+- [#270](https://github.com/cypress-io/cypress-design/pull/270) [`2200d4f`](https://github.com/cypress-io/cypress-design/commit/2200d4fcca11f40509051e942b0eea22e5ec38b1) Thanks [@elevatebart](https://github.com/elevatebart)! - add fullscreen prop to modal
+
+### Patch Changes
+
+- Updated dependencies [[`2200d4f`](https://github.com/cypress-io/cypress-design/commit/2200d4fcca11f40509051e942b0eea22e5ec38b1)]:
+  - @cypress-design/constants-modal@0.1.0
+
 ## 0.0.3
 
 ### Patch Changes

package/Modal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
+import clsx from 'clsx'
 import {
   IconActionQuestionMarkCircle,
   IconActionDelete,
@@ -11,6 +12,8 @@ import {
   ClassHelpLink,
   ClassHelpLinkDash,
   ClassModal,
+  ClassModalFullscreenDimensions,
+  ClassModalStandardDimensions,
   ClassModalContainer,
   ClassTitle,
   ClassTitleBox,
@@ -24,6 +27,7 @@ export interface ModalProps {
   children?: React.ReactNode
   show?: boolean
   onClose?: () => void
+  fullscreen?: boolean
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -32,6 +36,7 @@ export const Modal: React.FC<ModalProps> = ({
   helpLink,
   onClose,
   children,
+  fullscreen = false,
 }) => {
   React.useEffect(() => {
     if (show) {
@@ -60,7 +65,14 @@ export const Modal: React.FC<ModalProps> = ({
           aria-modal="true"
           role="modal"
         >
-          <div className={ClassModal}>
+          <div
+            className={clsx(
+              ClassModal,
+              fullscreen
+                ? ClassModalFullscreenDimensions
+                : ClassModalStandardDimensions
+            )}
+          >
             <div className={ClassTitleBox}>
               <div className={ClassTitle}>{title}</div>
               {helpLink ? <div className={ClassHelpLinkDash} /> : null}

package/ModalReact.cy.tsx

@@ -8,6 +8,7 @@ import assertions from '../assertions'
 const ComponentUsingModal = (options: {
   title?: string
   helpLink?: string
+  fullscreen?: boolean
 }) => {
   const [visibleModal, setVisibleModal] = React.useState(false)
   return (
@@ -32,7 +33,13 @@ const ComponentUsingModal = (options: {
 }
 
 describe('Modal', () => {
-  function mountStory(options: { title?: string; helpLink?: string }) {
+  function mountStory(
+    options: {
+      title?: string
+      helpLink?: string
+      fullscreen?: boolean
+    } = {}
+  ) {
     mount(<ComponentUsingModal {...options} />)
   }
   assertions(mountStory)

package/dist/Modal.d.ts

@@ -5,6 +5,7 @@ export interface ModalProps {
     children?: React.ReactNode;
     show?: boolean;
     onClose?: () => void;
+    fullscreen?: boolean;
 }
 export declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsEtC,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8EtC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/index.es.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import 'clsx';
+import clsx from 'clsx';
 import * as iconsRegistry from '@cypress-design/icon-registry';
 import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
 
@@ -31027,8 +31027,10 @@ function freeBodyScroll() {
 }
 
 const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
-const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] flex h-full w-screen items-center justify-center overflow-hidden';
-const ClassModal = 'pointer-events-auto relative flex max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw]';
+const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
+const ClassModal = 'pointer-events-auto relative flex flex-col rounded-lg border-4 border-gray-700 bg-white';
+const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0';
+const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
 const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
 const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
 const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
@@ -31037,7 +31039,7 @@ const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-
 const ClassContent = 'overflow-y-auto p-[16px]';
 
 var Modal = function (_a) {
-    var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children;
+    var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
     React.useEffect(function () {
         if (show) {
             disableBodyScroll();
@@ -31053,7 +31055,9 @@ var Modal = function (_a) {
         reactDomExports.createPortal(React.createElement("div", null,
             React.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
             React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
-                React.createElement("div", { className: ClassModal },
+                React.createElement("div", { className: clsx(ClassModal, fullscreen
+                        ? ClassModalFullscreenDimensions
+                        : ClassModalStandardDimensions) },
                     React.createElement("div", { className: ClassTitleBox },
                         React.createElement("div", { className: ClassTitle }, title),
                         helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
@@ -31069,4 +31073,4 @@ var Modal = function (_a) {
 export { Modal as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020] flex h-full items-center justify-center overflow-hidden pointer-events-auto relative max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw] shrink-0 justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */
+/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded-lg border-4 border-gray-700 bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */