feat: Update to API references look and feel (#343)

Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com> Co-authored-by: zakariasaad <zakaria.elas@gmail.com> Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com> Co-authored-by: olivermrbl <oliver@mrbltech.com>
2021-08-20 10:26:29 +02:00
parent 40400b483c
commit 143f06aa39
85 changed files with 19022 additions and 7116 deletions
@@ -0,0 +1,130 @@
+import React, { useState } from "react"
+import Collapsible from "react-collapsible"
+import { Flex, Box, Text, Heading } from "theme-ui"
+import Markdown from "react-markdown"
+import Description from "./description"
+
+const NestedCollapsible = ({ properties, title }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <Box
+      mt={2}
+      sx={{
+        "& .child-attrs": {
+          cursor: "pointer",
+          fontSize: "12px",
+          p: "6px 10px",
+          boxSizing: "border-box",
+          width: "max-content",
+          borderRadius: "small",
+          border: "1px solid",
+          borderColor: "faded",
+        },
+
+        "& .child-attrs.is-open": {
+          width: "100%",
+          borderBottom: "none",
+          borderBottomLeftRadius: "0",
+          borderBottomRightRadius: "0",
+        },
+      }}
+    >
+      <Collapsible
+        transitionTime={50}
+        triggerClassName={"child-attrs"}
+        triggerOpenedClassName={"child-attrs"}
+        triggerTagName="div"
+        trigger={
+          <Flex
+            sx={{
+              alignItems: "baseline",
+              fontSize: "13px",
+              fontWeight: "400",
+            }}
+          >
+            <Box
+              mr={1}
+              className={isOpen ? "rotated" : null}
+              sx={{
+                userSelect: "none",
+                transition: "all 0.2s ease",
+                transform: "rotate(45deg)",
+                "&.rotated": {
+                  transform: "rotate(0deg)",
+                },
+              }}
+            >
+              &times;
+            </Box>{" "}
+            <Text
+              sx={{ fontSize: "0", fontFamily: "body", userSelect: "none" }}
+            >{`${isOpen ? "Hide" : "Show"} child attributes`}</Text>
+          </Flex>
+        }
+        onTriggerOpening={() => setIsOpen(true)}
+        onTriggerClosing={() => setIsOpen(false)}
+      >
+        <Box
+          sx={{
+            padding: "2",
+            borderRadius: "small",
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+            border: "hairline",
+            borderColor: "faded",
+          }}
+          mb="2"
+        >
+          <Heading as="h3" p={2} sx={{ fontFamily: "body", fontWeight: "500" }}>
+            {title}
+          </Heading>
+          {properties.map((param, i) => {
+            return (
+              <Box
+                p={2}
+                sx={{
+                  borderTop: "hairline",
+                }}
+                key={i}
+              >
+                <Flex
+                  sx={{
+                    fontSize: "0",
+                    alignItems: "baseline",
+                    pb: "1",
+                    fontFamily: "monospace",
+                  }}
+                >
+                  <Box mr={2} fontSize={"12px"}>
+                    {param.property}
+                  </Box>
+                  <Text color={"gray"} fontSize={"10px"}>
+                    {param.type}
+                  </Text>
+                  {param.required && (
+                    <Text ml={1} fontSize={"10px"} variant="labels.required">
+                      required
+                    </Text>
+                  )}
+                </Flex>
+                <Description>
+                  <Text
+                    sx={{
+                      fontSize: "0",
+                      lineHeight: "26px",
+                      fontFamily: "body",
+                    }}
+                  >
+                    <Markdown>{param.description}</Markdown>
+                  </Text>
+                </Description>
+              </Box>
+            )
+          })}
+        </Box>
+      </Collapsible>
+    </Box>
+  )
+}
+
+export default NestedCollapsible