diff --git a/components/Footer.js b/components/Footer.js deleted file mode 100644 index 82e8f6238bb..00000000000 --- a/components/Footer.js +++ /dev/null @@ -1,184 +0,0 @@ -import IconTwitter from "./icons/Twitter" -import IconGithub from "./icons/Github" -import IconYoutubeGray from "./icons/YouTubeGray" -import IconLinkedIn from "./icons/LinkedIn" -import Link from "next/link" -import AsyncAPILogoLight from "./AsyncAPILogoLight" -import IconSlack from "./icons/Slack" -import IconTwitch from "./icons/Twitch" -import Heading from "./typography/Heading" - -export default function Footer() { - return ( - - ) -} diff --git a/components/footer/Footer.js b/components/footer/Footer.js new file mode 100644 index 00000000000..484be82dc32 --- /dev/null +++ b/components/footer/Footer.js @@ -0,0 +1,118 @@ +import Link from "next/link" +import AsyncAPILogoLight from "../AsyncAPILogoLight" +import Heading from "../typography/Heading" +import { socialMediaLinks, initiativeLinks } from "./FooterList" + +export default function Footer() { + return ( + + ) +} \ No newline at end of file diff --git a/components/footer/FooterList.js b/components/footer/FooterList.js new file mode 100644 index 00000000000..77bacb005c0 --- /dev/null +++ b/components/footer/FooterList.js @@ -0,0 +1,62 @@ +import IconTwitter from "../icons/Twitter"; +import IconGithub from "../icons/Github"; +import IconLinkedIn from "../icons/LinkedIn"; +import IconYoutubeGray from "../icons/YouTubeGray"; +import IconSlack from "../icons/Slack"; +import IconTwitch from "../icons/Twitch"; + +export const socialMediaLinks = [ + { + url: "https://twitter.com/AsyncAPISpec", + label: "Twitter", + icon: , + }, + { + url: "https://github.com/asyncapi", + label: "GitHub", + icon: , + }, + { + url: "https://linkedin.com/company/asyncapi", + label: "LinkedIn", + icon: , + }, + { + url: "https://youtube.com/asyncapi", + label: "YouTube", + icon: , + }, + { + url: "https://asyncapi.com/slack-invite", + label: "Slack", + icon: , + }, + { + url: "https://www.twitch.tv/asyncapi", + label: "Twitch", + icon: , + }, +]; + +export const initiativeLinks = [ + { + label: "About", + url: "/about", + }, + { + label: "Blog", + url: "/blog", + }, + { + label: "Shop", + url: "https://asyncapi.threadless.com", + }, + { + label: "Jobs", + url: "/jobs", + }, + { + label: "Brand", + url: "https://github.com/asyncapi/brand/blob/master/brand-guidelines/README.md", + }, +]; \ No newline at end of file diff --git a/components/layout/GenericLayout.js b/components/layout/GenericLayout.js index b5882f3e7a5..2aff0c1014e 100644 --- a/components/layout/GenericLayout.js +++ b/components/layout/GenericLayout.js @@ -1,7 +1,6 @@ import Head from '../Head'; import NavBar from '../navigation/NavBar'; import Container from './Container'; -import Footer from '../Footer'; import AnnouncementHero from '../campaigns/AnnoucementHero'; import StickyNavbar from '../navigation/StickyNavbar'; diff --git a/components/layout/GenericPostLayout.js b/components/layout/GenericPostLayout.js index 7ef0d630a54..d6aa1a4580e 100644 --- a/components/layout/GenericPostLayout.js +++ b/components/layout/GenericPostLayout.js @@ -4,13 +4,12 @@ import Head from '../Head' import GenericPostContext from '../../context/GenericPostContext' import NavBar from '../navigation/NavBar' import Container from './Container' -import Footer from '../Footer' import AnnouncementHero from '../campaigns/AnnoucementHero' import StickyNavbar from '../navigation/StickyNavbar' export default function GenericPostLayout({ post, children }) { if (!post) return - if (post.title === undefined & post.slug!="/about") throw new Error('Post title is required') + if (post.title === undefined & post.slug != "/about") throw new Error('Post title is required') const router = useRouter() @@ -21,7 +20,7 @@ export default function GenericPostLayout({ post, children }) { return ( - + diff --git a/components/layout/GenericWideLayout.js b/components/layout/GenericWideLayout.js index 3a9e068bbe8..c7fbb833e55 100644 --- a/components/layout/GenericWideLayout.js +++ b/components/layout/GenericWideLayout.js @@ -1,7 +1,5 @@ import Head from '../Head' import NavBar from '../navigation/NavBar' -import Container from './Container' -import Footer from '../Footer' import AnnouncementHero from '../campaigns/AnnoucementHero' import Row from './Row' diff --git a/components/layout/JobsLayout.js b/components/layout/JobsLayout.js index 3a55cce95d0..f4ff18be2e5 100644 --- a/components/layout/JobsLayout.js +++ b/components/layout/JobsLayout.js @@ -4,7 +4,6 @@ import Head from '../Head' import JobsContext from '../../context/JobsContext' import NavBar from '../navigation/NavBar' import Container from './Container' -import Footer from '../Footer' import JobSummary from '../JobSummary' import ApplyJobButton from '../buttons/ApplyJob' import StickyNavbar from '../navigation/StickyNavbar' diff --git a/cypress/test/footer/Footer.cy.js b/cypress/test/footer/Footer.cy.js new file mode 100644 index 00000000000..d0ad207ae64 --- /dev/null +++ b/cypress/test/footer/Footer.cy.js @@ -0,0 +1,42 @@ +import { mount } from '@cypress/react' +import Footer from '../../../components/footer/Footer' +import { socialMediaLinks, initiativeLinks } from '../../../components/footer/FooterList' + +describe('Footer component', () => { + beforeEach(() => { + mount() + }) + + it('renders initiative links', () => { + cy.get('[data-testid=Footer-initiative-links] a').should('have.length', initiativeLinks.length) + }) + + it('displays correct initiative link labels and URLs', () => { + cy.get('[data-testid=Footer-initiative-links] a').each(($link, index) => { + const { label, url } = initiativeLinks[index] + expect($link).to.have.text(label) + expect($link).to.have.attr('href', url) + }) + }) + + it('renders social media links', () => { + cy.get('[data-testid=Footer-social-media-links] a').should('have.length', socialMediaLinks.length) + }) + + it('displays correct social media link', () => { + cy.get('[data-testid=Footer-social-media-links] a').each(($link, index) => { + const { url } = socialMediaLinks[index] + expect($link).to.have.attr('href', url) + + }) + }) + it('displays the end content', () => { + cy.get('[data-testid="Footer-content"]').should('be.visible') + }) + + it('checks for logo and link associated with it', () => { + cy.get('[data-testid="Footer-logo-link"]').should('exist') + cy.get('[data-testid="Footer-logo-link"]').should('have.attr', 'href', '/') + + }) +}) diff --git a/pages/_app.js b/pages/_app.js index 2c7bdf7fc3d..7b3a41781ac 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -2,7 +2,7 @@ import Head from 'next/head'; import Layout from '../components/layout/Layout' import Banner from '../components/campaigns/Banner' import AppContext from '../context/AppContext' -import Footer from "../components/Footer"; +import Footer from '../components/footer/Footer' import { MDXProvider } from '../components/MDX'; import AlgoliaSearch from '../components/AlgoliaSearch'; import ScrollButton from '../components/buttons/ScrollButton'; diff --git a/pages/blog/index.js b/pages/blog/index.js index 763a5c66728..03e2ef01bb8 100644 --- a/pages/blog/index.js +++ b/pages/blog/index.js @@ -1,20 +1,12 @@ import { useContext, useState } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; -import NavBar from "../../components/navigation/NavBar"; -import Container from "../../components/layout/Container"; import BlogContext from "../../context/BlogContext"; import BlogPostItem from "../../components/navigation/BlogPostItem"; -import Footer from "../../components/Footer"; -import Head from "../../components/Head"; -import AnnouncementHero from "../../components/campaigns/AnnoucementHero"; import Filter from "../../components/navigation/Filter"; import Empty from "../../components/illustrations/empty"; import Heading from "../../components/typography/Heading"; -import StickyNavbar from "../../components/navigation/StickyNavbar" import Paragraph from "../../components/typography/Paragraph"; import TextLink from "../../components/typography/TextLink"; -import Button from "../../components/buttons/Button"; import GenericLayout from "../../components/layout/GenericLayout"; export default function BlogIndexPage() { diff --git a/pages/jobs/index.js b/pages/jobs/index.js index 5e6bb3646e4..0a06834d2e3 100644 --- a/pages/jobs/index.js +++ b/pages/jobs/index.js @@ -1,13 +1,8 @@ import { useContext, useState } from "react"; -import NavBar from "../../components/navigation/NavBar"; import JobsContext from "../../context/JobsContext"; import JobPostItem from "../../components/navigation/JobPostItem"; -import Footer from "../../components/Footer"; -import Head from "../../components/Head"; import Filter from "../../components/navigation/Filter"; -import AnnouncementHero from "../../components/campaigns/AnnoucementHero"; import Empty from "../../components/illustrations/empty"; -import StickyNavbar from "../../components/navigation/StickyNavbar" import Heading from "../../components/typography/Heading"; import Paragraph from "../../components/typography/Paragraph"; import TextLink from "../../components/typography/TextLink";