fluidSizing fix

docs/containers/FluidSizing/FluidSizing.tsx

@@ -19,7 +19,6 @@ export function FluidSizingContent() {
       <Paragraph>
         A fluid sizing utility function that creates a calc value based off of
         the min and max values provided.{' '}
-        <Strong>Values are evaluated in "px"</Strong>.
       </Paragraph>
 
       <HR />
@@ -30,9 +29,11 @@ export function FluidSizingContent() {
           minElementSize: 'number',
           maxElementSize: 'number',
           minViewportWidth: 'number',
-          maxViewportWidth: 'number'
+          maxViewportWidth: 'number',
+          unit: 'string'
         }}
       />
+
       <Paragraph>
         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.
       </Paragraph>
+
       <Syntax>{fluidSizingExampleUsage}</Syntax>
 
       <br />

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')}
   \`;
 `;

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')};
 `;
 ```

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);
   });
 });

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})))`
     : '';
 }