From 9dd706dd1a1777ca6483a70ede4efca0d96e4a24 Mon Sep 17 00:00:00 2001
From: Josefine <josefine.brorson@kivra.com>
Date: Tue, 4 Jul 2023 15:00:30 +0200
Subject: [PATCH] fix: expandable code snippet

---
 src/webapp/layout/story/Story.tsx             | 47 +++++++++++++++++--
 .../story/story-button/StoryButton.story.tsx  | 33 +++++++++++++
 2 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/webapp/layout/story/Story.tsx b/src/webapp/layout/story/Story.tsx
index 3d678fa..1737c34 100644
--- a/src/webapp/layout/story/Story.tsx
+++ b/src/webapp/layout/story/Story.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Center, Title } from "@mantine/core";
+import { Center, Title, Button, Collapse } from "@mantine/core";
 import { observer } from "mobx-react-lite";
 import { Story } from "../../../types";
 import { Markdown } from "./atom/Markdown";
@@ -10,6 +10,8 @@ import { useControl } from "./control/useControl";
 import { useIsDarkMode } from "./control/useIsDarkMode";
 import { DefaultComponentWrapper } from "./DefaultComponentWrapper";
 import { useActionOutput } from "./useActionOutput";
+import { useState } from "react";
+import { ArrowDownIcon } from "../../icons/ArrowDownIcon";
 
 export const StoryComponent = observer(({ story }: { story: Story }) => {
   const controls = useControl();
@@ -30,6 +32,16 @@ export const StoryComponent = observer(({ story }: { story: Story }) => {
 
   const sectionId = encodeURIComponent(story?.name ?? "");
 
+  const [opened, setOpen] = useState(false);
+
+  const toggleCodeSnippet = () => {
+    setOpen((prevOpened) => !prevOpened);
+  };
+
+  const handleClick = () => {
+    toggleCodeSnippet();
+  };
+
   return (
     <Wrapper>
       <SectionAnchor id={sectionId}>
@@ -62,10 +74,35 @@ export const StoryComponent = observer(({ story }: { story: Story }) => {
             </ControlsWrapper>
           </Configurator>
           {story.codeTemplate && (
-            <CodeTemplate
-              codeTemplate={story.codeTemplate}
-              controls={controls}
-            />
+            <>
+              <Button
+                leftIcon={<ArrowDownIcon />}
+                variant="default"
+                onClick={handleClick}
+                styles={() => ({
+                  root: {
+                    color: "gray",
+                    margin: "20px 0",
+                  },
+                  leftIcon: {
+                    transform: opened ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.3s ease-in-out",
+                  },
+                })}
+              >
+                {opened ? "Hide code example" : "Show code example"}
+              </Button>
+              <Collapse
+                in={opened}
+                transitionDuration={300}
+                transitionTimingFunction="linear"
+              >
+                <CodeTemplate
+                  codeTemplate={story.codeTemplate}
+                  controls={controls}
+                />
+              </Collapse>
+            </>
           )}
           <ActionOutput outputs={outputs} />
         </>
diff --git a/src/webapp/layout/story/story-button/StoryButton.story.tsx b/src/webapp/layout/story/story-button/StoryButton.story.tsx
index f8ebbb2..85607af 100644
--- a/src/webapp/layout/story/story-button/StoryButton.story.tsx
+++ b/src/webapp/layout/story/story-button/StoryButton.story.tsx
@@ -24,6 +24,7 @@ export const story: Story = {
     {
       name: "Kivra Design System",
       center: true,
+
       render() {
         return (
           <StoryHeaderButton
@@ -33,5 +34,37 @@ export const story: Story = {
         );
       },
     },
+    {
+      name: "Story Button",
+      center: true,
+      information:
+        "This is just an example how to use `<StoryHeaderButton />`s props. <br/>In this example also implemented show/hide code snippet that is possible to use in stories with `codeTemplate` function.",
+      codeTemplate: (props) => `
+      <StoryHeaderButton${props}></StoryHeaderButton>
+        `,
+      render({ segment, text }) {
+        const type = segment({
+          name: "type",
+          value: "designsystem",
+          options: [
+            ["designsystem", "designsystem"],
+            ["github", "github"],
+            ["figma", "figmaa"],
+          ],
+          showAs: "select",
+        });
+        return (
+          <StoryHeaderButton
+            type={type}
+            url={text({
+              name: "url",
+              value: "https://",
+              defaultValue: "https://design.kivra.com/",
+              description: "Always start with https://",
+            })}
+          />
+        );
+      },
+    },
   ],
 };