Merge branch 'main' of https://github.com/grundeinkommensbuero/next-p…

…rototype
grundeinkommensbuero · Apr 20, 2024 · dc9e36c · dc9e36c
2 parents eaf7f10 + 85a984c
commit dc9e36c
Show file tree

Hide file tree

Showing 36 changed files with 561 additions and 81 deletions.
diff --git a/components/Forms/Button/index.tsx b/components/Forms/Button/index.tsx
@@ -8,6 +8,7 @@ import SuccessIconBerlin from './success-rosa.svg';
 export type ButtonSize = 'MEDIUM' | 'SMALL';
 
 const IS_BERLIN_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Berlin';
+const IS_HAMBURG_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Hamburg';
 
 const SuccessIcon = IS_BERLIN_PROJECT ? SuccessIconBerlin : SuccessIconStandard;
 
@@ -32,7 +33,12 @@ export function LinkButton({
  <a
  href={href}
  target={target}
- className={cN(s.linkButton, className, { [s.medium]: size === 'MEDIUM' })}
+ className={cN(
+ s.linkButton,
+ className,
+ { [s.medium]: size === 'MEDIUM' },
+ { [s.hamburg]: IS_HAMBURG_PROJECT }
+ )}
  {...other}
  >
  {children}
@@ -56,7 +62,12 @@ export function LinkButtonLocal({
  ...other
 }: LinkButtonLocalProps) {
  return (
- <div className={cN(s.linkButton, className)} {...other}>
+ <div
+ className={cN(s.linkButton, className, {
+ [s.hamburg]: IS_HAMBURG_PROJECT,
+ })}
+ {...other}
+ >
  <Link href={to}>{children}</Link>
  </div>
  );
@@ -99,6 +110,7 @@ export function Button({
  className={cN(
  s.button,
  className,
+ { [s.hamburg]: IS_HAMBURG_PROJECT },
  { [s.medium]: size === 'MEDIUM' },
  // Only use small buttons as exception!
  { [s.small]: size === 'SMALL' },

diff --git a/components/Forms/Button/style.module.scss b/components/Forms/Button/style.module.scss
@@ -124,6 +124,31 @@
  }
  }
  }
+
+ :not(li) > &.hamburg {
+ margin-top: 40px;
+ }
+
+ &.hamburg {
+ border-width: $borderWidthMedium;
+ padding: 0.7rem 4rem 0.8rem;
+ box-shadow: 3px 6px 0 $black;
+ font-size: 1rem;
+ min-width: 280px;
+ text-align: center;
+ }
+
+ &.hamburg:active {
+ background: var(--button-focus-bg-color);
+ box-shadow: none;
+ transform: translateX(2px) translateY(4px);
+ }
+
+ &.hamburg:focus {
+ background: var(--button-focus-bg-color);
+ color: var(--button-focus-font-color);
+ border-color: $black;
+ }
 }
 
 .linkButton {

diff --git a/components/Forms/SignUp/index.tsx b/components/Forms/SignUp/index.tsx
@@ -322,7 +322,7 @@ const SignUp = ({
  const fieldData: SignUpValues = {
  email: {
  name: 'email',
- label: 'E-mail',
+ label: 'Bitte trag hier deine E-Mail-Adresse ein:',
  description: 'Pflichtfeld',
  placeholder: 'E-Mail',
  type: 'email',
@@ -604,7 +604,7 @@ const getNudgeBoxLabel = (municipality: Municipality | null): string => {
 
  // Hamburg
  if (municipality?.ags === '02000000') {
- return 'Ja, ich will, dass Hamburg an dem Modellversuch teilnimmt.';
+ return 'Ja, ich will, dass Hamburg einen Modellversuch bekommt.';
  }
 
  // Bremen

diff --git a/components/Forms/TextInput/index.tsx b/components/Forms/TextInput/index.tsx
@@ -4,6 +4,8 @@ import cN from 'classnames';
 import LabelInputErrorWrapper from '../LabelInputErrorWrapper';
 import { ValidationError } from '../ValidationError';
 
+const IS_HAMBURG_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Hamburg';
+
 export type InputSize = 'SMALL';
 
 type TextInputProps = {
@@ -50,7 +52,8 @@ export function TextInput({
  {
  [s.hideNumberArrows]:
  input.name === 'zipCode' || input.name === 'listId',
- }
+ },
+ { [s.hamburg]: IS_HAMBURG_PROJECT }
  )}
  ref={customRef}
  {...input}

diff --git a/components/Forms/TextInput/style.module.scss b/components/Forms/TextInput/style.module.scss
@@ -32,6 +32,13 @@ $inputWidth: 25rem;
  border: 2px solid var(--input-border-color);
  box-shadow: inset 0 0 0 $borderWidthThick var(--input-border-color);
  }
+
+ &.hamburg {
+ border-radius: 2rem;
+ border-width: 2px;
+ padding: 0.7rem 1rem 0.8rem;
+ margin: 0.5rem auto;
+ }
 }
 
 .textInputSmall {

diff --git a/components/Section/SectionWrapper.tsx b/components/Section/SectionWrapper.tsx
@@ -6,6 +6,8 @@ import { getAssetURL } from '../Util/getAssetURL';
 import { stringToId } from '../../utils/stringToId';
 import s from './style.module.scss';
 
+const IS_HAMBURG_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Hamburg';
+
 type SectionWrapperProps = {
  children: ReactElement;
  colorScheme: ColorScheme;
@@ -53,7 +55,7 @@ export const SectionWrapper = ({
 
  <div
  className={`${hasHero ? s.hasHero : ''} ${
- s.sectionWrapper
+ s.sectionWrapper + (IS_HAMBURG_PROJECT ? ' hamburg' : '')
  } ${colorScheme} ${status === 'draft' ? s.draftSection : ''} relative`}
  >
  {status === 'draft' && <h3 className={s.draftLabel}>Entwurf</h3>}

diff --git a/components/Section/SelectColor.tsx b/components/Section/SelectColor.tsx
@@ -20,6 +20,21 @@ const options: Option[] = [
  label: 'Rose on white',
  fontColor: 'text-black',
  },
+ {
+ value: 'colorSchemeHamburg',
+ label: 'Hamburg (weißer Hintergrund)',
+ fontColor: 'text-black',
+ },
+ {
+ value: 'colorSchemeHamburgAlternate',
+ label: 'Hamburg (grauer Hintergrund)',
+ fontColor: 'text-black',
+ },
+ {
+ value: 'colorSchemeHamburgBlackOnOrange',
+ label: 'Hamburg (schwarz auf orange)',
+ fontColor: 'text-black',
+ },
 ];
 
 export const SelectColor = ({

diff --git a/components/Section/index.tsx b/components/Section/index.tsx
@@ -23,6 +23,8 @@ import Image from 'next/image';
 import { getAssetURL } from '../Util/getAssetURL';
 import { LoadingAnimation } from '../LoadingAnimation';
 
+const IS_HAMBURG_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Hamburg';
+
 export type Section = {
  id: string;
  title: string;
@@ -120,7 +122,10 @@ export type ColorScheme =
  | 'colorSchemeWhite'
  | 'colorSchemeRed'
  | 'colorSchemeRose'
- | 'colorSchemeRoseOnWhite';
+ | 'colorSchemeRoseOnWhite'
+ | 'colorSchemeHamburg'
+ | 'colorSchemeHamburgAlternate'
+ | 'colorSchemeHamburgBlackOnOrange';
 
 type SectionProps = {
  section: Section;
@@ -184,7 +189,11 @@ export const Section = ({
  isFirstSection={isFirstSection}
  >
  <>
- <div className={s.elementContainer}>
+ <div
+ className={cN(s.elementContainer, {
+ [s.hamburg]: IS_HAMBURG_PROJECT,
+ })}
+ >
  {modifiedSection.render.map((element, index) => {
  const { column, alignTop } = element;
 

diff --git a/components/Section/style.module.scss b/components/Section/style.module.scss
@@ -203,6 +203,12 @@
  justify-self: center;
  padding: 1rem 0 2rem 0;
  }
+
+ @media (min-width: $breakPointM) {
+ .hamburg & p {
+ font-size: 0.9rem;
+ }
+ }
 }
 
 .elementLeftThird {

diff --git a/components/TickerToSignup/SignupButtonAndTile/index.tsx b/components/TickerToSignup/SignupButtonAndTile/index.tsx
@@ -71,7 +71,7 @@ export const getButtonText = (
  }
  // Hamburg
  if (municipality.ags === '02000000') {
- return `Ja, es soll weiter gehen!`;
+ return `Jetzt anmelden!`;
  }
  // Bremen
  if (municipality.ags === '04011000') {

diff --git a/components/TickerToSignup/Ticker/TickerMunicipality.tsx b/components/TickerToSignup/Ticker/TickerMunicipality.tsx
@@ -26,8 +26,10 @@ export const TickerMunicipality = () => {
  prefixText="Schon"
  highlight1={peopleCount}
  inBetween1=""
- inBetween2="Menschen holen Grundeinkommen nach"
+ inBetween2="Menschen in "
  highlight2={municipality?.name}
+ inBetween3=" haben sich angemeldet, um Grundeinkommen an ihren Wohnort zu holen."
+ inviteText="Komm dazu."
  suffixHighlight2=""
  />
  );
@@ -43,6 +45,8 @@ type TickerDisplayProps = {
  inBetween1?: string;
  inBetween2?: string;
  highlight2?: number | string;
+ inBetween3?: string;
+ inviteText?: string;
  suffixHighlight2?: string;
  tickerDescription?: string;
 };
@@ -53,6 +57,8 @@ const TickerDisplay = ({
  inBetween1,
  inBetween2,
  highlight2,
+ inBetween3,
+ inviteText,
  suffixHighlight2,
  tickerDescription,
 }: TickerDisplayProps) => {
@@ -68,7 +74,7 @@ const TickerDisplay = ({
  s.bold
  )}
  >
- {prefixText}{' '}
+ {prefixText}
  </span>
  )}
 
@@ -126,10 +132,13 @@ const TickerDisplay = ({
  s.counterLabelLongText
  )}
  >
- {inBetween2 && <span>{inBetween2} </span>}
+ {inBetween2 && <span>{inBetween2}</span>}
  <br />
- <span>{highlight2}.</span>
- <p className={s.inviteHeadline}>Komm dazu.</p>
+ <span>
+ {highlight2}
+ {inBetween3}
+ </span>
+ <p className={s.inviteHeadline}>{inviteText}</p>
  {/* {suffixHighlight2 && <span>{suffixHighlight2}</span>} */}
  </h2>
  </>

diff --git a/layout/Footer/index.tsx b/layout/Footer/index.tsx
@@ -1,46 +1,64 @@
 import React from 'react';
 import s from './style.module.scss';
-import { Follow } from '../SocialMedia/Follow';
+import { Follow, FollowHamburg } from '../SocialMedia/Follow';
 import { ReactElement } from 'react';
 import { Menu } from '../../utils/getMenus';
 import { FooterMenu } from './FooterMenu';
 import cN from 'classnames';
 import LogoExpedition from '../logo-expedition.svg';
 
 const IS_BERLIN_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Berlin';
+const IS_HAMBURG_PROJECT = process.env.NEXT_PUBLIC_PROJECT === 'Hamburg';
 
 type FooterProps = {
  footerMenu: Menu;
 };
 
 export const Footer = ({ footerMenu }: FooterProps): ReactElement => (
- <footer className={cN(s.footer, { [s.black]: IS_BERLIN_PROJECT })}>
+ <footer
+ className={cN(
+ s.footer,
+ { [s.black]: IS_BERLIN_PROJECT },
+ { [s.hamburg]: IS_HAMBURG_PROJECT }
+ )}
+ >
  <div className={s.itemContainer}>
- <div className="text-d-lg">
- {IS_BERLIN_PROJECT && (
- <>
- <div className={s.berlinInfos}>
- <span>Eine Initiative von</span>
- <LogoExpedition
- className={s.logo}
- alt={'Expedition Grundeinkommen'}
- color={'white'}
- />
- </div>
- <span>
- <a
- href="https://www.expedition-grundeinkommen.de"
- className={s.expeditionsLink}
- >
- expedition-grundeinkommen.de
- </a>
- </span>
- </>
- )}
- © Expedition Grundeinkommen {new Date().getFullYear()}
- </div>
- <Follow className={s.socialMedia} />
- <FooterMenu footerMenu={footerMenu} />
+ {!IS_HAMBURG_PROJECT && (
+ <div className="text-d-lg">
+ {IS_BERLIN_PROJECT && (
+ <>
+ <div className={s.berlinInfos}>
+ <span>Eine Initiative von</span>
+ <LogoExpedition
+ className={s.logo}
+ alt={'Expedition Grundeinkommen'}
+ color={'white'}
+ />
+ </div>
+ <span>
+ <a
+ href="https://www.expedition-grundeinkommen.de"
+ className={s.expeditionsLink}
+ >
+ expedition-grundeinkommen.de
+ </a>
+ </span>
+ </>
+ )}
+ © Expedition Grundeinkommen {new Date().getFullYear()}
+ </div>
+ )}
+ {IS_HAMBURG_PROJECT ? (
+ <>
+ <FooterMenu footerMenu={footerMenu} />
+ <FollowHamburg className={s.socialMedia} />
+ </>
+ ) : (
+ <>
+ <Follow className={s.socialMedia} />
+ <FooterMenu footerMenu={footerMenu} />
+ </>
+ )}
  </div>
  </footer>
 );