Merge pull request #569 from Klimatbyran/staging

Release to production
Klimatbyran · May 14, 2024 · 1d48d0e · 1d48d0e
2 parents c2611e9 + b435f30
commit 1d48d0e
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 93 deletions.
diff --git a/__tests__/components/CompanyView.test.tsx b/__tests__/components/CompanyView.test.tsx
@@ -5,6 +5,8 @@ import { render, screen, act } from '@testing-library/react'
 import StartPage from '../../pages/index'
 import StyledComponentsWrapper from '../utils/StyledComponentsWrapper'
 
+vi.mock('../../public/icons/arrow-right-bold-green.svg', () => ({ default: () => 'svg' }))
+
 vi.mock('next-i18next', () => ({
   useTranslation: vi.fn(() => ({
     t: (str: string) => str,

diff --git a/__tests__/components/RegionalView.test.tsx b/__tests__/components/RegionalView.test.tsx
@@ -12,6 +12,7 @@ vi.mock('../../public/icons/list.svg', () => ({ default: () => 'svg' }))
 vi.mock('../../public/icons/map.svg', () => ({ default: () => 'svg' }))
 vi.mock('../../public/icons/arrow.svg', () => ({ default: () => 'svg' }))
 vi.mock('../../public/icons/arrow-down.svg', () => ({ default: () => 'svg' }))
+vi.mock('../../public/icons/arrow-right-bold-green.svg', () => ({ default: () => 'svg' }))
 
 vi.mock('next-i18next', () => ({
   useTranslation: vi.fn(() => ({

diff --git a/components/ComparisonTable.tsx b/components/ComparisonTable.tsx
@@ -13,6 +13,7 @@ import {
 import type { ColumnDef } from '@tanstack/react-table'
 
 import { devices } from '../utils/devices'
+import ArrowIcon from '../public/icons/arrow-right-bold-green.svg'
 
 const StyledTable = styled.table`
   --margin: 4px;
@@ -116,6 +117,10 @@ const TableRow = styled.tr<{ interactive?: boolean, showBorder?: boolean, isExpa
   background: ${({ isExpanded, theme }) => (isExpanded ? `${theme.black}88` : '')};
 `
 
+const SortingIcon = styled(ArrowIcon)`
+  color: ${({ theme }) => theme.midGreen};
+`
+
 type TableProps<T extends object> = {
   data: T[]
   columns: ColumnDef<T>[]
@@ -220,10 +225,8 @@ function ComparisonTable<T extends object>({
                   <TableHeaderInner data-sorting={header.column.getIsSorted()}>
                     {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                     {currentSort ? (
-                      <img
-                        src="/icons/arrow-right-bold-green.svg"
+                      <SortingIcon
                         style={{ transform: `scale(0.6) rotate(${currentSort === 'desc' ? '' : '-'}90deg)` }}
-                        alt=""
                       />
                     ) : null}
                   </TableHeaderInner>

diff --git a/components/Footer/FooterNewsletterForm.tsx b/components/Footer/FooterNewsletterForm.tsx
@@ -15,46 +15,52 @@ const Container = styled.div`
   border-radius: 8px;
   color: ${({ theme }) => theme.offWhite};
   flex-direction: column;
-  margin-bottom: 40px;
+  margin: 0 auto 40px;
+  max-width: 500px;
 
   @media only screen and (${devices.tablet}) {
     padding: 32px 32px 16px 32px;
     margin-bottom: 80px;
+    max-width: unset;
   }
 `
 
 const HorizontalContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-
-  @media only screen and (${devices.tablet}) {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding-bottom: 1rem;
+
+  @media screen and (${devices.tablet}) {
+    grid-template-columns: 1fr 1fr;
+    padding: 0;
   }
 `
 
 const StyledParagraph = styled(Paragraph)`
   font-family: 'Anonymous Pro';
-  font-size: 14px;
-  flex-grow: 1;
+  font-size: 16px;
+`
 
-  @media only screen and (${devices.tablet}) {
-    width: 340px;
-  }
+const PrivacyInfo = styled(StyledParagraph)`
+  font-size: 14px;
 `
 
 const StyledForm = styled.form`
+  --form-height: 40px;
+
   display: flex;
   gap: 0.5rem;
-  padding-bottom: 0.5rem;
-  margin: 1rem 0;
-  border-bottom: 1px solid ${({ theme }) => theme.midGreen};
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  flex-grow: 1;
+  align-self: center;
+  justify-self: center;
+  max-width: 400px;
+  background: white;
+  border-radius: 4px;
+  height: var(--form-height);
+  color: ${({ theme }) => theme.black};
 `
 
 const VisuallyHiddenLabel = styled.label`
@@ -69,43 +75,38 @@ const VisuallyHiddenLabel = styled.label`
 `
 
 const StyledInput = styled.input`
-  background: ${({ theme }) => theme.darkGreenOne};
   border: none;
-  color: ${({ theme }) => theme.midGreen};
   font-size: 16px;
   font-family: 'Borna';
   width: 100%;
   padding: 0.5rem;
+  background: transparent;
+  height: var(--form-height);
 
   ::placeholder,
   ::-webkit-input-placeholder {
-    color: ${({ theme }) => theme.midGreen};
+    color: ${({ theme }) => theme.black};
   }
   :-ms-input-placeholder {
-    color: ${({ theme }) => theme.midGreen};
-  }
-
-  @media only screen and (${devices.tablet}) {
-    min-width: 340px;
+    color: ${({ theme }) => theme.black};
   }
 `
 
 const ArrowButton = styled.button`
   background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--form-height);
   border: none;
-  right: 0;
   cursor: pointer;
   padding: 0.25rem;
 `
 
 const EmailValidation = styled.div`
   align-items: left;
-  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
   font-weight: bold;
-
-  @media only screen and (${devices.tablet}) {
-    width: 365px;
-  }
 `
 
 type Props = {
@@ -150,37 +151,33 @@ const NewsletterForm: FC<Props> = ({ status, onValidated }) => {
     <Container id="newsletter">
       <H5>{t('common:footer.signup-form.title')}</H5>
       <HorizontalContainer>
-        <div>
-          <StyledParagraph>
-            {t('common:footer.signup-form.info')}
-          </StyledParagraph>
-        </div>
-        <div>
-          <StyledForm onSubmit={handleFormSubmit}>
-            {showThanks ? (
-              <EmailValidation>{t('common:footer.signup-form.thanks')}</EmailValidation>
-            ) : (
-              <>
-                <VisuallyHiddenLabel htmlFor="signup">{t('common:footer.signup-form.label')}</VisuallyHiddenLabel>
-                <StyledInput
-                  onChange={(event) => setEmail(event.target.value)}
-                  type="email"
-                  placeholder={t('common:footer.signup-form.placeholder')}
-                  value={email}
-                  required
-                  disabled={showThanks}
-                  id="signup"
-                />
-                <ArrowButton>
-                  <img src="/icons/arrow-right-bold-green.svg" alt="Arrow-icon" />
-                </ArrowButton>
-              </>
-            )}
-          </StyledForm>
-        </div>
-
-        <Markdown components={{ p: StyledParagraph }}>{t('common:footer.privacyInfo')}</Markdown>
+        <StyledParagraph>
+          {t('common:footer.signup-form.info')}
+        </StyledParagraph>
+        <StyledForm onSubmit={handleFormSubmit}>
+          {showThanks ? (
+            <EmailValidation>{t('common:footer.signup-form.thanks')}</EmailValidation>
+          ) : (
+            <>
+              <VisuallyHiddenLabel htmlFor="signup">{t('common:footer.signup-form.label')}</VisuallyHiddenLabel>
+              <StyledInput
+                onChange={(event) => setEmail(event.target.value)}
+                type="email"
+                placeholder={t('common:footer.signup-form.placeholder')}
+                value={email}
+                required
+                disabled={showThanks}
+                id="signup"
+              />
+              <ArrowButton>
+                <img src="/icons/arrow-right-bold-green.svg" alt="Arrow-icon" />
+              </ArrowButton>
+            </>
+          )}
+        </StyledForm>
       </HorizontalContainer>
+
+      <Markdown components={{ p: PrivacyInfo }}>{t('common:footer.privacyInfo')}</Markdown>
     </Container>
   )
 }

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,23 +1,22 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { devices } from '../utils/devices'
 
 const HeaderContainer = styled.header`
+  --header-padding: 0.5rem;
+  --btn-size: 2rem;
+
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   align-items: center;
-  padding: 16px;
+  padding: var(--header-padding);
   background-color: ${({ theme }) => theme.midGreen};
   z-index: 1000;
-
-  @media only screen and (${devices.mobile}) {
-    padding: 8px;
-  }
 `
 
 const LogoContainer = styled.div`
@@ -26,6 +25,8 @@ const LogoContainer = styled.div`
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
+  height: var(--btn-size);
+  padding-top: 4px;
 `
 
 const NavigationList = styled.ul`
@@ -34,8 +35,10 @@ const NavigationList = styled.ul`
   @media only screen and (${devices.laptop}) {
     list-style: none;
     display: flex;
-    gap: 2rem;
+    gap: 1.5rem;
     margin-left: auto;
+    height: var(--btn-size);
+    align-items: center;
   }
 `
 
@@ -56,6 +59,7 @@ const NavigationLink = styled.a`
 const HamburgerMenu = styled.div`
   display: block;
   margin-left: auto;
+  height: var(--btn-size);
 
   @media only screen and (${devices.laptop}) {
     display: none;
@@ -65,6 +69,8 @@ const HamburgerMenu = styled.div`
 const HamburgerButton = styled.button`
   border: none;
   background: transparent;
+  height: var(--btn-size);
+  width: var(--btn-size);
 `
 
 const FullScreenMenu = styled.div`
@@ -80,17 +86,21 @@ const FullScreenMenu = styled.div`
   padding: 3rem 1rem 1rem 1rem;
 
   @media only screen and (${devices.tablet}) {
-    padding-top: 4rem;
+    padding-top: 3rem;
   }
 `
 
 const CloseButtonContainer = styled.div`
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: var(--header-padding);
+  right: var(--header-padding);
+  height: var(--btn-size);
+  width: var(--btn-size);
 
-  @media only screen and (${devices.tablet}) {
-    top: 1.2rem;
+  & ${HamburgerButton} {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
   }
 `
 
@@ -125,6 +135,18 @@ function Header() {
   const [menuOpen, setMenuOpen] = useState(false)
   const { t } = useTranslation()
 
+  useEffect(() => {
+    const closeMenuListener = (event: KeyboardEvent) => {
+      if (menuOpen && event.key === 'Escape') {
+        setMenuOpen(false)
+      }
+    }
+
+    window.addEventListener('keydown', closeMenuListener)
+
+    return () => window.removeEventListener('keydown', closeMenuListener)
+  }, [menuOpen, setMenuOpen])
+
   const navigationItems: NavItem[] = [
     { href: '/kallor-och-metod', label: t('common:components.Header.method') },
     { href: '/om-oss', label: t('common:components.Header.about') },
@@ -140,7 +162,7 @@ function Header() {
           <Image
             src="/logos/klimatkollen_logo_black.svg"
             width="150"
-            height="30"
+            height="32"
             alt="Klimatkollen logotyp"
           />
         </LogoContainer>
@@ -155,13 +177,13 @@ function Header() {
       </NavigationList>
       <HamburgerMenu>
         <HamburgerButton type="button" onClick={() => setMenuOpen(!menuOpen)}>
-          <Image src="/icons/menu.svg" width="30" height="30" alt={t('common:components.Header.menu')} />
+          <Image src="/icons/menu.svg" width="32" height="32" alt={t('common:components.Header.menu')} />
         </HamburgerButton>
         {menuOpen && (
           <FullScreenMenu>
             <CloseButtonContainer>
               <HamburgerButton type="button" onClick={() => setMenuOpen(false)}>
-                <Image src="/icons/close_round.svg" width="20" height="20" alt={t('common:actions.close')} />
+                <Image src="/icons/close_round.svg" width="32" height="32" alt={t('common:actions.close')} />
               </HamburgerButton>
             </CloseButtonContainer>
             <Separator />

diff --git a/components/ToggleButton.tsx b/components/ToggleButton.tsx
@@ -25,10 +25,10 @@ const ToggleBtn = styled.button`
 
 const ToggleText = styled.p`
   margin-right: 8px;
-  font-size: 14px;
+  font-size: 12px;
   font-family: 'Borna';
-  @media only screen and (${devices.mobile}) {
-    font-size: 12px;
+  @media only screen and (${devices.tablet}) {
+    font-size: 14px;
   }
 `
 

diff --git a/data/companies/company-data.json b/data/companies/company-data.json
diff --git a/data/companies/companyData.xlsx b/data/companies/companyData.xlsx
diff --git a/data/companies/company_emission_calculations.py b/data/companies/company_emission_calculations.py
@@ -17,6 +17,6 @@
 selected_df.replace('n.a', None, inplace=True)
 
 # Write the DataFrame to a JSON file
-selected_df.to_json("company-data.json", orient="records")
+selected_df.to_json("company-data.json", orient="records", force_ascii=False)
 
 print('--- Company emissions data updated ---')