fix(triangle): Complete triangle mixin (#162)

Finishes the triangle mixin with an updated API to be more in line with Bourbon's implementation.

Also updates the associated docs and properly exports the module.

.documentation.json

@@ -28,6 +28,7 @@
     "retinaImage",
     "selection",
     "timingFunctions",
+    "triangle",
     "wordWrap",
     {
       "name": "Color"
@@ -82,16 +83,17 @@
     {
       "name": "Types"
     },
-    "Ratio",
-    "RgbColor",
-    "RgbaColor",
+    "AnimationProperty",
+    "ButtonState",
+    "FontFaceConfiguration",
     "HslColor",
     "HslaColor",
-    "FontFaceConfiguration",
+    "InputState",
+    "PointingDirection",
     "RadialGradientConfiguration",
-    "TimingFunction",
-    "AnimationProperty",
-    "ButtonState",
-    "InputState"
+    "Ratio",
+    "RgbaColor",
+    "RgbColor",
+    "TimingFunction"
   ]
 }

README.md

@@ -59,6 +59,7 @@ In the documentation you will see examples using [object spread properties](http
     <li><a href="http://polished.js.org/docs/#retinaimage">retinaImage</a></li>
     <li><a href="http://polished.js.org/docs/#selection">selection</a></li>
     <li><a href="http://polished.js.org/docs/#timingfunctions">timingFunctions</a></li>
+    <li><a href="http://polished.js.org/docs/#triangle">triangle</a></li>
     <li><a href="http://polished.js.org/docs/#wordwrap">wordWrap</a></li>
   </ul>
 </details>
@@ -121,19 +122,19 @@ In the documentation you will see examples using [object spread properties](http
 <details open>
   <summary>Types</summary>
   <ul>
-    <li><a href="http://polished.js.org/docs/#ratio">Ratio</a></li>
-    <li><a href="http://polished.js.org/docs/#rgbcolor">RgbColor</a></li>
-    <li><a href="http://polished.js.org/docs/#rgbacolor">RgbaColor</a></li>
+    <li><a href="http://polished.js.org/docs/#animationproperty">AnimationProperty</a></li>
+    <li><a href="http://polished.js.org/docs/#buttonstate">ButtonState</a></li>
+    <li><a href="http://polished.js.org/docs/#fontfaceconfiguration">FontFaceConfiguration</a></li>
     <li><a href="http://polished.js.org/docs/#hslcolor">HslColor</a></li>
     <li><a href="http://polished.js.org/docs/#hslacolor">HslaColor</a></li>
-    <li><a href="http://polished.js.org/docs/#fontfaceconfiguration">FontFaceConfiguration</a></li>
+    <li><a href="http://polished.js.org/docs/#inputstate">InputState</a></li>
+    <li><a href="http://polished.js.org/docs/#pointingdirection">PointingDirection</a></li>
     <li><a href="http://polished.js.org/docs/#radialgradientconfiguration">RadialGradientConfiguration</a></li>
+    <li><a href="http://polished.js.org/docs/#ratio">Ratio</a></li>
+    <li><a href="http://polished.js.org/docs/#rgbacolor">RgbaColor</a></li>
+    <li><a href="http://polished.js.org/docs/#rgbcolor">RgbColor</a></li>
     <li><a href="http://polished.js.org/docs/#timingfunction">TimingFunction</a></li>
-    <li><a href="http://polished.js.org/docs/#animationproperty">AnimationProperty</a></li>
-    <li><a href="http://polished.js.org/docs/#buttonstate">ButtonState</a></li>
-    <li><a href="http://polished.js.org/docs/#inputstate">InputState</a></li>
     <li><a href="http://polished.js.org/docs/#tocolorstring">toColorString</a></li>
-    <li><a href="http://polished.js.org/docs/#pointingdirection">PointingDirection</a></li>
   </ul>
 </details>
 <!-- INJECT DOCS END -->

docs/assets/polished.js

@@ -1068,6 +1068,85 @@ function timingFunctions(timingFunction) {
 
 //      
 
+/** */
+
+var getBorderWidth = function getBorderWidth(pointingDirection, height, width) {
+  switch (pointingDirection) {
+    case 'top':
+      return '0 ' + width / 2 + 'px ' + height + 'px ' + width / 2 + 'px';
+    case 'left':
+      return height / 2 + 'px ' + width + 'px ' + height / 2 + 'px 0';
+    case 'bottom':
+      return height + 'px ' + width / 2 + 'px 0 ' + width / 2 + 'px';
+    case 'right':
+      return height / 2 + 'px 0 ' + height / 2 + 'px ' + width + 'px';
+
+    default:
+      throw new Error('Passed invalid argument to triangle, please pass correct poitingDirection e.g. \'right\'.');
+  }
+};
+
+// needed for border-color
+var reverseDirection = {
+  left: 'right',
+  right: 'left',
+  top: 'bottom',
+  bottom: 'top'
+};
+
+/**
+ * CSS to represent triangle with any pointing direction with an optional background color. Accepts number or px values for height and width.
+ *
+ * @example
+ * // Styles as object usage
+ *
+ * const styles = {
+ *   ...triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })
+ * }
+ *
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   ${triangle({ pointingDirection: 'right', width: '100px', height: '100px', foregroundColor: 'red' })}
+ *
+ *
+ * // CSS as JS Output
+ *
+ * div: {
+ *  'border-color': 'transparent',
+ *  'border-left-color': 'red !important',
+ *  'border-style': 'solid',
+ *  'border-width': '50px 0 50px 100px',
+ *  'height': '0',
+ *  'width': '0',
+ * }
+ */
+
+function triangle(_ref) {
+  var pointingDirection = _ref.pointingDirection,
+      height = _ref.height,
+      width = _ref.width,
+      foregroundColor = _ref.foregroundColor,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === undefined ? 'transparent' : _ref$backgroundColor;
+
+  var unitlessHeight = parseFloat(height);
+  var unitlessWidth = parseFloat(width);
+  if (isNaN(unitlessHeight) || isNaN(unitlessWidth)) {
+    throw new Error('Passed an invalid value to `height` or `width`. Please provide a pixel based unit');
+  }
+
+  return defineProperty({
+    'border-color': backgroundColor,
+    'width': '0',
+    'height': '0',
+    'border-width': getBorderWidth(pointingDirection, unitlessHeight, unitlessWidth),
+    'border-style': 'solid'
+  }, 'border-' + reverseDirection[pointingDirection] + '-color', foregroundColor + ' !important');
+}
+
+//      
+
 /**
  * Provides an easy way to change the `word-wrap` property.
  *
@@ -2969,6 +3048,7 @@ exports.tint = tint$1;
 exports.toColorString = toColorString;
 exports.transitions = transitions;
 exports.transparentize = transparentize$1;
+exports.triangle = triangle;
 exports.wordWrap = wordWrap;
 
 Object.defineProperty(exports, '__esModule', { value: true });