fix(library): ports bug fixes from >4.0.0 to LTS branch

.npmignore

@@ -10,6 +10,12 @@
 .gitignore
 .npmignore
 .travis.yml
+.browserlistrc
+.prettierignore
+.prettierrc
+.vscode
+babel.config.js
+CODEOWNERS
 
 # folders
 coverage
@@ -20,9 +26,12 @@ flow-typed
 
 # markdown files
 CONTRIBUTING.md
+CODE_OF_CONDUCT.md
 
 # misc.
 CNAME
 rollup.config.js
 travis_after_all.py
 yarn.lock
+.yarn
+typescript-test.ts

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 - 2020 Brian Hough and Maximilian Stoiber
+Copyright (c) 2016 - 2021 Brian Hough and Maximilian Stoiber
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/color/readableColor.js

@@ -2,16 +2,16 @@
 import getContrast from './getContrast'
 import getLuminance from './getLuminance'
 
-const defaultLightReturnColor = '#000'
-const defaultDarkReturnColor = '#fff'
+const defaultReturnIfLightColor = '#000'
+const defaultReturnIfDarkColor = '#fff'
 
 /**
- * Returns black or white (or optional light and dark return colors) for best
+ * Returns black or white (or optional passed colors) for best
  * contrast depending on the luminosity of the given color.
- * When passing custom return colors, set `strict` to `true` to ensure that the
+ * When passing custom return colors, strict mode ensures that the
  * return color always meets or exceeds WCAG level AA or greater. If this test
  * fails, the default return color (black or white) is returned in place of the
- * custom return color.
+ * custom return color. You can optionally turn off strict mode.
  *
  * Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html).
  *
@@ -42,17 +42,15 @@ const defaultDarkReturnColor = '#fff'
  */
 export default function readableColor(
   color: string,
-  lightReturnColor?: string = defaultLightReturnColor,
-  darkReturnColor?: string = defaultDarkReturnColor,
-  strict?: boolean = false,
+  returnIfLightColor?: string = defaultReturnIfLightColor,
+  returnIfDarkColor?: string = defaultReturnIfDarkColor,
+  strict?: boolean = true,
 ): string {
-  const isLightColor = getLuminance(color) > 0.179
-  const preferredReturnColor = isLightColor ? lightReturnColor : darkReturnColor
+  const isColorLight = getLuminance(color) > 0.179
+  const preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor
 
-  // TODO: Make `strict` the default behaviour in the next major release.
-  // Without `strict`, this may return a color that does not meet WCAG AA.
   if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {
     return preferredReturnColor
   }
-  return isLightColor ? defaultLightReturnColor : defaultDarkReturnColor
+  return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor
 }

src/color/test/transparentize.test.js

@@ -54,6 +54,10 @@ describe('transparentize', () => {
     expect(transparentize(-0.5, 'rgba(255, 0, 0, .8)')).toMatchSnapshot()
   })
 
+  it('should properly round a float to 2 decimals.', () => {
+    expect(transparentize(0.55, '#01B0BB')).toEqual('rgba(1,176,187,0.45)')
+  })
+
   it('should reduce the opacity when passed a string for amount', () => {
     expect(transparentize('0.1', '#fff')).toMatchSnapshot()
   })

src/color/transparentize.js

@@ -37,7 +37,7 @@ function transparentize(amount: number | string, color: string): string {
   const alpha: number = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1
   const colorWithAlpha = {
     ...parsedColor,
-    alpha: guard(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100),
+    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100),
   }
   return rgba(colorWithAlpha)
 }

src/internalHelpers/errors.md

@@ -298,3 +298,7 @@ Please provide a valid CSS variable.
 ## 74
 
 CSS variable not found.
+
+## 75
+
+fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.

src/mixins/between.js

@@ -54,6 +54,10 @@ export default function between(
     throw new PolishedError(48)
   }
 
+  if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
+    throw new PolishedError(75)
+  }
+
   const slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen)
   const base = unitlessToSize - slope * unitlessMaxScreen
   return `calc(${base.toFixed(2)}${fromSizeUnit || ''} + ${(100 * slope).toFixed(2)}vw)`

src/mixins/test/__snapshots__/triangle.test.js.snap

@@ -2,7 +2,8 @@
 
 exports[`triangle should default to a transparent background when not passed a backgroundColor 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent red",
+  "borderColor": "transparent",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -12,7 +13,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5 0 5 20",
   "height": "0",
@@ -22,7 +24,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters with units on width/height 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5em 0 5em 20em",
   "height": "0",
@@ -32,7 +35,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters with units on width/height with float values 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5.25em 0 5.25em 20.5em",
   "height": "0",
@@ -42,7 +46,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed string values for height and width 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -52,8 +57,9 @@ Object {
 
 exports[`triangle should properly render bottom pointing arrow with red foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "red transparent transparent transparent",
+  "borderColor": "transparent",
   "borderStyle": "solid",
+  "borderTopColor": "red",
   "borderWidth": "20px 5px 0 5px",
   "height": "0",
   "width": "0",
@@ -62,7 +68,8 @@ Object {
 
 exports[`triangle should properly render bottomLeft pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent blue",
+  "borderColor": "transparent",
+  "borderLeftColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "20px 0 0 20px",
   "height": "0",
@@ -72,7 +79,8 @@ Object {
 
 exports[`triangle should properly render bottomRight pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent blue transparent",
+  "borderBottomColor": "blue",
+  "borderColor": "transparent",
   "borderStyle": "solid",
   "borderWidth": "0 0 20px 20px",
   "height": "0",
@@ -82,7 +90,8 @@ Object {
 
 exports[`triangle should properly render left pointing arrow with blue foregroundColor, width of 10px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent blue transparent transparent",
+  "borderColor": "transparent",
+  "borderRightColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "10px 10px 10px 0",
   "height": "0",
@@ -92,7 +101,8 @@ Object {
 
 exports[`triangle should properly render right pointing arrow with width of 20px and height 10px 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent red",
+  "borderColor": "transparent",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -102,7 +112,8 @@ Object {
 
 exports[`triangle should properly render top pointing arrow with green foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent green transparent",
+  "borderBottomColor": "green",
+  "borderColor": "transparent",
   "borderStyle": "solid",
   "borderWidth": "0 10px 20px 10px",
   "height": "0",
@@ -112,8 +123,9 @@ Object {
 
 exports[`triangle should properly render topLeft pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "blue transparent transparent transparent",
+  "borderColor": "transparent",
   "borderStyle": "solid",
+  "borderTopColor": "blue",
   "borderWidth": "20px 20px 0 0",
   "height": "0",
   "width": "0",
@@ -122,7 +134,8 @@ Object {
 
 exports[`triangle should properly render topRight pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent blue transparent transparent",
+  "borderColor": "transparent",
+  "borderRightColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "0 20px 20px 0",
   "height": "0",

src/mixins/test/between.test.js

@@ -3,20 +3,13 @@ import between from '../between'
 
 describe('between', () => {
   it('should return a valid calc formula when passed min/max screen sizes', () => {
-    expect(between('20px', '100px', '400px', '1000px')).toMatchSnapshot()
+    expect(between('20px', '100px', '400px', '1000px')).toEqual('calc(-33.33px + 13.33vw)')
   })
 
   it('should return a valid calc formula when not passed min/max screen sizes', () => {
-    expect(between('20px', '100px')).toMatchSnapshot()
+    expect(between('20px', '100px')).toEqual('calc(-9.09px + 9.09vw)')
   })
 
-  it('should return a valid calc formula when passed unitless to/from values as numbers', () => {
-    expect(between(20, 100)).toMatchSnapshot()
-  })
-
-  it('should return a valid calc formula when passed unitless to/from values as strings', () => {
-    expect(between('20', '100')).toMatchSnapshot()
-  })
   // Errors
   it('should throw an error when not passed min/max screen size as a string', () => {
     expect(() => {
@@ -42,4 +35,22 @@ describe('between', () => {
       between('1em', '100px', '400px', '1000px')
     }).toThrow('fromSize and toSize must be provided as stringified numbers with the same units.')
   })
+
+  it('should throw an error when passed to/from size with different units than mix/max screen', () => {
+    expect(() => {
+      // $FlowFixMe
+      between('1em', '100em', '400px', '1000px')
+    }).toThrow(
+      'fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.',
+    )
+  })
+
+  it('should throw an error when passed to/from size with no units but mix/max with units', () => {
+    expect(() => {
+      // $FlowFixMe
+      between(20, 100)
+    }).toThrow(
+      'fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.',
+    )
+  })
 })