diff --git a/CHANGELOG.md b/CHANGELOG.md index 30d555ae..881930aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,8 @@ Unreleased - Sorting items in landing page [OEMC-24](https://vizzuality.atlassian.net/browse/OEMC-24?atlOrigin=eyJpIjoiZTlmNGE1Njk3MTRlNDNjMmExY2I3YmE1ZjUzMTBkYjIiLCJwIjoiaiJ9) - Alpha version tag added to site [OEMC-127](https://vizzuality.atlassian.net/browse/OEMC-127?atlOrigin=eyJpIjoiYzBiNGI0NDcwOGUzNGYzMzgzM2I1NWVhMWE0NjFkZjciLCJwIjoiaiJ9) - Functionality for returning from a geostory to its associated monitor [OEMC-121](https://vizzuality.atlassian.net/browse/OEMC-121?atlOrigin=eyJpIjoiNWY1OTkwZDNlMWNiNDA4M2JiOWM0NDNiODlkMDBlNmUiLCJwIjoiaiJ9) +- Links to social media (twitter, github and linkedin), link to "contact us" and "privacy policy" [OEMC-108](https://vizzuality.atlassian.net/browse/OEMC-108?atlOrigin=eyJpIjoiMTFhMjI4MmE1NjYzNDNiNmJlNWFlOGJjYWI4MjdhYjQiLCJwIjoiaiJ9) + ### Changed diff --git a/e2e/external-links.spec.ts b/e2e/external-links.spec.ts new file mode 100644 index 00000000..e6a2ee2d --- /dev/null +++ b/e2e/external-links.spec.ts @@ -0,0 +1,44 @@ +import { test } from '@playwright/test'; + +test.beforeEach(async ({ page }) => { + await page.goto('/', { waitUntil: 'load' }); +}); + +const socialLinks = [ + { + test: 'twitter-link', + href: 'https://twitter.com/i/flow/login?redirect_after_login=%2FEarthMonitorOrg', + }, + // mastodon: '', + { test: 'github-link', href: 'https://github.com/Open-Earth-Monitor' }, + // { test: 'tib-link', href: 'https://av.tib.eu/publisher/OpenGeoHub_Foundation' }, + { test: 'linkedin-link', href: 'https://www.linkedin.com/in/opengeohub]' }, +]; + +test.describe('external links', () => { + test('links to social media', async ({ page }) => { + for (const link of socialLinks) { + const Link = page.getByTestId(link['test']); + await Link.click(); + await page.waitForURL(link.href); + } + }); + + test('OEMC factsheet', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('OEMC-factsheet-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://cordis.europa.eu/project/id/101059548'); + }); + + test('OEMC conact us', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('contact-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://earthmonitor.org/contact-us/'); + }); + + test('OEMC privacy policy', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('privacy-policy-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://earthmonitor.org/privacy-policy/'); + }); +}); diff --git a/e2e/footer-links.spec.ts b/e2e/footer-links.spec.ts new file mode 100644 index 00000000..4cc654d1 --- /dev/null +++ b/e2e/footer-links.spec.ts @@ -0,0 +1,50 @@ +import { test, expect } from '@playwright/test'; + +test.beforeEach(async ({ page }) => { + await page.goto('/', { waitUntil: 'load' }); +}); + +const socialLinks = [ + { + test: 'twitter-link', + href: 'https://twitter.com/i/flow/login?redirect_after_login=%2FEarthMonitorOrg', + }, + // mastodon: '', + { test: 'github-link', href: 'https://github.com/Open-Earth-Monitor' }, + // { test: 'tib-link', href: 'https://av.tib.eu/publisher/OpenGeoHub_Foundation' }, + { test: 'linkedin-link', href: 'https://www.linkedin.com/in/opengeohub]' }, +]; + +test.describe('external links', () => { + test('links to social media', async ({ page }) => { + for (const link of socialLinks) { + const Link = page.getByTestId(link['test']); + await Link.click(); + await page.waitForURL(link.href); + } + }); + + test('OEMC factsheet', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('OEMC-factsheet-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://cordis.europa.eu/project/id/101059548'); + }); + + test('OEMC contact us', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('contact-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://earthmonitor.org/contact-us/'); + }); + + test('OEMC privacy policy', async ({ page }) => { + const OEMCFactsheet = page.getByTestId('privacy-policy-link'); + await OEMCFactsheet.click(); + await page.waitForURL('https://earthmonitor.org/privacy-policy/'); + }); +}); + +test('Disclaimer', async ({ page }) => { + const disclaimerTrigger = page.getByTestId('disclaimer'); + await disclaimerTrigger.click(); + await expect(page.getByTestId('disclaimer-content')).toBeVisible(); +}); diff --git a/src/components/footer/constants.ts b/src/components/footer/constants.ts new file mode 100644 index 00000000..373c7003 --- /dev/null +++ b/src/components/footer/constants.ts @@ -0,0 +1,4 @@ +export const CONTROL_BUTTON_STYLES = + 'h-[25px] w-[25px] text-secondary-800 active:bg-brand-200 hover:text-secondary-500'; + +export const CONTROL_ICON_STYLES = 'h-5 w-5 self-baseline'; diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index a4c8b6aa..869688fe 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -1,66 +1,120 @@ 'use client'; -import Image from 'next/image'; -// import { BiLogoMedium } from 'react-icons/bi'; -import { RiTwitterXLine } from 'react-icons/ri'; +import { FC } from 'react'; + +import Image from 'next/image'; -import { cn } from '@/lib/classnames'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, + DialogClose, +} from '@/components/ui/dialog'; -import { CONTROL_BUTTON_STYLES, CONTROL_ICON_STYLES } from '@/components/map/controls/constants'; +import SocialMedia from './social-media'; -export const Footer: React.FC = () => { +export const Footer: FC = () => { return ( -