Footer component

src/components/Footer/index.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Footer } from './index';
+
+export default { title: 'Footer' };
+
+export const withDefault = (): JSX.Element => <Footer />;
+withDefault.story = { name: 'default' };
+
+export const withDark = (): JSX.Element => <Footer variant="dark" />;
+withDark.story = { name: 'dark' };

src/components/Footer/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ContactDetails } from '../ContactDetails';
+import { Logo } from '../Logo';
+import { color, bp } from '../../theme';
+
+export type FooterVariant = 'light' | 'dark';
+
+interface Props {
+  variant?: FooterVariant;
+}
+
+const FooterWrapper = styled.div<Props>`
+  position: relative;
+  color: ${({ variant }) => (variant === 'light' ? color.dark : color.light)};
+  padding-left: 20px;
+  padding-right: 20px;
+  height: 340px;
+  background-color: ${({ variant }) =>
+    variant === 'light' ? color.primary : color.dark};
+`;
+
+const ContactWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 165px;
+  @media screen and (min-width: ${bp.tablet}) {
+    align-items: flex-end;
+  }
+`;
+
+const Copyright = styled.p`
+  position: absolute;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 8px;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  @media screen and (min-width: ${bp.tablet}) {
+    margin: 0;
+  }
+`;
+
+const FooterLogo = styled(Logo)`
+  position: absolute;
+  max-width: 60%;
+  width: 450px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  pointer-events: none;
+  backface-visibility: hidden;
+  @media screen and (min-width: ${bp.tablet}) {
+    left: initial;
+    right: initial;
+    margin: 0;
+  }
+`;
+
+export const Footer: React.FC<Props> = ({ variant = 'light' }) => (
+  <FooterWrapper variant={variant}>
+    <FooterLogo />
+    <ContactWrapper>
+      <ContactDetails variant={variant === 'light' ? 'dark' : 'light'} />
+    </ContactWrapper>
+    <Copyright>{`Copyright © ${new Date().getFullYear()} Wombak`}</Copyright>
+  </FooterWrapper>
+);

src/components/Logo/index.tsx

@@ -23,7 +23,8 @@ interface Props {
 }
 
 export const Logo: React.FC<Props> = ({
-  variant = 'dark'
+  variant = 'dark',
+  className
 }: Props & React.SVGAttributes<SVGElement>) => {
   const uid = useUID();
   const { logo, text, shadow } = variations[variant] ?? {};
@@ -38,6 +39,7 @@ export const Logo: React.FC<Props> = ({
         xmlnsXlink="http://www.w3.org/1999/xlink"
         width="163"
         viewBox="0 0 163 80"
+        className={className}
       >
         <defs>
           <path

src/components/index.ts

@@ -4,3 +4,4 @@ export { Button } from './Button';
 export { Header } from './Header';
 export { Logo } from './Logo';
 export { ContactDetails } from './ContactDetails';
+export { Footer } from './Footer';