From e3b4b95a9e4e918dd55e12a3d8e5d97ea074816d Mon Sep 17 00:00:00 2001
From: Ben Christel <benchristel@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:47:53 -0700
Subject: [PATCH] Hide the flipbook instructions when data is pasted (#1072)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Previously, the instructions took up a bunch of screen real estate by
default. Once someone has entered data in the flipbook, the instructions
have served their purpose and can go away.

I've also moved the instructions below the text input so the layout
doesn't shift when the instructions disappear.

Issue: none

Test plan:

```
yarn dev
open http://localhost:5173/#flipbook
```

Follow the instructions onscreen to get some data in the box. The
instructions should vanish. Delete everything from the box and the
instructions should reappear.

Author: benchristel

Reviewers: jeremywiebe, mark-fitzgerald, nedredmond, nishasy

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1072
---
 dev/flipbook.tsx | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/dev/flipbook.tsx b/dev/flipbook.tsx
index f8f0a8e583..388d7646c2 100644
--- a/dev/flipbook.tsx
+++ b/dev/flipbook.tsx
@@ -41,26 +41,10 @@ export function Flipbook() {
 
     const question = selectCurrentQuestion(state);
 
+    const noTextEntered = state.questions.trim() === "";
+
     return (
         <View style={{padding: Spacing.medium_16}}>
-            <details open>
-                <summary>Instructions (click to show/hide)</summary>
-                <ol>
-                    <li>
-                        <p>
-                            Run a command like one of the following to copy
-                            question data to your clipboard.
-                        </p>
-                        <code>
-                            <pre>{exampleCommands}</pre>
-                        </code>
-                    </li>
-                    <li>
-                        <p>Paste the data in the box below.</p>
-                    </li>
-                </ol>
-            </details>
-
             <textarea
                 wrap={"off"}
                 rows={10}
@@ -78,6 +62,23 @@ export function Flipbook() {
                     Next
                 </Button>
             </View>
+            <div style={{display: noTextEntered ? "block" : "none"}}>
+                <h2>Instructions</h2>
+                <ol>
+                    <li>
+                        <p>
+                            Run a command like one of the following to copy
+                            question data to your clipboard.
+                        </p>
+                        <code>
+                            <pre>{exampleCommands}</pre>
+                        </code>
+                    </li>
+                    <li>
+                        <p>Paste the data in the box above.</p>
+                    </li>
+                </ol>
+            </div>
             {question != null && (
                 <SideBySideQuestionRenderer question={question} />
             )}