add accordion

kivra · Jun 26, 2024 · 661a511 · 661a511
1 parent f49ae4a
commit 661a511
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 58 deletions.
diff --git a/src/webapp/icons/ArrowDownIcon.tsx b/src/webapp/icons/ArrowDownIcon.tsx
diff --git a/src/webapp/layout/Navbar.tsx b/src/webapp/layout/Navbar.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/css";
-import { Code, TextInput } from "@mantine/core";
+import { Accordion, Code, TextInput } from "@mantine/core";
 import { SearchIcon } from "../icons/SearchIcon";
 import { Link, useLocation } from "react-router-dom";
 import { useState } from "react";
@@ -37,8 +37,13 @@ export function Navbar({ routes, onItemClick }: Props) {
 }
 
 function MenuItems({ routes, onItemClick }: Props) {
-  const { activeStoryUrl, searchString, setSearchString, stories } =
-    useStoriesList(routes);
+  const {
+    defaultAccordionValue,
+    activeStoryUrl,
+    searchString,
+    setSearchString,
+    stories,
+  } = useStoriesList(routes);
 
   return (
     <>
@@ -69,28 +74,36 @@ function MenuItems({ routes, onItemClick }: Props) {
       {stories.map(([name, { stories }]) => {
         return (
           <div key={name}>
-            <CategoryTitle>{name}</CategoryTitle>
-            {stories.map((story) => {
-              const activeLink = activeStoryUrl === story.urlPath;
-              return (
-                <MenuItemWrapper
-                  key={story.urlPath}
-                  style={{ padding: "6px 12px" }}
-                  activeLink={activeLink}
-                >
-                  <MenuItem
-                    onClick={onItemClick}
-                    key={story.urlPath}
-                    to={story.urlPath}
-                    activeLink={activeStoryUrl === story.urlPath}
-                  >
-                    {story.name.startsWith("use")
-                      ? story.name
-                      : story.name.replace(/(?<!^)([A-Z])/g, " $1")}
-                  </MenuItem>
-                </MenuItemWrapper>
-              );
-            })}
+            <Accordion defaultValue={defaultAccordionValue}>
+              <Accordion.Item value={name} style={{ border: 0 }}>
+                <AccordionTrigger>
+                  <AccordionTitle>{name}</AccordionTitle>
+                </AccordionTrigger>
+                <AccordionHeader key={name}>
+                  {stories.map((story) => {
+                    const activeLink = activeStoryUrl === story.urlPath;
+                    return (
+                      <MenuItemWrapper
+                        key={story.urlPath}
+                        style={{ padding: "6px 12px" }}
+                        activeLink={activeLink}
+                      >
+                        <MenuItem
+                          onClick={onItemClick}
+                          key={story.urlPath}
+                          to={story.urlPath}
+                          activeLink={activeStoryUrl === story.urlPath}
+                        >
+                          {story.name.startsWith("use")
+                            ? story.name
+                            : story.name.replace(/(?<!^)([A-Z])/g, " $1")}
+                        </MenuItem>
+                      </MenuItemWrapper>
+                    );
+                  })}
+                </AccordionHeader>
+              </Accordion.Item>
+            </Accordion>
           </div>
         );
       })}
@@ -119,19 +132,57 @@ const useStoriesList = (routes: NestedStoryRoute) => {
       ] as const
   );
   const allAccordionValues = routesEntries.map(([name]) => name);
-  const [accordionValues, setAccordionValues] =
-    useState<string[]>(allAccordionValues);
+  const defaultAccordionValue = allAccordionValues[0];
 
   return {
     activeStoryUrl: location.pathname,
     stories,
     searchString,
     setSearchString,
-    accordionValues,
-    setAccordionValues,
+    defaultAccordionValue,
   };
 };
 
+const AccordionHeader = styled(Accordion.Panel)({
+  margin: 0,
+
+  ".mantine-Accordion-content": {
+    padding: 0,
+  },
+});
+
+const AccordionTrigger = styled(Accordion.Control)({
+  backgroundColor: "transparent",
+  border: "none",
+  display: "flex",
+  justifyContent: "space-between",
+  width: "100%",
+  cursor: "pointer",
+  borderBottom: 0,
+  padding: 0,
+
+  h2: {
+    color: "var(--green-primary)",
+    fontSize: "0.875rem",
+    fontWeight: 700,
+    textTransform: "uppercase",
+  },
+
+  "&:hover": {
+    backgroundColor: "transparent",
+  },
+});
+
+const AccordionTitle = styled.h2({
+  fontSize: 16,
+  lineHeight: "20px",
+  letterSpacing: "0.1px",
+  color: "#212121",
+  margin: 0,
+  textTransform: "capitalize",
+  fontWeight: "normal",
+});
+
 const Wrapper = styled.div({
   zIndex: 1075,
   gridArea: "Menu",

diff --git a/src/webapp/layout/story/Story.tsx b/src/webapp/layout/story/Story.tsx
@@ -90,7 +90,7 @@ export const StoryComponent = observer(({ story }: { story: Story }) => {
               )}
             </Preview>
             {!story.hideControls && (
-              <ControlsWrapper>
+              <ControlsWrapper codeTemplate={Boolean(story.codeTemplate)}>
                 <Controls sectionId={sectionId} controls={controls} />
               </ControlsWrapper>
             )}
@@ -161,16 +161,19 @@ const Preview = styled.div<{
   borderTopLeftRadius: "12px",
   borderTopRightRadius: hideControls ? "12px" : 0,
   borderBottomLeftRadius: codeTemplate ? 0 : "12px",
-  borderBottomRightRadius: hideControls ? "12px" : 0,
+  borderBottomRightRadius: hideControls && !codeTemplate ? "12px" : 0,
   border: "1px solid var(--border)",
-  borderBottom: hideControls ? 0 : undefined,
+  borderRight: !hideControls ? 0 : undefined,
+  borderBottom: codeTemplate ? 0 : undefined,
   minHeight: "270px",
 }));
 
-const ControlsWrapper = styled("div")({
+const ControlsWrapper = styled.div<{
+  codeTemplate?: boolean;
+}>(({ codeTemplate }) => ({
   width: "250px",
   borderTopRightRadius: "12px",
-  borderBottomRightRadius: "12px",
+  borderBottomRightRadius: codeTemplate ? 0 : "12px",
   padding: "16px",
   boxSizing: "border-box",
   border: "1px solid var(--border)",
@@ -181,7 +184,7 @@ const ControlsWrapper = styled("div")({
     borderLeft: "none",
     borderTop: "1px solid var(--border)",
   },
-});
+}));
 
 const ResetFocusButton = styled("div")({
   position: "absolute",