@constructor-io/constructorio-ui-quizzes 1.17.6 → 1.17.8

package/lib/cjs/components/ShareResultsModal/CloseSVG.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-function CloseSVG() {
-    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+function CloseSVG(props) {
+    return (react_1.default.createElement("svg", Object.assign({}, props, { role: 'button', "aria-label": 'Close', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }),
         react_1.default.createElement("path", { d: 'M18.4748 4.11089C18.8653 3.72036 19.4985 3.72036 19.889 4.11089C20.2795 4.50141 20.2795 5.13458 19.889 5.5251L5.52503 19.8891C5.13451 20.2796 4.50134 20.2796 4.11082 19.8891C3.72029 19.4985 3.72029 18.8654 4.11082 18.4748L18.4748 4.11089Z', fill: '#505A75' }),
         react_1.default.createElement("path", { d: 'M4.11076 5.5251C3.72024 5.13458 3.72024 4.50141 4.11076 4.11089C4.50129 3.72036 5.13445 3.72036 5.52498 4.11089L19.8889 18.4748C20.2795 18.8654 20.2795 19.4985 19.8889 19.8891C19.4984 20.2796 18.8652 20.2796 18.4747 19.8891L4.11076 5.5251Z', fill: '#505A75' })));
 }

package/lib/cjs/components/ShareResultsModal/EmailField.js

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const CheckMarkCircleSVG_1 = tslib_1.__importDefault(require("./CheckMarkCircleSVG"));
 const AlertCircleSVG_1 = tslib_1.__importDefault(require("./AlertCircleSVG"));
+const Toaster_1 = tslib_1.__importDefault(require("./Toaster"));
 function EmailField({ onSubmit }) {
     const [formError, setFormError] = (0, react_1.useState)(null);
     const [isSubmitted, setIsSubmitted] = (0, react_1.useState)(false);
     const [email, setEmail] = (0, react_1.useState)('');
+    const [showNotification, setShowNotification] = react_1.default.useState(false);
     const validate = () => {
         if (email.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
             setFormError(null);
@@ -32,19 +34,24 @@ function EmailField({ onSubmit }) {
             });
         }
     });
+    const onCloseToaster = () => {
+        setShowNotification(false);
+        setIsSubmitted(false);
+        setFormError(null);
+    };
+    (0, react_1.useEffect)(() => {
+        if (isSubmitted || (formError === null || formError === void 0 ? void 0 : formError.type) === 'callback') {
+            setShowNotification(true);
+        }
+    }, [isSubmitted, formError === null || formError === void 0 ? void 0 : formError.type]);
     return (react_1.default.createElement("div", { className: 'cio-share-results-feature-group' },
         react_1.default.createElement("form", { onSubmit: handleSubmit },
             react_1.default.createElement("div", { className: 'cio-share-results-description' }, "Share by email"),
             react_1.default.createElement("div", { className: 'cio-share-results-button-group' },
                 react_1.default.createElement("div", { className: 'cio-share-results-email-input-group' },
-                    react_1.default.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value) }),
+                    react_1.default.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value), placeholder: 'Enter an email address to receive and share the results' }),
                     (formError === null || formError === void 0 ? void 0 : formError.type) === 'validate' && (react_1.default.createElement("div", { className: 'cio-share-results-email-input-error-message' }, formError.message))),
                 react_1.default.createElement("button", { className: 'cio-share-results-share-button', type: 'submit' }, "Send"))),
-        isSubmitted && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
-            react_1.default.createElement(CheckMarkCircleSVG_1.default, null),
-            react_1.default.createElement("div", null, "Email sent"))),
-        (formError === null || formError === void 0 ? void 0 : formError.type) === 'callback' && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
-            react_1.default.createElement(AlertCircleSVG_1.default, null),
-            react_1.default.createElement("div", null, formError.message)))));
+        showNotification && (react_1.default.createElement(Toaster_1.default, { icon: isSubmitted ? CheckMarkCircleSVG_1.default : AlertCircleSVG_1.default, message: isSubmitted ? 'Email sent' : formError === null || formError === void 0 ? void 0 : formError.message, onCloseToaster: onCloseToaster }))));
 }
 exports.default = EmailField;

package/lib/cjs/components/ShareResultsModal/LinkField.js

@@ -4,9 +4,21 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const CheckMarkCircleSVG_1 = tslib_1.__importDefault(require("./CheckMarkCircleSVG"));
 const AlertCircleSVG_1 = tslib_1.__importDefault(require("./AlertCircleSVG"));
+const Toaster_1 = tslib_1.__importDefault(require("./Toaster"));
 function LinkField({ url }) {
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
     const [isError, setIsError] = (0, react_1.useState)(false);
+    const [showNotification, setShowNotification] = react_1.default.useState(false);
+    const onCloseToaster = () => {
+        setShowNotification(false);
+        setIsCopied(false);
+        setIsError(false);
+    };
+    (0, react_1.useEffect)(() => {
+        if (isCopied || isError) {
+            setShowNotification(true);
+        }
+    }, [isCopied, isError]);
     return (react_1.default.createElement("div", { className: 'cio-share-results-feature-group' },
         react_1.default.createElement("div", { className: 'cio-share-results-description' }, "Share by link"),
         react_1.default.createElement("div", { className: 'cio-share-results-button-group' },
@@ -20,11 +32,8 @@ function LinkField({ url }) {
                         setIsError(true);
                     }
                 } }, "Copy link")),
-        isCopied && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
-            react_1.default.createElement(CheckMarkCircleSVG_1.default, null),
-            react_1.default.createElement("div", null, "Link copied to clipboard"))),
-        isError && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
-            react_1.default.createElement(AlertCircleSVG_1.default, null),
-            react_1.default.createElement("div", null, "Sorry, there was an error copying. Please try again.")))));
+        showNotification && (react_1.default.createElement(Toaster_1.default, { icon: isCopied ? CheckMarkCircleSVG_1.default : AlertCircleSVG_1.default, message: isCopied
+                ? 'Link copied to clipboard'
+                : 'Sorry, there was an error copying. Please try again.', onCloseToaster: onCloseToaster }))));
 }
 exports.default = LinkField;

package/lib/cjs/components/ShareResultsModal/Toaster.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const CloseSVG_1 = tslib_1.__importDefault(require("./CloseSVG"));
+function Toaster(props) {
+    const { icon: Icon, message, onCloseToaster } = props;
+    return (React.createElement("div", { className: 'cio-share-results-notification' },
+        React.createElement(Icon, null),
+        React.createElement("div", null, message),
+        React.createElement(CloseSVG_1.default, { className: 'cio-toaster-close-button', onClick: () => onCloseToaster() })));
+}
+exports.default = Toaster;

package/lib/cjs/utils.js

@@ -177,6 +177,9 @@ function formatMatchedOptions(options, separator, lastSeparator) {
     if (!options.length || !separator || !lastSeparator) {
         return '';
     }
+    if (options.length === 1) {
+        return options[0];
+    }
     const firstPart = options.slice(0, -1).join(separator);
     return [firstPart, lastSeparator, options.at(-1)].join('');
 }

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.17.6';
+exports.default = '1.17.8';

package/lib/mjs/components/ShareResultsModal/CloseSVG.js

@@ -1,6 +1,6 @@
 import React from 'react';
-export default function CloseSVG() {
-    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+export default function CloseSVG(props) {
+    return (React.createElement("svg", { ...props, role: 'button', "aria-label": 'Close', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         React.createElement("path", { d: 'M18.4748 4.11089C18.8653 3.72036 19.4985 3.72036 19.889 4.11089C20.2795 4.50141 20.2795 5.13458 19.889 5.5251L5.52503 19.8891C5.13451 20.2796 4.50134 20.2796 4.11082 19.8891C3.72029 19.4985 3.72029 18.8654 4.11082 18.4748L18.4748 4.11089Z', fill: '#505A75' }),
         React.createElement("path", { d: 'M4.11076 5.5251C3.72024 5.13458 3.72024 4.50141 4.11076 4.11089C4.50129 3.72036 5.13445 3.72036 5.52498 4.11089L19.8889 18.4748C20.2795 18.8654 20.2795 19.4985 19.8889 19.8891C19.4984 20.2796 18.8652 20.2796 18.4747 19.8891L4.11076 5.5251Z', fill: '#505A75' })));
 }

package/lib/mjs/components/ShareResultsModal/EmailField.js

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import CheckMarkCircleSVG from './CheckMarkCircleSVG';
 import AlertCircleSVG from './AlertCircleSVG';
+import Toaster from './Toaster';
 export default function EmailField({ onSubmit }) {
     const [formError, setFormError] = useState(null);
     const [isSubmitted, setIsSubmitted] = useState(false);
     const [email, setEmail] = useState('');
+    const [showNotification, setShowNotification] = React.useState(false);
     const validate = () => {
         if (email.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
             setFormError(null);
@@ -29,18 +31,23 @@ export default function EmailField({ onSubmit }) {
             });
         }
     };
+    const onCloseToaster = () => {
+        setShowNotification(false);
+        setIsSubmitted(false);
+        setFormError(null);
+    };
+    useEffect(() => {
+        if (isSubmitted || formError?.type === 'callback') {
+            setShowNotification(true);
+        }
+    }, [isSubmitted, formError?.type]);
     return (React.createElement("div", { className: 'cio-share-results-feature-group' },
         React.createElement("form", { onSubmit: handleSubmit },
             React.createElement("div", { className: 'cio-share-results-description' }, "Share by email"),
             React.createElement("div", { className: 'cio-share-results-button-group' },
                 React.createElement("div", { className: 'cio-share-results-email-input-group' },
-                    React.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value) }),
+                    React.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value), placeholder: 'Enter an email address to receive and share the results' }),
                     formError?.type === 'validate' && (React.createElement("div", { className: 'cio-share-results-email-input-error-message' }, formError.message))),
                 React.createElement("button", { className: 'cio-share-results-share-button', type: 'submit' }, "Send"))),
-        isSubmitted && (React.createElement("div", { className: 'cio-share-results-notification' },
-            React.createElement(CheckMarkCircleSVG, null),
-            React.createElement("div", null, "Email sent"))),
-        formError?.type === 'callback' && (React.createElement("div", { className: 'cio-share-results-notification' },
-            React.createElement(AlertCircleSVG, null),
-            React.createElement("div", null, formError.message)))));
+        showNotification && (React.createElement(Toaster, { icon: isSubmitted ? CheckMarkCircleSVG : AlertCircleSVG, message: isSubmitted ? 'Email sent' : formError?.message, onCloseToaster: onCloseToaster }))));
 }

package/lib/mjs/components/ShareResultsModal/LinkField.js

@@ -1,9 +1,21 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import CheckMarkCircleSVG from './CheckMarkCircleSVG';
 import AlertCircleSVG from './AlertCircleSVG';
+import Toaster from './Toaster';
 export default function LinkField({ url }) {
     const [isCopied, setIsCopied] = useState(false);
     const [isError, setIsError] = useState(false);
+    const [showNotification, setShowNotification] = React.useState(false);
+    const onCloseToaster = () => {
+        setShowNotification(false);
+        setIsCopied(false);
+        setIsError(false);
+    };
+    useEffect(() => {
+        if (isCopied || isError) {
+            setShowNotification(true);
+        }
+    }, [isCopied, isError]);
     return (React.createElement("div", { className: 'cio-share-results-feature-group' },
         React.createElement("div", { className: 'cio-share-results-description' }, "Share by link"),
         React.createElement("div", { className: 'cio-share-results-button-group' },
@@ -17,10 +29,7 @@ export default function LinkField({ url }) {
                         setIsError(true);
                     }
                 } }, "Copy link")),
-        isCopied && (React.createElement("div", { className: 'cio-share-results-notification' },
-            React.createElement(CheckMarkCircleSVG, null),
-            React.createElement("div", null, "Link copied to clipboard"))),
-        isError && (React.createElement("div", { className: 'cio-share-results-notification' },
-            React.createElement(AlertCircleSVG, null),
-            React.createElement("div", null, "Sorry, there was an error copying. Please try again.")))));
+        showNotification && (React.createElement(Toaster, { icon: isCopied ? CheckMarkCircleSVG : AlertCircleSVG, message: isCopied
+                ? 'Link copied to clipboard'
+                : 'Sorry, there was an error copying. Please try again.', onCloseToaster: onCloseToaster }))));
 }

package/lib/mjs/components/ShareResultsModal/Toaster.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import CloseSVG from './CloseSVG';
+export default function Toaster(props) {
+    const { icon: Icon, message, onCloseToaster } = props;
+    return (React.createElement("div", { className: 'cio-share-results-notification' },
+        React.createElement(Icon, null),
+        React.createElement("div", null, message),
+        React.createElement(CloseSVG, { className: 'cio-toaster-close-button', onClick: () => onCloseToaster() })));
+}

package/lib/mjs/utils.js

@@ -157,6 +157,9 @@ export function formatMatchedOptions(options, separator, lastSeparator) {
     if (!options.length || !separator || !lastSeparator) {
         return '';
     }
+    if (options.length === 1) {
+        return options[0];
+    }
     const firstPart = options.slice(0, -1).join(separator);
     return [firstPart, lastSeparator, options.at(-1)].join('');
 }

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.6';
+export default '1.17.8';

package/lib/styles.css

@@ -1026,6 +1026,12 @@
   gap: 12px;
 }
 
+.cio-quiz .cio-share-results-notification .cio-toaster-close-button{
+  margin-left: auto;
+  cursor: pointer;
+  width: 16px;
+}
+
 .cio-quiz .cio-share-results-link-input {
   font-size: 1rem;
   padding: 12px 20px;

package/lib/types/components/ShareResultsModal/CloseSVG.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export default function CloseSVG(): JSX.Element;
+export default function CloseSVG(props: any): JSX.Element;

package/lib/types/components/ShareResultsModal/Toaster.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface NotificationProps {
+    icon: (props: any) => JSX.Element;
+    message?: string;
+    onCloseToaster: () => void;
+}
+export default function Toaster(props: NotificationProps): JSX.Element;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.6";
+declare const _default: "1.17.8";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.17.6",
+  "version": "1.17.8",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",