@constructor-io/constructorio-ui-quizzes 1.3.0 → 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/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -28,6 +28,7 @@ exports.basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request quest
 exports.cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from Constructor's servers
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+exports.smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

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/mjs/constants.js

@@ -25,6 +25,7 @@ export const basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request
 export const cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from Constructor's servers
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+export const smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

package/lib/styles.css

@@ -31,6 +31,7 @@
   --bottom-bar-height: 80px;
   --primary-color: var(--blue-denim-400);
   --container-image-small-height: 250px;
+  container: quiz / inline-size;
 }
 
 /* Mobile + global styles */
@@ -40,8 +41,11 @@
   font-family: 'Inter', sans-serif;
 }
 .cio-quiz {
+  position: relative;
   min-width: 100%;
   min-height: 100%;
+  height: 100%;
+  overflow: auto;
   display: flex;
   justify-content: center;
   background-color: #ffffff;
@@ -109,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 */
@@ -128,7 +133,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: fixed;
+  position: absolute;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -160,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 */
@@ -183,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;
 }
@@ -223,14 +236,15 @@
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
 }
 .cio-select-question-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  align-self: start;
   max-width: 1200px;
-  margin-bottom: var(--bottom-bar-height);
   padding: 1rem;
   margin-top: 2rem;
+  min-height: calc(100% - 3rem); /* Full height - padding - margin */
   width: 100%;
 }
 .cio-question-options-container {
@@ -239,7 +253,7 @@
   flex-wrap: wrap;
   gap: 1rem;
   width: 100%;
-  margin-bottom: auto;
+  margin-bottom: var(--bottom-bar-height);
   margin-top: 2rem;
 }
 .cio-question-options-container-text-only {
@@ -374,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;
@@ -399,6 +414,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  text-decoration: none;
 }
 .cio-result-card-title {
   color: var(--gray-dust-500);
@@ -440,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);
@@ -464,13 +483,18 @@
 /* Media Queries */
 
 /* Small Tablet */
-@media screen and (min-width: 640px) {
-   /* Container */
+@container quiz (min-width: 640px) {
+  .cio-container {
+    padding-bottom: 0;
+  }
+
+  /* Container */
   .cio-container--with-image {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Image */
@@ -485,6 +509,7 @@
   .cio-cover-question-container--with-image {
     justify-content: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Select Component */
@@ -519,23 +544,18 @@
 }
 
 /* Big Tablet */
-@media screen and (min-width: 768px) {
-  /* Quiz */
-  .cio-quiz {
-    font-size: 18px;
-  }
-
+@container quiz (min-width: 768px) {
   /* Container */
   .cio-container {
     align-items: center;
     margin-top: 0;
   }
   .cio-container--with-image {
-    padding: 6rem 2rem;
+    padding: 6% 2%;
     align-items: center;
     flex-direction: row;
   }
-  
+
   /* Input */
   .cio-question-input-text {
     margin-bottom: 1rem;
@@ -543,7 +563,7 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 1000px;
+    max-height: 100%;
   }
   .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
@@ -587,6 +607,7 @@
     padding: 1rem 5rem;
   }
   .cio-select-question-container {
+    justify-content: center;
     margin: 0;
     padding: 2rem;
     padding-bottom: 0;
@@ -612,11 +633,8 @@
 }
 
 /* Desktop */
-@media screen and (min-width: 1280px) {
+@container quiz (min-width: 1280px) {
   /* Container */
-  .cio-container--with-image {
-    padding: 6rem 2rem;
-  }
   .cio-cover-question-container--with-image {
     padding: 0;
   }
@@ -632,7 +650,6 @@
     padding: 2.5rem 0rem;
   }
 
-
   /* Results component */
   .cio-results-container {
     margin-top: 3rem;

package/lib/types/constants.d.ts

@@ -3,6 +3,7 @@ export declare const quizId = "coffee-quiz";
 export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";
+export declare const smallContainerDescription = "If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions";
 export declare enum RequestStates {
     Stale = 0,
     Loading = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -61,15 +61,15 @@
   },
   "devDependencies": {
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^7.0.0-beta.40",
-    "@storybook/addon-actions": "7.0.0-beta.40",
-    "@storybook/addon-essentials": "7.0.0-beta.40",
-    "@storybook/addon-interactions": "^7.0.0-beta.40",
-    "@storybook/addon-links": "7.0.0-beta.40",
-    "@storybook/jest": "^0.0.11-next.0",
-    "@storybook/react-webpack5": "7.0.0-beta.40",
-    "@storybook/test-runner": "0.10.0-next.8",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "7.0.11",
+    "@storybook/addon-essentials": "7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "7.0.11",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react-webpack5": "7.0.11",
+    "@storybook/test-runner": "0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -83,13 +83,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.1",
     "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.0-beta.40",
+    "storybook": "7.0.11",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",
     "vite": "^4.2.1",