experimented with text layout. Moving on to tooltips

olaven · Jul 2, 2020 · 5838007 · 5838007
1 parent f663c48
commit 5838007
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git a/__tests__/frontend/index/PageSection/Explanation.test.tsx b/__tests__/frontend/index/PageSection/Explanation.test.tsx
@@ -14,7 +14,13 @@ describe("The Explanation Component", () => {
     //TODO: Replace this after localizing 
     const helpContentText = "Hjelpen staar her!"
     const helpButtonText = "Vis meg hvordan Krets funker!";
-    const helpUnderstoodButtonText = "Skjønner!";
+    const understoodButtonText = "Skjønner!";;
+
+    waitFor(() => {
+
+        expect(getByText(helpContentText)).not.toBeInTheDocument();
+        expect(getByText(helpButtonText)).toBeInTheDocument();
+    });
 
     it("Renders when there are no pages", () => {
 
@@ -48,6 +54,24 @@ describe("The Explanation Component", () => {
         waitFor(() => {
 
             expect(getByText(helpContentText)).toBeInTheDocument();
-        })
+        });
     });
+
+    it("Closes when the user clicks appropriate button", () => {
+
+        const { getByText } = renderWithPagesContext(<Explanation />);
+
+        fireEvent.click(getByText(helpButtonText))
+        waitFor(() => {
+            expect(getByText(helpContentText)).toBeInTheDocument();
+        });
+
+        fireEvent.click(getByText(understoodButtonText));
+
+        waitFor(() => {
+
+            expect(getByText(helpContentText)).not.toBeInTheDocument();
+            expect(getByText(helpButtonText)).toBeInTheDocument();
+        });
+    })
 });
diff --git a/src/components/Home/PageSection/Explanation.tsx b/src/components/Home/PageSection/Explanation.tsx
@@ -1,10 +1,29 @@
 import { PagesContext } from "../../../context/PagesContext"
 import { useContext, useState } from "react";
-import { Box, Button } from "rebass";
+import { Box, Button, Text, Heading } from "rebass";
+import * as text from "../../../text"
 
 
 const ExplanationContent = ({ onClick }) => <Box>
-    Hjelpen staar her!
+    <Text>
+        <Heading>Lag en side!</Heading>
+        <Text>
+            Lag en Krets-side som representerer det du vil ha tilbakemelding paa!
+
+        </Text>
+        <Text>
+            Bruk tekstfeltet under til aa skrive inn et passende navn
+        </Text>
+        <ul>
+            <li>Lag en Krets-side som representerer det du vil ha tilbakemelding paa</li>
+            <li>Finn siden i listen nedenfor</li>
+        </ul>
+        <ul>
+            <li>"{text.buttons.toPage}" er siden du deler med ditt publikum!</li>
+            <li>"{text.buttons.toQR}" gir det en QR-kode som er lett aa dele!</li>
+            <li>"{text.buttons.toAdmin}" viser det tilbakemeldingene du har mottatt</li>
+        </ul>
+    </Text>
     <Button onClick={onClick} id="help-understood-button">
         Skjønner!
     </Button>