M2-7225: checkboxes & radio buttons new layout design

ios/Podfile.lock

@@ -1745,7 +1745,7 @@ SPEC CHECKSUMS:
  RNSensors: 117ba71c7eeeea0407ea0c0bb79e3495d602049b
  RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
- Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+ Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
  ZIPFoundation: d170fa8e270b2a32bef9dcdcabff5b8f1a5deced
 

src/entities/activity/lib/types/activity.ts

@@ -80,6 +80,7 @@ type CheckboxConfig = {
  setAlerts: boolean;
  addTooltip: boolean;
  setPalette: boolean;
+ isGridView: boolean;
  options: Array<{
  id: string;
  text: string;
@@ -190,6 +191,7 @@ type RadioConfig = {
  addTooltip: boolean;
  setPalette: boolean;
  autoAdvance: boolean;
+ isGridView: boolean;
  options: Array<{
  id: string;
  text: string;

src/entities/activity/model/mappers.input.mock.ts

@@ -677,6 +677,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_instructions',
  isHidden: false,
@@ -717,6 +718,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_01',
  isHidden: false,
@@ -758,6 +760,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_02',
  isHidden: false,
@@ -799,6 +802,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_03',
  isHidden: false,
@@ -864,6 +868,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_04',
  isHidden: false,
@@ -914,6 +919,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_05',
  isHidden: false,
@@ -964,6 +970,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_06',
  isHidden: false,
@@ -1014,6 +1021,7 @@ export const conditionalInput: ActivityDto = {
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'phq9_07',
  isHidden: false,
@@ -1127,6 +1135,7 @@ export const checkboxInput: ActivityDto = {
  setAlerts: false,
  addTooltip: false,
  randomizeOptions: false,
+ portraitLayout: false,
  },
  name: 'Screen2',
  isHidden: false,

src/entities/activity/model/mappers.output.mock.ts

@@ -774,6 +774,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -811,6 +812,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -847,6 +849,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -917,6 +920,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -966,6 +970,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -1015,6 +1020,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -1064,6 +1070,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -1120,6 +1127,7 @@ export const conditionalOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,
@@ -1235,6 +1243,7 @@ export const checkboxOutput: ActivityDetails = {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  },
  hasAlert: false,
  hasScore: false,

src/entities/activity/model/mappers.ts

@@ -361,6 +361,7 @@ function mapToCheckbox(dto: MultiSelectionItemDto): ActivityItem {
  setAlerts: dto.config.setAlerts,
  addTooltip: dto.config.addTooltip,
  setPalette: dto.config.setPalette,
+ isGridView: dto.config.portraitLayout,
  options: mapToCheckboxOptions(dto.responseValues.options),
  },
  timer: mapTimerValue(dto.config.timer),
@@ -464,6 +465,7 @@ function mapToRadio(dto: SingleSelectionItemDto): ActivityItem {
  autoAdvance: dto.config.autoAdvance,
  setPalette: dto.config.setPalette,
  options: mapToRadioAlerts(dto.responseValues.options),
+ isGridView: dto.config.portraitLayout,
  },
  timer: mapTimerValue(dto.config.timer),
  order: dto.order,

src/entities/applet/model/tests/mappers.input.mock.ts

@@ -154,6 +154,7 @@ const activityItems: ActivityItemDto[] = [
  setAlerts: false,
  addTooltip: false,
  randomizeOptions: false,
+ portraitLayout: false,
  },
  name: 'Screen2',
  isHidden: false,
@@ -244,6 +245,7 @@ const activityItems: ActivityItemDto[] = [
  textInputRequired: false,
  },
  autoAdvance: true,
+ portraitLayout: false,
  },
  name: 'name',
  isHidden: false,

src/features/pass-survey/lib/types/payload.ts

@@ -171,6 +171,7 @@ type RadioPayload = {
  addTooltip: boolean;
  setPalette: boolean;
  autoAdvance: boolean;
+ isGridView: boolean;
  options: Array<{
  id: string;
  text: string;
@@ -191,6 +192,7 @@ type CheckboxPayload = {
  setAlerts: boolean;
  addTooltip: boolean;
  setPalette: boolean;
+ isGridView: boolean;
  options: Array<{
  id: string;
  text: string;

src/features/pass-survey/model/hooks/mockActivities.ts

@@ -552,6 +552,7 @@ export const CheckboxTestActivity: ActivityDto = {
  skippableItem: false,
  timer: null,
  addScores: false,
+ portraitLayout: false,
  },
  conditionalLogic: null,
  },
@@ -687,6 +688,7 @@ export const RadioTestActivity: ActivityDto = {
  addTooltip: true,
  setPalette: true,
  autoAdvance: true,
+ portraitLayout: false,
  },
  responseType: 'singleSelect',
  name: 'radioName',
@@ -863,6 +865,7 @@ export const AllCheckboxesActivity: ActivityDto = {
  skippableItem: false,
  timer: null,
  addScores: false,
+ portraitLayout: false,
  },
  conditionalLogic: null,
  },
@@ -925,6 +928,7 @@ export const AllCheckboxesActivity: ActivityDto = {
  skippableItem: true,
  timer: null,
  addScores: false,
+ portraitLayout: false,
  },
  },
  {
@@ -985,6 +989,7 @@ export const AllCheckboxesActivity: ActivityDto = {
  skippableItem: false,
  timer: null,
  addScores: false,
+ portraitLayout: false,
  },
  conditionalLogic: null,
  },
@@ -1122,6 +1127,7 @@ export const AllRadioActivity: ActivityDto = {
  addTooltip: true,
  setPalette: true,
  autoAdvance: true,
+ portraitLayout: false,
  },
  responseType: 'singleSelect',
  name: 'radioName',
@@ -1240,6 +1246,7 @@ export const AllRadioActivity: ActivityDto = {
  addTooltip: false,
  setPalette: false,
  autoAdvance: true,
+ portraitLayout: false,
  },
  responseType: 'singleSelect',
  name: 'radioName',

src/features/pass-survey/model/tests/ScoresCalculator.collectScoreForCheckboxes.test.ts

@@ -36,6 +36,7 @@ const getEmptyItem = (): CheckboxPipelineItem => {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  options: [],
  },
  type: 'Checkbox',

src/features/pass-survey/model/tests/ScoresCalculator.collectScoreForRadio.test.ts

@@ -35,6 +35,7 @@ const getEmptyItem = (): RadioPipelineItem => {
  setPalette: false,
  options: [],
  autoAdvance: false,
+ isGridView: false,
  },
  type: 'Radio',
  };

src/features/pass-survey/model/tests/ScoresExtractor.test.ts

@@ -31,6 +31,7 @@ const getRadiosItem = (): RadioPipelineItem => {
  setPalette: false,
  setAlerts: false,
  randomizeOptions: false,
+ isGridView: false,
  options: [
  {
  alert: null,
@@ -81,6 +82,7 @@ const getCheckboxesItem = (): CheckboxPipelineItem => {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  options: [
  {
  alert: null,

src/features/pass-survey/model/tests/testHelpers.ts

@@ -30,6 +30,7 @@ export const getEmptyRadioItem = (name: string): RadioPipelineItem => {
  setPalette: false,
  options: [],
  autoAdvance: false,
+ isGridView: false,
  },
  type: 'Radio',
  };
@@ -80,6 +81,7 @@ export const getEmptyCheckboxesItem = (name: string): CheckboxPipelineItem => {
  randomizeOptions: false,
  setAlerts: false,
  setPalette: false,
+ isGridView: false,
  options: [],
  },
  type: 'Checkbox',

src/features/pass-survey/ui/ActivityItem.tsx

@@ -379,7 +379,7 @@ function ActivityItem({
  }
 
  return (
- <ScrollableContent scrollEnabled={scrollEnabled}>
+ <ScrollableContent scrollEnabled={scrollEnabled} scrollEventThrottle={100}>
  <Box
  flex={1}
  justifyContent="center"

src/shared/api/services/ActivityItemDto.ts

@@ -152,6 +152,7 @@ type SingleSelectionConfiguration = ButtonsConfiguration &
  addTooltip: boolean;
  autoAdvance: boolean;
  setPalette: boolean;
+ portraitLayout: boolean;
  };
 
 export type DataMatrixDto = Array<{
@@ -207,6 +208,7 @@ type MultiSelectionConfiguration = ButtonsConfiguration &
  setAlerts: boolean;
  addTooltip: boolean;
  setPalette: boolean;
+ portraitLayout: boolean;
  };
 
 type MultiSelectionAnswerSettings = {

src/shared/lib/constants/colors.ts

@@ -19,6 +19,7 @@ export const colors = {
  grey3: '#bbb',
  grey4: '#72777F',
  onSurface: '#1A1C1E',
+ darkOnSurface: '#E2E2E5',
  greyTsp: 'rgba(0,0,0,0.8)',
  darkGrey: '#3b3a3a',
  darkGrey2: '#6b6a6a',
@@ -39,6 +40,7 @@ export const colors = {
  lighterGrey8: '#e0ebf4',
  lightGrey: '#00000026',
  lightGrey2: '#00000032',
+ outlineGrey: '#C2C7CF',
  alert: '#e63232',
  alertLight: '#FFCCCC',
  alertDark: '#93000A',

src/shared/lib/utils/common.ts

@@ -47,6 +47,31 @@ export function splitArray<TListItem>(
  return [leftArray, rightArray];
 }
 
+export function chunkArray<TItem>(
+ array: Array<TItem>,
+ size: number,
+): Array<Array<TItem>> {
+ if (array.length === 0) {
+ return [];
+ }
+
+ return array.reduce<Array<Array<TItem>>>((acc, val) => {
+ if (acc.length === 0) {
+ acc.push([]);
+ }
+
+ const lastArray = acc[acc.length - 1];
+
+ if (lastArray.length < size) {
+ lastArray.push(val);
+ } else {
+ acc.push([val]);
+ }
+
+ return acc;
+ }, []);
+}
+
 export const getFloatPartLength = (numberValue: number) => {
  const numberAsString = numberValue.toString();