Question Time Picker

questionTimePicker is a step that shows a time picker for the user to choose from.

Key	Notes
`type`	`questionTimePicker`
`stepId`	Unique step id
`title`	The step title
`subtitle`	The step subtitle
`textColor`	The text color
`subtitleColor`	The subtitle color. It’s optional, and it falls back to the `textColor` if not passed.
`progressImage`	An image that shows at the top of the timer to the current step progress bar (see the screenshot below for an example)
`timePicker`	An object that holds the styles of the time picker. `"timePicker": {` `"question": "What time do you usually wake up?",` `"questionColor": "#4F6171",` `"arrowUpColor": "#7A90A3",` `"arrowDownColor": "#7A90A3",` `"selectedColor": "#14191D",` `"selectedBackgroundColor": "#FFFFFF",` `"selectedActiveColor": "#FFA035",` `"selectedActiveBackgroundColor": "#FFF",` `"activeTimeColor": "#14191D",` `"activeTimeBackgroundColor": "#FFF",` `"inactiveTimeColor": "#7A90A3"` `}`
`ctaText`	The text color of the choices
`ctaBackgroundColor`	The hover color.
`ctaColor`	The border color of the selected choice.

Example

{
    "type": "questionTimePicker",
    "stepId": "wake_up_time",
    "title": "We hear you! That’s where we’ll start!",
    "subtitle": "Tell us more about your mornings.",
    "backgroundColor": "#F8F8F8",
    "ctaText": "Continue",
    "ctaBackgroundColor": "#FFA035",
    "ctaColor": "#FFF",
    "textColor": "#14191D",
    "subtitleColor": "#4F6171",
    "progressImage": "https://c.thefab.co/web-onboarding/fabulous/splash/flowchart/progress-bar-beige-2.svg",
    "timePicker": {
        "question": "What time do you usually wake up?",
        "questionColor": "#4F6171",
        "arrowUpColor": "#7A90A3",
        "arrowDownColor": "#7A90A3",
        "selectedColor": "#14191D",
        "selectedBackgroundColor": "#FFFFFF",
        "selectedActiveColor": "#FFA035",
        "selectedActiveBackgroundColor": "#FFF",
        "activeTimeColor": "#14191D",
        "activeTimeBackgroundColor": "#FFF",
        "inactiveTimeColor": "#7A90A3"
    }
},

Screenshot 2024-06-14 at 10.59.39 AM.png

Example​

Example