@cypress-design/react-modal 0.0.3 → 0.2.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 16.7s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @cypress-design/react-modal
 
+## 0.2.0
+
+### Minor Changes
+
+- [#281](https://github.com/cypress-io/cypress-design/pull/281) [`9ec1a81`](https://github.com/cypress-io/cypress-design/commit/9ec1a81cbe0a136bb8bd74b5af968c41615cefbc) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - update visuals of a modal
+
+### Patch Changes
+
+- Updated dependencies [[`e390827`](https://github.com/cypress-io/cypress-design/commit/e3908270ece513886c64cebcb78cebe0cd0d8c3d), [`9ec1a81`](https://github.com/cypress-io/cypress-design/commit/9ec1a81cbe0a136bb8bd74b5af968c41615cefbc)]:
+  - @cypress-design/react-icon@0.23.0
+  - @cypress-design/constants-modal@0.2.0
+
+## 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/ReadMe.md

@@ -22,7 +22,11 @@ export default () => {
 
   return (
     <>
-      <Modal show={visible} title="modal" onClose={() => setVisible(false)}>
+      <Modal
+        show={visible}
+        title="Modal Title"
+        onClose={() => setVisible(false)}
+      >
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis
         hic ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
         repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam

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';
 
@@ -30919,7 +30919,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -30943,7 +30943,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
     var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
@@ -31026,18 +31031,20 @@ function freeBodyScroll() {
     window.scrollTo({ top: scrollY });
 }
 
-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 ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
+const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm';
+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 outline outline-4 outline-gray-500/[.40] bg-white';
+const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] 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-16px sm:px-[24px]';
 const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
 const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
 const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
 const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';
-const ClassContent = 'overflow-y-auto p-[16px]';
+const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
 
 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 +31060,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 +31078,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 children:transition-all fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] 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] sm: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"> */