From 2992500b5a529af5f4ae399ae9c9f7b7b007c906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20Mo=CC=88ller?= <chrtze@gmail.com>
Date: Thu, 28 May 2020 17:42:41 +0200
Subject: [PATCH] add article image components #447

---
 src/components2/Article/index.tsx          |  1 +
 src/components2/Image/index.tsx            | 30 +++++++++++++++
 src/pages/Research/pages/Landing/index.tsx | 44 +++++++++++++++++++++-
 3 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/components2/Article/index.tsx b/src/components2/Article/index.tsx
index b47f5c25c..3005a8ef8 100644
--- a/src/components2/Article/index.tsx
+++ b/src/components2/Article/index.tsx
@@ -8,3 +8,4 @@ export { default as Kicker } from './Kicker';
 export { default as PublishDate } from './PublishDate';
 export { default as Quote } from './Quote';
 export { default as Text } from './Text';
+export { Image, MultiImage } from '../Image';
diff --git a/src/components2/Image/index.tsx b/src/components2/Image/index.tsx
index b92b7629a..9ba752215 100644
--- a/src/components2/Image/index.tsx
+++ b/src/components2/Image/index.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
+import React from 'react';
 import styled from 'styled-components';
 import { media } from '~/styles/utils';
 
@@ -12,3 +13,32 @@ export const Insert = styled.img`
     margin-left: initial;
   `}
 `;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  margin: -10px;
+`;
+
+const ImageSpacer = styled.div`
+  position: relative;
+  padding: 10px;
+  flex: 1 1 100%;
+`;
+
+const Img = styled.img`
+  width: 100%;
+`;
+
+export const MultiImage = ({ sources }) => {
+  return (
+    <ImageWrapper>
+      {sources.map((source) => (
+        <ImageSpacer>
+          <Img src={source} />
+        </ImageSpacer>
+      ))}
+    </ImageWrapper>
+  );
+};
+
+export const Image = ({ source }) => <MultiImage sources={[source]} />;
diff --git a/src/pages/Research/pages/Landing/index.tsx b/src/pages/Research/pages/Landing/index.tsx
index e2c4209e5..4198230c7 100644
--- a/src/pages/Research/pages/Landing/index.tsx
+++ b/src/pages/Research/pages/Landing/index.tsx
@@ -6,9 +6,13 @@ import {
   Text,
   Intro,
   Heading,
-  Quote
+  Quote,
+  Image,
+  MultiImage
 } from '~/components2/Article';
 
+import ExampleImageSource from '~/images/gastro/landing-bg.jpg';
+
 export default function ResearchLanding() {
   return (
     <ArticleWrapper hasToc>
@@ -71,6 +75,44 @@ export default function ResearchLanding() {
         welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
         als sicherer empfunden?
       </Text>
+      <Heading toc="Multi Image Test" as="h2">
+        Multi Image Test
+      </Heading>
+      <MultiImage sources={[ExampleImageSource, ExampleImageSource]} />
+      <Text>
+        Bisher gibt es kaum Erhebungen, welche Arten von Straßen, Wegen und
+        Kreuzungen die Verkehrsteilnehmer:innen subjektiv als sicher empfinden.
+        Insbesondere zur differenzierten Betrachtung verknüpfter Merkmale, wie
+        Führungsform der Radinfrastruktur (RVA), Ausführung, Breite sowie der
+        Situation links und rechts der RVA gibt es bisher kaum Untersuchungen.
+        Sind Radfahrstreifen mit Pollern die beste Lösung, um Konflikte zwischen
+        Auto und Fahrrad zu vermeiden oder sind ausreichend breite Radstreifen
+        entscheidend? Welchen Effekt hat die Einfärbung von Radstreifen? Unter
+        welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
+        als sicherer empfunden?
+      </Text>
+      <Heading toc="Multi Image Test 2" as="h2">
+        Multi Image Test 2
+      </Heading>
+      <MultiImage
+        sources={[ExampleImageSource, ExampleImageSource, ExampleImageSource]}
+      />
+      <Text>
+        Bisher gibt es kaum Erhebungen, welche Arten von Straßen, Wegen und
+        Kreuzungen die Verkehrsteilnehmer:innen subjektiv als sicher empfinden.
+        Insbesondere zur differenzierten Betrachtung verknüpfter Merkmale, wie
+        Führungsform der Radinfrastruktur (RVA), Ausführung, Breite sowie der
+        Situation links und rechts der RVA gibt es bisher kaum Untersuchungen.
+        Sind Radfahrstreifen mit Pollern die beste Lösung, um Konflikte zwischen
+        Auto und Fahrrad zu vermeiden oder sind ausreichend breite Radstreifen
+        entscheidend? Welchen Effekt hat die Einfärbung von Radstreifen? Unter
+        welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
+        als sicherer empfunden?
+      </Text>
+      <Heading toc="Single Image Test" as="h2">
+        Single Image Test
+      </Heading>
+      <Image source={ExampleImageSource} />
     </ArticleWrapper>
   );
 }