Skip to content

Commit

Permalink
feat: add background color prop to footer component (#136)
Browse files Browse the repository at this point in the history 
Allow to customize footer background color via prop
  • Loading branch information
@amalv
amalv authored Dec 17, 2019
1 parent a4d1f8e commit 3061f99
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 68 deletions.
5 changes: 5 additions & 0 deletions src/components/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import * as React from "react";
import { deepOrange } from "@material-ui/core/colors";
import { Footer } from "./Footer";

export default {
title: "Footer",
};

export const Default: React.FC = () => <Footer />;

export const DeepOrange: React.FC = () => (
<Footer backgroundcolor={deepOrange[500]} />
);
8 changes: 6 additions & 2 deletions src/components/Footer.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import styled from "styled-components";
import Typography from "@material-ui/core/Typography";

export const BaseFooter = styled.div`
export interface BaseFooterProps {
backgroundcolor: string;
}

export const BaseFooter = styled.div<BaseFooterProps>`
padding: 40px;
background-color: #6200ee;
background-color: ${({ backgroundcolor }): string => backgroundcolor};
`;

export const FooterTitle = styled(Typography)`
Expand Down
141 changes: 75 additions & 66 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,101 @@
import * as React from "react";
import Grid from "@material-ui/core/Grid";
import { StylesProvider } from "@material-ui/core/styles";
import { StylesProvider, useTheme } from "@material-ui/core/styles";
import {
BaseFooter,
FooterTitle,
FooterElement,
Divider,
} from "./Footer.styles";

export const Footer: React.FC = () => (
<StylesProvider injectFirst>
<BaseFooter>
<Grid container justify="center" alignItems="center">
<Grid item>
<Grid container direction="column" spacing={2}>
<Grid item>
<FooterTitle>Categories</FooterTitle>
</Grid>
<Grid item>
<Grid container spacing={6}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Electronics</FooterElement>
</Grid>
<Grid item>
<FooterElement>Tablets</FooterElement>
</Grid>
<Grid item>
<FooterElement>Displays</FooterElement>
export interface FooterProps {
backgroundcolor?: string | undefined;
}
export const Footer: React.FC<FooterProps> = ({
backgroundcolor,
}: FooterProps) => {
const theme = useTheme();
const backgroundColor = backgroundcolor || theme.palette.primary.main;
return (
<StylesProvider injectFirst>
<BaseFooter backgroundcolor={backgroundColor}>
<Grid container justify="center" alignItems="center">
<Grid item>
<Grid container direction="column" spacing={2}>
<Grid item>
<FooterTitle>Categories</FooterTitle>
</Grid>
<Grid item>
<Grid container spacing={6}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Electronics</FooterElement>
</Grid>
<Grid item>
<FooterElement>Tablets</FooterElement>
</Grid>
<Grid item>
<FooterElement>Displays</FooterElement>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Games</FooterElement>
</Grid>
<Grid item>
<FooterElement>Hardware</FooterElement>
</Grid>
<Grid item>
<FooterElement>Software</FooterElement>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Games</FooterElement>
</Grid>
<Grid item>
<FooterElement>Hardware</FooterElement>
</Grid>
<Grid item>
<FooterElement>Software</FooterElement>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item>
<Divider />
</Grid>
<Grid item>
<Grid container spacing={5}>
<Grid item>
<FooterTitle>Company</FooterTitle>
</Grid>
<Grid item>
<FooterTitle>Other Links</FooterTitle>
</Grid>
<Grid item>
<Divider />
</Grid>
</Grid>
<Grid item>
<Grid container spacing={10}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>About</FooterElement>
</Grid>
<Grid item>
<FooterElement>Jobs</FooterElement>
</Grid>
<Grid item>
<Grid container spacing={5}>
<Grid item>
<FooterTitle>Company</FooterTitle>
</Grid>
<Grid item>
<FooterTitle>Other Links</FooterTitle>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Help</FooterElement>
</Grid>
<Grid item>
<Grid container spacing={10}>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>About</FooterElement>
</Grid>
<Grid item>
<FooterElement>Jobs</FooterElement>
</Grid>
</Grid>
<Grid item>
<FooterElement>F.A.Q.</FooterElement>
</Grid>
<Grid item>
<Grid container direction="column">
<Grid item>
<FooterElement>Help</FooterElement>
</Grid>
<Grid item>
<FooterElement>F.A.Q.</FooterElement>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</BaseFooter>
</StylesProvider>
);
</BaseFooter>
</StylesProvider>
);
};

1 comment on commit 3061f99

@vercel
Copy link

@vercel vercel bot commented on 3061f99 Dec 17, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.