Add footer components

[dhmacs]

This PR adds footer components to the library.

QA

Ensure that everything is exported correctly using the following steps:

1. Clone this repo and build the package with npm run build and npm pack
2. Create a new Create React App using npx create-react-app my-app --template typescript
3. Copy ifixit-footer-0.2.5.tgz into my-app
4. Install required dependencies: npm install -E @chakra-ui/react @emotion/react @emotion/styled framer-motion ifixit-react-components-0.2.5.tgz
5. Copy src/components/Footer/stores.json , src/components/Footer/links.json and src/components/Footer/partners.json into my-app/src
6. Replace my-app/src/App.tsx with the following code:

App.tsx

import {
  ChakraProvider,
  Divider,
  extendTheme,
  Flex,
  Img,
  Menu,
  MenuList,
  SimpleGrid,
  Stack,
} from "@chakra-ui/react";
import {
  CountryCode,
  FacebookLogo,
  FlagIcon,
  Footer,
  FooterLink,
  FooterMenuItem,
  FooterMenuLink,
  FooterMenuList,
  FooterPartnerLink,
  Globe,
  InstagramLogo,
  RepairOrgLogo,
  StoreCurrency,
  StoreFlagBackdrop,
  StoreMenuButton,
  StoreMenuItem,
  StoreName,
  theme,
  TwitterLogo,
  YoutubeLogo,
} from "@ifixit/react-components";
import * as React from "react";
import links from "./links.json";
import partners from "./partners.json";
import stores from "./stores.json";

const customTheme = extendTheme(theme);

export default function App() {
  return (
    <ChakraProvider theme={customTheme}>
      <Flex direction="column" h="100vh" justify="flex-end">
        <Footer>
          <SimpleGrid
            columns={{
              base: 1,
              sm: 3,
              lg: 4,
            }}
            spacing="4"
            px={{
              base: 5,
              sm: 10,
            }}
            py="10"
            autoFlow="row"
          >
            {links.map((linklist, index) => (
              <FooterMenuList key={index}>
                {linklist.map((link) => {
                  return (
                    <FooterMenuItem key={link.label}>
                      <FooterMenuLink href={link.url}>
                        {link.label}
                      </FooterMenuLink>
                    </FooterMenuItem>
                  );
                })}
              </FooterMenuList>
            ))}
            <FooterMenuList>
              <FooterMenuItem>
                <FooterMenuLink href="#" icon={FacebookLogo}>
                  Facebook
                </FooterMenuLink>
              </FooterMenuItem>
              <FooterMenuItem>
                <FooterMenuLink href="#" icon={TwitterLogo}>
                  Twitter
                </FooterMenuLink>
              </FooterMenuItem>
              <FooterMenuItem>
                <FooterMenuLink href="#" icon={InstagramLogo}>
                  Instagram
                </FooterMenuLink>
              </FooterMenuItem>
              <FooterMenuItem>
                <FooterMenuLink href="#" icon={YoutubeLogo}>
                  Youtube
                </FooterMenuLink>
              </FooterMenuItem>
              <FooterMenuItem>
                <FooterMenuLink href="#" icon={RepairOrgLogo}>
                  Repair.org
                </FooterMenuLink>
              </FooterMenuItem>
            </FooterMenuList>
            <SimpleGrid
              columns={3}
              spacing="4"
              gridColumnEnd={{
                sm: "span 3",
                lg: "auto",
              }}
            >
              {partners.map((partner) => {
                return (
                  <FooterPartnerLink key={partner.name} href="#">
                    <Img
                      h="full"
                      mx="auto"
                      objectFit="contain"
                      src={partner.logo}
                      alt={partner.name}
                    />
                  </FooterPartnerLink>
                );
              })}
            </SimpleGrid>
          </SimpleGrid>
          <Divider borderColor="trueGray.700" />
          <SimpleGrid
            columns={{
              base: 1,
              lg: 2,
            }}
            py="6"
            px={{
              base: 5,
              sm: 10,
            }}
            spacing={{
              base: 10,
            }}
          >
            <Stack
              direction={{
                base: "row",
              }}
              spacing={{
                base: 2,
                sm: 12,
              }}
              justify={{
                base: "space-between",
                sm: "center",
                lg: "flex-start",
              }}
            >
              <Menu isLazy lazyBehavior="keepMounted">
                <StoreMenuButton
                  icon={
                    <StoreFlagBackdrop>
                      <FlagIcon code={CountryCode.US} />
                    </StoreFlagBackdrop>
                  }
                >
                  Region
                </StoreMenuButton>
                <MenuList>
                  {stores.map((store) => {
                    return (
                      <StoreMenuItem key={store.code} as="a" href={store.url}>
                        <FlagIcon code={store.code.toUpperCase() as any} />
                        <StoreName>{store.name}</StoreName>
                        <StoreCurrency>{store.currency}</StoreCurrency>
                      </StoreMenuItem>
                    );
                  })}
                </MenuList>
              </Menu>
              <FooterLink href="#" icon={Globe}>
                Help translate
              </FooterLink>
            </Stack>
            <Stack
              justify={{
                base: "flex-start",
                sm: "center",
                lg: "flex-end",
              }}
              direction={{
                base: "column",
                sm: "row",
              }}
              spacing={{
                base: 2,
                sm: 4,
              }}
            >
              <FooterLink href="#">Licensed under creative commons</FooterLink>
              <Divider
                opacity={{
                  base: 1,
                  sm: 1,
                }}
                orientation="vertical"
                borderColor="trueGray.700"
              />
              <FooterLink href="#">Privacy</FooterLink>
              <Divider
                opacity={{
                  base: 1,
                  sm: 1,
                }}
                orientation="vertical"
                borderColor="trueGray.700"
              />
              <FooterLink href="#">Legal</FooterLink>
            </Stack>
          </SimpleGrid>
        </Footer>
      </Flex>
    </ChakraProvider>
  );
}

7. Run npm run start and visit http://localhost:3000 to verify that the code compiles and the footer is rendered correctly

Note: If you encounter issues with React types try to reinstall them as suggested here facebook/create-react-app#9891 (comment)

[deltuh-vee]

QA 🎬
The footer is rendered correctly

[sterlinghirsh]

CR ⚡

[cdcline]

CR 👍