Deploy to production

.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.

.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.

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',

__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', () => {

__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()

__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>
   )
 }

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>
     </>
   )