feat(v2/PublicForm): add handling of form color theme, update design

frontend/src/components/DatePicker/Calendar/CalendarContext.tsx

@@ -17,6 +17,8 @@ import {
 import { Props as DayzedProps, RenderProps, useDayzed } from 'dayzed'
 import { inRange } from 'lodash'
 
+import { ThemeColorScheme } from '~theme/foundations/colours'
+
 import { DatePickerProps } from '../DatePicker'
 import {
   generateClassNameForDate,
@@ -64,6 +66,10 @@ type PassthroughProps = {
    * Date currently being hovered, if any.
    */
   hoveredDate?: Date
+  /**
+   * Color scheme of date input
+   */
+  colorScheme?: ThemeColorScheme
 }
 export type UseProvideCalendarProps = Pick<DayzedProps, 'monthsToDisplay'> &
   PassthroughProps
@@ -122,6 +128,7 @@ const useProvideCalendar = ({
   onMouseLeaveCalendar,
   isDateInRange,
   hoveredDate,
+  colorScheme = 'primary',
 }: UseProvideCalendarProps) => {
   // Ensure that calculations are always made based on date of initial render,
   // so component state doesn't suddenly jump at midnight
@@ -293,5 +300,6 @@ const useProvideCalendar = ({
     onMouseLeaveCalendar,
     isDateInRange,
     hoveredDate,
+    colorScheme,
   }
 }

frontend/src/components/DatePicker/Calendar/CalendarTodayButton.tsx

@@ -6,11 +6,12 @@ import { useCalendar } from './CalendarContext'
 
 export const CalendarTodayButton = (): JSX.Element => {
   const styles = useStyles()
-  const { handleTodayClick } = useCalendar()
+  const { handleTodayClick, colorScheme } = useCalendar()
   return (
     <Box sx={styles.todayLinkContainer}>
       <Button
         aria-label="Focus on today's date"
+        colorScheme={colorScheme}
         variant="link"
         type="button"
         onClick={handleTodayClick}

frontend/src/components/DatePicker/Calendar/DayOfMonth.tsx

@@ -33,12 +33,7 @@ export interface DayOfMonthProps extends ButtonProps {
 
 export const DayOfMonth = forwardRef<DayOfMonthProps, 'button'>(
   (
-    {
-      dateObj: { date, selected, today },
-      isOutsideCurrMonth,
-      colorScheme = 'primary',
-      ...props
-    },
+    { dateObj: { date, selected, today }, isOutsideCurrMonth, ...props },
     ref,
   ) => {
     const {
@@ -48,6 +43,7 @@ export const DayOfMonth = forwardRef<DayOfMonthProps, 'button'>(
       isDateInRange,
       selectedDates,
       hoveredDate,
+      colorScheme,
     } = useCalendar()
 
     const isAvailable = useMemo(
@@ -72,6 +68,7 @@ export const DayOfMonth = forwardRef<DayOfMonthProps, 'button'>(
       isSelected: selected,
       isToday: today,
       isOutsideCurrMonth,
+      colorScheme,
     })
 
     const buttonBoxBg = useMemo(() => {

frontend/src/components/DatePicker/DateInput.tsx

@@ -23,8 +23,8 @@ import Input, { InputProps } from '../Input'
 import { DatePicker, DatePickerProps } from './DatePicker'
 
 export interface DateInputProps
-  extends Omit<InputProps, 'value' | 'onChange'>,
-    Pick<DatePickerProps, 'isDateUnavailable'> {
+  extends Omit<InputProps, 'value' | 'onChange' | 'colorScheme'>,
+    Pick<DatePickerProps, 'isDateUnavailable' | 'colorScheme'> {
   name: string
   value?: string
   onChange?: (val: string) => void
@@ -44,6 +44,7 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
       isReadOnly: isReadOnlyProp,
       isRequired: isRequiredProp,
       isInvalid: isInvalidProp,
+      colorScheme,
       ...props
     },
     ref,
@@ -118,6 +119,7 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
               </PopoverAnchor>
               <PopoverTrigger>
                 <IconButton
+                  colorScheme={colorScheme}
                   aria-label={calendarButtonAria}
                   icon={<BxCalendar />}
                   variant="inputAttached"
@@ -152,6 +154,7 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
                   </PopoverHeader>
                   <PopoverBody p={0}>
                     <DateInput.DatePicker
+                      colorScheme={colorScheme}
                       date={datePickerDate}
                       isDateUnavailable={isDateUnavailable}
                       onSelectDate={handleDatepickerSelection}

frontend/src/components/DatePicker/DatePicker.tsx

@@ -6,6 +6,7 @@ import {
 } from '@chakra-ui/react'
 
 import { DATE_INPUT_THEME_KEY } from '~theme/components/DateInput'
+import { ThemeColorScheme } from '~theme/foundations/colours'
 
 import {
   CalendarPanel,
@@ -27,11 +28,15 @@ export interface DatePickerProps {
    * unavailable.
    */
   isDateUnavailable?: (d: Date) => boolean
+  /**
+   * Color scheme for date picker component
+   */
+  colorScheme?: ThemeColorScheme
 }
 
 export const DatePicker = forwardRef<DatePickerProps, 'input'>(
   ({ date, ...props }, initialFocusRef) => {
-    const styles = useMultiStyleConfig(DATE_INPUT_THEME_KEY, {})
+    const styles = useMultiStyleConfig(DATE_INPUT_THEME_KEY, props)
 
     return (
       <CalendarProvider {...props} selectedDates={date}>

frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx

@@ -6,6 +6,8 @@ import {
 } from '@chakra-ui/react'
 import { useCombobox, UseComboboxProps } from 'downshift'
 
+import { ThemeColorScheme } from '~theme/foundations/colours'
+
 import { useItems } from '../hooks/useItems'
 import { SelectContext, SharedSelectContextReturnProps } from '../SelectContext'
 import { ComboboxItem } from '../types'
@@ -32,6 +34,8 @@ export interface SingleSelectProviderProps<
     label: string
   }
   children: React.ReactNode
+  /** Color scheme of component */
+  colorScheme?: ThemeColorScheme
 }
 export const SingleSelectProvider = ({
   items: rawItems,
@@ -51,6 +55,7 @@ export const SingleSelectProvider = ({
   isRequired: isRequiredProp,
   children,
   inputAria: inputAriaProp,
+  colorScheme,
   comboboxProps = {},
 }: SingleSelectProviderProps): JSX.Element => {
   const { items, getItemByValue } = useItems({ rawItems })
@@ -178,6 +183,7 @@ export const SingleSelectProvider = ({
 
   const styles = useMultiStyleConfig('SingleSelect', {
     isClearable,
+    colorScheme,
   })
 
   const inputAria = useMemo(() => {

frontend/src/components/Field/Attachment/Attachment.tsx

@@ -14,6 +14,7 @@ import omit from 'lodash/omit'
 import simplur from 'simplur'
 
 import { ATTACHMENT_THEME_KEY } from '~theme/components/Field/Attachment'
+import { ThemeColorScheme } from '~theme/foundations/colours'
 
 import { AttachmentDropzone } from './AttachmentDropzone'
 import { AttachmentFileInfo } from './AttachmentFileInfo'
@@ -56,11 +57,26 @@ export interface AttachmentProps extends UseFormControlProps<HTMLElement> {
    * input.
    */
   showFileSize?: boolean
+
+  /**
+   * Color scheme of the component.
+   */
+  colorScheme?: ThemeColorScheme
 }
 
 export const Attachment = forwardRef<AttachmentProps, 'div'>(
   (
-    { onChange, onError, maxSize, showFileSize, accept, value, name, ...props },
+    {
+      onChange,
+      onError,
+      maxSize,
+      showFileSize,
+      accept,
+      value,
+      name,
+      colorScheme,
+      ...props
+    },
     ref,
   ) => {
     // Merge given props with any form control props, if they exist.
@@ -179,6 +195,7 @@ export const Attachment = forwardRef<AttachmentProps, 'div'>(
 
     const styles = useMultiStyleConfig(ATTACHMENT_THEME_KEY, {
       isDragActive,
+      colorScheme,
     })
 
     const handleRemoveFile = useCallback(() => {

frontend/src/components/NumberInput/NumberInput.tsx

@@ -12,6 +12,8 @@ import {
   useNumberInput,
 } from '@chakra-ui/react'
 
+import { ThemeColorScheme } from '~theme/foundations/colours'
+
 import IconButton from '../IconButton'
 
 export interface NumberInputProps extends ChakraNumberInputProps {
@@ -27,6 +29,11 @@ export interface NumberInputProps extends ChakraNumberInputProps {
    * Whether to show the increment and decrement steppers. Defaults to true.
    */
   showSteppers?: boolean
+
+  /**
+   * Color scheme of number input.
+   */
+  colorScheme?: ThemeColorScheme
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(
@@ -93,6 +100,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
           <Box __css={styles.stepperWrapper} ref={stepperWrapperRef}>
             <IconButton
               sx={styles.stepperButton}
+              colorScheme={props.colorScheme}
               aria-hidden
               aria-label="Decrement number"
               variant="clear"
@@ -102,6 +110,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
             <Divider __css={styles.stepperDivider} orientation="vertical" />
             <IconButton
               sx={styles.stepperButton}
+              colorScheme={props.colorScheme}
               aria-hidden
               aria-label="Increment number"
               variant="clear"

frontend/src/features/public-form/PublicFormPage.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react'
 
 import { BasicField } from '~shared/types/field'
-import { FormAuthType } from '~shared/types/form'
+import { FormAuthType, FormColorTheme } from '~shared/types/form'
 
 import { envHandlers } from '~/mocks/msw/handlers/env'
 import {
@@ -12,7 +12,7 @@ import {
   SHOW_FIELDS_ON_YES_LOGIC,
 } from '~/mocks/msw/handlers/public-form'
 
-import { StoryRouter } from '~utils/storybook'
+import { getMobileViewParameters, StoryRouter } from '~utils/storybook'
 
 import PublicFormPage from './PublicFormPage'
 
@@ -24,6 +24,24 @@ const DEFAULT_MSW_HANDLERS = [
   postVerifyVfnOtpResponse(),
 ]
 
+const generateMswHandlersForColorTheme = (colorTheme: FormColorTheme) => {
+  return [
+    ...envHandlers,
+    getPublicFormResponse({
+      overrides: {
+        form: {
+          startPage: {
+            colorTheme,
+          },
+        },
+      },
+    }),
+    postVfnTransactionResponse(),
+    postGenerateVfnOtpResponse(),
+    postVerifyVfnOtpResponse(),
+  ]
+}
+
 export default {
   title: 'Pages/PublicFormPage',
   component: PublicFormPage,
@@ -44,6 +62,34 @@ export default {
 const Template: Story = () => <PublicFormPage />
 export const Default = Template.bind({})
 
+export const Mobile = Template.bind({})
+Mobile.parameters = getMobileViewParameters()
+
+export const ColorThemeGreen = Template.bind({})
+ColorThemeGreen.parameters = {
+  msw: generateMswHandlersForColorTheme(FormColorTheme.Green),
+}
+
+export const ColorThemeGrey = Template.bind({})
+ColorThemeGrey.parameters = {
+  msw: generateMswHandlersForColorTheme(FormColorTheme.Grey),
+}
+
+export const ColorThemeBrown = Template.bind({})
+ColorThemeBrown.parameters = {
+  msw: generateMswHandlersForColorTheme(FormColorTheme.Brown),
+}
+
+export const ColorThemeRed = Template.bind({})
+ColorThemeRed.parameters = {
+  msw: generateMswHandlersForColorTheme(FormColorTheme.Red),
+}
+
+export const ColorThemeOrange = Template.bind({})
+ColorThemeOrange.parameters = {
+  msw: generateMswHandlersForColorTheme(FormColorTheme.Orange),
+}
+
 export const Loading = Template.bind({})
 Loading.parameters = {
   msw: [...envHandlers, getPublicFormResponse({ delay: 'infinite' })],
@@ -60,12 +106,21 @@ SingpassUnauthorized.parameters = {
         form: {
           title: 'Singpass login form',
           authType: FormAuthType.SP,
+          startPage: {
+            colorTheme: FormColorTheme.Grey,
+          },
         },
       },
     }),
   ],
 }
 
+export const UnauthedMobile = Template.bind({})
+UnauthedMobile.parameters = {
+  ...SingpassUnauthorized.parameters,
+  ...getMobileViewParameters(),
+}
+
 export const SingpassAuthorized = Template.bind({})
 SingpassAuthorized.storyName = 'Singpass/Authorized'
 SingpassAuthorized.parameters = {