Merge branch 'master' into styleguide

public-convenience-ltd · Jun 8, 2020 · 4232cf7 · 4232cf7
2 parents 939784d + 8df1774
commit 4232cf7
Show file tree

Hide file tree

Showing 12 changed files with 346 additions and 238 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "*.css": "stylelint"
   },
   "dependencies": {
-    "@apollo/client": "3.0.0-rc.0",
+    "@apollo/client": "3.0.0-beta.54",
     "@apollo/link-context": "2.0.0-beta.3",
     "@apollo/link-error": "2.0.0-beta.3",
     "@artsy/fresnel": "1.1.0",

diff --git a/src/components/Drawer/Drawer.js b/src/components/Drawer/Drawer.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { motion } from 'framer-motion';
 
 import Box from '../Box';
+import Portal from '../Portal';
 
 const MENU_HEIGHT = 60; // px
 
@@ -24,29 +25,31 @@ const Drawer = ({ visible, animateFrom, ...props }) => {
   };
 
   return (
-    <Box
-      as={motion.div}
-      position="fixed"
-      top={MENU_HEIGHT}
-      {...{
-        [animateTo]: 0,
-      }}
-      height={`calc(100vh - ${MENU_HEIGHT}px)`}
-      width="100%"
-      bg="white"
-      p={3}
-      zIndex={150}
-      overflowY="auto"
-      {...props}
-      // motion props
-      variants={variants}
-      animate={visible ? 'open' : 'closed'}
-      transition={{
-        ease: 'easeInOut',
-        duration: 0.3,
-      }}
-      initial={false}
-    />
+    <Portal>
+      <Box
+        as={motion.div}
+        position="fixed"
+        top={MENU_HEIGHT}
+        {...{
+          [animateTo]: 0,
+        }}
+        height={`calc(100vh - ${MENU_HEIGHT}px)`}
+        width="100%"
+        bg="white"
+        p={3}
+        zIndex={150}
+        overflowY="auto"
+        {...props}
+        // motion props
+        variants={variants}
+        animate={visible ? 'open' : 'closed'}
+        transition={{
+          ease: 'easeInOut',
+          duration: 0.3,
+        }}
+        initial={false}
+      />
+    </Portal>
   );
 };
 

diff --git a/src/components/EntryForm.js b/src/components/EntryForm.js
@@ -13,7 +13,6 @@ import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import VisuallyHidden from '../components/VisuallyHidden';
 import Switch from '../components/Switch';
-import ConditionalWrap from '../components/ConditionalWrap';
 import { WEEKDAYS, rangeTypes } from '../openingTimes';
 
 import crosshair from '../images/crosshair-small.svg';
@@ -210,6 +209,8 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
 
     transformed = omit(transformed, ['geometry']);
 
+    transformed.noPayment = data.isFree;
+
     // transform data
     Object.keys(transformed).forEach((property) => {
       const value = transformed[property];
@@ -235,8 +236,6 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
       transformed.paymentDetails = null;
     }
 
-    transformed.noPayment = data.isFree;
-
     // construct expected opening times structure if relevant fields have changed
     if (
       [...openingTimesFields, 'has-opening-times'].some(
@@ -282,11 +281,9 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
     <Container maxWidth={846}>
       <Text fontSize={[16, 18]}>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <Text fontWeight="bold" fontSize={30} textAlign="center">
+          <VisuallyHidden>
             <h1>{title}</h1>
-          </Text>
-
-          <Spacer mt={4} />
+          </VisuallyHidden>
 
           <Box display="flex" alignItems="center" flexWrap="wrap">
             <span>1. Align the crosshair&nbsp;</span>
@@ -434,26 +431,29 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
 
           <Spacer mt={3} />
 
-          <ConditionalWrap
-            condition={!getValues('has-opening-times')}
-            wrap={(children) => <VisuallyHidden>{children}</VisuallyHidden>}
-          >
-            <>
-              <ol>
-                {WEEKDAYS.map((day, index) => {
-                  const id = `heading-${day.toLowerCase()}`;
+          <div hidden={!getValues('has-opening-times')}>
+            <ol>
+              {WEEKDAYS.map((day, index) => {
+                const id = `heading-${day.toLowerCase()}`;
+
+                return (
+                  <Box
+                    as="li"
+                    key={day}
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    mt={index === 0 ? undefined : 2}
+                  >
+                    <h3 id={id}>{day}</h3>
+
+                    <Spacer ml={2} />
 
-                  return (
                     <Box
-                      as="li"
-                      key={day}
                       display="flex"
-                      alignItems="center"
                       justifyContent="space-between"
-                      mt={index === 0 ? undefined : 2}
+                      width={['auto', '50%']}
                     >
-                      <h3 id={id}>{day}</h3>
-
                       <Box display="flex" alignItems="center">
                         <Controller
                           as={Switch}
@@ -465,6 +465,8 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
                         />
                       </Box>
 
+                      <Spacer ml={2} />
+
                       {getValues(`${day.toLowerCase()}-is-open`) ? (
                         <Box display="flex" alignItems="center">
                           <input
@@ -503,13 +505,13 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
                         'Closed'
                       )}
                     </Box>
-                  );
-                })}
-              </ol>
+                  </Box>
+                );
+              })}
+            </ol>
 
-              <Spacer mt={4} />
-            </>
-          </ConditionalWrap>
+            <Spacer mt={4} />
+          </div>
 
           <label>
             7. Notes

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -46,7 +46,11 @@ const Header = ({ mapCenter, children }) => {
           </button>
 
           <Drawer visible={isMenuVisible} zIndex={200}>
-            <MainMenu mapCenter={mapCenter} children={children} />
+            <MainMenu
+              mapCenter={mapCenter}
+              onMenuItemClick={() => setIsMenuVisible(false)}
+              children={children}
+            />
           </Drawer>
         </Box>
 

diff --git a/src/components/Header/MainMenu.js b/src/components/Header/MainMenu.js
@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 import Box from '../Box';
 import Text from '../Text';
 import { Media } from '../Media';
+import { useAuth } from '../../Auth';
 
 const StyledNavLink = styled(NavLink)`
   // active class is added by NavLink component
@@ -15,62 +16,92 @@ const StyledNavLink = styled(NavLink)`
 `;
 
 // Todo: Contact link
-const MainMenu = ({ mapCenter, children }) => (
-  <Text
-    fontWeight="bold"
-    textAlign={['center', 'left']}
-    css={{
-      // fill container on mobile
-      height: '100%',
-    }}
-  >
-    <Box
-      display="flex"
-      flexDirection={['column', 'row']}
-      height={['100%', 'auto']}
+const MainMenu = ({
+  mapCenter,
+  onMenuItemClick = Function.prototype,
+  children,
+}) => {
+  const { isAuthenticated, logout } = useAuth();
+
+  return (
+    <Text
+      fontWeight="bold"
+      textAlign={['center', 'left']}
+      css={{
+        // fill container on mobile
+        height: '100%',
+      }}
     >
       <Box
-        as="ul"
         display="flex"
         flexDirection={['column', 'row']}
-        flexGrow={1}
+        height={['100%', 'auto']}
       >
-        <Box as="li" ml={[0, 4]}>
-          <StyledNavLink to="/" exact>
-            Find Toilet
-          </StyledNavLink>
-        </Box>
-        <Box as="li" mt={[3, 0]} ml={[0, 4]}>
-          <StyledNavLink
-            to={
-              mapCenter
-                ? `/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`
-                : `/loos/add`
-            }
-          >
-            Add Toilet
-          </StyledNavLink>
-        </Box>
+        <Box
+          as="ul"
+          display="flex"
+          flexDirection={['column', 'row']}
+          height={['100%', 'auto']}
+          width="100%"
+        >
+          <Box as="li" ml={[0, 4]}>
+            <StyledNavLink to="/" onClick={onMenuItemClick} exact>
+              Find Toilet
+            </StyledNavLink>
+          </Box>
+          <Box as="li" mt={[3, 0]} ml={[0, 4]}>
+            <StyledNavLink
+              to={
+                mapCenter
+                  ? `/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`
+                  : `/loos/add`
+              }
+              onClick={onMenuItemClick}
+            >
+              Add Toilet
+            </StyledNavLink>
+          </Box>
 
-        <Box as="li" mt={['auto', 0]} ml={[0, 'auto']}>
-          <StyledNavLink to="/about">About</StyledNavLink>
-        </Box>
-        <Box as="li" mt={[3, 0]} ml={[0, 4]}>
-          <StyledNavLink to="/use-our-loos">Our Sponsor</StyledNavLink>
-        </Box>
-        <Box as="li" mt={[3, 0]} mb={['auto', 0]} ml={[0, 4]}>
-          <StyledNavLink to="/contact">Contact</StyledNavLink>
-        </Box>
-      </Box>
+          <Box as="li" mt={['auto', 0]} ml={[0, 'auto']}>
+            <StyledNavLink to="/about" onClick={onMenuItemClick}>
+              About
+            </StyledNavLink>
+          </Box>
+          <Box as="li" mt={[3, 0]} ml={[0, 4]}>
+            <StyledNavLink to="/use-our-loos" onClick={onMenuItemClick}>
+              Our Sponsor
+            </StyledNavLink>
+          </Box>
+          <Box as="li" mt={[3, 0]} mb={['auto', 0]} ml={[0, 4]}>
+            <StyledNavLink to="/contact" onClick={onMenuItemClick}>
+              Contact
+            </StyledNavLink>
+          </Box>
 
-      {children && (
-        <Box as={Media} lessThan="md">
-          <Text fontWeight="normal">{children}</Text>
+          {isAuthenticated() && (
+            <Box as="li" mt={[3, 0]} mb={['auto', 0]} ml={[0, 4]}>
+              <button
+                type="button"
+                onClick={() => {
+                  logout();
+                  onMenuItemClick();
+                }}
+              >
+                Logout
+              </button>
+            </Box>
+          )}
         </Box>
-      )}
-    </Box>
-  </Text>
-);
+
+        {children && (
+          <Box as={Media} lessThan="md">
+            <Text fontWeight="normal">{children}</Text>
+          </Box>
+        )}
+      </Box>
+    </Text>
+  );
+};
 MainMenu.propTypes = {
   // mobile footer
   children: PropTypes.any,

diff --git a/src/components/LooMap/LooMap.js b/src/components/LooMap/LooMap.js
@@ -14,6 +14,7 @@ import AccessibilityList from './AccessibilityList';
 import Box from '../Box';
 import Marker from './Marker';
 import VisuallyHidden from '../VisuallyHidden';
+import { Media } from '../Media';
 
 import crosshair from '../../images/crosshair.svg';
 
@@ -231,8 +232,13 @@ const LooMap = ({
           minZoom={minZoom}
           maxZoom={maxZoom}
         />
+
         {memoizedMarkers}
-        <ZoomControl position="bottomright" />
+
+        <Media greaterThan="md">
+          <ZoomControl position="bottomright" />
+        </Media>
+
         <LocateMapControl position="bottomright" />
 
         {renderAccessibilityOverlays && (