Add building blocks dropdown

__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap

@@ -211,7 +211,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                         >
                           <Styled(styled.span)>
                             <span
-                              className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                              className="sc-eHfRjS sc-hzMMVR itBJml esvTHq"
                             >
                               <ArrowLeft>
                                 <StyledIconBase
@@ -267,11 +267,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                 </div>
                 <styled.div>
                   <div
-                    className="sc-hJxDiT dbjOgr"
+                    className="sc-eltbHq dRzdDq"
                   >
                     <styled.div>
                       <div
-                        className="sc-jlIlqL sdJoA"
+                        className="sc-jGVbWl gRkaSo"
                       >
                         <h1>
                           <FormattedMessage

lib/components/app/desktop-nav.tsx

@@ -31,6 +31,26 @@ const StyledNav = styled(Nav)`
     margin-left: 5px;
     margin-right: -10px;
   }
+
+  .navBarItem {
+    position: static;
+    & > button {
+      background: transparent;
+      border: none;
+      color: white;
+      padding: 15px;
+      line-height: 20px;
+
+      @media (max-width: 768px) {
+        padding: 10px;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+        color: #ececec;
+      }
+    }
+  }
 `
 
 const NavItemOnLargeScreens = styled(NavbarItem)`

lib/components/app/locale-selector.tsx

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { GlobeAmericas } from '@styled-icons/fa-solid/GlobeAmericas'
 import { useIntl } from 'react-intl'
 import React from 'react'
 
 import * as uiActions from '../../actions/ui'
-import { Dropdown } from '../util/dropdown'
 import { getLanguageOptions } from '../../util/i18n'
 import { UnstyledButton } from '../util/unstyled-button'
 
@@ -23,11 +23,12 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
   return languageOptions ? (
     <li>
       <Dropdown
+        className="navBarItem"
         id="locale-selector"
         label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
         listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
-        name={<GlobeAmericas />}
         style={{ display: 'block ruby' }}
+        text={<GlobeAmericas />}
       >
         {Object.keys(languageOptions).map((locale: string) => (
           <li key={locale} lang={locale}>

lib/components/narrative/narrative-itineraries-header.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable complexity */
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { ExclamationTriangle } from '@styled-icons/fa-solid/ExclamationTriangle'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Itinerary } from '@opentripplanner/types'
@@ -11,7 +12,6 @@ import styled from 'styled-components'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import { ItinerarySortOption } from '../../util/config-types'
 import { sortOptions } from '../util/sortOptions'
-import { SortResultsDropdown } from '../util/dropdown'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PopupTriggerText from '../app/popup-trigger-text'
@@ -206,10 +206,10 @@ export default function NarrativeItinerariesHeader({
                 )}
               </StyledIconWrapper>
             </button>
-            <SortResultsDropdown
+            <Dropdown
               id="sort-results"
               label={sortResultsLabel}
-              name={sortText}
+              text={sortText}
               title={sortResultsLabel}
             >
               {sortOptionsArr.map((sortOption) => (
@@ -223,7 +223,7 @@ export default function NarrativeItinerariesHeader({
                   </UnstyledButton>
                 </li>
               ))}
-            </SortResultsDropdown>
+            </Dropdown>
           </ItinerariesHeaderContainer>
           <PlanFirstLastButtons />
         </>

lib/components/user/nav-login-button.css

@@ -25,6 +25,18 @@
   background-color: #080808;
 }
 
+p {
+  padding: 5px 15px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
 #app-menu-locale-selector {
   display: none;
 }

lib/components/user/nav-login-button.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { User } from '@auth0/auth0-react'
 import { User as UserIcon } from '@styled-icons/fa-regular/User'
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
-import { Dropdown } from '../util/dropdown'
 import { NewWindowIconA11y } from '../util/externalLink'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
@@ -64,9 +64,10 @@ const NavLoginButton = ({
     return (
       <li>
         <Dropdown
+          className="navBarItem"
           id="user-selector"
           label={intl.formatMessage({ id: 'components.SubNav.userMenu' })}
-          name={
+          text={
             <span>
               <Avatar
                 alt={displayedName}
@@ -75,51 +76,51 @@ const NavLoginButton = ({
               />
             </span>
           }
-          pullRight
         >
-          <li className="header">{displayedName}</li>
-
-          {links &&
-            links.map((link, i) => {
-              if (link.url.startsWith('http')) {
+          <p>{displayedName}</p>
+          <ul>
+            {links &&
+              links.map((link, i) => {
+                if (link.url.startsWith('http')) {
+                  return (
+                    <li key={link.url}>
+                      <NavUnstyledLink
+                        // Bypass our Link component and directly render an <a> element here,
+                        // so that the link works even when running the app locally.
+                        as="a"
+                        href={link.url}
+                        target="_blank"
+                      >
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                        <NewWindowIconA11y
+                          size={12}
+                          style={{ marginLeft: '5px', marginTop: '-3px' }}
+                        />
+                      </NavUnstyledLink>
+                    </li>
+                  )
+                }
                 return (
                   <li key={link.url}>
-                    <NavUnstyledLink
-                      // Bypass our Link component and directly render an <a> element here,
-                      // so that the link works even when running the app locally.
-                      as="a"
-                      href={link.url}
-                      target="_blank"
-                    >
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                      <NewWindowIconA11y
-                        size={12}
-                        style={{ marginLeft: '5px', marginTop: '-3px' }}
-                      />
+                    <NavUnstyledLink to={link.url}>
+                      {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
+                        <FormattedMessage id="components.NavLoginButton.myAccount" />
+                      ) : (
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                      )}
                     </NavUnstyledLink>
                   </li>
                 )
-              }
-              return (
-                <li key={link.url}>
-                  <NavUnstyledLink to={link.url}>
-                    {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
-                      <FormattedMessage id="components.NavLoginButton.myAccount" />
-                    ) : (
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                    )}
-                  </NavUnstyledLink>
-                </li>
-              )
-            })}
+              })}
 
-          <hr role="presentation" />
+            <hr role="presentation" />
 
-          <li>
-            <UnstyledButton onClick={onSignOutClick}>
-              <FormattedMessage id="components.NavLoginButton.signOut" />
-            </UnstyledButton>
-          </li>
+            <li>
+              <UnstyledButton onClick={onSignOutClick}>
+                <FormattedMessage id="components.NavLoginButton.signOut" />
+              </UnstyledButton>
+            </li>
+          </ul>
         </Dropdown>
       </li>
     )