@opengovsg/confetti 0.0.2 → 0.0.3

package/build/confetti.css

@@ -1,8 +1,6 @@
 :root {
+  --confetti-font-scale: 16px;
   /* Define CSS Variables with defaults */
-  --confetti-font-family:
-    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --confetti-box-padding: 20px 24px;
   --confetti-max-width: 300px;
   --confetti-z-index: 2147483647;
@@ -39,6 +37,7 @@
 }
 
 .confetti-dialog {
+  width: 100%;
   max-width: var(--confetti-max-width);
   background: transparent;
   position: relative;
@@ -79,6 +78,7 @@
 }
 
 .confetti {
+  font-family: var(--confetti-font-family);
   overflow: hidden;
   padding: 24px;
   border-radius: var(--confetti-border-radius);
@@ -87,7 +87,7 @@
   flex-direction: column;
   gap: 16px;
   color: var(--confetti-text-primary-color);
-  font-size: 16px;
+  font-size: var(--confetti-font-scale);
   width: 100%;
   background: var(--confetti-background-color);
 
@@ -101,7 +101,7 @@
     border-radius: 8px;
     cursor: pointer;
     transition: transform 200ms;
-    font-size: 14px;
+    font-size: 0.875em;
     font-weight: 500;
     line-height: 20px;
 
@@ -154,7 +154,7 @@
   }
 
   .cf-choice {
-    font-size: 16px;
+    font-size: 1em;
     cursor: pointer;
     padding: 8px 10px;
     border-radius: 6px;
@@ -336,7 +336,7 @@
       }
 
       .cf-description {
-        font-size: 14px;
+        font-size: 0.875em;
         line-height: 20px;
         font-weight: 400;
         color: var(--confetti-text-subtle-color);
@@ -369,7 +369,7 @@
 
     .cf-rating-emoji,
     .cf-rating-star {
-      font-size: 16px;
+      font-size: 1em;
       background-color: transparent;
       border: none;
       padding: 0;
@@ -405,10 +405,10 @@
   .cf-rating-text {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: 0.75em;
     color: var(--confetti-text-subtle-color);
     font-weight: 500;
-    line-height: 16px;
+    line-height: 1;
 
     .cf-rating-text-lower {
       flex: 1;

package/build/index.d.ts

@@ -404,9 +404,7 @@ declare const MultiChoice: ({
 }: MultiChoiceProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/presentation/Flow.d.ts
-type ChildField = ({
-  onChange
-}: {
+type ChildField = (_: {
   onChange: (answer: Answer) => void;
   question: Question$1;
   error?: string;
@@ -415,11 +413,13 @@ interface FlowProps {
   onSubmit: (answer: Answer) => void;
   children: ChildField;
   question: Question$1;
+  isLastQuestion: boolean;
 }
 declare const Flow: ({
   onSubmit,
   children,
-  question
+  question,
+  isLastQuestion
 }: FlowProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/presentation/Embed.d.ts

package/build/index.js

@@ -192,7 +192,7 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, meta
 			setSurvey(parseResult.data);
 		});
 		if (!respondent && !internalRespondentId) return;
-		client$1.get(`v1/cfti/${surveyId}/respondent/${respondent ?? internalRespondentId}`).json().then((data) => {
+		client$1.get(`v1/cfti/${surveyId}/respondent/${respondent || internalRespondentId}`).json().then((data) => {
 			const parseResult = publicGetRespondentOutputSchema.safeParse(data);
 			if (!parseResult.success) {
 				setLastRespondedAt(null);
@@ -209,7 +209,7 @@ const ConfettiProvider = ({ children, surveyId, publishableKey, respondent, meta
 	]);
 	const submit = useCallback(async ({ answers }) => {
 		await client$1.put(`v1/cfti/${surveyId}/response/${responseId}`, { json: {
-			respondent: respondent ?? internalRespondentId,
+			respondent: respondent || internalRespondentId,
 			data: answers,
 			metadata
 		} });
@@ -357,11 +357,12 @@ const getNextQuestionState = ({ originalQuestions, answers, errors, pointer = -1
 	for (let i = 0; i < questions.length; i++) {
 		const question = questions[i];
 		if (!question) continue;
-		question.visible = isVisible({
+		const visible = isVisible({
 			index: i,
 			questions,
 			answers
 		});
+		question.visible = pointer === i || visible;
 	}
 	let nextIndex = questions.findIndex((q, i) => i > pointer && q.visible && answers[q.id] === void 0);
 	if (nextIndex === -1) nextIndex = questions.findLastIndex((q) => !!q.visible);
@@ -1108,7 +1109,7 @@ const getInitialState = (type) => {
 		default: return "";
 	}
 };
-const Flow = ({ onSubmit, children, question }) => {
+const Flow = ({ onSubmit, children, question, isLastQuestion }) => {
 	const [answer, setAnswer] = useState(getInitialState(question.properties.type));
 	const validator = useMemo(() => getAnswerValidator(question.properties, { required: question.required }), [question.properties, question.required]);
 	const error = useMemo(() => {
@@ -1116,13 +1117,30 @@ const Flow = ({ onSubmit, children, question }) => {
 		if (parseResult.success) return;
 		return prettifyError(parseResult.error);
 	}, [answer, validator]);
+	const hasNextQuestion = useMemo(() => {
+		const rule = question.routingLogic;
+		if (rule.type !== "always" && (answer === "" || Array.isArray(answer) && answer.length === 0) && question.required) return true;
+		const match = rule.type === "always" ? rule.target : rule.cases.find((condition) => evaluateCondition({
+			answer,
+			condition
+		}))?.target ?? rule.default;
+		if (match.type === "end") return false;
+		if (match.type === "next") return !isLastQuestion;
+		return true;
+	}, [
+		answer,
+		isLastQuestion,
+		question.required,
+		question.routingLogic
+	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [children({
 		onChange: setAnswer,
 		question,
 		error
 	}), /* @__PURE__ */ jsx(SubmitButton, {
 		isDisabled: !!error,
-		onPress: () => onSubmit(answer)
+		onPress: () => onSubmit(answer),
+		children: hasNextQuestion ? "Next" : "Submit"
 	})] });
 };
 
@@ -1172,10 +1190,12 @@ const PopoverConfetti = ({ closeOnFinishMs, ...props }) => {
 					props.onFinished?.();
 				},
 				children: ({ current, questions, update, isSubmitted }) => {
+					const isLastQuestion = current === questions.length - 1;
 					if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
 					const currentQuestion = questions[current];
 					if (!currentQuestion) return /* @__PURE__ */ jsx(Fragment, {});
 					return /* @__PURE__ */ jsx(Flow, {
+						isLastQuestion,
 						question: currentQuestion,
 						onSubmit: (answer) => {
 							return update({
@@ -1198,10 +1218,12 @@ const StepperConfetti = (props) => {
 		...props,
 		shouldAutoSubmit: true,
 		children: ({ current, questions, update, isSubmitted }) => {
+			const isLastQuestion = current === questions.length - 1;
 			if (isSubmitted) return /* @__PURE__ */ jsx(ThankYouMessage, {});
 			const currentQuestion = questions[current];
 			if (!currentQuestion) return /* @__PURE__ */ jsx(Fragment, {});
 			return /* @__PURE__ */ jsx(Flow, {
+				isLastQuestion,
 				question: currentQuestion,
 				onSubmit: (answer) => {
 					return update({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/confetti",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "sideEffects": false,
   "description": "Widgets for Confetti",
   "license": "SEE LICENSE IN LICENSE.md",