Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style Guide Updates from Ass1 and Ass2 feedback #13

Merged
merged 28 commits into from
Oct 11, 2023
Merged

Style Guide Updates from Ass1 and Ass2 feedback #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
df8bd39
Added Image Examples
GHWang28 Sep 17, 2023
5e44876
Added style example assets
GHWang28 Sep 17, 2023
ad72f78
Updated universal CSS selector style guide
GHWang28 Sep 17, 2023
6e0c689
Fixed bolded sentences
GHWang28 Sep 17, 2023
5a56cee
Fixed wrong example title
GHWang28 Sep 17, 2023
16fb16c
Added margin and padding exception to universal selector
GHWang28 Sep 17, 2023
d444be6
Moved title tag into head tag in html structure guide
GHWang28 Sep 18, 2023
610a79e
Merge branch 'chamhayden:master' into master
GHWang28 Oct 8, 2023
56bf4ab
Added a clearer disclaimer that the style guide is not exhaustive
GHWang28 Oct 8, 2023
01186e1
Fixed formatting of existing examples
GHWang28 Oct 8, 2023
02f7336
Stylised example accordions
GHWang28 Oct 8, 2023
70a1fb2
Added new HTML points based on feedback
GHWang28 Oct 8, 2023
738e986
Added unmount on exit for quicker load times
GHWang28 Oct 8, 2023
89bc2ac
Added note on refering marking criteria
GHWang28 Oct 8, 2023
4354a59
Edited example accordion
GHWang28 Oct 9, 2023
69f6059
Added more guidelines
GHWang28 Oct 9, 2023
bf8a1d2
Added disclaimer
GHWang28 Oct 9, 2023
b6862bd
Added missing example for !important
GHWang28 Oct 9, 2023
89ac5f8
Added example of good use case for <br />
GHWang28 Oct 9, 2023
dbb6127
Changed 3.7. Arrow function to be less absolute
GHWang28 Oct 9, 2023
3da3984
Added max-width
GHWang28 Oct 9, 2023
1302db6
Reverted max-width
GHWang28 Oct 9, 2023
ba9bedf
Removed unformatted markdown syntax
GHWang28 Oct 9, 2023
dbcaf37
Fixed typo in example
GHWang28 Oct 9, 2023
da2c3d6
Extracted similar code into own component
GHWang28 Oct 10, 2023
77d2e8d
Fixed validateDomNesting errors
GHWang28 Oct 10, 2023
077cdb7
Reverted file to test checks
GHWang28 Oct 10, 2023
606bf46
Revert "Reverted file to test checks"
GHWang28 Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 49 additions & 53 deletions frontend/src/component/StyleComponents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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
Expand All @@ -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>
)
Loading
Loading