diff --git a/docs/containers/FluidSizing/FluidSizing.tsx b/docs/containers/FluidSizing/FluidSizing.tsx index 5d74ced..34d9832 100644 --- a/docs/containers/FluidSizing/FluidSizing.tsx +++ b/docs/containers/FluidSizing/FluidSizing.tsx @@ -19,7 +19,6 @@ export function FluidSizingContent() { A fluid sizing utility function that creates a calc value based off of the min and max values provided.{' '} - Values are evaluated in "px".
@@ -30,9 +29,11 @@ export function FluidSizingContent() { minElementSize: 'number', maxElementSize: 'number', minViewportWidth: 'number', - maxViewportWidth: 'number' + maxViewportWidth: 'number', + unit: 'string' }} /> + This function writes a CSS rule that allows for fluid sizing. Essentially, this eliminates the need for media queries as the element @@ -41,6 +42,7 @@ export function FluidSizingContent() { and also the minimum and maximum size of the viewport width that you intend to use as constraints. Below is an example of how you may use it. + {fluidSizingExampleUsage}
diff --git a/docs/containers/FluidSizing/examples/fluidSizing.ts b/docs/containers/FluidSizing/examples/fluidSizing.ts index 809695b..7d7df4e 100644 --- a/docs/containers/FluidSizing/examples/fluidSizing.ts +++ b/docs/containers/FluidSizing/examples/fluidSizing.ts @@ -4,7 +4,7 @@ export const fluidSizingExampleUsage = ` export const LargeLeadText = styled.p\` color: hotpink; - font-size: \${fluidSizing(20, 48, 300, 1200)}; - padding-bottom: \${fluidSizing(10, 15, 300, 1200)} + font-size: \${fluidSizing(1.3, 1.5, 300, 1200, 'rem')}; + padding-bottom: \${fluidSizing(10, 15, 300, 1200, 'px')} \`; `; diff --git a/packages/fluidsizing/README.md b/packages/fluidsizing/README.md index 2018f75..ba051e6 100644 --- a/packages/fluidsizing/README.md +++ b/packages/fluidsizing/README.md @@ -20,20 +20,21 @@ npm install @artifak/fluidsizing Below are the parameters and the following an example of usage. -| Arguments | Type | -| ---------------- | ------ | -| minElementSize | number | -| maxElementSize | number | -| minViewportWidth | number | -| maxViewportWidth | number | +| Arguments | Type | +| ---------------- | --------------------- | +| minElementSize | number | +| maxElementSize | number | +| minViewportWidth | number | +| maxViewportWidth | number | +| unit | 'em' \| 'px' \| 'rem' | ```ts import { fluidSizing } from '@artifak/fluidsizing'; import styled from 'styled-components'; const Paragraph = styled.p` - font-size: ${fluidSizing(16, 96, 300, 1200)}; - line-height: ${fluidSizing(1.4, 1.6, 300, 1200)}; - padding-bottom: ${fluidSizing(10, 15, 300, 1200)}; + font-size: ${fluidSizing(16, 96, 300, 1200, 'px')}; + line-height: ${fluidSizing(1.4, 1.6, 300, 1200, 'rem')}; + padding-bottom: ${fluidSizing(10, 15, 300, 1200, 'px')}; `; ``` diff --git a/packages/fluidsizing/__tests__/fluidsizing.test.ts b/packages/fluidsizing/__tests__/fluidsizing.test.ts index a0abc29..08972ac 100644 --- a/packages/fluidsizing/__tests__/fluidsizing.test.ts +++ b/packages/fluidsizing/__tests__/fluidsizing.test.ts @@ -4,17 +4,23 @@ describe('fluidSizing - writes sizing CSS rule that dynamically adapts to screen it('should return FALSE by default', () => { const expected = ''; expect( - fluidSizing(void 0 as any, void 0 as any, void 0 as any, void 0 as any) + fluidSizing( + void 0 as any, + void 0 as any, + void 0 as any, + void 0 as any, + void 0 as any + ) ).toEqual(expected); }); it('should return FALSE by when provided falsy arguments', () => { const expected = ''; - expect(fluidSizing(void 0 as any, 96, 300, 1200)).toEqual(expected); + expect(fluidSizing(void 0 as any, 96, 300, 1200, 'px')).toEqual(expected); }); it('should return a CSS string rule', () => { const expected = `calc(48px + (96 - 48) * ((100vw - 300px) / (1200 - 300)))`; - expect(fluidSizing(48, 96, 300, 1200)).toEqual(expected); + expect(fluidSizing(48, 96, 300, 1200, 'px')).toEqual(expected); }); }); diff --git a/packages/fluidsizing/src/fluidSizing.ts b/packages/fluidsizing/src/fluidSizing.ts index 34615b1..c604e34 100644 --- a/packages/fluidsizing/src/fluidSizing.ts +++ b/packages/fluidsizing/src/fluidSizing.ts @@ -2,12 +2,14 @@ export function fluidSizing( minElementSize: number, maxElementSize: number, minViewportWidth: number, - maxViewportWidth: number + maxViewportWidth: number, + unit: 'em' | 'px' | 'rem' ): string { return !!minElementSize && !!maxElementSize && !!minViewportWidth && - !!maxViewportWidth - ? `calc(${minElementSize}px + (${maxElementSize} - ${minElementSize}) * ((100vw - ${minViewportWidth}px) / (${maxViewportWidth} - ${minViewportWidth})))` + !!maxViewportWidth && + !!unit + ? `calc(${minElementSize}${unit} + (${maxElementSize} - ${minElementSize}) * ((100vw - ${minViewportWidth}${unit}) / (${maxViewportWidth} - ${minViewportWidth})))` : ''; }