TP-1366: ability to hide the progress bar (#141)

* feat(forms): hide progress bar --------- Co-authored-by: Nick Hellemans <[email protected]>
awell-health · Apr 2, 2024 · ccfff66 · ccfff66
1 parent dfddf46
commit ccfff66
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "private": false,
   "description": "UI components to integrate with Awell Health",
   "repository": {

diff --git a/src/hostedPages/activities/form/ConversationalForm.tsx b/src/hostedPages/activities/form/ConversationalForm.tsx
@@ -23,6 +23,7 @@ export const ConversationalForm = ({
   onAnswersChange,
   autoProgress = false,
   autosaveAnswers = true,
+  showProgressBar = true,
 }: FormProps) => {
   const {
     submitForm,
@@ -83,7 +84,8 @@ export const ConversationalForm = ({
   // hide progress indicator when all questions are evaluated or when form only has one question
   const hideProgressIndicator =
     (isEvaluatingQuestionVisibility && percentageCompleted === 100) ||
-    form.questions.length === 1
+    form.questions.length === 1 ||
+    showProgressBar === false
 
   return (
     <>

diff --git a/src/hostedPages/activities/form/form.stories.tsx b/src/hostedPages/activities/form/form.stories.tsx
@@ -50,6 +50,11 @@ export default {
       control: { type: 'radio' },
       defaultValue: false,
     },
+    showProgressBar: {
+      options: [true, false],
+      control: { type: 'radio' },
+      defaultValue: true,
+    },
   },
   decorators: [
     (StoryComponent) => (
@@ -67,6 +72,7 @@ const MyStory: Story = ({
   displayMode,
   autoProgress,
   errorLabels,
+  showProgressBar,
 }) => {
   const [answers, setAnswers] = React.useState<string>('')
   const isConversationalMode = displayMode == 'conversational'
@@ -92,6 +98,7 @@ const MyStory: Story = ({
           storedAnswers={answers}
           onAnswersChange={handleAnswersChange}
           key={form.id}
+          showProgressBar={showProgressBar}
           questionLabels={{
             no_label: 'No',
             yes_label: 'Yes',
@@ -134,6 +141,7 @@ const MyStory: Story = ({
           storedAnswers={answers}
           onAnswersChange={handleAnswersChange}
           key={form.id}
+          showProgressBar={showProgressBar}
           questionLabels={{
             no_label: 'No',
             yes_label: 'Yes',
@@ -176,6 +184,7 @@ export const Form: Story = ({
   displayMode,
   errorLabels,
   autoProgress,
+  showProgressBar,
 }) => {
   return (
     <MyStory
@@ -185,6 +194,7 @@ export const Form: Story = ({
       buttonLabels={buttonLabels}
       errorLabels={errorLabels}
       autoProgress={autoProgress}
+      showProgressBar={showProgressBar}
     />
   )
 }
@@ -215,6 +225,7 @@ export const FormMobile: Story = ({
   buttonLabels,
   displayMode,
   errorLabels,
+  showProgressBar,
 }) => {
   return (
     <MyStory
@@ -223,6 +234,7 @@ export const FormMobile: Story = ({
       displayMode={displayMode}
       buttonLabels={buttonLabels}
       errorLabels={errorLabels}
+      showProgressBar={showProgressBar}
     />
   )
 }

diff --git a/src/types/form.ts b/src/types/form.ts
@@ -26,4 +26,5 @@ export interface FormProps {
   ) => Promise<Array<QuestionRuleResult>>
   autoProgress?: boolean
   autosaveAnswers?: boolean
+  showProgressBar?: boolean
 }