@grantbii/design-system 1.0.49 → 1.0.50

package/core/molecules/Modal.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -70,14 +70,15 @@ const ModalBody = styled.div `
   height: 100%;
   padding-top: 24px;
   overflow-y: auto;
-`;
-const ModalContent = styled.div `
-  width: 100%;
-  height: 100%;
-  min-height: 100px;
 
-  padding: 2px 24px;
-  border: none;
+  > * {
+    width: 100%;
+    height: 100%;
+    min-height: 100px;
+
+    padding: 2px 24px;
+    border: none;
+  }
 `;
 const ModalFooter = styled.div `
   display: flex;

package/core/organisms/TallyModal.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler, ReactNode } from "react";
+type TallyModalProps = {
+    header?: ReactNode;
+    tallyId: string;
+    prefilledFieldsQueryParams?: string;
+    isFullScreen?: boolean;
+    onClickCancel: MouseEventHandler<HTMLButtonElement>;
+};
+declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react/jsx-runtime").JSX.Element;
+export default TallyModal;

package/core/organisms/TallyModal.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "../molecules";
+const TallyModal = (_a) => {
+    var { tallyId, prefilledFieldsQueryParams } = _a, modalProps = __rest(_a, ["tallyId", "prefilledFieldsQueryParams"]);
+    return (_jsx(Modal, Object.assign({}, modalProps, { content: _jsx("iframe", { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy" }), width: "640px", height: "480px" })));
+};
+export default TallyModal;
+const constructIframeSrc = (tallyId, prefilledFieldsQueryParams) => `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${prefilledFieldsQueryParams ? `&${prefilledFieldsQueryParams}` : ""}`;
+const TALLY_QUERIES = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";

package/core/organisms/index.d.ts

@@ -1 +1,2 @@
+export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/core/organisms/index.js

@@ -1 +1,2 @@
+export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Modal.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, Modal, useModal } from "@/.";
 const ModalExample = (props) => {
     const { showModal, openModal, closeModal } = useModal();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: openModal }), showModal ? (_jsx(Modal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
 };
 const meta = {
     title: "Molecules/Modal",

package/stories/organisms/TallyModal.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ReactNode } from "react";
+type TallyModalExampleProps = {
+    header?: ReactNode;
+    tallyId: string;
+    prefilledFieldsQueryParams?: string;
+    isFullScreen?: boolean;
+};
+declare const TallyModalExample: (props: TallyModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof TallyModalExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PopUp: Story;
+export declare const FullScreen: Story;

package/stories/organisms/TallyModal.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, TallyModal, useModal } from "@/.";
+const TallyModalExample = (props) => {
+    const { showModal, openModal, closeModal } = useModal();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(TallyModal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
+};
+const meta = {
+    title: "Organisms/Tally Modal",
+    component: TallyModalExample,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const baseArgs = {
+    header: "Apply with us",
+    tallyId: "3jAj5Q",
+};
+export const PopUp = {
+    args: baseArgs,
+};
+export const FullScreen = {
+    args: Object.assign(Object.assign({}, baseArgs), { isFullScreen: true }),
+};