feat(banner): Added a new banner component (#398)

* feat(banner): Added a new banner component #332 * style(banner.tsx): Added additional styling Added additional styling to match the mockup more closely * test(snapshot): Updated snapshot for banner.tsx * Fix topbanner dark mode (#1) * fix: Banner styling for dark mode * test(snapshot): Updated snapshot for banner.tsx * style: Lint Co-authored-by: Saleh Abdel Motaal <[email protected]>
nodejs · Feb 29, 2020 · ebe5c29 · ebe5c29
1 parent e73a42e
commit ebe5c29
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 0 deletions.
diff --git a/src/components/banner.tsx b/src/components/banner.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { css, SerializedStyles } from '@emotion/core';
+
+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);
+`;
+
+/**
+ * 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>
+ */
+const Banner = (): JSX.Element => {
+  return (
+    <div css={banner}>
+      <p
+        css={{
+          paddingTop: 'var(--space-08)',
+          paddingBottom: 'var(--space-08)',
+        }}
+      >
+        <a href={bannerLink}>
+          <button css={bannerButton} type="button">
+            Blog post
+          </button>
+        </a>
+        New security releases now available for all release lines
+      </p>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -23,6 +23,7 @@ import leafsIllustrationFront from '../images/illustrations/leafs-front.svg';
 import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg';
 import leafsIllustrationBack from '../images/illustrations/leafs-back.svg';
 import dotsIllustration from '../images/illustrations/dots.svg';
+import Banner from '../components/banner';
 
 const nodeFeature1 =
   'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. ';
@@ -52,6 +53,7 @@ export default function Index(): JSX.Element {
       description={description}
       style={{ overflow: 'hidden' }}
     >
+      <Banner />
       <div className="home-page">
         <Hero title={title} subTitle={subTitle} />
 

diff --git a/src/styles/tokens.css b/src/styles/tokens.css
@@ -95,6 +95,7 @@ body {
     --color-fill-canvas: var(--black1);
     --color-fill-side-nav: var(--black1);
     --color-fill-top-nav: var(--black0);
+    --color-fill-top-banner: #9992;
     --color-fill-action: var(--brand5); /*for actionable elements*/
 
     /* Typography */

diff --git a/test/components/__snapshots__/banner.test.tsx.snap b/test/components/__snapshots__/banner.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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;
+",
+    }
+  }
+>
+  <p
+    css={
+      Object {
+        "paddingBottom": "var(--space-08)",
+        "paddingTop": "var(--space-08)",
+      }
+    }
+  >
+    <a
+      href="https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/"
+    >
+      <button
+        css={
+          Object {
+            "map": undefined,
+            "name": "16knpov",
+            "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);
+",
+          }
+        }
+        type="button"
+      >
+        Blog post
+      </button>
+    </a>
+    New security releases now available for all release lines
+  </p>
+</div>
+`;
diff --git a/test/components/banner.test.tsx b/test/components/banner.test.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Banner from '../../src/components/banner';
+
+describe('Tests for Header component', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Banner />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});