Remove padding prop from Link

LatitudeFinancialOSS · Sep 16, 2020 · 5a53e18 · 5a53e18 · vercel · Sep 16, 2020
1 parent 364058d
commit 5a53e18
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 25 deletions.
diff --git a/src/components/Link.js b/src/components/Link.js
@@ -5,15 +5,10 @@ import useTheme from "../hooks/useTheme";
 import useBackground, { mapResponsiveValues } from "../hooks/useBackground";
 import {
   responsiveMarginType,
-  responsivePaddingType,
   responsiveWidthType,
 } from "../hooks/useResponsiveProp";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
-import {
-  responsiveMargin,
-  responsivePadding,
-  responsiveSize,
-} from "../utils/css";
+import { responsiveMargin, responsiveSize } from "../utils/css";
 import { mergeProps } from "../utils/component";
 import { formatArray } from "../utils/array";
 import { hasOwnProperty } from "../utils/core";
@@ -148,7 +143,6 @@ function Link(props) {
         __internal__active,
       });
     },
-    padding: responsivePadding,
   });
 
   const { InternalLink, isLinkInternal } = useContext(LinkContext);
@@ -206,7 +200,6 @@ function Link(props) {
 
 Link.propTypes = {
   ...responsiveMarginType,
-  ...responsivePaddingType,
   ...responsiveWidthType,
   appearance: (props) => {
     if (props.appearance === undefined) {

diff --git a/src/components/Link.test.js b/src/components/Link.test.js
@@ -170,20 +170,6 @@ describe("Link", () => {
     });
   });
 
-  it("with padding", () => {
-    render(
-      <Link href="/terms" newTab={false} padding="3 6">
-        Terms and Conditions
-      </Link>
-    );
-
-    const span = screen.getByText("Terms and Conditions");
-
-    expect(span).toHaveStyle({
-      padding: "12px 24px",
-    });
-  });
-
   it("with width", () => {
     render(
       <Link

diff --git a/website/src/layouts/Page.js b/website/src/layouts/Page.js
@@ -9,7 +9,7 @@ import SEO from "../components/SEO";
 import Sidebar from "../components/Sidebar";
 import ComponentStatusIndicator from "../components/ComponentStatusIndicator";
 import Splitbee from "../components/Splitbee";
-import { BasisProvider, Container, Text, Link } from "basis";
+import { BasisProvider, Container, Text } from "basis";
 import theme from "../themes/website";
 import { getTabsUrls } from "../utils/url";
 import "typeface-montserrat";
@@ -116,9 +116,21 @@ function Page({ pageContext, children }) {
                               }}
                               key={name}
                             >
-                              <Link href={href} newTab={false} padding="2 6">
+                              <GatsbyLink
+                                css={{
+                                  display: "flex",
+                                  alignItems: "center",
+                                  boxSizing: "border-box",
+                                  width: "100%",
+                                  padding: `${theme.space[2]} ${theme.space[6]}`,
+                                  color: isCurrent
+                                    ? theme.colors.black
+                                    : theme.colors.grey.t75,
+                                }}
+                                to={href}
+                              >
                                 {name}
-                              </Link>
+                              </GatsbyLink>
                             </li>
                           ))}
                         </ul>