diff --git a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx index 086ef3089..2961edfbd 100644 --- a/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputCheckbox.tsx @@ -203,11 +203,19 @@ export class InputCheckbox - {columnWidgets} - - ); + if (this.props.widgetConfig.alignment === 'vertical') { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } else { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } } return columnedChoiceInputs; @@ -273,11 +281,15 @@ export class InputCheckbox {columnedChoiceInputs} {this.props.customId && ( diff --git a/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts b/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts index 71d846c47..7387cedc4 100644 --- a/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts +++ b/packages/evolution-frontend/src/components/inputs/InputChoiceSorting.ts @@ -6,25 +6,25 @@ */ /** - * Sort the array to be displayed to the target number of columns in vertical fashion. + * Sort the array in a specified count of groups. * @param arr - Array to be sorted. - * @param columns - Target number of columns. + * @param count - Target number of group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1,2],[3,4,5]] - * console.log(verticalByColumns([0,1,2,3,4,5], 2)); + * console.log(splitSort([0,1,2,3,4,5], 2)); */ -const verticalByColumns = function (arr: Value[], columns: number): Value[][] { +const splitSort = function (arr: Value[], count: number): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; let columnIndex = 0; - let countPerColumn = Math.ceil(len / columns); + let countPerColumn = Math.ceil(len / count); while (index + countPerColumn < len) { out.push(arr.slice(index, (index += countPerColumn))); columnIndex++; - countPerColumn = Math.ceil((len - index) / (columns - columnIndex)); + countPerColumn = Math.ceil((len - index) / (count - columnIndex)); } out.push(arr.slice(index)); @@ -32,21 +32,21 @@ const verticalByColumns = function (arr: Value[], columns: number): Value }; /** - * Sort the array to be displayed to the target number of rows in vertical fashion. + * Sort the array in groups of specified length. * @param arr - Array to be sorted - * @param rows - Target number of rows. + * @param length - Target number of item in group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1],[2,3],[4,5]] - * console.log(verticalByRows([0,1,2,3,4,5], 2)); + * console.log(subsequentSort([0,1,2,3,4,5], 2)); */ -const verticalByRows = function (arr: Value[], rows: number): Value[][] { +const subsequentSort = function (arr: Value[], length: number): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; - while (index + rows < len) { - out.push(arr.slice(index, (index += rows))); + while (index + length < len) { + out.push(arr.slice(index, (index += length))); } out.push(arr.slice(index)); @@ -54,77 +54,16 @@ const verticalByRows = function (arr: Value[], rows: number): Value[][] { }; /** - * Sort the array to be displayed to the target number of columns in horizontal fashion + * Sort the array in groups of custom lengths. * @param arr - Array to be sorted. - * @param columns - Target number of columns. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,2,4],[1,3,5]] - * console.log(horizontalByColumns([0,1,2,3,4,5], 2)); - */ -const horizontalByColumns = function (arr: Value[], columns: number): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - let newColumn: any[] = []; - while (index < len) { - newColumn.push(arr[index]); - index += columns; - if (index >= len && columnIndex < columns) { - columnIndex++; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - -/** - * Sort the array to be displayed to the target number of rows in horizontal fashion. - * @param arr - Array to be sorted. - * @param rows - Target number of rows. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,3],[1,4],[2,5]] - * console.log(horizontalByRows([0,1,2,3,4,5], 2)); - */ -const horizontalByRows = function (arr: Value[], rows: number): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - const columns = Math.ceil(arr.length / rows); - let newColumn: any[] = []; - while (index < len) { - newColumn.push(arr[index]); - index += columns; - if (index >= len && columnIndex < columns) { - columnIndex++; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - -/** - * Sort the array to be displayed in columns by the custom array information. - * @param arr - Array to be sorted. - * @param custom - Array containing the dedired length of each column. + * @param custom - Array containing the dedired length of each group. * @returns A 2 dimension array containing the data as columns to be displayed. * * @example * // Prints [[0,1,2],[3,4],[5]] - * console.log(customVertical([0,1,2,3,4,5], [3,2,1])); + * console.log(cusotmSort([0,1,2,3,4,5], [3,2,1])); */ -const customVertical = function (arr: Value[], custom: number[]): Value[][] { +const customSort = function (arr: Value[], custom: number[]): Value[][] { const len = arr.length; const out: any[] = []; let index = 0; @@ -138,47 +77,6 @@ const customVertical = function (arr: Value[], custom: number[]): Value[] return out; }; -/** - * Sort the array to be displayed in rows by the custom array information. - * @param arr - Array to be sorted. - * @param custom - Array containing the desired legnths of each row. - * @returns A 2 dimension array containing the data as columns to be displayed. - * - * @example - * // Prints [[0,3,5],[1,4],[2]] - * console.log(customHorizontal([0,1,2,3,4,5], [3,2,1])); - */ -const customHorizontal = function (arr: Value[], custom: number[]): Value[][] { - const len = arr.length; - const out: any[] = []; - let index = 0; - let columnIndex = 0; - let rowIndex = 0; - let newColumn: any[] = []; - while (index < len && columnIndex < custom[0]) { - if (columnIndex >= custom[rowIndex]) { - columnIndex++; - rowIndex = 0; - index = columnIndex; - out.push(newColumn); - newColumn = []; - continue; - } - newColumn.push(arr[index]); - index += custom[rowIndex]; - rowIndex++; - if (index >= len || rowIndex >= custom[columnIndex]) { - columnIndex++; - rowIndex = 0; - index = columnIndex; - out.push(newColumn); - newColumn = []; - } - } - - return out; -}; - /** * Sorts the array based on the specified parameters. * @@ -187,7 +85,7 @@ const customHorizontal = function (arr: Value[], custom: number[]): Value * * @param arr - Array to be sorted. * @param alignement - In wich way should the array be sorted? Top to bottom or left to right. - * @param colums - Target amount of columns, if columns and rows are specified, columns is used. + * @param columns - Target amount of columns, if columns and rows are specified, columns is used. * @param rows - target amount of rows, if columns and rows are specified, columns is used. * @param customAlignmentLengths - Specify the lengths of each row or column individually, if alignement is horizontal, the first specified row must be the longuest. * @returns A 2 dimension array containing the input array sorted into columns for display or the original array in case of invalid parameters. @@ -200,41 +98,27 @@ const sortByParameters = function ( customAlignmentLengths?: number[] ): Value[][] { if (customAlignmentLengths && customAlignmentLengths.length > 0) { - switch (alignment) { - case 'vertical': - return customVertical(arr, customAlignmentLengths); - case 'horizontal': - return customHorizontal(arr, customAlignmentLengths); - default: - return customVertical(arr, customAlignmentLengths); - } + return customSort(arr, customAlignmentLengths); } else if (columns && columns > 0) { switch (alignment) { case 'vertical': - return verticalByColumns(arr, columns); + return splitSort(arr, columns); case 'horizontal': - return horizontalByColumns(arr, columns); + return subsequentSort(arr, columns); default: - return verticalByColumns(arr, columns); + return splitSort(arr, columns); } } else if (rows && rows > 0) { switch (alignment) { case 'vertical': - return verticalByRows(arr, rows); + return subsequentSort(arr, rows); case 'horizontal': - return horizontalByRows(arr, rows); + return splitSort(arr, rows); default: - return verticalByRows(arr, rows); + return subsequentSort(arr, rows); } } else { - switch (alignment) { - case 'vertical': - return verticalByColumns(arr, 2); - case 'horizontal': - return horizontalByRows(arr, 2); - default: - return verticalByColumns(arr, 2); - } + return splitSort(arr, 2); } }; diff --git a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx index 2b3a3347a..480b96e67 100644 --- a/packages/evolution-frontend/src/components/inputs/InputRadio.tsx +++ b/packages/evolution-frontend/src/components/inputs/InputRadio.tsx @@ -225,11 +225,19 @@ export class InputRadio const columnedChoiceInputs: JSX.Element[] = []; for (let i = 0, count = widgetsByColumn.length; i < count; i++) { const columnWidgets = widgetsByColumn[i]; - columnedChoiceInputs.push( -
- {columnWidgets} -
- ); + if (this.props.widgetConfig.alignment === 'vertical') { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } else { + columnedChoiceInputs.push( +
+ {columnWidgets} +
+ ); + } } return columnedChoiceInputs; }; @@ -298,11 +306,16 @@ export class InputRadio )); // separate by columns if needed: const columnedChoiceInputs = this.getColumnedChoices(choiceInputs); + + const shouldDisplayAsRows = + this.props.widgetConfig.alignment === undefined || this.props.widgetConfig.alignment === 'auto' || this.props.widgetConfig.alignment === 'vertical'; return (
{columnedChoiceInputs}
diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputCheckbox.test.tsx b/packages/evolution-frontend/src/components/inputs/__tests__/InputCheckbox.test.tsx index ae3151ce2..0fa029ea7 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputCheckbox.test.tsx +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputCheckbox.test.tsx @@ -259,3 +259,98 @@ describe('Render InputCheckbox with HTML label', () => { }); }); + +describe('Render InputCheckbox with various alignments', () =>{ + + const choices = [ + { + value: 'first value', + label: { + fr: '
premiere valeur
', + en: '
first value
' + } + }, + { + value: 'second value', + label: '
second value
' + } + ]; + + const widgetConfig = { + type: 'question' as const, + twoColumns: true, + path: 'test.foo', + inputType: 'checkbox' as const, + alignment: undefined, + choices, + containsHtml: true, + label: { + fr: `Texte en français`, + en: `English text` + } + }; + + test('Undefined alignment with no rows and no columns', () =>{ + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={widgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Auto alignment with 2 columns', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'auto', columns: 2 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Vertical alignment with 4 rows', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'vertical', customAlignmentLengths: [1,1] }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Horizontal alignment with custom alignments', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'horizontal', rows: 4 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) +}); diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts index b39c75821..e7ba1f816 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputChoiceSorting.test.ts @@ -8,83 +8,55 @@ import {sortByParameters} from '../InputChoiceSorting'; const array = [0,1,2,3,4,5,6,7,8,9]; -describe('Sort array in vertical fashion ', () =>{ - const columns = 3; - const rows = 3; - const alignment = 'vertical'; - - test('Vertical By columns', () => { - const result = sortByParameters(array, alignment, columns); - - expect(result).toEqual([[0,1,2,3],[4,5,6],[7,8,9]]); - }); - test('Vertical By rows', () => { - const result = sortByParameters(array, alignment, undefined, rows); +describe('Sort array with splitSort ', () => { + const count = 3; - expect(result).toEqual([[0,1,2],[3,4,5],[6,7,8],[9]]); - }); - test('Vertical By columns & rows', () => { - const result = sortByParameters(array, alignment, columns, rows); + test('SplitSort with count;', () => { + const result = sortByParameters(array, undefined, count); expect(result).toEqual([[0,1,2,3],[4,5,6],[7,8,9]]); }); - test('Vertical By no columns & no rows', () => { - const result = sortByParameters(array, alignment); + test('SplitSort with no count;', () => { + const result = sortByParameters(array); expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); -describe('Sort array in horizontal fashion', () =>{ - const columns = 3; - const rows = 3; - const alignment = 'horizontal'; +describe('Sort array with subsequentSort ', () => { + const length = 3; - test('horizontal By columns', () => { - const result = sortByParameters(array, alignment, columns); + test('SubsequentSort with length;', () => { + const result = sortByParameters(array, undefined, undefined, length); - expect(result).toEqual([[0,3,6,9],[1,4,7],[2,5,8]]); - }); - test('horizontal By rows', () => { - const result = sortByParameters(array, alignment, undefined, rows); - - expect(result).toEqual([[0,4,8],[1,5,9],[2,6],[3,7]]); - }); - test('horizontal By columns & rows', () => { - const result = sortByParameters(array, alignment, columns, rows); - - expect(result).toEqual([[0,3,6,9],[1,4,7],[2,5,8]]); + expect(result).toEqual([[0,1,2],[3,4,5],[6,7,8],[9]]); }); - test('horizontal By no columns & no rows', () => { - const result = sortByParameters(array, alignment); + test('SubsequentSort with no length;', () => { + const result = sortByParameters(array); - expect(result).toEqual([[0,5],[1,6],[2,7],[3,8],[4,9]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); -describe('Sort array with no alignement', () => { - const columns = 2; - const rows = 2; - - test('with columns', () => { - const result = sortByParameters(array, undefined, columns); +describe('Sort array with customSort', () => { + const sameAmount = [4,4,2]; + const moreParameters = [6,6,4]; + const lessParameters = [2,2]; - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); - }); - test('with rows', () => { - const result = sortByParameters(array, undefined, undefined, rows); + test('CustomSort with same amount of choices and parameters.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, sameAmount) - expect(result).toEqual([[0,1],[2,3],[4,5],[6,7],[8,9]]); + expect(result).toEqual([[0,1,2,3],[4,5,6,7],[8,9]]); }); - test('with columns & rows', () => { - const result = sortByParameters(array, undefined, columns, rows); + test('CustomSort with less parameters than choices.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, lessParameters) - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); + expect(result).toEqual([[0,1],[2,3],[4,5,6,7,8,9]]); }); - test('with no columns & no rows', () => { - const result = sortByParameters(array); + test('CustomSort with more parameters than choices.', () => { + const result = sortByParameters(array, undefined, undefined, undefined, moreParameters) - expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); + expect(result).toEqual([[0,1,2,3,4,5],[6,7,8,9]]); }); }); @@ -110,48 +82,28 @@ describe('Sort array by parameters', () => { }) }); -describe('Sort array by custom parameters', () => { - const sameAmount = [4,4,2]; - const moreParameters = [6,6,4]; - const lessParameters = [2,2]; - const invalidHorizontalParameters = [3,5,2]; - const vertical = 'vertical'; - const horizontal = 'horizontal'; - - test('Vertical with same amount of choices and parameters.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, sameAmount) - - expect(result).toEqual([[0,1,2,3],[4,5,6,7],[8,9]]); - }); - test('Vertical with less parameters than choices.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, lessParameters) - - expect(result).toEqual([[0,1],[2,3],[4,5,6,7,8,9]]); - }); - test('Vertical with more parameters than choices.', () => { - const result = sortByParameters(array, vertical, undefined, undefined, moreParameters) - - expect(result).toEqual([[0,1,2,3,4,5],[6,7,8,9]]); - }); +describe('Sort array with no alignement', () => { + const columns = 2; + const rows = 2; - test('Horizontal with same amount of choices and parameters.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, sameAmount) + test('with columns', () => { + const result = sortByParameters(array, undefined, columns); - expect(result).toEqual([[0,4,8],[1,5,9],[2,6],[3,7]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); - test('Horizontal with less parameters than choices.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, lessParameters) + test('with rows', () => { + const result = sortByParameters(array, undefined, undefined, rows); - expect(result).toEqual([[0,2],[1,3]]); + expect(result).toEqual([[0,1],[2,3],[4,5],[6,7],[8,9]]); }); - test('Horizontal with more parameters than choices.', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, moreParameters) + test('with columns & rows', () => { + const result = sortByParameters(array, undefined, columns, rows); - expect(result).toEqual([[0,6],[1,7],[2,8],[3,9],[4],[5]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); - test('Horizontal with invalid parameters', () => { - const result = sortByParameters(array, horizontal, undefined, undefined, invalidHorizontalParameters); + test('with no columns & no rows', () => { + const result = sortByParameters(array); - expect(result).toEqual([[0,3,8],[1,4,9],[2,5]]); + expect(result).toEqual([[0,1,2,3,4],[5,6,7,8,9]]); }); }); \ No newline at end of file diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx b/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx index 013e45294..51ca5a076 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx +++ b/packages/evolution-frontend/src/components/inputs/__tests__/InputRadio.test.tsx @@ -258,3 +258,98 @@ describe('Render InputRadio with HTML label', () => { expect(wrapper).toMatchSnapshot(); }); }); + +describe('Render InputRadio with various alignments', () =>{ + + const choices = [ + { + value: 'first value', + label: { + fr: '
premiere valeur
', + en: '
first value
' + } + }, + { + value: 'second value', + label: '
second value
' + } + ]; + + const widgetConfig = { + type: 'question' as const, + twoColumns: true, + path: 'test.foo', + inputType: 'radio' as const, + alignment: undefined, + choices, + containsHtml: true, + label: { + fr: `Texte en français`, + en: `English text` + } + }; + + test('Undefined alignment with no rows and no columns', () =>{ + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={widgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Auto alignment with 2 columns', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'auto', columns: 2 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Vertical alignment with 4 rows', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'vertical', customAlignmentLengths: [1,1] }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) + test('Horizontal alignment with custom alignments', () =>{ + const testWidgetConfig = Object.assign({}, widgetConfig, { alignment: 'horizontal', rows: 4 }); + const wrapper = TestRenderer.create( + { /* nothing to do */}} + widgetConfig={testWidgetConfig} + value='value' + inputRef={React.createRef()} + interview={interviewAttributes} + user={userAttributes} + path='foo.test' + /> + ); + expect(wrapper).toMatchSnapshot(); + }) +}); diff --git a/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap b/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap index fd8a4660d..864d803f8 100644 --- a/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap +++ b/packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputCheckbox.test.tsx.snap @@ -138,6 +138,306 @@ exports[`Render InputCheckbox with minimum parameters Minimum parameters 1`] = ` `; +exports[`Render InputCheckbox with various alignments Auto alignment with 2 columns 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+ + +`; + +exports[`Render InputCheckbox with various alignments Horizontal alignment with custom alignments 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+ + +`; + +exports[`Render InputCheckbox with various alignments Undefined alignment with no rows and no columns 1`] = ` +
+
+
+ +
", + } + } + /> + +
+
+
+
+ +
", + } + } + /> + +
+ + +`; + +exports[`Render InputCheckbox with various alignments Vertical alignment with 4 rows 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+ + +`; + exports[`Render InputCheckbox with various parameter combinations, all parameters Conditional value hidden, same line 1`] = `
`; +exports[`Render InputRadio with various alignments Auto alignment with 2 columns 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + +exports[`Render InputRadio with various alignments Horizontal alignment with custom alignments 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + +exports[`Render InputRadio with various alignments Undefined alignment with no rows and no columns 1`] = ` +
+
+
+ +
", + } + } + /> + +
+
+
+
+ +
", + } + } + /> + +
+
+
+`; + +exports[`Render InputRadio with various alignments Vertical alignment with 4 rows 1`] = ` +
+
+
+
+ +
", + } + } + /> + +
+
+
+
+
+
+ +
", + } + } + /> + +
+
+
+
+`; + exports[`Render InputRadio with various parameter combinations, all parameters Conditional value hidden, same line 1`] = `