Zoom transform function

[stevenyuen]

Want a function that:

• You pass a desired prop and it returns a value that has been multiplied by the OIOContext.zoom
• OIOContext.zoom is a decimal number between 0 and 1
• Function checks that that prop (and importantly, that prop at that breakpoint) exists
• Checks that the OIOContext.zoom !== 1

We want to apply a zoom calculation if and only if:

1. The prop is not: 0, auto, undefined, null, etc
2. The prop does not include a unit in %
3. The prop includes unit: px, vh, vw,

Also need to account for:

• example: border: 1px solid red
• example: padding: 10px 20px 30px 40px
• example: padding: 30px 40px
• example: padding: 40px

Currently would say out of scope to consider units: em, rem, cm, mm, in, pt, pc

Example Usage
const width = applyScale(props.width, breakpoint)

Other Notes:

• We may want to assume that passing a breakpoint is optional (meaning that the prop being passed is not from a OIOResponsiveString)
• Just for clarity: If the value 100px is passed to the function, and there is a zoom of 0.5, we assume it will return 50px (includes the unit)
• As an addition to the above note, we would prefer to return 50px and NOT a css calc value, ie: calc(100px * 0.5). This allows more flexibility with the value that is returned.