Style Guide Updates from Ass1 and Ass2 feedback (#13)

* Added Image Examples * Added style example assets * Updated universal CSS selector style guide * Fixed bolded sentences * Fixed wrong example title * Added margin and padding exception to universal selector * Moved title tag into head tag in html structure guide * Added a clearer disclaimer that the style guide is not exhaustive * Fixed formatting of existing examples * Stylised example accordions * Added new HTML points based on feedback * Added unmount on exit for quicker load times * Added note on refering marking criteria * Edited example accordion * Added more guidelines * Added disclaimer * Added missing example for !important * Added example of good use case for <br /> * Changed 3.7. Arrow function to be less absolute * Added max-width * Reverted max-width * Removed unformatted markdown syntax * Fixed typo in example * Extracted similar code into own component * Fixed validateDomNesting errors * Reverted file to test checks * Revert "Reverted file to test checks" This reverts commit 077cdb7.
chamhayden · Oct 11, 2023 · 33e6ebd · 33e6ebd
1 parent d23b945
commit 33e6ebd
Show file tree

Hide file tree

Showing 5 changed files with 784 additions and 259 deletions.
diff --git a/frontend/src/component/StyleComponents.jsx b/frontend/src/component/StyleComponents.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 
 export const Body = (props) => {
   return (
@@ -34,7 +36,7 @@ export const HR = () => {
 }
 
 export const Code = (props) => {
-  {/*<div style={{ maxWidth: props.large ? '100%' : props.medium ? '800px' : '500px' }}>*/}
+  /*<div style={{ maxWidth: props.large ? '100%' : props.medium ? '800px' : '500px' }}>*/
   return (
     <div style={{ maxWidth: '800px' }}>
       <SyntaxHighlighter
@@ -47,71 +49,65 @@ export const Code = (props) => {
   )
 }
 
-export const Example = (props) => {
-  const [expand, setExpand] = React.useState(true);
-  return (
-    <>
-      <Body onClick={() => setExpand(!expand)}>
-        <span style={{ cursor: 'pointer' }}>
-          {expand ? '⬇️' : '⬆️'} 💡 <b>{`${(props.title ?? 'Example')}:`} </b>
-        </span>
-      </Body>
-      {expand ? (
-        <div style={{ marginLeft: '20px', marginBottom: '20px'}}>
-          {props.bads && props.bads.map((bad, idx) => {
-            return (
-              <>
-                <Body tyle={{paddingTop: '20px'}} key={idx}><b>🔴 Bad</b></Body>
-                <Code lang={props.lang} large={props.large} medium={props.medium}>{bad}</Code>
-              </>
-            )
-          })}
-          {props.goods && props.goods.map((good, idx) => {
-            return (
-              <>
-                <Body style={{paddingTop: '20px'}} key={idx}><b>🟢 Good</b></Body>
-                <Code lang={props.lang} large={props.large} medium={props.medium}>{good}</Code>
-              </>
-            )
-          })}
-        </div>
-      ) : (
-        <div style={{ marginLeft: '20px' }}>...</div>
-      )}
-    </>
-  )
-}
+export const Example = (props) => (
+  <ExampleAccordionWrapper title={props.title}>
+    {props.bads && props.bads.map((bad, idx) => {
+      return (
+        <React.Fragment key={`bad-${idx}`}>
+          <Body tyle={{paddingTop: '20px'}} key={idx}><b>🔴 Bad</b></Body>
+          <Code lang={props.lang} large={props.large} medium={props.medium}>{bad}</Code>
+        </React.Fragment>
+      )
+    })}
+    {props.goods && props.goods.map((good, idx) => {
+      return (
+        <React.Fragment key={`good-${idx}`}>
+          <Body style={{paddingTop: '20px'}} ><b>🟢 Good</b></Body>
+          <Code lang={props.lang} large={props.large} medium={props.medium}>{good}</Code>
+        </React.Fragment>
+      )
+    })}
+  </ExampleAccordionWrapper>
+)
+
+export const ExampleImages = ({ title, srcArray = [] }) => (
+  <ExampleAccordionWrapper title={title}>
+    {srcArray.map((asset, idx) => (
+      <CaptionedImage src={asset.src} alt={`Example #${idx + 1}`} caption={asset.caption} key={`Example #${idx + 1}`}/>
+    ))}
+  </ExampleAccordionWrapper>
+)
 
-export const ExampleImages = ({ title, srcArray = [] }) => {
-  const [expand, setExpand] = React.useState(true);
+const ExampleAccordionWrapper = ({ children, title = 'Example' }) => {
+  const [expand, setExpand] = React.useState(false);
 
   return (
-    <>
-      <Body onClick={() => setExpand(!expand)}>
-        <span style={{ cursor: 'pointer' }}>
-          {expand ? '⬇️' : '⬆️'} 💡 <b>{`${(title ?? 'Example')}:`} </b>
-        </span>
-      </Body>
-      {expand ? (
-        srcArray.map((asset, idx) => (
-          <CaptionedImage src={asset.src} alt={`Example #${idx + 1}`} caption={asset.caption} />
-        ))
-      ) : (
-        <div style={{ marginLeft: '20px' }}>...</div>
-      )}
-    </>
+    <Box sx={{ boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 15px', borderRadius: '15px'}} my={2}>
+      <Box sx={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }} p={1} onClick={() => setExpand(!expand)}>
+        <ExpandLessIcon style={{ rotate: (expand) ? '180deg' : '0deg', transition: 'rotate 0.1s ease-in-out' }} />
+        <Body>
+          <b>{`${(title)}:`} </b>
+        </Body>
+      </Box>
+      <Collapse in={expand} unmountOnExit>
+        <Box component='hr' m={0}/>
+        <Box p={2} pl={3}>
+          {children}
+        </Box>
+      </Collapse>
+    </Box>
   )
 }
 
 const CaptionedImage = ({ src, alt, caption }) => (
-  <Box mb={4}>
+  <Box component='figure' m={0} mb={4}>
     <Box
       component='img'
       src={src}
       alt={alt}
       maxWidth='700px'
       width='100%'
     />
-    <Typography><i>{caption ?? ''}</i></Typography>
+    <Typography component='figcaption'><i>{caption ?? ''}</i></Typography>
   </Box>
 )