Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
links to social media
Browse files Browse the repository at this point in the history
  • Loading branch information
mluena committed Nov 15, 2023
1 parent 8756ac5 commit 3c87060
Show file tree
Hide file tree
Showing 8 changed files with 340 additions and 59 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ Unreleased
- 404 - error management [OEMC-81](https://vizzuality.atlassian.net/browse/OEMC-81?atlOrigin=eyJpIjoiNWZkNTYwMjVkZGVjNDAwZGE2YWI3ZDgwMzgzOTRjMjEiLCJwIjoiaiJ9)
- 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)
- 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

Expand Down
44 changes: 44 additions & 0 deletions e2e/external-links.spec.ts
Original file line number Diff line number Diff line change
@@ -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/');
});
});
50 changes: 50 additions & 0 deletions e2e/footer-links.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
4 changes: 4 additions & 0 deletions src/components/footer/constants.ts
Original file line number Diff line number Diff line change
@@ -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';
162 changes: 108 additions & 54 deletions src/components/footer/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<footer className="relative flex w-full bg-brand-400 py-10 outline-none">
<div className="m-auto flex w-full max-w-[1200px] items-center space-x-14">
<div className="flex items-center">
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/EarthMonitorOrg"
title="Open-Earth-Monitor project"
aria-label="Open-Earth-Monitor project twitter"
>
<div className={cn(CONTROL_BUTTON_STYLES.default, 'h-[28px] w-[28px]')}>
<RiTwitterXLine className={CONTROL_ICON_STYLES.default} />
</div>
</a>
<footer className="relative flex w-full bg-brand-400 font-inter outline-none">
<div className="m-auto flex w-full max-w-[1200px] flex-col items-center divide-y divide-secondary-900">
<div className="flex w-full flex-1 justify-between py-7">
<div className="flex items-center space-x-3">
<span className="text-xs text-secondary-700">Powered by</span>
<Image
alt="Open-earth-monitor"
src="/images/OEM-logo.svg"
width={147}
height={40}
className="inline-block"
/>
</div>
<div className="flex flex-1 cursor-pointer items-center justify-center space-x-10 text-sm font-medium text-secondary-500">
<Dialog>
<DialogTrigger asChild data-testid="disclaimer">
<div>Disclaimer</div>
</DialogTrigger>
<DialogContent className="top-1/2 w-[665px] -translate-y-[50%] transform bg-secondary-500 p-10 text-brand-500">
<DialogHeader className="space-y-5">
<DialogTitle asChild>
<header className="flex items-center justify-between">
<h2 className="text-5xl font-bold">Disclaimer</h2>
</header>
</DialogTitle>
<DialogDescription asChild>
<div className="space-y-3" data-testid="disclaimer-content">
<p>
Funded by the European Union. Views and opinions expressed are however those
of the author(s) only and do not necessarily reflect those of the European
Union or European Commission.
</p>
<p>
Neither the European Union nor the granting authority can be held
responsible for them. The data is provided “as is”. Open-Earth-Monitor
Cyberinfrastructure (OEMC) project consortium and its suppliers and
licensors hereby disclaim all warranties of any kind, express or implied,
including, without limitation, the warranties of merchantability, fitness
for a particular purpose and non-infringement.
</p>
<p>
Neither OEMC project Consortium nor its suppliers and licensors, makes any
warranty that the Website will be error free or that access thereto will be
continuous or uninterrupted. You understand that you download from, or
otherwise obtain content or services through, the Website at your own
discretion and risk.
</p>
<DialogClose className="right-10 flex items-center border-none text-xs font-medium uppercase tracking-[0.96px]">
Close
</DialogClose>
</div>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>

{/* <a
target="_blank"
rel="noopener noreferrer"
href="https://opengeohub.medium.com/"
title="OpenGeoHub project"
className="align-baseline"
aria-label="OpenGeoHub in Medium"
>
<div className={cn(CONTROL_BUTTON_STYLES.default, 'h-[28px] w-[28px]')}>
<BiLogoMedium className={CONTROL_ICON_STYLES.default} />
</div>
</a> */}
<a
target="_blank"
rel="noopener noreferrer"
href="https://earthmonitor.org/privacy-policy/"
title="OEMC privacy policy"
className="align-baseline"
aria-label="OEMC privacy policy"
data-testid="privacy-policy-link"
>
Privacy Policy
</a>
<a
target="_blank"
rel="noopener noreferrer"
href="https://earthmonitor.org/contact-us/"
title="OEMC contact page"
className="align-baseline"
aria-label="OEMC contact page"
data-testid="contact-link"
>
Contact us
</a>
</div>
<SocialMedia />
</div>
<div className="flex flex-1 justify-start space-x-14">
<div className="flex items-center space-x-2">
<Image src="/images/landing/EU.svg" width={52} height={35} alt="eu" />
<div className="flex w-full items-center space-x-2">
<Image src="/images/landing/EU.svg" width={52} height={35} alt="eu" />

<span className="block max-w-[376px] flex-wrap pr-2 text-[10px] leading-3">
This project has received funding from the European Union&apos;s Horizon Europe
research and innovation programme under{' '}
<a
href="https://cordis.europa.eu/project/id/101059548"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
grant agreement No. 101059548.
</a>
</span>
</div>
{/* <div className="flex space-x-4 text-xs font-medium">
<div>Attributions</div>
<div>Disclaimer</div>
<div>Terms of Use</div>
<div>Privacy Policy</div>
</div> */}
<span className="block max-w-[376px] flex-1 flex-wrap space-x-2 py-7 text-[10px] leading-3">
This project has received funding from the European Union&apos;s Horizon Europe research
and innovation programme under{' '}
<a
href="https://cordis.europa.eu/project/id/101059548"
target="_blank"
rel="noopener noreferrer"
className="underline"
data-test-id="OEMC-factsheet-link"
>
grant agreement No. 101059548.
</a>
</span>
</div>
</div>
</footer>
Expand Down
Loading

0 comments on commit 3c87060

Please sign in to comment.