Deploy to production (#599)

* updated test of smhi data focusing on the right columns being in the datafile (#580) * add all numeric columns to historical emissions (#573) * delete old data output files and remove consumption data to excel (#575) * Feat/make emission calculations tests non-dependent on last year with SMHI data (#586) * update last year w smhi data and cement deduction values for 2022 * update smhi test files * make tests work regardless of last year with smhi data * change from year 2022 to 2021 (to be introduced in later pr) * add 2022 to smhi test * Feature/improved table ux (#567) * Allow closing the main menu by pressing the Escape key * Replace devices.mobile (which used max-width) with other breakpoints. This makes sure all breakpoints are consistent and all media queries should be written with a mobile-first approach. * Ensure hamburger menu has consistent size and positioning for all screen sizes * Change breakpoint size to standard value, since it was only used in one place * Ensure consistent height for the Header. Also improve vertical alignment for logo. Also make desktop navigation appear already for smaller laptop screens, to make give a better UX. * Improve spacing for the RegionalView * WIP: Make the CompanyView use the page scroll * Fix CompanyView table header positioning * Use full page scroll for RegionalView table * Update copy to match new version * Alternative 1 for CompanyView table * Alternative 2 for CompanyView table * Add sticky footer for RegionalView too * Fix map height for RegionalView * Remove unused calc() * Attempt to simplify CSS calculations to hopefully fix iOS positioning problems * Simplify copy to save space * WIP: experiment with IntersectionObserver to work around position sticky not working for `thead` elements in Safari * Override tough-cookie dependency to remove Node.js deprecation warning in Node >= 21 * Mock IntersectionObserver to fix tests for CompanyView and RegionalView * Try if inset-block-start works better for sticky thead * FINALLY! Fixex position sticky in Safari 17. This already worked in older versions of Safari and all other browsers, but for some reason Safari 17 seems to have a buggy implementation. * Cleanup WIP code and comments * Cleanup tests and import * Add webkit prefix for increased backwards compatibility * Fixes #463 (#579) * removed the unneeded Borna font assets(#463) * Keep Borna font files used for the site, and remove other files * Remove unintended changes --------- Co-authored-by: Narges <nasadnajafi@righthub.com> Co-authored-by: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> * fix words written twice (#595) * fix words written twice * Update source data file too --------- Co-authored-by: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> * show map view first (#597) * Social links update (#578) * Social links update Added links with corresponding icons to Klimatkollen's profile on Facebook and Instagram. * Discord logo Fixed dimensions * Update FooterSocialLinks.tsx * Added only Instagram icon and link * Update company data (#601) * Add an issue template for better issues. (#598) Add an issue template for better issues. * Fix test after changing the default view for RegionalView (#602) * Fix: #528 Make map legend floating and add background color. (#532) * experiment with map labels * feat: floating titlecontainer with background * fix: hide map pegend when in list view * chore: formatting * Update styles * Allow scrolling even when the MapLabels are on top to improve navigation on mobile This sometimes makes the map labels show beneath, but overall this is an UX improvement for mobile users which makes it worth it. --------- Co-authored-by: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> * reverse climate data to earlier version (#604) * Increase table footer font size on larger screens (#605) * Render ToggleButton with styled-components-wrapper to fix tests (#606) --------- Co-authored-by: Mathias Bergqvist <mthbqv@gmail.com> Co-authored-by: Elvira <elvbom@users.noreply.github.com> Co-authored-by: N-Asadnajafi <51734450+N-Asadnajafi@users.noreply.github.com> Co-authored-by: Narges <nasadnajafi@righthub.com> Co-authored-by: Larissa Lang <126619240+lalarus@users.noreply.github.com> Co-authored-by: Lasse2500 <70321631+Lasse2500@users.noreply.github.com> Co-authored-by: Ludvig Janiuk <ludvig.janiuk@gmail.com> Co-authored-by: SimonAM <simonarnemattsson@gmail.com>
Klimatbyran · May 29, 2024 · 985046b · 985046b
1 parent 6455afe
commit 985046b
Show file tree

Hide file tree

Showing 83 changed files with 532 additions and 8,206 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Report an bug on klimatkollen.se
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what you think is wrong with the side, the data, or anything related.
+
+**To Reproduce**
+How can someone else observe the problem? Give concrete steps, e.g.:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/enhancement.md b/.github/ISSUE_TEMPLATE/enhancement.md
@@ -0,0 +1,30 @@
+---
+name: Enhancement
+about: An improvement to be made to Klimatkollen
+title: Short summary
+labels: ''
+assignees: ''
+
+---
+
+**Description**
+What would you like to be done?
+
+**Motivation**
+What goals for klimatkollen would this help achieve?
+
+**Definition of Done**
+Clarify how one can tell that the issue is completed. What behavior is in place / how does the code or data look like?
+
+**When should it be done?**
+Is it urgent? Any relevant dates to refer to? Does other work depend on it?
+
+**Contact person**
+Who can answer questions about the implementation?
+
+In addition to the Definition of Done, the following always apply:
+ - Tests, building, and linting passes
+ - No new warnings are introduced
+ - User experience is not reduced
+ - Code is well formatted and readable
+See doc/contributing.md.
diff --git a/Theme.tsx b/Theme.tsx
@@ -1,7 +1,140 @@
 import { ReactNode } from 'react'
 import { ThemeProvider } from 'styled-components'
 
+const colors2024 = {
+  gray: {
+    50: '#F7F7F7',
+    100: '#E1E1E1',
+    150: '#C3C3C3',
+    200: '#A5A5A5',
+    250: '#878787',
+    300: '#444444',
+    350: '#5B5B5B',
+    400: '#717171',
+    500: '#2E2E2E',
+    600: '#272727',
+    650: '#202020',
+    700: '#191919',
+    750: '#121212',
+    800: '#0E0E0E',
+    850: '#090909',
+    900: '#050505',
+    950: '#000000',
+  },
+  orange: {
+    50: '#FEE7CD',
+    100: '#FEDBB4',
+    150: '#FDCF9A',
+    200: '#FDC381',
+    250: '#FDB768',
+    300: '#FBAD59',
+    350: '#F9A349',
+    400: '#F6993A',
+    500: '#F48F2A',
+    600: '#E38320',
+    650: '#D37715',
+    700: '#C26B0B',
+    750: '#B25F00',
+    800: '#A05500',
+    850: '#8E4B00',
+    900: '#7D4100',
+    950: '#6B3700',
+  },
+  blue: {
+    50: '#D4E7F7',
+    100: '#C5DFFA',
+    150: '#B6DAFB',
+    200: '#A7D5FD',
+    250: '#99CFFF',
+    300: '#96CDFD',
+    350: '#79B7F0',
+    400: '#69ACE9',
+    500: '#59A0E1',
+    600: '#4B90CB',
+    650: '#3D81B5',
+    700: '#2E729E',
+    750: '#206288',
+    800: '#1D577A',
+    850: '#1A4C6B',
+    900: '#16415D',
+    950: '#13364E',
+  },
+  green: {
+    50: '#F1FFCC',
+    100: '#E7FEA5',
+    150: '#E3FD95',
+    200: '#DEFD86',
+    250: '#D5FD63',
+    300: '#CDFA4C',
+    350: '#C5F735',
+    400: '#BCF51D',
+    500: '#AAE506',
+    600: '#9AD006',
+    650: '#8BBB06',
+    700: '#7CA605',
+    750: '#6C9105',
+    800: '#608009',
+    850: '#556E0E',
+    900: '#495D12',
+    950: '#3D4B16',
+  },
+  pink: {
+    50: '#FAE1E9',
+    100: '#F5C6D4',
+    150: '#F3B9CB',
+    200: '#F0ADC1',
+    250: '#EEA0B7',
+    300: '#EF95B0',
+    350: '#EF8AA9',
+    400: '#F080A1',
+    500: '#F0759A',
+    600: '#DA698B',
+    650: '#C35D7C',
+    700: '#AD516C',
+    750: '#97455D',
+    800: '#8E3D55',
+    850: '#85364D',
+    900: '#7C2E45',
+    950: '#73263D',
+  },
+}
+
+const namedColors2024 = {
+  white: colors2024.gray[50],
+  gray: colors2024.gray[250],
+  black1: colors2024.gray[500],
+  black2: colors2024.gray[750],
+  black3: colors2024.gray[950],
+
+  orange1: colors2024.orange[50],
+  orange2: colors2024.orange[250],
+  orange3: colors2024.orange[500],
+  orange4: colors2024.orange[750],
+  orange5: colors2024.orange[950],
+
+  blue1: colors2024.blue[50],
+  blue2: colors2024.blue[250],
+  blue3: colors2024.blue[500],
+  blue4: colors2024.blue[750],
+  blue5: colors2024.blue[950],
+
+  green1: colors2024.green[50],
+  green2: colors2024.green[250],
+  green3: colors2024.green[500],
+  green4: colors2024.green[750],
+  green5: colors2024.green[950],
+
+  pink1: colors2024.pink[50],
+  pink2: colors2024.pink[250],
+  pink3: colors2024.pink[500],
+  pink4: colors2024.pink[750],
+  pink5: colors2024.pink[950],
+}
+
 export const colorTheme = {
+  newColors: namedColors2024,
+  huePalette: colors2024,
+
   black: '#181818',
   lightBlack: '#262626',
   grey: '#939393',

diff --git a/__tests__/components/RegionalView.test.tsx b/__tests__/components/RegionalView.test.tsx
@@ -94,11 +94,11 @@ describe('RegionalView', () => {
   })
 
   it('changes view mode when toggle button is clicked', () => {
-    const toggleButton = screen.getByText('startPage:toggleView.list')
+    const toggleButton = screen.getByText('startPage:toggleView.map')
     act(() => {
       fireEvent.click(toggleButton)
     })
-    expect(screen.getByText('startPage:toggleView.map')).toBeInTheDocument()
+    expect(screen.getByText('startPage:toggleView.list')).toBeInTheDocument()
   })
 
   it('handles dataset change', () => {

diff --git a/__tests__/components/ToggleButton.test.tsx b/__tests__/components/ToggleButton.test.tsx
@@ -1,27 +1,28 @@
 import { render, fireEvent, screen } from '@testing-library/react'
 import ToggleButton from '../../components/ToggleButton'
+import StyledComponentsWrapper from '../utils/StyledComponentsWrapper'
 
 describe('ToggleButton', () => {
   it('should render the ToggleButton component', () => {
-    const { container } = render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    const { container } = render(<ToggleButton text="Test" icon={<span>Icon</span>} />, { wrapper: StyledComponentsWrapper })
     expect(container).toBeInTheDocument()
   })
 
   it('should render the text provided', () => {
-    render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} />, { wrapper: StyledComponentsWrapper })
     const textElement = screen.getByText('Test')
     expect(textElement).toBeInTheDocument()
   })
 
   it('should render the icon provided', () => {
-    render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} />, { wrapper: StyledComponentsWrapper })
     const iconElement = screen.getByText('Icon')
     expect(iconElement).toBeInTheDocument()
   })
 
   it('should call handleClick when clicked', () => {
     const handleClick = vi.fn()
-    render(<ToggleButton text="Test" icon={<span>Icon</span>} handleClick={handleClick} />)
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} handleClick={handleClick} />, { wrapper: StyledComponentsWrapper })
     const buttonElement = screen.getByRole('button')
     fireEvent.click(buttonElement)
     expect(handleClick).toHaveBeenCalled()

diff --git a/__tests__/utils/StyledComponentsWrapper.tsx b/__tests__/utils/StyledComponentsWrapper.tsx
@@ -2,13 +2,17 @@ import React from 'react'
 import { StyleSheetManager } from 'styled-components'
 import isPropValid from '@emotion/is-prop-valid'
 
+import Theme from '../../Theme'
+
 /**
  * Make sure styled-components only render valid props to the DOM.
  */
 function StyledComponentsWrapper({ children }: { children: React.ReactNode }) {
   return (
     <StyleSheetManager shouldForwardProp={isPropValid}>
-      {children}
+      <Theme>
+        {children}
+      </Theme>
     </StyleSheetManager>
   )
 }

diff --git a/components/CompanyView.tsx b/components/CompanyView.tsx
@@ -9,12 +9,42 @@ import { companyColumns } from '../utils/createCompanyList'
 import Markdown from './Markdown'
 
 const InfoText = styled.div`
-  padding: 0 16px;
+  padding: 8px 16px;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+  background: ${({ theme }) => theme.lightBlack};
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+  p {
+    margin-top: 0;
+    font-size: 12px;
+  }
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 2rem;
+    background: linear-gradient(transparent, #0002);
+    top: -2rem;
+    left: 0;
+    right: 0;
+  }
+
+  @media screen and (${devices.tablet}) {
+    p {
+      font-size: 14px;
+    }
+  }
 `
 
 const ParagraphSource = styled(Paragraph)`
-  font-size: 13px;
   color: ${({ theme }) => theme.grey};
+  margin: 0;
+  font-size: 12px;
+  padding: 0 16px 8px;
 `
 
 const InfoContainer = styled.div`
@@ -24,30 +54,12 @@ const InfoContainer = styled.div`
   border-radius: 8px;
   margin: 32px 0;
   z-index: 15;
-  ::-webkit-scrollbar {
-    display: none;
-  }
 `
 
 const ComparisonContainer = styled.div`
   position: relative;
-  overflow-y: scroll;
-  z-index: 100;
-  // TODO: Hardcoding this is not good.
-  height: 684px;
   border-radius: 8px;
   display: flex;
-
-  @media only screen and (${devices.tablet}) {
-    height: 520px;
-  }
-
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-  ::-webkit-scrollbar {
-    /* Chrome, Safari and Opera */
-    display: none;
-  }
 `
 
 const Details = styled.div`
@@ -117,10 +129,10 @@ function CompanyView({
         </ComparisonContainer>
         <InfoText>
           <Markdown>{t('startPage:companyView.tableFooterInfo')}</Markdown>
-          <Markdown components={{ p: ParagraphSource }}>
-            {t('startPage:companyView.source')}
-          </Markdown>
         </InfoText>
+        <Markdown components={{ p: ParagraphSource }}>
+          {t('startPage:companyView.source')}
+        </Markdown>
       </InfoContainer>
     </>
   )