From 1b9ff48b9524745304da8d20a511c5b64abd5098 Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Mon, 10 Feb 2020 21:35:49 -0800 Subject: [PATCH 1/6] feat(banner): Added a new banner component #332 --- src/components/banner.tsx | 34 ++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 2 ++ 2 files changed, 36 insertions(+) create mode 100644 src/components/banner.tsx diff --git a/src/components/banner.tsx b/src/components/banner.tsx new file mode 100644 index 0000000000..85a07d0021 --- /dev/null +++ b/src/components/banner.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { css, SerializedStyles } from '@emotion/core'; + +const banner: SerializedStyles = css` + position: relative; + font-weight: bold; + background-color: var(--info9); + font-size: var(--font-size-display2); + color: var(--black0); + border-radius: 5px; + text-align: center; + padding-top: 5px; +`; + +const ticketsCta: SerializedStyles = css` + border-radius: 5.6rem; + background: var(--color-fill-action); + color: var(--black0); + margin-right: var(--space-32); + position: relative; +`; + +const Banner = () => ( +
+

+ + Some new event is happening on some date +

+
+); + +export default Banner; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8f09549e0c..78166ae0aa 100644 --- 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. '; @@ -53,6 +54,7 @@ export default function Index(): JSX.Element { style={{ overflow: 'hidden' }} >
+
From 9b46bb87fe4dadb671a1ab1a85539d1699bef7ea Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sat, 15 Feb 2020 22:27:31 -0800 Subject: [PATCH 2/6] style(banner.tsx): Added additional styling Added additional styling to match the mockup more closely --- src/components/banner.tsx | 64 ++++++++++++++----- src/pages/index.tsx | 2 +- .../__snapshots__/banner.test.tsx.snap | 60 +++++++++++++++++ test/components/banner.test.tsx | 11 ++++ 4 files changed, 121 insertions(+), 16 deletions(-) create mode 100644 test/components/__snapshots__/banner.test.tsx.snap create mode 100644 test/components/banner.test.tsx diff --git a/src/components/banner.tsx b/src/components/banner.tsx index 85a07d0021..4b5bc69d7d 100644 --- a/src/components/banner.tsx +++ b/src/components/banner.tsx @@ -1,34 +1,68 @@ 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` position: relative; font-weight: bold; - background-color: var(--info9); + background-color: var(--black3); font-size: var(--font-size-display2); - color: var(--black0); + color: var(--color-text-primary); border-radius: 5px; text-align: center; padding-top: 5px; `; -const ticketsCta: SerializedStyles = css` +const bannerCta: SerializedStyles = css` border-radius: 5.6rem; - background: var(--color-fill-action); - color: var(--black0); + background: var(--purple5); + color: var(--color-fill-top-nav); margin-right: var(--space-32); position: relative; `; +const bannerButtonText: SerializedStyles = css` + 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); +`; -const Banner = () => ( -
-

- - Some new event is happening on some date -

-
-); +/** + * The banner is used for displaying upcoming Nodejs events and important announcements ex. security updates + * Usage + *

+ * + * New security releases now available for all release lines + *

+ */ +const Banner = (): JSX.Element => { + return ( +
+

+ + New security releases now available for all release lines +

+
+ ); +}; export default Banner; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 78166ae0aa..3dfb219266 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -53,8 +53,8 @@ export default function Index(): JSX.Element { description={description} style={{ overflow: 'hidden' }} > +
-
diff --git a/test/components/__snapshots__/banner.test.tsx.snap b/test/components/__snapshots__/banner.test.tsx.snap new file mode 100644 index 0000000000..2b6fbcde02 --- /dev/null +++ b/test/components/__snapshots__/banner.test.tsx.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tests for Header component renders correctly 1`] = ` +
+

+ + New security releases now available for all release lines +

+
+`; diff --git a/test/components/banner.test.tsx b/test/components/banner.test.tsx new file mode 100644 index 0000000000..7050d84254 --- /dev/null +++ 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().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); From 5c38b45a603609006ca18077f92f104475a41a7d Mon Sep 17 00:00:00 2001 From: Ben Halverson Date: Sat, 15 Feb 2020 22:53:57 -0800 Subject: [PATCH 3/6] test(snapshot): Updated snapshot for banner.tsx --- .../__snapshots__/banner.test.tsx.snap | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/test/components/__snapshots__/banner.test.tsx.snap b/test/components/__snapshots__/banner.test.tsx.snap index 2b6fbcde02..fc5f2005f4 100644 --- a/test/components/__snapshots__/banner.test.tsx.snap +++ b/test/components/__snapshots__/banner.test.tsx.snap @@ -5,14 +5,14 @@ exports[`Tests for Header component renders correctly 1`] = ` css={ Object { "map": undefined, - "name": "1vzy5x6", + "name": "1g9ii1p", "next": undefined, "styles": " position: relative; font-weight: bold; - background-color: var(--info9); + background-color: var(--black3); font-size: var(--font-size-display2); - color: var(--black0); + color: var(--color-text-primary); border-radius: 5px; text-align: center; padding-top: 5px; @@ -20,16 +20,24 @@ exports[`Tests for Header component renders correctly 1`] = ` } } > -

+

+ + + New security releases now available for all release lines

diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 1e86eeab94..77d3a78bf6 100644 --- 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 */ From 6e117f87532ad87eb53a706585bf57bad9024b05 Mon Sep 17 00:00:00 2001 From: Saleh Abdel Motaal Date: Sat, 29 Feb 2020 13:21:44 -0500 Subject: [PATCH 5/6] test(snapshot): Updated snapshot for banner.tsx --- .../__snapshots__/banner.test.tsx.snap | 38 +++++++------------ 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/test/components/__snapshots__/banner.test.tsx.snap b/test/components/__snapshots__/banner.test.tsx.snap index fc5f2005f4..f29dfb531d 100644 --- a/test/components/__snapshots__/banner.test.tsx.snap +++ b/test/components/__snapshots__/banner.test.tsx.snap @@ -5,12 +5,12 @@ exports[`Tests for Header component renders correctly 1`] = ` css={ Object { "map": undefined, - "name": "1g9ii1p", + "name": "433qea", "next": undefined, "styles": " position: relative; font-weight: bold; - background-color: var(--black3); + background-color: var(--color-fill-top-banner); font-size: var(--font-size-display2); color: var(--color-text-primary); border-radius: 5px; @@ -28,44 +28,34 @@ exports[`Tests for Header component renders correctly 1`] = ` } } > - + + New security releases now available for all release lines

From a003e5312f34bc637c792ce16a07424b5b4233e6 Mon Sep 17 00:00:00 2001 From: Saleh Abdel Motaal Date: Sat, 29 Feb 2020 13:32:24 -0500 Subject: [PATCH 6/6] style: Lint --- src/components/banner.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/banner.tsx b/src/components/banner.tsx index 22231ea7c8..29f60afbc3 100644 --- a/src/components/banner.tsx +++ b/src/components/banner.tsx @@ -4,7 +4,7 @@ import { css, SerializedStyles } from '@emotion/core'; const bannerLink = 'https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/'; -const banner: SerializedStyles = css/*scss*/` +const banner: SerializedStyles = css/* scss */ ` position: relative; font-weight: bold; background-color: var(--color-fill-top-banner); @@ -15,7 +15,7 @@ const banner: SerializedStyles = css/*scss*/` padding-top: 5px; `; -const bannerButton: SerializedStyles = css/*scss*/` +const bannerButton: SerializedStyles = css/* scss */ ` position: relative; margin-right: var(--space-32); border-radius: 5.6rem; @@ -54,7 +54,7 @@ const Banner = (): JSX.Element => { > New security releases now available for all release lines