From 5c8ec7bd93eb29cf5962acd3b65b26e789276fd8 Mon Sep 17 00:00:00 2001
From: Brent Miller <brent.miller@washpost.com>
Date: Mon, 6 Apr 2020 14:40:27 -0500
Subject: [PATCH] adding complete set of link hover components and literals

---
 js/styled/linkHovers.js | 75 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/js/styled/linkHovers.js b/js/styled/linkHovers.js
index 00e8970..ba4d29a 100644
--- a/js/styled/linkHovers.js
+++ b/js/styled/linkHovers.js
@@ -15,4 +15,77 @@ const LinkBackgroundHover = styled.a`
   }
 `;
 
-export {LinkBackgroundHover};
+/**
+ * LinkBackgroundHoverCSSProp
+ * @description Base styled component literal to be used as an inline css prop on any element
+ * ref: https://styled-components.com/docs/api#css-prop
+ * @param primaryColor: Primary color set in the theme
+ * @param foregroundColor: Color of the text on hover (defaults to #fff)
+ */
+const LinkBackgroundHoverCSSProp = `
+  transition: fill 0.3s ease;
+  &:active, &:hover{
+    color: ${(props) => props.foregroundColor || '#fff'};
+    background-color: ${(props) => lightenDarkenColor(props.primaryColor, 40)};
+  }
+`;
+
+/**
+ * LinkForegroundHover
+ * @description Base styled component to augment link components with color hover state
+ * @param primaryColor: Primary color set in the theme
+ */
+const LinkForegroundHover = styled.a`
+  transition: fill 0.3s ease;
+  &:active, &:hover{
+    color: ${(props) => lightenDarkenColor(props.primaryColor, 40)};
+  }
+`;
+
+/**
+ * LinkForegroundHoverCSSProp
+ * @description Base styled component literal to be used as an inline css prop on any element
+ * ref: https://styled-components.com/docs/api#css-prop
+ * @param primaryColor: Primary color set in the theme
+ * @param foregroundColor: Color of the text on hover (defaults to #fff)
+ */
+const LinkForegroundHoverCSSProp = `
+  transition: fill 0.3s ease;
+  &:active, &:hover{
+    color: ${(props) => lightenDarkenColor(props.primaryColor, 40)};
+  }
+`;
+
+
+/**
+ * LinkSVGHover
+ * @description Base styled component to augment link components with SVG Fill color hover state
+ * @param primaryColor: Primary color set in the theme
+ */
+const LinkSVGHover = styled.a`
+  transition: fill 0.3s ease;
+  &:active svg, &:hover svg{
+    fill: ${(props) => lightenDarkenColor(props.primaryColor, 40)};
+  }
+`;
+
+/**
+ * LinkSVGHoverCSSProp
+ * @description Base styled component literal to be used as an inline css prop on any element
+ * ref: https://styled-components.com/docs/api#css-prop
+ * @param primaryColor: Primary color set in the theme
+ */
+const LinkSVGHoverCSSProp = `
+  transition: fill 0.3s ease;
+  &:active svg, &:hover svg{
+    fill: ${(props) => lightenDarkenColor(props.primaryColor, 40)};
+  }
+`;
+
+export {
+    LinkBackgroundHover,
+    LinkBackgroundHoverCSSProp,
+    LinkForegroundHover,
+    LinkForegroundHoverCSSProp,
+    LinkSVGHover,
+    LinkSVGHoverCSSProp};