chore: rename components to have name in filepath

src/components/Layout/index.js → src/components/Layout/Layout.js

@@ -2,21 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { graphql, StaticQuery } from 'gatsby';
 import { Helmet } from 'react-helmet';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 
 import { Background, Logo, Menu, StyledLink, RootPageStyle } from 'components/';
 import { mapAllGalleriesGraphQLResponse } from 'utils/mappings';
 import { albumInfoType, locationType } from 'utils/types';
 
 import theme from '../../theme';
 
+const HeaderContainer = styled.div`
+  position: sticky;
+  top: 0;
+`;
+
 const Header = ({ albums }) => (
-  <>
+  <HeaderContainer>
     <StyledLink to="/" color="black">
       <Logo />
     </StyledLink>
     <Menu albums={albums} />
-  </>
+  </HeaderContainer>
 );
 
 Header.propTypes = {
@@ -37,7 +42,7 @@ export const LayoutComponent = ({ children, albums, location }) => (
   <ThemeProvider theme={theme}>
     {/* NOTE: Fragment is important here otherwise the context-provider complains about multiple children */}
     <>
-      {/* TODO: convoluted helmet-syntax due to https://github.com/nfl/react-helmet/issues/373 */}
+      {/* TODO: convoluted helmet-syntax due to this bug https://github.com/nfl/react-helmet/issues/373 */}
       <Helmet
         title="J F Dietrich Photography"
         meta={[

src/components/Layout/Layout.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-testing-library';
 import generateProps from 'react-generate-props';
 
-import { LayoutComponent } from './';
+import { LayoutComponent } from './Layout';
 
 const createTestProps = (custom = {}) => ({
   ...generateProps(LayoutComponent, { optional: true }),

src/components/Logo/Logo.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from 'react-testing-library';
 
-import Logo from './';
+import Logo from './Logo';
 
 test('should render as expected', () => {
   const { container } = render(<Logo />);

src/components/Menu/index.js → src/components/Menu/Menu.js

@@ -131,17 +131,6 @@ const Menu = ({ albums }) => {
         data-testid="menu-slideout"
         visible={isOpen}
       >
-        {/* <StyledLink
-        to="/"
-        color="black"
-        fontFamily="body"
-        fontSize={['m', 'l']}
-        fontWeight="bold"
-        display="block"
-        mb={2}
-      >
-        Home
-      </StyledLink> */}
         {albums.map(album => (
           <React.Fragment key={album.albumTitle}>
             <Album data-testid="menu-album">{album.albumTitle}</Album>

src/components/Menu/Menu.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from 'react-testing-library';
 
-import Menu from './';
+import Menu from './Menu';
 
 const createGallery = (title, path) => ({
   title,

src/components/index.js

@@ -1,7 +1,9 @@
-export { default as Background } from './Background';
-export { default as ContentContainer } from './ContentContainer';
-export { default as Logo } from './Logo';
-export { default as Menu } from './Menu';
-export { default as StyledLink } from './StyledLink';
-export { default as Layout } from './Layout';
+export { default as Background } from './Background/Background';
+export {
+  default as ContentContainer,
+} from './ContentContainer/ContentContainer';
+export { default as Logo } from './Logo/Logo';
+export { default as Menu } from './Menu/Menu';
+export { default as StyledLink } from './StyledLink/StyledLink';
+export { default as Layout } from './Layout/Layout';
 export { RootPageStyle } from './global-styles';