Sponsors Page - Basic Layout

src/components/sections/Sponsors/Sponsors.js

@@ -10,31 +10,13 @@ import {
 import companyPropTypes from '@utilities/prop-types/company';
 
 import Box from '@elements/Box';
-import ButtonWithIcon from '@elements/ButtonWithIcon';
 import GatsbyImage from 'gatsby-image';
 import Grid from '@elements/Grid';
 import Text from '@elements/Text';
 
 const Sponsors = ({ className, data, background }) => {
   return (
-    <Box my4 css={rootStyles} className={className}>
-      <Box css={headingStyles} mb3>
-        <Text
-          scale={7}
-          element="h2"
-          lead
-          color={background === 'light' ? 'grey_40' : 'grey_90'}
-        >
-          Sponsors
-        </Text>
-        <ButtonWithIcon
-          color={background === 'light' ? 'secondary_d' : 'primary'}
-          capped
-          iconName="heart"
-        >
-          Become a sponsor
-        </ButtonWithIcon>
-      </Box>
+    <Box my4 css={rootStyles} className={className}>     
       <Grid fluid={18} gap={2} css={sponsorsStyles}>
         {data.map(({ id, name, logo: { fluid, fixed } }) => {
           if (fluid || fixed) {

src/components/sections/Sponsors/Sponsors.styles.js

@@ -2,12 +2,6 @@ import S from '@symbols';
 
 export const rootStyles = {};
 
-export const headingStyles = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-};
-
 export const sponsorStyles = {
   display: 'inline-block',
   backgroundColor: S.COLOR_THEME.SECONDARY_L,

src/components/views/Home/Home.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withSpacing } from '@utilities/styles/spacing';
-import { rootStyles, illustrationStyles } from './Home.styles';
+import { rootStyles, illustrationStyles, headingStyles } from './Home.styles';
 
 import Box from '@elements/Box';
 import Credits from '@sections/Credits';
@@ -10,6 +10,7 @@ import Grid from '@elements/Grid';
 import Hero from './partials/Hero';
 import Illustration from '@constructs/Illustration';
 import SpeakerGallery from '@sections/SpeakerGallery';
+import ButtonWithIcon from '@elements/ButtonWithIcon';
 import Sponsors from '@sections/Sponsors';
 import Stat from '@constructs/Stat';
 import Text from '@elements/Text';
@@ -42,6 +43,14 @@ const Home = ({
       {/* SPONSORS */}
       <Box backgroundColor="grey_40">
         <Box container pt8>
+          <Box css={headingStyles} mb3>
+            <Text scale={7} element="h2" lead color="grey_90">
+              Sponsors
+            </Text>
+            <ButtonWithIcon color="primary" capped iconName="heart">
+              Become a sponsor
+            </ButtonWithIcon>
+          </Box>
           <Sponsors mb6 background="dark" data={sponsorsData} />
           <Illustration css={illustrationStyles} name="glitch-two" />
         </Box>

src/components/views/Home/Home.styles.js

@@ -5,6 +5,12 @@ export const rootStyles = {
   overflowX: 'hidden',
 };
 
+export const headingStyles = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+};
+
 export const illustrationStyles = {
   [`@media (max-width: ${S.LAYOUT_MOBILE_MAX})`]: {
     width: '240%',

src/components/views/Sponsors/Sponsors.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withSpacing } from '@utilities/styles/spacing';
+import { LevelStyles, ColumnStyles, textBlockStyles } from './Sponsors.styles';
+
+import Box from '@elements/Box';
+import Text from '@elements/Text';
+import ButtonWithIcon from '@elements/ButtonWithIcon';
+import SponsorSection from '@sections/Sponsors';
+
+const Sponsors = ({ className, data }) => {
+  return (
+    <Box mt5 container className={className}>
+      <Text title mb5 element="h1" color="tertiary" scale={16}>
+        Sponsors
+      </Text>
+      <Box css={LevelStyles}>
+        <Text css={textBlockStyles} paragraph>
+          Mollit cillum cillum nulla aliquip officia Lorem. Magna enim voluptate
+          dolore laboris ad aliquip est minim velit excepteur aliquip dolor.
+          Excepteur dolor sint qui ea. Aute qui do elit cillum non deserunt
+          ullamco proident qui esse pariatur.
+        </Text>
+        <ButtonWithIcon css={textBlockStyles} color="secondary_d" size="large" iconName="heart">
+          Become a Sponsor
+        </ButtonWithIcon>
+      </Box>
+      <Box css={LevelStyles}>
+        <Box css={ColumnStyles}>
+          <Text heading mb4 scale={8}>
+            Max
+          </Text>
+          <Text paragraph>
+            Fugiat aute sit mollit ad nisi occaecat est non laborum pariatur.
+            Adipisicing Lorem aliquip commodo qui sint cupidatat ex esse. Irure
+            aute exercitation dolor cillum officia quis consequat est sunt nulla
+            sunt ullamco anim. Elit occaecat ipsum do qui. Laboris dolor non
+            esse aute in exercitation ea do ea anim. Qui Lorem aliqua incididunt
+            reprehenderit voluptate est adipisicing veniam amet do. Ut et do
+            commodo tempor est eu pariatur non eiusmod enim.
+          </Text>
+        </Box>
+        <Box css={ColumnStyles}>
+          <Text heading mb4 scale={8}>
+            Lite
+          </Text>
+          <Text paragraph>
+            Sunt reprehenderit laborum mollit ullamco adipisicing deserunt elit
+            non enim tempor dolor fugiat. Ipsum labore aute labore tempor
+            aliquip qui consectetur non. Elit tempor id adipisicing duis
+            incididunt officia voluptate mollit non labore irure. Proident
+            aliquip anim aute minim consectetur cillum voluptate qui est commodo
+            irure culpa. Reprehenderit consectetur do excepteur proident aute
+            excepteur anim in nulla.
+          </Text>
+        </Box>
+      </Box>
+      <Box css={LevelStyles}></Box>
+      <SponsorSection data={data} />
+    </Box>
+  );
+};
+
+Sponsors.propTypes = {
+  className: PropTypes.string,
+};
+
+export default withSpacing(Sponsors);

src/components/views/Sponsors/Sponsors.notes.md

@@ -0,0 +1,9 @@
+# Sponsors
+
+---
+
+(description)
+
+### Usage
+-   …
+-   …

src/components/views/Sponsors/Sponsors.story.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Sponsors from '@views/Sponsors';
+import notes from './Sponsors.notes.md';
+
+storiesOf('Views', module).add(
+    'Sponsors',
+    () => (
+        <Sponsors />
+    ),
+    { notes }
+);

src/components/views/Sponsors/Sponsors.styles.js

@@ -0,0 +1,26 @@
+import S from '@symbols';
+
+const base = {};
+
+export const LevelStyles = {
+  flexDirection: 'row',
+  display: 'flex',
+  alignSelf: 'stretch',
+  alignItems: 'center',
+  margin: '5rem 0',
+  justifyContent: 'space-between',
+};
+
+export const ColumnStyles = {
+  flexDirection: 'column',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  width: '40%',
+};
+
+export const textBlockStyles = {
+  maxWidth: '40%',  
+};
+
+export const constructStyles = (props) => [base];

src/components/views/Sponsors/Sponsors.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from "@testing-library/react";
+
+import Sponsors from './Sponsors';
+
+const mockProps = {
+    data: []
+}
+
+describe('Sponsors', () => {
+    it('renders correctly', () => {
+        const component = render(<Sponsors {...mockProps} />)
+
+        expect(component).toBeTruthy();
+    })
+});

src/components/views/Sponsors/index.js

@@ -0,0 +1,3 @@
+import Sponsors from './Sponsors';
+
+export default Sponsors;

src/pages/sponsors.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { formatSponsors } from '@utilities/content';
+import { graphql } from 'gatsby';
+import { withLayout, LayoutContext } from '@constructs/Layout';
+
+import SEO from '@constructs/SEO';
+import Sponsors from '@views/Sponsors';
+
+const SponsorsPage = ({ data }) => {
+  // const layoutContext = useContext(LayoutContext);
+  const buffer = formatSponsors(data);
+
+  return (
+    <>
+      <SEO page="Sponsors" />
+      <Sponsors data={buffer} />
+    </>
+  );
+};
+
+SponsorsPage.propTypes = {
+  data: PropTypes.object,
+};
+
+export default withLayout(SponsorsPage);
+
+// export const query = graphql``;

src/utilities/content/index.js

@@ -1,3 +1,4 @@
 /* PLOP_INJECT_FORMATTER */
+export { default as formatSponsors } from './sponsors';
 export { default as formatAboutUs } from './about-us';
 export { default as formatHome } from './home';

src/utilities/content/sponsors.js

@@ -0,0 +1,5 @@
+import fakeCompany from '../../../__mocks__/data/company-mock';
+
+export default function(data) {
+  return Array.from(Array(12)).map(() => fakeCompany());
+}