Refactor Searchbar into Smaller Components

src/components/Searchbar/CondensedSearchbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { uiColors } from '@leafygreen-ui/palette';
+import { theme } from '../../theme/docsTheme';
+
+// Defining as a styled component allows us to use as a selector in ExpandButton
+const ExpandMagnifyingGlass = styled(Icon)``;
+
+const ExpandButton = styled(IconButton)`
+  background-color: #fff;
+  background-image: none;
+  border: none;
+  border-radius: ${theme.size.medium};
+  box-shadow: none;
+  height: ${theme.size.large};
+  position: absolute;
+  right: ${theme.size.small};
+  /* 32px button in a 36px container, 2px top gives equal spacing */
+  top: 2px;
+  width: ${theme.size.large};
+  z-index: 1;
+  :hover,
+  :focus {
+    background-color: #f7f9f8;
+    ${ExpandMagnifyingGlass} {
+      color: ${uiColors.gray.dark3};
+      transition: color 150ms ease-in;
+    }
+  }
+  :before {
+    display: none;
+  }
+  :after {
+    display: none;
+  }
+`;
+
+const CondensedSearchbar = ({ onExpand }) => (
+  <ExpandButton aria-label="Open MongoDB Docs Search" onClick={onExpand}>
+    <ExpandMagnifyingGlass glyph="MagnifyingGlass" fill={uiColors.gray.base} />
+  </ExpandButton>
+);
+
+export default CondensedSearchbar;

src/components/Searchbar/ExpandedSearchbar.js

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo } from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { uiColors } from '@leafygreen-ui/palette';
+import useScreenSize from '../../hooks/useScreenSize';
+import { theme } from '../../theme/docsTheme';
+import SearchTextInput from './SearchTextInput';
+
+const CLOSE_BUTTON_SIZE = theme.size.medium;
+const GO_BUTTON_COLOR = uiColors.green.light3;
+const GO_BUTTON_SIZE = '20px';
+
+const removeDefaultHoverEffects = css`
+  background-image: none;
+  border: none;
+  box-shadow: none;
+  :before {
+    display: none;
+  }
+  :after {
+    display: none;
+  }
+`;
+
+const CloseButton = styled(IconButton)`
+  background-color: #fff;
+  border-radius: ${CLOSE_BUTTON_SIZE};
+  height: ${CLOSE_BUTTON_SIZE};
+  position: absolute;
+  right: ${theme.size.small};
+  /* button is 24 px and entire container is 36px so 6px top gives equal spacing */
+  top: 6px;
+  width: ${CLOSE_BUTTON_SIZE};
+  z-index: 1;
+  ${removeDefaultHoverEffects};
+`;
+
+const GoButton = styled(IconButton)`
+  background-color: ${GO_BUTTON_COLOR};
+  border-radius: ${GO_BUTTON_SIZE};
+  height: ${GO_BUTTON_SIZE};
+  padding: 0;
+  position: absolute;
+  right: ${theme.size.default};
+  /* button is 20 px and entire container is 36px so 8px top gives equal spacing */
+  top: ${theme.size.small};
+  width: ${GO_BUTTON_SIZE};
+  z-index: 1;
+  ${removeDefaultHoverEffects};
+`;
+
+const GoIcon = styled(Icon)`
+  /* Icon box size is 16px, 3px gives equal width and height */
+  left: 3px;
+  top: 3px;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+`;
+
+const MagnifyingGlass = styled(Icon)`
+  color: ${uiColors.gray.base};
+  left: ${theme.size.default};
+  position: absolute;
+  /* This icon is 16px tall in a 36px tall container, so 10px gives equal spacing */
+  top: 10px;
+  transition: color 150ms ease-in;
+  z-index: 1;
+`;
+
+const ExpandedSearchbar = ({ isFocused, onChange, onMobileClose, value }) => {
+  const { isMobile } = useScreenSize();
+  const isSearching = useMemo(() => !!value && isFocused, [isFocused, value]);
+  const shouldShowGoButton = useMemo(() => !!value && !isMobile, [isMobile, value]);
+
+  const onSearchChange = useCallback(
+    e => {
+      const searchTerm = e.target.value;
+      onChange(searchTerm);
+    },
+    [onChange]
+  );
+
+  return (
+    <>
+      <MagnifyingGlass glyph="MagnifyingGlass" />
+      <SearchTextInput isSearching={isSearching} onChange={onSearchChange} value={value} />
+      {shouldShowGoButton && (
+        <GoButton aria-label="Go" href="#">
+          <GoIcon glyph="ArrowRight" fill="#13AA52" />
+        </GoButton>
+      )}
+      {isMobile && (
+        <CloseButton aria-label="Close Search" onClick={onMobileClose}>
+          <Icon glyph="X" fill={uiColors.gray.base} />
+        </CloseButton>
+      )}
+    </>
+  );
+};
+
+// Export this icon to be used as a selector by a parent component
+export { MagnifyingGlass };
+export default ExpandedSearchbar;

src/components/Searchbar/SearchTextInput.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { uiColors } from '@leafygreen-ui/palette';
+import TextInput from '@leafygreen-ui/text-input';
+import { theme } from '../../theme/docsTheme';
+
+const SEARCHBAR_HEIGHT_OFFSET = '5px';
+
+const activeTextBarStyling = css`
+  background-color: #fff;
+  border: none;
+  color: ${uiColors.gray.dark3};
+`;
+
+const StyledTextInput = styled(TextInput)`
+  /* Curve the text input box and put padding around text for icons/buttons */
+  div > input {
+    border: none;
+    background-color: ${uiColors.gray.light3};
+    border-radius: ${theme.size.medium};
+    color: ${uiColors.gray.dark1};
+    /* 24 px for magnifying glass plus 16px margin */
+    padding-left: 40px;
+    padding-right: ${theme.size.large};
+    font-weight: 300;
+    letter-spacing: 0.5px;
+    transition: background-color 150ms ease-in;
+    ::placeholder {
+      color: ${uiColors.gray.dark1};
+    }
+    @media ${theme.screenSize.upToSmall} {
+      border: none;
+      :hover,
+      :focus {
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* Remove blue border on focus */
+  div > div:last-child {
+    display: none;
+  }
+  > label {
+    display: none;
+  }
+
+  @media ${theme.screenSize.upToSmall} {
+    background-color: #fff;
+    padding-bottom: ${theme.size.tiny};
+    ${({ isSearching }) => isSearching && `box-shadow: 0 2px 2px 0 rgba(231,238,236,0.2);`};
+    div > input {
+      /* Always have this element filled in for mobile */
+      ${activeTextBarStyling}
+      /* Switching font size on mobile allows us to prevent iOS Safari from zooming in */
+      font-size: ${theme.fontSize.default};
+      padding-top: 2px;
+    }
+    /**
+    On mobile, there is some space above the searchbar that is uncovered (on
+      desktop this is taken care of by the navbar). Here we can block elements
+      below from peeking through with a pseudoelement to cover this top space
+    */
+    :before {
+      background-color: #fff;
+      bottom: 100%;
+      content: '';
+      position: absolute;
+      top: -${SEARCHBAR_HEIGHT_OFFSET};
+      width: 100%;
+    }
+  }
+`;
+
+const SearchTextInput = ({ isSearching, onChange, value, ...props }) => (
+  <StyledTextInput
+    autoFocus
+    label="Search Docs"
+    isSearching={isSearching}
+    onChange={onChange}
+    placeholder="Search Documentation"
+    tabIndex="0"
+    value={value}
+    {...props}
+  />
+);
+
+// Also export the styled component for styled selector use
+export { activeTextBarStyling, StyledTextInput };
+export default SearchTextInput;