dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(grid): init component

Browse Source
This commit is contained in:
Dan Head
2021-01-27 00:07:25 +00:00
parent 9817e3d0e9
commit 9c84cb91c9
4 changed files with 109 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/grid.js Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
const Container = styled.div`
display: grid;
gap: var(--spacing-x-sm) var(--spacing-y-sm);
${props =>
props.columns &&
props.columns.map((column, i) =>
i === 0 && column > 1
? css`
grid-template-columns: repeat(${column}, minmax(10px, 1fr));
`
: css`
@media (min-width: ${props.breakpoints[i - 1]}) {
grid-template-columns: repeat(${column}, minmax(10px, 1fr));
${
i === 1 &&
css`
gap: var(--spacing-x-md) var(--spacing-y-md);
`
}
`
)}
`;
export default function Grid({ columns, breakpoints = ["30em"], children }) {
return (
<Container columns={columns} breakpoints={breakpoints}>
{children}
</Container>
);
}

1
src/components/index.js
View File

@@ -3,6 +3,7 @@ export { default as Card } from "./card";
export { default as Content } from "./content"; export { default as Content } from "./content";
export { default as CustomSlick } from "./custom-slick"; export { default as CustomSlick } from "./custom-slick";
export { default as Footer } from "./footer"; export { default as Footer } from "./footer";
export { default as Grid } from "./grid";
export { default as HeaderLogo } from "./header-logo"; export { default as HeaderLogo } from "./header-logo";
export { default as Header } from "./header"; export { default as Header } from "./header";
export { default as Heading } from "./heading"; export { default as Heading } from "./heading";

23
src/components/section.js
View File

@@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import styled from "@emotion/styled"; import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Heading } from "."; import { Heading } from ".";
const Container = styled.div` const Container = styled.div`
@@ -23,27 +22,11 @@ const Head = styled.div`
text-align: center; text-align: center;
`; `;
const Body = styled.div`
${props =>
props.grid > 0 &&
css`
display: grid;
gap: var(--spacing-x-sm) 0;
@media (min-width: ${props.breakpoint}) {
grid-template-columns: repeat(${props.grid}, 1fr);
gap: var(--spacing-x-md);
}
`}
`;
export default function Section({ export default function Section({
heading, heading,
headingElement = "h2", headingElement = "h2",
children, children,
variant, variant
grid,
breakpoint = "30em"
}) { }) {
return ( return (
<Container variant={variant}> <Container variant={variant}>
@@ -53,9 +36,7 @@ export default function Section({
<Heading el={headingElement}>{heading}</Heading> <Heading el={headingElement}>{heading}</Heading>
</Head> </Head>
)} )}
<Body grid={grid} breakpoint={breakpoint}> {children}
{children}
</Body>
</Content> </Content>
</Container> </Container>
); );

141
src/pages/contact.js
View File

@@ -4,6 +4,7 @@ import { Marker } from "google-maps-react";
import Layout from "../layout"; import Layout from "../layout";
import { import {
Button, Button,
Grid,
Header, Header,
Icon, Icon,
IconWithContent, IconWithContent,
@@ -56,83 +57,85 @@ export default function Index({ data }) {
> >
<h1>Get in touch</h1> <h1>Get in touch</h1>
</Header> </Header>
<Section grid={2} breakpoint="40em"> <Section>
<div> <Grid columns={[1, 2]} breakpoints={["40rem"]}>
<Text>Get in touch with us</Text> <div>
<Text textStyle="italic">More info here</Text> <Text>Get in touch with us</Text>
<IconWithContent> <Text textStyle="italic">More info here</Text>
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Text color="dark" size="lg">
07123 456789
</Text>
</IconWithContent>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
</div>
<div>
{submitted ? (
<IconWithContent> <IconWithContent>
<Icon color="dark" size="lg"> <Icon color="dark" size="lg">
<CheckCircle /> <Phone />
</Icon> </Icon>
<> <Text color="dark" size="lg">
<Text color="dark" size="lg"> 07123 456789
Thank you for contacting us </Text>
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</Text>
</>
</IconWithContent> </IconWithContent>
) : ( <IconWithContent>
<> <Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
</div>
<div>
{submitted ? (
<IconWithContent> <IconWithContent>
<Icon color="dark" size="lg"> <Icon color="dark" size="lg">
<Envelope /> <CheckCircle />
</Icon> </Icon>
<Text color="dark" size="lg"> <>
Contact us <Text color="dark" size="lg">
</Text> Thank you for contacting us
</Text>
<Text color="dark" size="md">
We will be in touch shortly
</Text>
</>
</IconWithContent> </IconWithContent>
<form ) : (
name="contact" <>
method="POST" <IconWithContent>
action="/contact" <Icon color="dark" size="lg">
onSubmit={handleSubmit} <Envelope />
data-netlify="true" </Icon>
data-netlify-honeypot="bot-field" <Text color="dark" size="lg">
> Contact us
<input type="hidden" name="form-name" value="contact" /> </Text>
<InputText id="contact-name" name="name" label="Name" /> </IconWithContent>
<InputText id="contact-email" name="email" label="Email" /> <form
<InputText name="contact"
id="contact-telephone" method="POST"
name="telephone" action="/contact"
label="Telephone" onSubmit={handleSubmit}
/> data-netlify="true"
<InputText data-netlify-honeypot="bot-field"
id="contact-message" >
name="message" <input type="hidden" name="form-name" value="contact" />
label="Message" <InputText id="contact-name" name="name" label="Name" />
textArea <InputText id="contact-email" name="email" label="Email" />
/> <InputText
<Button type="submit">Submit</Button> id="contact-telephone"
</form> name="telephone"
</> label="Telephone"
)} />
</div> <InputText
id="contact-message"
name="message"
label="Message"
textArea
/>
<Button type="submit">Submit</Button>
</form>
</>
)}
</div>
</Grid>
</Section> </Section>
<Map <Map
initialCenter={{ initialCenter={{