@constructor-io/constructorio-ui-quizzes 1.8.2 → 1.9.0

package/lib/mjs/src/hooks/useQuizEvents/useQuizSkipClick.js

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+import { isFunction } from '../../utils';
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = useCallback(() => {
+        const currentQuestion = quizApiState.quizCurrentQuestion?.next_question;
+        const currentQuestionId = currentQuestion?.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!(currentQuestion?.type === 'cover')) {
+                dispatchLocalState({
+                    type: QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = {
+                ...quizLocalState.answerInputs[currentQuestionId],
+                value: currentQuestion?.type === 'open' ? 'false' : null,
+            };
+            if (currentQuestion && isFunction(onQuizSkipQuestion)) {
+                onQuizSkipQuestion({ ...currentQuestion, answer: currentAnswerInput });
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+export default useQuizSkipClick;

package/lib/mjs/{services → src/services}/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { version as packageVersion } from '../../package.json';
 export const getCioClient = (apiKey) => {
     if (apiKey) {
         return new ConstructorIOClient({
             apiKey,
             sendTrackingEvents: true,
-            version: 'cio-ui-quizzes',
+            version: `cio-ui-quizzes-${packageVersion}`,
         });
     }
     return undefined;

package/lib/mjs/{stories → src/stories}/Quiz/tests/mocks.js

@@ -176,6 +176,10 @@ export const useMockContextValue = (question) => {
             ...mockElementProps,
             className: 'cio-question-cta-button',
         }),
+        getSkipQuestionButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-skip-button',
+        }),
         getPreviousQuestionButtonProps: () => ({
             ...mockElementProps,
             className: 'cio-question-back-button',

package/lib/mjs/{utils.js → src/utils.js}

@@ -42,6 +42,7 @@ export const functionStrings = {
     onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
+    onQuizSkipQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 export const stringifyWithDefaults = (obj) => {

package/lib/styles.css

@@ -215,6 +215,14 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
+.cio-quiz .cio-question-buttons-group {
+  width: 20rem;
+  height: var(--bottom-bar-height);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
 .cio-quiz .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
@@ -250,7 +258,27 @@
   cursor: auto;
   outline: none;
 }
-
+.cio-quiz .cio-question-skip-button {
+  background: transparent;
+  color: var(--gray-dust-500);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  font-size: 1rem;
+  width: 100%;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s ease-in-out;
+}
+.cio-quiz .cio-question-skip-button:hover,
+.cio-quiz .cio-question-skip-button:focus {
+  text-decoration-color: var(--gray-dust-200);
+}
+.cio-quiz .cio-question-skip-button.hide {
+  visibility: hidden;
+  pointer-events: none;
+}
 /* Back Button Component */
 .cio-quiz .cio-question-back-button {
   color: var(--primary-color);
@@ -639,6 +667,12 @@
 
 /* Container Queries */
 
+@container quiz (max-width: 640px) {
+  .cio-quiz .cio-question-skip-button span {
+    display: none;
+  }
+}
+
 /* Small Tablet */
 @container quiz (min-width: 640px) {
   .cio-quiz .cio-container {

package/lib/types/{components → src/components}/CioQuiz/actions.d.ts

@@ -6,6 +6,7 @@ export declare enum QuestionTypes {
     SingleSelect = "single",
     MultipleSelect = "multiple",
     Next = "next",
+    Skip = "skip",
     Back = "back",
     Reset = "reset",
     Hydrate = "hydrate",
@@ -24,7 +25,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

package/lib/types/{components → src/components}/CioQuiz/context.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
     getQuizImageProps: GetQuizImageProps;
     getSelectInputProps: GetSelectInputProps;

package/lib/types/src/components/SkipButton/SkipButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SkipButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    propsGetters?: () => React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+declare function SkipButton(props: SkipButtonProps): JSX.Element;
+export default SkipButton;

package/lib/types/{constants.d.ts → src/constants.d.ts}

@@ -1,8 +1,8 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-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  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon 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  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\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 hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+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  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon 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  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n  - `onQuizSkipQuestion` is an optional callback function that will be called when user skips a question\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\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 hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring 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";

package/lib/types/{hooks → src/hooks}/usePropsGetters/index.d.ts

@@ -1,4 +1,4 @@
-import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps } from '../../types';
+import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps } from '../../types';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
 declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState) => {
@@ -15,5 +15,6 @@ declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: Quiz
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
 };
 export default usePropsGetters;

package/lib/types/src/hooks/usePropsGetters/useSkipQuestionButtonProps.d.ts

@@ -0,0 +1,3 @@
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { GetSkipQuestionButtonProps, QuizEventsReturn } from '../../types';
+export default function useSkipQuestionButtonProps(skipQuestion: QuizEventsReturn.SkipQuestion, quizApiState: QuizAPIReducerState): GetSkipQuestionButtonProps;

package/lib/types/src/hooks/useQuizEvents/useQuizSkipClick.d.ts

@@ -0,0 +1,6 @@
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+import { QuizEventsReturn, OnQuizSkipQuestion } from '../../types';
+declare const useQuizSkipClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizSkipQuestion?: OnQuizSkipQuestion) => QuizEventsReturn.NextQuestion;
+export default useQuizSkipClick;

package/lib/types/{stories → src/stories}/Quiz/tests/mocks.d.ts

@@ -7,7 +7,7 @@ export declare const getMockQuestion: (type: `${QuestionTypes}`) => {
     title: string;
     description: string;
     cta_text: string;
-    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
@@ -18,7 +18,7 @@ export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
     title: string;
     description: string;
     cta_text: string;
-    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const questionOptionsWithImages: {

package/lib/types/{types.d.ts → src/types.d.ts}

@@ -34,8 +34,10 @@ export type QuestionWithAnswer = Question & {
     answer: AnswerInput;
 };
 export type OnQuizNextQuestion = (question: QuestionWithAnswer) => void;
+export type OnQuizSkipQuestion = (question: QuestionWithAnswer) => void;
 export interface Callbacks {
     onQuizNextQuestion?: OnQuizNextQuestion;
+    onQuizSkipQuestion?: OnQuizSkipQuestion;
 }
 export interface IQuizProps {
     apiKey?: string;
@@ -65,7 +67,7 @@ export interface QuizReturnState {
 }
 export type AnswerInput = {
     type: InputQuestionsTypes;
-    value: string | string[];
+    value: string | string[] | null;
 };
 export type AnswerInputState = {
     [key: string]: AnswerInput;
@@ -87,6 +89,7 @@ export type CurrentQuestion = NextQuestionResponse & {
 export declare namespace QuizEventsReturn {
     type QuizAnswerChanged = (payload?: string | string[]) => void;
     type NextQuestion = () => void;
+    type SkipQuestion = () => void;
     type PreviousQuestion = () => void;
     type ResetQuiz = () => void;
     type ResultClick = (result: QuizResultDataPartial, position: number) => void;
@@ -97,6 +100,7 @@ export declare namespace QuizEventsReturn {
 }
 export interface QuizEventsReturn {
     nextQuestion: QuizEventsReturn.NextQuestion;
+    skipQuestion: QuizEventsReturn.SkipQuestion;
     quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged;
     previousQuestion: QuizEventsReturn.PreviousQuestion;
     resetQuiz: QuizEventsReturn.ResetQuiz;
@@ -121,6 +125,12 @@ export interface NextQuestionButtonProps {
     disabled?: boolean;
     onClick: React.MouseEventHandler<HTMLElement>;
 }
+export interface SkipQuestionButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    disabled?: boolean;
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
 export interface PreviousQuestionButtonProps {
     className: string;
     type: 'submit' | 'reset' | 'button' | undefined;
@@ -175,6 +185,7 @@ export type GetOpenTextInputProps = () => OpenTextInputProps;
 export type GetCoverQuestionProps = () => CoverQuestionProps;
 export type GetSelectInputProps = (option: QuestionOption) => SelectInputProps;
 export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
+export type GetSkipQuestionButtonProps = () => SkipQuestionButtonProps;
 export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
 export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
@@ -200,6 +211,7 @@ export interface UseQuizReturn {
     events: QuizEventsReturn;
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
     getQuizImageProps: GetQuizImageProps;
     getSelectQuestionImageProps: GetSelectQuestionImageProps;

package/lib/types/{utils.d.ts → src/utils.d.ts}

@@ -18,6 +18,7 @@ export declare const functionStrings: {
     onAddToFavoritesClick: string;
     onQuizResultsLoaded: string;
     onQuizNextQuestion: string;
+    onQuizSkipQuestion: string;
     cioJsClient: string;
 };
 export declare const stringifyWithDefaults: (obj: {

package/package.json

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

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -1,12 +0,0 @@
-import React, { useContext } from 'react';
-import BackButton from '../BackButton/BackButton';
-import CTAButton from '../CTAButton/CTAButton';
-import QuizContext from '../CioQuiz/context';
-function ControlBar(props) {
-    const { ctaButtonText } = props;
-    const { getNextQuestionButtonProps } = useContext(QuizContext);
-    return (React.createElement("div", { className: 'cio-question-buttons-container' },
-        React.createElement(BackButton, null),
-        React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
-}
-export default ControlBar;