diff --git a/gatsby-config.js b/gatsby-config.js index b894196..9c2cfb0 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -7,6 +7,7 @@ module.exports = { author: `@gatsbyjs`, }, plugins: [ + `gatsby-plugin-fontawesome-css`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-source-filesystem`, diff --git a/package.json b/package.json index b6fa222..b942875 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,16 @@ "description": "Discovery site for all Dominican developers with their skills and contacts", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.30", + "@fortawesome/free-brands-svg-icons": "^5.14.0", + "@fortawesome/free-solid-svg-icons": "^5.14.0", + "@fortawesome/react-fontawesome": "^0.1.11", "@typescript-eslint/eslint-plugin": "^4.1.0", "@typescript-eslint/parser": "^4.1.0", "babel-plugin-styled-components": "^1.11.1", "gatsby": "^2.24.50", "gatsby-image": "^2.4.16", + "gatsby-plugin-fontawesome-css": "^1.0.0", "gatsby-plugin-alias-imports": "^1.0.5", "gatsby-plugin-manifest": "^2.4.24", "gatsby-plugin-offline": "^3.2.24", @@ -36,7 +41,7 @@ "eslint-plugin-react-hooks": "^4.0.0", "husky": "^4.3.0", "stylelint": "^13.7.0", - "stylelint-config-standard": "^20.0.0" + "stylelint-config-standard": "^20.0.0", "@babel/core": "^7.11.6", "@storybook/addon-actions": "^6.0.21", "@storybook/addon-essentials": "^6.0.21", diff --git a/src/components/__tests__/__snapshots__/header.test.tsx.snap b/src/components/__tests__/__snapshots__/header.test.tsx.snap index ef91156..f84771c 100644 --- a/src/components/__tests__/__snapshots__/header.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/header.test.tsx.snap @@ -2,41 +2,113 @@ exports[`Header renders correctly 1`] = `
-
-

- Devs DO + +
+ DominicanWho.Codes +
+ -

-
+ + + + + +
`; diff --git a/src/components/__tests__/__snapshots__/navbar.test.tsx.snap b/src/components/__tests__/__snapshots__/navbar.test.tsx.snap new file mode 100644 index 0000000..87cb2ec --- /dev/null +++ b/src/components/__tests__/__snapshots__/navbar.test.tsx.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Navbar render correctly 1`] = ` + +`; diff --git a/src/components/__tests__/header.test.tsx b/src/components/__tests__/header.test.tsx index ce2d4c6..b4c9d28 100644 --- a/src/components/__tests__/header.test.tsx +++ b/src/components/__tests__/header.test.tsx @@ -1,24 +1,24 @@ -import * as React from "react" +import * as React from "react"; import { render } from "@testing-library/react"; -import renderer from "react-test-renderer" - +import renderer from "react-test-renderer"; import Header from "../header"; describe(`Header`, () => { it(`renders siteTitle`, () => { - const siteTitle = `Devs DO` + const siteTitle = `DominicanWho.Codes`; + const { getByText } = render(
); const title = getByText(siteTitle); expect(title).toBeInTheDocument(); - }) + }); it("renders correctly", () => { - const siteTitle = `Devs DO` + const siteTitle = `DominicanWho.Codes`; const tree = renderer .create(
) .toJSON(); expect(tree).toMatchSnapshot(); - }) -}) + }); +}); diff --git a/src/components/__tests__/navbar.test.tsx b/src/components/__tests__/navbar.test.tsx new file mode 100644 index 0000000..6c72d2b --- /dev/null +++ b/src/components/__tests__/navbar.test.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { render } from "@testing-library/react"; +import renderer from "react-test-renderer"; +import Navbar from "../navbar"; + +describe("Navbar", () => { + it("renders navbar open", () => { + const open = true; + const textInDocument = "About"; + const { getByText } = render(); + + const menuOption = getByText(textInDocument); + expect(menuOption).toBeInTheDocument(); + }); + + it("render correctly", () => { + const open = false; + + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + + }) +}); diff --git a/src/components/header.tsx b/src/components/header.tsx index 8990b7e..51bff5d 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,42 +1,97 @@ -import { Link } from "gatsby" -import PropTypes from "prop-types" -import React from "react" - -const Header = ({ siteTitle }) => ( -
-
-

- - {siteTitle} - -

-
-
-) - -Header.propTypes = { - siteTitle: PropTypes.string, -} +import React, { useState, FC } from "react"; +import { Link } from "gatsby"; +import styled from "styled-components"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faBars } from "@fortawesome/free-solid-svg-icons"; +import Navbar from "./navbar"; +const HeaderContent = styled.header` + background: #ffffff; + height: 3.2em; + display: flex; + align-content: center; + box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4); +`; + +const Nav = styled.nav` + display: flex; + justify-content: space-between; + align-items: center; + width: 98%; + margin-left: auto; + margin-right: auto; + + #nav-toggle { + position: absolute; + } +`; + +const NavbarBrand = styled.span` + font-size: 1.25rem; + white-space: nowrap; + &:hover { + cursor: pointer; + } +`; -Header.defaultProps = { - siteTitle: ``, +const Title = styled.h5` + color: #fff; + background-color: #212529; + padding: 0.2rem 0.4rem; + border-radius: 0.2rem; + margin: 0; + font-weight: 400; + font-family: Consolas; + line-height: 21px; + font-size: 18px; +`; +const NavbarButton = styled.span` + font-family: Segoe UI; + font-weight: 700; + color: #343a40; + padding: 6px 10px; + &:hover { + cursor: pointer; + color: black; + } + + @media screen and (min-width: 992px) { + color: black; + } +`; +const BurgerButton = styled(NavbarButton)` + display: none; + @media (max-width: 992px) { + display: block; + } + font-size: 28px; +`; + +type Props = { + siteTitle: string; } -export default Header +const Header: FC = ({siteTitle}) => { + const [open, setOpen] = useState(false); + + return ( + <> + + + + + ); +}; + +export default Header; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 98a91e0..67333fa 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -5,30 +5,20 @@ * See: https://www.gatsbyjs.org/docs/use-static-query/ */ -import React from "react" -import PropTypes from "prop-types" -import { useStaticQuery, graphql } from "gatsby" -import { ThemeProvider } from "styled-components" -import Header from "./header" -import "./layout.css" -import theme from "../theme" -import GlobalStyles from "../globalStyles" +import React from "react"; +import PropTypes from "prop-types"; +import { useStaticQuery, graphql } from "gatsby"; +import { ThemeProvider } from "styled-components"; +import Header from "./header"; +import "./layout.css"; +import theme from "../theme"; +import GlobalStyles from "../globalStyles"; const Layout = ({ children }) => { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - } - } - } - `) - return ( -
+
{
- ) -} + ); +}; Layout.propTypes = { children: PropTypes.node.isRequired, -} +}; -export default Layout +export default Layout; diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx new file mode 100644 index 0000000..a5317cb --- /dev/null +++ b/src/components/navbar.tsx @@ -0,0 +1,111 @@ +import React, {FC} from "react" +import { Link } from "gatsby" +import styled from "styled-components" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faGithub } from "@fortawesome/free-brands-svg-icons" + + +const NavbarContainer = styled.ul<{ open: boolean }>` + color: black; + font-weight: w600; + display: flex; + justify-content: center; + align-items: center; + margin-top: 2.6em; + @media screen and (max-width: 992px) { + position: fixed; + align-item: flex-start; + margin-top: 0; + padding: 1em; + z-index: 9; + left: -27px; + right: 0; + top: 3.2em; + bottom: 0; + width: auto; + flex-direction: column; + display: ${props => (props.open ? "block;" : "none;")}; + background-color: #fff; + height: 7em; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); + overflow: hidden; + .github-icon { + display: none; + } + } +` + +const NavbarItem = styled.li` + list-style: none; + margin-right: 0.3rem; + display: flex; + + width: 100%; + height: 2em; + display: block; + + @media screen and (max-width: 992px) { + a { + color: black; + } + } +` + +const NavbarButton = styled.span` + font-family: Segoe UI; + font-weight: 700; + padding: 6px 10px; + &:hover { + cursor: pointer; + color: black; + } + a { + color: black; + } + + @media screen and (min-width: 992px) { + color: black; + } +` + +const NominateButton = styled(NavbarButton)` + margin-top: 2em; + color: #343a40; + background-color: #343a40; + border-radius: 3px; + &:hover { + cursor: pointer; + background-color: black; + } +` + +type Props = { + open: boolean; +} + +const Navbar: FC = ({ open }) => { + return ( + + + + + About + + + + + + + Nominate + + + + + ) +} + +export default Navbar diff --git a/yarn.lock b/yarn.lock index 89d4ea1..3343743 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1414,6 +1414,38 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@fortawesome/fontawesome-common-types@^0.2.30": + version "0.2.30" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777" + integrity sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg== + +"@fortawesome/fontawesome-svg-core@^1.2.30": + version "1.2.30" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz#f56dc6791861fe5d1af04fb8abddb94658c576db" + integrity sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.30" + +"@fortawesome/free-brands-svg-icons@^5.14.0": + version "5.14.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz#98555518ba41bdff82fbae2f4d1bc36cd3b1c043" + integrity sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.30" + +"@fortawesome/free-solid-svg-icons@^5.14.0": + version "5.14.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz#970453f5e8c4915ad57856c3a0252ac63f6fec18" + integrity sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.30" + +"@fortawesome/react-fontawesome@^0.1.11": + version "0.1.11" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a" + integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg== + dependencies: + prop-types "^15.7.2" "@eslint/eslintrc@^0.1.3": version "0.1.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085" @@ -9248,6 +9280,11 @@ gatsby-plugin-alias-imports@^1.0.5: dependencies: "@babel/runtime" "^7.2.0" +gatsby-plugin-fontawesome-css@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gatsby-plugin-fontawesome-css/-/gatsby-plugin-fontawesome-css-1.0.0.tgz#12b0d9e4eb45f9321556e83accfa93fc6627d608" + integrity sha512-jToy7WSlNjCtcFWjS7/W1U8jJggKBv2hZhatYyNXELfxvl3eFvuJGlDYYDDKtMzv57N5hbXwUvJ+iW21+FcDOA== + gatsby-plugin-manifest@^2.4.24: version "2.4.27" resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.27.tgz#e87102137efcb1fe66ab27f913241f9c1b2f4fa7"