diff --git a/packages/flex/__tests__/flexCol.test.tsx b/packages/flex/__tests__/flexCol.test.tsx index 93dc0d6..6247f76 100644 --- a/packages/flex/__tests__/flexCol.test.tsx +++ b/packages/flex/__tests__/flexCol.test.tsx @@ -5,6 +5,7 @@ import { setColumnSizing, setColumnOffset, setGutterWidth, + parseNumberToTwoDecimals, FlexCol } from '../src/FlexCol'; @@ -40,13 +41,13 @@ describe('FlexCol', () => { describe('setColumnSizing', () => { it('should return a string percentage value when provided with a number value as arg', () => { const baseColumn = 8.3; - const expected = '33.2%'; + const expected = '33.20%'; expect(setColumnSizing(baseColumn, 4)).toEqual(expected); }); it('should return an array of string percentage values when provided with an array of number column sizings', () => { const baseColumn = 8.3; - const expected = ['99.60000000000001%', '49.800000000000004%']; + const expected = ['99.60%', '49.80%']; expect(setColumnSizing(baseColumn, [12, 6])).toEqual(expected); }); }); @@ -77,6 +78,12 @@ describe('FlexCol', () => { }); }); + describe('parseNumberToTwoDecimals', () => { + it('should return a string number with only 2 decimal places', () => { + expect(parseNumberToTwoDecimals(5 * 1.3326)).toEqual('6.66'); + }); + }); + describe('FlexCol', () => { it('should render', () => { const { asFragment } = render(Test); diff --git a/packages/flex/src/FlexCol.tsx b/packages/flex/src/FlexCol.tsx index 1846e23..2e4db69 100644 --- a/packages/flex/src/FlexCol.tsx +++ b/packages/flex/src/FlexCol.tsx @@ -34,8 +34,10 @@ export function setColumnSizing( columnSize: number | number[] ): string | string[] { return Array.isArray(columnSize) && columnSize.length > 1 - ? columnSize.map(size => `${size * baseColumnWidth}%`) - : `${(columnSize as number) * baseColumnWidth}%`; + ? columnSize.map( + size => `${parseNumberToTwoDecimals(size * baseColumnWidth)}%` + ) + : `${parseNumberToTwoDecimals((columnSize as number) * baseColumnWidth)}%`; } export function setColumnOffset( @@ -61,6 +63,10 @@ export function setGutterWidth( : `${(gutterWidth as number) / 2}em`; } +export function parseNumberToTwoDecimals(value: number) { + return `${parseFloat(String(value)).toFixed(2)}`; +} + export function isNumber(val: number): boolean { return !isNaN(val) && isFinite(val); }