feat(info): add info handling

apps/demol/src/app/app.json

@@ -8,6 +8,7 @@
         {
           "grouped": false,
           "row": false,
+          "info": "<p>Diese Website entstand im Rahmen des <a href='https://codingdavinci.de/events/westfalen-ruhrgebiet/' target='_blank' rel='noopener noreferrer'>Coding da Vinci Westfalen-Ruhrgebiet</a> von Oktober bis Dezember 2019. Wir danken dem <a href='https://arbeiterjugend.de/' target='_blank' rel='noopener noreferrer'>Archiv der Arbeiterjugendbewegung</a>, welches die Fotografien und Bildkärtchen unter einer CC BY-SA 3.0 DE Lizenz zur Verfügung gestellt hat.</p>",
           "content": [
             {
               "type": "text",
@@ -29,6 +30,7 @@
         {
           "grouped": true,
           "row": false,
+          "info": "<a href='https://arbeiterjugend.de/' target='_blank' rel='noopener noreferrer'>Archiv der Arbeiterjugendbewegung</a>",
           "content": [
             {
               "type": "text",

libs/data/src/lib/data.tsx

@@ -30,6 +30,7 @@ export interface Content {
 export interface Group {
   grouped: boolean
   row: boolean
+  info?: string
   background?: string
   character?: string
   content: Content[]

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/info/info';
 export * from './lib/redirect/redirect';
 export * from './lib/scrollicon/scrollicon';
 export * from './lib/puzzle/puzzle';

libs/ui/src/lib/chapter/chapter.tsx

@@ -8,6 +8,7 @@ import Smokingpit from '../smokingpit/smokingpit';
 import Puzzle from '../puzzle/puzzle';
 import Scrollicon from '../scrollicon/scrollicon';
 import Redirect from '../redirect/redirect';
+import Info from '../info/info';
 import {AppContext } from '../chapter/context';
 import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
@@ -63,10 +64,11 @@ export const ChapterComponent = (props: Chapter) => {
     </Fragment>
   }
 
-  const renderChapterContent = ({content : contentList, grouped, row}) => {
+  const renderChapterContent = ({content : contentList, grouped, row, info = null}) => {
 
     const chapterGroupedContent = 
       <div className={`parallax__layer parallax__layer--base grouped ${row ? 'row' : 'column'}`}>
+        {info && <Info value={info} />}
         {contentList.map((content, index) =>
           renderContent(content, index)
         )}
@@ -75,6 +77,7 @@ export const ChapterComponent = (props: Chapter) => {
     const chapterContent = 
       contentList.map((content, index) =>
         <div key={index} className={`parallax__layer parallax__layer--${content.layer}`}>
+          {info && content.layer === 'fore' && <Info value={info} />}
           {renderContent(content, index)}
         </div>);
 

libs/ui/src/lib/info/info.scss

@@ -0,0 +1,39 @@
+.infoLink {
+  position: absolute;
+  top: 37%;
+  left: 15%;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  background: url(./info.svg) no-repeat 0 0 transparent;
+  opacity: 1;
+  transition: opacity .6s ease, margin-top .6s ease;
+
+  .infoText {
+    position: absolute;
+    top: -20%;
+    right: auto;
+    margin: 50px;
+    opacity: 0;
+    overflow: hidden;
+    z-index: 11;
+    background-color: rgba(0,0,0,.7);
+    color: #fff;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    background: url(./info_highlighted.svg) no-repeat 0 0 transparent;
+
+    .infoText {
+      padding: 8px;
+      opacity: 1;
+      transition: opacity .5s ease;
+    }
+  }
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+}

libs/ui/src/lib/info/info.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Info from './info';
+
+describe(' Info', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Info />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/info/info.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Fade from 'react-reveal/Fade';
+import './info.scss';
+
+/* eslint-disable-next-line */
+export interface InfoProps {
+  value: string
+}
+
+export const Info = (props: InfoProps) => {
+
+  return (
+    <Fade left delay={2000}>
+      <div className="infoLink">
+        <div className="infoText">
+          <p dangerouslySetInnerHTML={{__html: props.value}} />
+        </div>
+      </div>
+    </Fade>
+  );
+};
+
+export default Info;