diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..370461e035 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +test +public diff --git a/package.json b/package.json index 8ad059edd6..341fe02550 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "test": "yarn lint && yarn jest", "test-watch": "yarn jest --watch", "test-ci": "yarn test --coverage && codecov", - "lint": "eslint . --ext .js,.ts,.tsx --ignore-pattern test/", + "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "yarn lint --fix", "serve": "yarn build && clear && gatsby serve" }, diff --git a/src/components/footer.tsx b/src/components/footer.tsx new file mode 100644 index 0000000000..191a837267 --- /dev/null +++ b/src/components/footer.tsx @@ -0,0 +1,240 @@ +import React, { useState } from 'react'; +import { Link } from 'gatsby'; +import { css, SerializedStyles } from '@emotion/core'; + +const dropDownData = [ + 'العربية', + 'Catalan', + 'Deutsche', + 'English', + 'Español', + 'Français', + 'Galego', + 'हिंदी', + 'زبان فارسی', +]; + +const DropDownContainer: SerializedStyles = css` + position: absolute; + display: flex; + flex-direction: column; + margin: 10px; + background-color: var(--color-fill-app); + top: calc(-40px * ${dropDownData.length} - 40px); + left: -25px; + box-shadow: 0 5px 15px -5px var(--color-border-primary); + border-bottom: 2px solid var(--color-brand-primary); + z-index: 999; + &::after { + content: ''; + position: absolute; + bottom: -10px; + transform: rotate(45deg); + left: calc(50% - 10px); + width: 15px; + height: 15px; + z-index: -1; + background-color: var(--color-fill-app); + border-right: 2px solid var(--color-brand-primary); + border-bottom: 2px solid var(--color-brand-primary); + } +`; + +const DropDownContainerButton: SerializedStyles = css` + border: none; + width: 120px; + padding: 10px; + height: 40px; + color: var(--color-text-primary); + &:hover { + background-color: var(--brand2); + color: var(--black9); + } +`; + +const DropDownButton: SerializedStyles = css` + border: none; + color: var(--color-text-accent); +`; + +export interface DropDownState { + active: number; + isOpen: boolean; + shouldDropDownBlur: boolean; +} + +const FooterDropDown: React.FC = (): JSX.Element => { + const [state, setState] = useState({ + active: 3, // Index of currently selected element. + isOpen: false, + shouldDropDownBlur: true, + }); + + const handleMouseEvent = (event: React.MouseEvent): void => { + if (event.type === 'mouseenter') { + setState({ ...state, shouldDropDownBlur: false }); + } else { + setState({ ...state, shouldDropDownBlur: true }); + } + }; + + const handleOnClick = (): void => { + setState({ + ...state, + isOpen: !state.isOpen, + }); + }; + + const handleOnBlur = (): void => { + if (state.shouldDropDownBlur && state.isOpen) { + setState({ + ...state, + isOpen: !state.isOpen, + }); + } + }; + + const handleOnSelectLang = (index: number): void => { + setState({ + ...state, + active: index, + isOpen: !state.isOpen, + shouldDropDownBlur: true, + }); + }; + + return ( +
+ {state.isOpen && ( +
+ {dropDownData.map( + (data: string, index: number): JSX.Element => ( + + ) + )} +
+ )} + +
+ ); +}; + +function Footer(): JSX.Element { + return ( +
+
    +
  • + +
    • +
  • + + Trademark Policy + +
    • +
  • + + Privacy Policy + +
    • +
  • + + Code of Conduct + +
    • +
  • + + Security Reporting + +
    • +
  • + + About + +
    • +
  • + + Blog + +
    • +
+ +
+ ); +} + +export default Footer; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 283db39a2b..4ed69bff56 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -2,6 +2,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; import 'prismjs/themes/prism-okaidia.css'; import React from 'react'; import Header from './header'; +import Footer from './footer'; import '../styles/tokens.css'; import '../styles/layout.css'; import '../styles/mobile.css'; @@ -13,7 +14,9 @@ interface Props { title?: string; description?: string; img?: string; - href: string; + href?: string; + showFooter?: boolean; + location?: any; darkModeController?: DarkModeController; } @@ -22,6 +25,8 @@ const Layout = ({ title, description, img, + location, + showFooter = true, darkModeController = new DarkModeController(), }: Props): JSX.Element => { return ( @@ -29,6 +34,7 @@ const Layout = ({
{children} + {showFooter &&