feat(summary): add summary component

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/summary/summary';
 export * from './lib/rain/rain';
 export * from './lib/birds/birds';
 export * from './lib/memory/memory';

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

@@ -12,6 +12,7 @@ import TicTacToe from '../tictactoe/tictactoe';
 import Daily from '../daily/daily';
 import Redirect from '../redirect/redirect';
 import Info from '../info/info';
+import Summary from '../summary/summary';
 
 import { GroupProps } from '@gerdesque/data';
 
@@ -26,6 +27,7 @@ const ContentType  = {
   puzzle: Puzzle,
   memory: Memory,
   suitcase: Suitcase,
+  summary: Summary,
   tictactoe: TicTacToe,
   daily: Daily,
   decission: Decission

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

@@ -1,6 +1,6 @@
 .infoLink {
   position: absolute;
-  top: 37%;
+  top: 25%;
   left: 5%;
   cursor: pointer;
   width: 1em;
@@ -19,6 +19,10 @@
     background-color: rgba(0,0,0,.7);
     color: #fff;
     font-size: 1.1rem;
+
+    p {
+      text-shadow: none;
+    }
   }
 
   &:hover .infoText {

libs/ui/src/lib/nav/nav.scss

@@ -1,7 +1,7 @@
 .navigation {
 	right: 2%;
 	position: absolute;
-	top: 33%;
+	top: 10%;
 	z-index: 6;
 
 	align-items: center;
@@ -14,8 +14,8 @@
 .navigation--item {
 	cursor: pointer;
 	border-radius: 9999px;
-	height: 20px;
-	width: 20px;
+	height: 28px;
+	width: 28px;
 	background-color: transparent;
 	border: 1px solid rgba(0, 0, 0, .3);
 	margin: 8px 0;

libs/ui/src/lib/suitcase/suitcase.scss

@@ -36,6 +36,10 @@
   align-items: center;
 }
 
+.suitcase .bag picture{
+  width: 50%;
+}
+
 .suitcase .items > * {
   width: 25%;
   margin: auto;

libs/ui/src/lib/summary/summary.scss

@@ -0,0 +1,9 @@
+details {
+  width: 60%;
+  font-size: 1.5rem;
+  padding: 0 50px;
+}
+
+summary:focus {
+	outline-style: none;
+}

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

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

libs/ui/src/lib/summary/summary.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import './summary.scss';
+
+/* eslint-disable-next-line */
+export interface SummaryProps {
+  value: string
+  title?: string
+  option?: string
+}
+
+export const Summary = (props: SummaryProps) => {
+  return (
+    <details>
+      <summary>{props.value}</summary>
+      <p>{props.title}</p>
+    </details>
+  );
+};
+
+export default Summary;

libs/ui/src/lib/ui.scss

@@ -15,6 +15,7 @@
 @import "scrollicon/scrollicon";
 @import "smokingpit/smokingpit";
 @import "suitcase/suitcase";
+@import "summary/summary";
 @import "text/text";
 @import "tictactoe/tictactoe";
 @import "title/title";