@constructor-io/constructorio-ui-quizzes 1.3.1 → 1.3.2

package/lib/cjs/components/BackButton/BackButton.js

@@ -5,7 +5,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 function BackButton(props) {
     // eslint-disable-next-line
     const { disabled } = props;
-    return (react_1.default.createElement("button", Object.assign({ type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}` }, props),
+    return (react_1.default.createElement("button", Object.assign({ title: 'Quiz Back Button', type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}` }, props),
         react_1.default.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
             react_1.default.createElement("path", { d: 'M6.06313 1.06268L0.964522 5.43176C0.882383 5.50218 0.816449 5.58954 0.771245 5.68785C0.726041 5.78615 0.702637 5.89306 0.702637 6.00126C0.702637 6.10946 0.726041 6.21637 0.771245 6.31467C0.816449 6.41297 0.882383 6.50033 0.964522 6.57076L6.06313 10.9398C6.5498 11.3568 7.30153 11.0111 7.30153 10.3703V1.63093C7.30153 0.990168 6.5498 0.644468 6.06313 1.06268Z', fill: 'currentColor' }))));
 }

package/lib/cjs/components/ResultCard/ResultCard.js

@@ -35,13 +35,15 @@ function ResultCard(props) {
                         salePrice),
                     regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                         "$",
-                        regularPrice)))),
-            react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));
+                        regularPrice))))));
     };
+    const resultCardContentWithoutLink = () => (react_1.default.createElement("div", { className: 'cio-result-card-container', onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), role: 'button', tabIndex: 0 }, resultCardContent()));
     const resultCardContentWithLink = () => {
         var _a;
-        return (react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_a = result.data) === null || _a === void 0 ? void 0 : _a.url }, resultCardContent()));
+        return (react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_a = result.data) === null || _a === void 0 ? void 0 : _a.url, onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e) }, resultCardContent()));
     };
-    return (react_1.default.createElement("div", { onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
+    return (react_1.default.createElement("div", { className: 'cio-result-card' },
+        !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
+        react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));
 }
 exports.default = ResultCard;

package/lib/mjs/components/BackButton/BackButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 function BackButton(props) {
     // eslint-disable-next-line
     const { disabled } = props;
-    return (React.createElement("button", { type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}`, ...props },
+    return (React.createElement("button", { title: 'Quiz Back Button', type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}`, ...props },
         React.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("path", { d: 'M6.06313 1.06268L0.964522 5.43176C0.882383 5.50218 0.816449 5.58954 0.771245 5.68785C0.726041 5.78615 0.702637 5.89306 0.702637 6.00126C0.702637 6.10946 0.726041 6.21637 0.771245 6.31467C0.816449 6.41297 0.882383 6.50033 0.964522 6.57076L6.06313 10.9398C6.5498 11.3568 7.30153 11.0111 7.30153 10.3703V1.63093C7.30153 0.990168 6.5498 0.644468 6.06313 1.06268Z', fill: 'currentColor' }))));
 }

package/lib/mjs/components/ResultCard/ResultCard.js

@@ -29,8 +29,10 @@ export default function ResultCard(props) {
                     salePrice),
                 regularPrice && (React.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                     "$",
-                    regularPrice)))),
+                    regularPrice))))));
+    const resultCardContentWithoutLink = () => (React.createElement("div", { className: 'cio-result-card-container', onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), role: 'button', tabIndex: 0 }, resultCardContent()));
+    const resultCardContentWithLink = () => (React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url, onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e) }, resultCardContent()));
+    return (React.createElement("div", { className: 'cio-result-card' },
+        !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));
-    const resultCardContentWithLink = () => (React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url }, resultCardContent()));
-    return (React.createElement("div", { onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
 }

package/lib/styles.css

@@ -113,17 +113,18 @@
   width: 100%;
   padding: 0.5rem;
   border: 0;
-  border-bottom: 1px solid var(--blue-denim-100);
+  border-bottom: 1px solid var(--gray-dust-100);
   color: var(--blue-denim-500);
   padding: 0.8rem;
   outline: none;
   font-size: 1rem;
 }
-.cio-question-input-text:focus {
+.cio-question-input-text:focus,
+.cio-question-input-text:active {
   border-bottom: 1px solid var(--blue-denim-500);
 }
 .cio-question-input-text::placeholder {
-  color: var(--blue-denim-100);
+  color: var(--gray-dust-100);
 }
 
 /* CTA Button Component */
@@ -164,10 +165,15 @@
   background: var(--blue-denim-700);
   border: 2px solid var(--blue-denim-800);
 }
+.cio-question-cta-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-question-cta-button:disabled,
 .cio-question-cta-button.disabled {
-  background: var(--blue-denim-200);
-  border: 2px solid var(--blue-denim-100);
+  background: var(--gray-dust-200);
+  border: 2px solid var(--gray-dust-200);
+  cursor: auto;
+  outline: none;
 }
 
 /* Back Button Component */
@@ -187,6 +193,9 @@
 .cio-question-back-button:active {
   border: 2px solid var(--blue-denim-700);
 }
+.cio-question-back-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-question-back-button svg {
   display: inline;
 }
@@ -379,7 +388,8 @@
   display: flex;
   flex-direction: column;
 }
-.cio-result-card-anchor {
+.cio-result-card-anchor,
+.cio-result-card-container {
   text-decoration: none;
   background-color: transparent;
   color: inherit;
@@ -404,6 +414,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  text-decoration: none;
 }
 .cio-result-card-title {
   color: var(--gray-dust-500);
@@ -445,6 +456,9 @@
   background: var(--blue-denim-700);
   border: 2px solid var(--blue-denim-800);
 }
+.cio-result-card-cta-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-result-card-cta-button:disabled,
 .cio-result-card-cta-button.disabled {
   background: var(--blue-denim-200);

package/package.json

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