feat(header): add header component

libs/ui/src/index.ts

@@ -1,3 +1,5 @@
+export * from './lib/header/header';
+export * from './lib/group/group';
 export * from './lib/info/info';
 export * from './lib/redirect/redirect';
 export * from './lib/scrollicon/scrollicon';

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

@@ -1,44 +1,25 @@
 import React, { Fragment, useContext } from 'react';
-import Title from '../title/title';
+
+import Header from '../header/header';
 import Video from '../video/video';
 import Image from '../image/image';
 import Text from '../text/text';
 import Decission from '../decission/decission';
 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';
+
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Chapter, ContentType } from '@gerdesque/data';
-import { IMAGE_SUFFIX } from '@gerdesque/data';
 
 import './chapter.scss';
 
 export const ChapterComponent = (props: Chapter) => {
 
   const [character, setCharacter] = useContext(AppContext);
 
-  const useStyles = makeStyles(() => ({
-    chapter: {
-      backgroundImage: `url(${"./assets/"+ props.link+IMAGE_SUFFIX})`,
-      boxShadow: '0 0 8px 8px #dcd5cc inset',
-      flexDirection: 'column',
-      },
-  }));
-  const classes = useStyles();
-
-  const [volume, setVolume] = React.useState(false);
-
-  const audio = new Audio(`./assets/sounds/${props.link}.mp3`)
-  const startAudio = () => {
-    setVolume(!volume);
-    volume ? audio.pause() : audio.play();
-  }
-
   const renderChapterGroups = () => {
     return props.groups.map((group, index) => 
       <Fragment key={index}>
@@ -52,18 +33,6 @@ export const ChapterComponent = (props: Chapter) => {
     )
   }
 
-  const renderContent = (content, index) => {
-    return <Fragment key={index}>
-      {content.type === ContentType.Text && <Text value={content.value} />}
-      {content.type === ContentType.Redirect && <Redirect value={content.value} />}
-      {content.type === ContentType.Video && <Video value={content.value} width={content.layer} title={content.title} />}
-      {content.type === ContentType.Image && <Image value={content.value} width={content.layer} title={content.title}/>}
-      {content.type === ContentType.Decission && <Decission value={content.value} />}
-      {content.type === ContentType.SmokingPit && <Smokingpit value={content.value} />}
-      {content.type === ContentType.Puzzle && <Puzzle/>}
-    </Fragment>
-  }
-
   const renderChapterContent = ({content : contentList, grouped, row, info = null}) => {
 
     const chapterGroupedContent = 
@@ -84,17 +53,23 @@ export const ChapterComponent = (props: Chapter) => {
     return grouped ? chapterGroupedContent : chapterContent
   }
 
+  const renderContent = (content, index) => {
+    return <Fragment key={index}>
+      {content.type === ContentType.Text && <Text value={content.value} />}
+      {content.type === ContentType.Redirect && <Redirect value={content.value} />}
+      {content.type === ContentType.Video && <Video value={content.value} width={content.layer} title={content.title} />}
+      {content.type === ContentType.Image && <Image value={content.value} width={content.layer} title={content.title}/>}
+      {content.type === ContentType.Decission && <Decission value={content.value} />}
+      {content.type === ContentType.SmokingPit && <Smokingpit value={content.value} />}
+      {content.type === ContentType.Puzzle && <Puzzle/>}
+    </Fragment>
+  }
+
   return (
     <div className='parallax'>
-      <div className='parallax__group parallax__header'>
-        <div className={`parallax__layer parallax__layer--base fade-in-scale ${classes.chapter}`}>
-          <Title text={props.name} />
-          <Chip onClick={() => startAudio()} label={volume ? "Ton aus" : "Ton an"} />
-          <Scrollicon/>
-        </div>
-      </div>
+      <Header link={props.link} name={props.name}/>
       {props.groups && renderChapterGroups()}
-      </div>
+    </div>
   );
 };
 export default ChapterComponent;

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

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

libs/ui/src/lib/group/group.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './group.scss';
+
+/* eslint-disable-next-line */
+export interface GroupProps {}
+
+export const Group = (props: GroupProps) => {
+  return (
+    <div>
+      <h1>Welcome to group component!</h1>
+    </div>
+  );
+};
+
+export default Group;

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

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

libs/ui/src/lib/header/header.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Title from '../title/title';
+import Scrollicon from '../scrollicon/scrollicon';
+
+import { IMAGE_SUFFIX } from '@gerdesque/data';
+
+import { makeStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+
+import './header.scss';
+
+/* eslint-disable-next-line */
+export interface HeaderProps {
+  link: string
+  name: string
+}
+
+export const Header = (props: HeaderProps) => {
+
+  const [volume, setVolume] = React.useState(false);
+
+  const audio = new Audio(`./assets/sounds/${props.link}.mp3`)
+  const startAudio = () => {
+    setVolume(!volume);
+    volume ? audio.pause() : audio.play();
+  }
+
+  const useStyles = makeStyles(() => ({
+    chapter: {
+      backgroundImage: `url(${"./assets/"+ props.link+IMAGE_SUFFIX})`,
+      boxShadow: '0 0 8px 8px #dcd5cc inset',
+      flexDirection: 'column',
+      },
+  }));
+  const classes = useStyles();
+
+  return (
+    <div className='parallax__group parallax__header'>
+    <div className={`parallax__layer parallax__layer--base fade-in-scale ${classes.chapter}`}>
+      <Title text={props.name} />
+      <Chip onClick={() => startAudio()} label={volume ? "Ton aus" : "Ton an"} />
+      <Scrollicon/>
+    </div>
+  </div>
+  );
+};
+
+export default Header;