From 3df9aa545d7c991433dd480552b16294d864166a Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@amino.com>
Date: Sun, 28 Apr 2019 15:32:01 -0700
Subject: [PATCH] click button to toggle extended examples

---
 demo/src/Demo.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/demo/src/Demo.tsx b/demo/src/Demo.tsx
index aa786f7..c457d1c 100644
--- a/demo/src/Demo.tsx
+++ b/demo/src/Demo.tsx
@@ -14,6 +14,8 @@ const Example: React.FunctionComponent<{ description: string }> = ({ description
 );
 
 function Demo() {
+  const [showAllExamples, setShowAllExamples] = React.useState(false);
+
   return (
     <div className="container">
       <div className="row mt-5">
@@ -97,13 +99,25 @@ function Demo() {
           </div>
         </Example>
 
-        <Example description="Dashboard style.">
-          <CircularProgressbar percentage={50} circleRatio={0.7} />
-        </Example>
-
-        <Example description="Dashboard style, counterclockwise.">
-          <CircularProgressbar percentage={50} circleRatio={0.7} counterClockwise />
-        </Example>
+        {showAllExamples ? (
+          <React.Fragment>
+            <Example description="Dashboard style.">
+              <CircularProgressbar percentage={50} circleRatio={0.7} />
+            </Example>
+            <Example description="Dashboard style, counterclockwise.">
+              <CircularProgressbar percentage={50} circleRatio={0.7} counterClockwise />
+            </Example>
+          </React.Fragment>
+        ) : (
+          <div className="col-12 text-center">
+            <button
+              className="btn btn-link text-secondary"
+              onClick={() => setShowAllExamples(true)}
+            >
+              <small>Show more examples</small>
+            </button>
+          </div>
+        )}
       </div>
 
       <hr />