Styling

Use styled-components

We now use styled-components for styling rather than using SASS/SCSS.

Any new work should be written using styled-components, and rewriting existing components away from SASS/CSS is highly encouraged.

const StyledContainer = styled.div`
    font-family: ${props => props.theme.textFontFamily};
    display: block;
    ${props => props.theme.boxShadow(1)};
    padding: 6px;
    background-color: ${props => props.theme.colours.whiteBg};
`;

const StyledButton = styled.button`
    background-color: ${props => props.theme.colours.shadowGrey};
    border: 0;
    padding: 0;
    color: ${props => props.theme.colours.link};
`;

const Page = () => {
    return (
        <StyledContainer>
            <StyledButton />
        </StyledContainer
    )
}

Use theme for colours, fonts etc

Do not hardcode colours, fonts etc inside styled components. Instead get these from the projects theme using styled-components theme support

Draft

This should be improved with examples once the PR for theming has been merged.

styled-components should not be on a single line

Bad

const StyledButton = styled.button`border:0; padding:0;`;

Good

const StyledButton = styled.button`
    border:0; 
    padding:0;
    `;

styled-components should be prefixed with "Styled"

Bad

<$Button />
<Card />
<S.Container />

Good

<StyledButton />
<StyledCard />
<StyledContainer />