From 2803288f5ffc56a1d7bc4a4fa46f701995e644ef Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Sat, 30 Jan 2021 18:36:58 +0000
Subject: [PATCH] feat(heading): control text-shadow

---
 src/components/header-logo.js |  7 +------
 src/components/heading.js     | 30 ++++++++++++++++++++++++++----
 src/pages/about.js            |  4 ++--
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index 71a24ac..795ce70 100644
--- a/src/components/header-logo.js
+++ b/src/components/header-logo.js
@@ -81,12 +81,7 @@ export default function HeaderLogo({ transition }) {
         <LogoArrows />
       </Top>
       <Middle visible={visible}>
-        <Heading
-          shadowRadius="15px"
-          shadowColor="rgba(255, 255, 255, 0.25)"
-          noMargin
-          noWrap
-        >
+        <Heading shadow="xl-white" noMargin noWrap>
           ABC Project Design Ltd
         </Heading>
         <Text size="lg" noMargin>
diff --git a/src/components/heading.js b/src/components/heading.js
index fb47e05..493ecfd 100644
--- a/src/components/heading.js
+++ b/src/components/heading.js
@@ -5,8 +5,7 @@ import { css } from "@emotion/react";
 const Styles = styled.h1`
   margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
   font-size: ${props => `var(--font-size-${props.size})`};
-  text-shadow: 0 0 ${props => props.shadowRadius || `2px`}
-    ${props => props.shadowColor || `rgba(0, 0, 0, 0.25)`};
+  text-shadow: 0 0 ${props => props.shadowSize} ${props => props.shadowColor};
   ${props =>
     props.color &&
     css`
@@ -28,10 +27,33 @@ const sizes = {
   h6: "lg"
 };
 
-export default function Heading({ el = "h1", children, ...other }) {
+const shadowSizes = {
+  sm: "2px",
+  md: "5px",
+  lg: "10px",
+  xl: "15px"
+};
+
+const shadowColors = {
+  white: "rgba(255, 255, 255, 0.25)",
+  black: "rgba(0, 0, 0, 0.25)"
+};
+
+export default function Heading({
+  el = "h1",
+  shadow = "sm-black",
+  children,
+  ...other
+}) {
   const Container = Styles.withComponent(el);
+  const [size, color] = shadow.split("-");
   return (
-    <Container size={sizes[el]} {...other}>
+    <Container
+      size={sizes[el]}
+      shadowSize={shadowSizes[size]}
+      shadowColor={shadowColors[color]}
+      {...other}
+    >
       {children}
     </Container>
   );
diff --git a/src/pages/about.js b/src/pages/about.js
index 9d9e3e8..c649f2a 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -10,8 +10,8 @@ export default function Index({ data }) {
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"
       >
-        <Heading>
-          Slogan <em>or quote here</em>
+        <Heading shadow="xl-white">
+          <em>Easy as</em> ABC
         </Heading>
       </Header>
       <Section heading="About ABC Project Design">