refactor(banner): Refactor styling to use scss (#655)

benhalverson · web-flow · commit f58c13c728df · 2020-05-05T14:21:11.000-07:00
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
@@ -0,0 +1,29 @@
+.banner {
+  position: relative;
+  font-weight: bold;
+  background-color: var(--color-fill-top-banner);
+  font-size: var(--font-size-display2);
+  color: var(--color-text-primary);
+  border-radius: 5px;
+  text-align: center;
+  padding-top: 5px;
+}
+
+.bannerButton {
+  position: relative;
+  margin-right: var(--space-32);
+  border-radius: 5.6rem;
+  background: var(--purple5);
+  color: var(--color-fill-top-nav);
+  line-height: var(--line-height-subheading);
+  text-decoration: none;
+  font-family: var(--sans);
+  font-style: normal;
+  font-weight: var(--font-weight-semibold);
+  border: 1px solid transparent;
+}
+
+p {
+  padding-top: var(--space-08);
+  padding-bottom: var(--space-08);
+}
diff --git a/src/components/Banner/__tests__/__snapshots__/banner.test.tsx.snap b/src/components/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -2,56 +2,14 @@
 
 exports[`Tests for Header component renders correctly 1`] = `
 <div
-  css={
-    Object {
-      "map": undefined,
-      "name": "433qea",
-      "next": undefined,
-      "styles": "
-  position: relative;
-  font-weight: bold;
-  background-color: var(--color-fill-top-banner);
-  font-size: var(--font-size-display2);
-  color: var(--color-text-primary);
-  border-radius: 5px;
-  text-align: center;
-  padding-top: 5px;
-",
-    }
-  }
+  className="banner"
 >
-  <p
-    css={
-      Object {
-        "paddingBottom": "var(--space-08)",
-        "paddingTop": "var(--space-08)",
-      }
-    }
-  >
+  <p>
     <a
       href="https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/"
     >
       <button
-        css={
-          Object {
-            "map": undefined,
-            "name": "1x4o9mg",
-            "next": undefined,
-            "styles": "
-  position: relative;
-  margin-right: var(--space-32);
-  border-radius: 5.6rem;
-  background: var(--purple5);
-  color: var(--color-fill-top-nav);
-  line-height: var(--line-height-subheading);
-  text-decoration: none;
-  font-family: var(--sans);
-  font-style: normal;
-  font-weight: var(--font-weight-semibold);
-  border: 1px solid transparent;
-",
-          }
-        }
+        className="bannerButton"
         type="button"
       >
         Blog post
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -1,60 +1,27 @@
 import React from 'react';
-import { css, SerializedStyles } from '@emotion/core';
+import './Banner.scss';
 
 const bannerLink =
   'https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/';
 
-const banner: SerializedStyles = css/* scss */ `
-  position: relative;
-  font-weight: bold;
-  background-color: var(--color-fill-top-banner);
-  font-size: var(--font-size-display2);
-  color: var(--color-text-primary);
-  border-radius: 5px;
-  text-align: center;
-  padding-top: 5px;
-`;
-
-const bannerButton: SerializedStyles = css/* scss */ `
-  position: relative;
-  margin-right: var(--space-32);
-  border-radius: 5.6rem;
-  background: var(--purple5);
-  color: var(--color-fill-top-nav);
-  line-height: var(--line-height-subheading);
-  text-decoration: none;
-  font-family: var(--sans);
-  font-style: normal;
-  font-weight: var(--font-weight-semibold);
-  border: 1px solid transparent;
-`;
-
 /**
  * The banner is used for displaying upcoming Nodejs events and important announcements ex. security updates
  * Usage
- * <p css={{
- *     paddingTop: 'var(--space-08)',
- *     paddingBottom: 'var(--space-08)',
- *      }}>
- *  <button css={bannerCta} type="button">
- *    <a css={bannerButtonText} href={bannerLink}>
- *      Blog post
- *    </a>
- *  </button>
- *  New security releases now available for all release lines
- *</p>
+      <p>
+        <a href={bannerLink}>
+          <button className="bannerButton" type="button">
+            Blog post
+          </button>
+        </a>
+        New security releases now available for all release lines
+      </p>
  */
 const Banner = (): JSX.Element => {
   return (
-    <div css={banner}>
-      <p
-        css={{
-          paddingTop: 'var(--space-08)',
-          paddingBottom: 'var(--space-08)',
-        }}
-      >
+    <div className="banner">
+      <p>
         <a href={bannerLink}>
-          <button css={bannerButton} type="button">
+          <button className="bannerButton" type="button">
             Blog post
           </button>
         </a>
