Adds About Us page [#23]

.vscode/settings.json

@@ -1,4 +1,9 @@
 {
   "eslint.enable": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#11332B",
+    "titleBar.activeBackground": "#17483C",
+    "titleBar.activeForeground": "#F6FCFA"
+  }
 }

config/client.js

@@ -0,0 +1,6 @@
+module.exports = {
+  sanity: {
+    projectId: process.env.SANITY_PROJECT_ID || '<#< sanity.projectId >#>',
+    dataset: process.env.SANITY_DATASET || '<#< sanity.dataset >#>',
+  },
+};

package.json

@@ -29,6 +29,7 @@
     "@emotion/babel-preset-css-prop": "^10.0.23",
     "@emotion/core": "^10.0.22",
     "@emotion/styled": "^10.0.27",
+    "@sanity/block-content-to-react": "^2.0.7",
     "framer-motion": "^1.10.3",
     "gatsby": "^2.18.4",
     "gatsby-image": "^2.2.34",

plopfile.js

@@ -1,5 +1,7 @@
 const componentGenerator = require('./templates/Component');
+const pageGenerator = require('./templates/Page');
 
 module.exports = function(plop) {
   plop.setGenerator('component', componentGenerator);
+  plop.setGenerator('page', pageGenerator);
 };

src/components/constructs/Figure/Figure.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getFluidGatsbyImage } from 'gatsby-source-sanity';
+import { withSpacing } from '@utilities/styles/spacing';
+import { figcaptionStyles } from './Figure.styles';
+import clientConfig from '../../../../config/client';
+
+import Image from '@elements/Image';
+
+const Figure = ({ className, node }) => {
+  console.log('Figure', node);
+  if (!node || !node.asset || !node.asset._ref) {
+    return null;
+  }
+  const fluid = getFluidGatsbyImage(
+    node.asset._ref,
+    { maxWidth: 675 },
+    clientConfig.sanity
+  );
+
+  return (
+    <figure className={className}>
+      <Image fluid={fluid} alt={node.alt} />
+      <figcaption css={figcaptionStyles}>{node.caption}</figcaption>
+    </figure>
+  );
+};
+
+Figure.propTypes = {
+  className: PropTypes.string,
+  node: PropTypes.shape({
+    alt: PropTypes.string,
+    caption: PropTypes.string,
+    asset: PropTypes.shape({
+      _ref: PropTypes.string,
+    }),
+  }),
+};
+
+export default withSpacing(Figure);

src/components/constructs/Figure/Figure.notes.md

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

src/components/constructs/Figure/Figure.story.js

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

src/components/constructs/Figure/Figure.styles.js

@@ -0,0 +1 @@
+export const figcaptionStyles = { textAlign: 'right' };

src/components/constructs/Figure/Figure.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { render } from "@testing-library/react";
+
+import Figure from './Figure';
+
+describe('Figure', () => {
+    it('renders correctly', () => {
+        const tree = renderer
+            .create(<Figure />)
+            .toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+});

src/components/constructs/Figure/index.js

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

src/components/constructs/Layout/Layout.js

@@ -1,7 +1,9 @@
 import React, { useMemo, useState, useCallback, createContext } from 'react';
 import { Global } from '@emotion/core';
 import { GLOBAL_STYLES } from '@global';
-import { useSpring, animated } from 'react-spring';
+// import { useSpring, animated } from 'react-spring';
+import { Spring } from 'react-spring/renderprops';
+
 import {
   asideStyles,
   constructChildrenStyles,
@@ -41,76 +43,123 @@ const navLinks = [
 
 export const LayoutContext = createContext({});
 
-const Layout = ({
-  //   asideLinks,
-  children,
-  className,
-  //   navLinks,
-  withFooter,
-  withNav,
-}) => {
-  const onGetInvolved = useCallback(() => {});
-  const childrenStyles = useMemo(
-    () => constructChildrenStyles({ withFooter, withNav }),
-    [withFooter, withNav]
-  );
-  const [isNextEventOpen, setNextEventOpen] = useState(false);
-  const closeNextEvent = useCallback(() => setNextEventOpen(false), []);
+class Layout extends React.Component {
+  state = {
+    isNextEventOpen: false,
+  };
 
-  const animation = useSpring({
-    transform: `translate3d(${isNextEventOpen ? 2 : 100}%, 0, 0)`,
-    config: { mass: 5, tension: 500, friction: 80 },
-  });
+  // Context ===================================================================
+  openNextEvent = () => this.setState({ isNextEventOpen: true });
+  closeNextEvent = () => this.setState({ isNextEventOpen: false });
 
-  const context = {
-    isNextEventOpen,
-    setNextEventOpen,
+  childContext = {
+    isNextEventOpen: this.state.isNextEventOpen,
+    openNextEvent: this.openNextEvent,
+    closeNextEvent: this.closeNextEvent,
   };
 
-  return (
-    <>
-      <Global styles={GLOBAL_STYLES} />
-      <div css={rootStyles} className={className}>
-        <AsideMenu css={asideStyles} links={asideLinks} />
-        <animated.div css={nextEventStyles} style={animation}>
-          <NextEvent onClose={closeNextEvent} />
-        </animated.div>
-        <LayoutContext.Provider value={context}>
-          <Box css={wrapperStyles}>
-            {/* NAV */}
-            <Nav
-              links={navLinks}
-              background="light"
-              onButtonClick={onGetInvolved}
-            />
-
-            {/* CHILDREN */}
-            <Box css={childrenStyles}>{children}</Box>
-
-            {/* FOOTER */}
-            {withFooter && (
-              <Footer
-                element="footer"
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log(this.state, nextState);
+    if (this.state.isNextEventOpen !== nextState.isNextEventOpen) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    const {
+      //   asideLinks,
+      //   navLinks,
+      children,
+      className,
+      isCollapsingNav,
+      withFooter,
+    } = this.props;
+
+    const childrenStyles = constructChildrenStyles({
+      withNav: !isCollapsingNav,
+      withFooter,
+    });
+    const START = this.state.isNextEventOpen ? 100 : 2;
+    const END = this.state.isNextEventOpen ? 2 : 100;
+    return (
+      <>
+        <Global styles={GLOBAL_STYLES} />
+        <div css={rootStyles} className={className}>
+          <AsideMenu css={asideStyles} links={asideLinks} />
+          <Spring
+            from={{ transform: `translate3d(${START}%, 0, 0)` }}
+            to={{ transform: `translate3d(${END}%, 0, 0)` }}
+            config={{ mass: 5, tension: 500, friction: 80 }}
+          >
+            {(props) => (
+              <div style={props} css={nextEventStyles}>
+                <NextEvent onClose={this.closeNextEvent} />
+              </div>
+            )}
+          </Spring>
+          {/* <animated.div css={nextEventStyles} style={animation}>
+            <NextEvent onClose={closeNextEvent} />
+          </animated.div> */}
+          <LayoutContext.Provider value={this.childContext}>
+            <Box css={wrapperStyles}>
+              {/* NAV */}
+              <Nav
                 links={navLinks}
-                background="dark"
-                onButtonClick={onGetInvolved}
+                background="light"
+                onButtonClick={this.openNextEvent}
+                isCollapsing={isCollapsingNav}
               />
-            )}
-          </Box>
-        </LayoutContext.Provider>
-      </div>
-    </>
-  );
-};
+
+              {/* CHILDREN */}
+              <Box css={childrenStyles}>{children}</Box>
+
+              {/* FOOTER */}
+              {withFooter && (
+                <Footer
+                  element="footer"
+                  links={navLinks}
+                  background="dark"
+                  onButtonClick={this.openNextEvent}
+                />
+              )}
+            </Box>
+          </LayoutContext.Provider>
+        </div>
+      </>
+    );
+  }
+}
+
+// const Layout = () => {
+//   const childrenStyles = useMemo(
+//     () => constructChildrenStyles({ withFooter, withNav: !isCollapsingNav }),
+//     [withFooter, isCollapsingNav]
+//   );
+//   const [isNextEventOpen, setNextEventOpen] = useState(true);
+// Context ===================================================================
+// const openNextEvent = useCallback(() => setNextEventOpen(true), []);
+// const closeNextEvent = useCallback(() => setNextEventOpen(false), []);
+
+// const context = {
+//   isNextEventOpen,
+//   setNextEventOpen,
+//   openNextEvent: this.openNextEvent,
+//   closeNextEvent: this.closeNextEvent,
+// };
+
+//   const animation = useSpring({
+//     transform: `translate3d(${isNextEventOpen ? 2 : 100}%, 0, 0)`,
+//     config: { mass: 5, tension: 500, friction: 80 },
+//   });
+// };
 
 Layout.defaultProps = {
   withFooter: true,
-  withNav: true,
+  isCollapsingNav: false,
 };
 
 Layout.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
   asideLinks: PropTypes.arrayOf(
     PropTypes.shape({
       brandName: PropTypes.string,
@@ -119,19 +168,26 @@ Layout.propTypes = {
       out: PropTypes.string,
     })
   ),
+  className: PropTypes.string,
+  children: PropTypes.node,
   navLinks: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string,
       to: PropTypes.string,
     })
   ),
   withFooter: PropTypes.bool,
-  withNav: PropTypes.bool,
+  isCollapsingNav: PropTypes.bool,
 };
 
-export const withLayout = (Component, { withNav, withLayout }) => {
+export const withLayout = (Component, options = {}) => {
+  const { isCollapsingNav, withFooter } = options;
   const WithLayout = (props) => (
-    <Layout withNav={withNav} withLayout={withLayout}>
+    <Layout
+      isCollapsingNav={isCollapsingNav}
+      withFooter={withFooter}
+      {...props}
+    >
       <Component {...props} />
     </Layout>
   );
@@ -143,4 +199,4 @@ export const withLayout = (Component, { withNav, withLayout }) => {
   return WithLayout;
 };
 
-export default Layout;
+export default React.memo(Layout);

src/components/constructs/Layout/Layout.styles.js

@@ -43,13 +43,18 @@ export const asideStyles = {
 };
 
 export const nextEventStyles = {
-  position: 'fixed',
   right: 0,
   width: NEXT_EVENT_WIDTH,
   height: '100vh',
   paddingTop: S.calcSpace(4),
   paddingBottom: S.calcSpace(4),
   zIndex: 1000,
+  [`@media (max-width: ${S.LAYOUT_MOBILE_MAX})`]: {
+    position: 'fixed',
+  },
+  [`@media (min-width: ${S.LAYOUT_TABLET_MIN})`]: {
+    position: 'absolute',
+  },
 };
 
 export const wrapperStyles = {
@@ -62,9 +67,7 @@ export const wrapperStyles = {
 };
 
 const subtract = (amount) => `- ${amount}`;
-
 export const constructChildrenStyles = ({ withFooter, withNav }) => ({
-  minHeight: `calc(100vh ${withFooter ? subtract(FOOTER_HEIGHT) : ''} ${
-    withNav ? subtract(NAV_HEIGHT) : ''
-  })`,
+  paddingTop: withNav ? NAV_HEIGHT : 0,
+  minHeight: `calc(100vh ${withFooter ? subtract(FOOTER_HEIGHT) : ''})`,
 });