feat(route-viewer): route details viewer prototype

example.css

@@ -38,7 +38,7 @@
 
 .sidebar {
   height: 100%;
-  padding: 10px;
+  padding: 0;
   box-shadow: 3px 0px 12px #00000052;
   z-index: 1000;
 }

lib/components/app/app.css

@@ -51,3 +51,8 @@
   margin-bottom: 30px;
   box-sizing: border-box;
 }
+
+/* Batch routing panel requires top padding missing from sidebar */
+.batch-routing-panel {
+  padding-top: 10px;
+}

lib/components/viewers/route-details.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Button } from 'react-bootstrap'
+
+import Icon from '../narrative/icon'
+
+/** Converts text color (either black or white) to rgb */
+const textHexToRgb = (color) => (color === '#ffffff' ? '255,255,255' : '0,0,0')
+
+const Wrapper = styled.div`
+  padding: 8px;
+`
+const LogoLinkContainer = styled.div`
+  display: flex;
+  padding-top: 10px;
+  justify-content: space-between;
+`
+const MoreDetailsLink = styled.a`
+    color: ${(props) => props.color};
+    background-color: rgba(${(props) => textHexToRgb(props.color)},0.1);
+    padding: 5px;
+    border-radius: 5px;
+    transition: 0.1s all ease-in-out;
+
+    &:hover {
+        background-color: rgba(255,255,255,0.8);
+        color: #333;
+    }
+}
+`
+const PatternContainer = styled.div`
+  background-color: ${(props) => props.color};
+  color: ${(props) => props.textColor};
+  display: flex;
+  justify-content: flex-start;
+  align-items: baseline;
+  gap: 16px;
+  padding: 0 8px;
+  margin: 0;
+  filter: saturate(200%);
+
+  h4 {
+      margin-bottom: 0px;
+  }
+
+  button {
+      color: inherit;
+      border-bottom: 3px solid ${(props) => props.textColor};
+  }
+
+  button:hover {
+      color: ${(props) => props.color};
+      background-color: ${(props) => props.textColor};
+      text-decoration: none;
+  }
+}
+`
+
+class RouteDetails extends Component {
+  static propTypes = {
+    color: PropTypes.string,
+    contrastColor: PropTypes.string,
+    route: PropTypes.shape({ id: PropTypes.string })
+  };
+  render () {
+    const { className, route, routeColor, textColor } = this.props
+    const { agency, url } = route
+    return (
+      <div>
+        <Wrapper className={className}>
+          This route runs every ?? minutes, ?? days of the week.
+          <LogoLinkContainer>
+            {agency && <span>Run by {agency.name}</span>}
+            {url && (
+              <span>
+                <MoreDetailsLink color={textColor} href={url} target='_blank'>
+                  <Icon type='link' />
+                  More details
+                </MoreDetailsLink>
+              </span>
+            )}
+          </LogoLinkContainer>
+        </Wrapper>
+        <PatternContainer color={routeColor} textColor={textColor}>
+          <h4>Stops To</h4>
+          <Button bsStyle='link'>Place one</Button>
+        </PatternContainer>
+      </div>
+    )
+  }
+}
+
+const StyledRouteDetails = styled(RouteDetails)`
+  background-color: ${(props) => props.routeColor};
+  color: ${(props) => props.textColor};
+`
+
+export default StyledRouteDetails

lib/components/viewers/route-viewer.js

@@ -12,6 +12,8 @@ import { findRoutes, findRoute } from '../../actions/api'
 import { ComponentContext } from '../../util/contexts'
 import { getModeFromRoute } from '../../util/viewer'
 
+import RouteDetails from './route-details'
+
 /**
  * Determine the appropriate contrast color for text (white or black) based on
  * the input hex string (e.g., '#ff00ff') value.
@@ -152,10 +154,6 @@ const RouteNameElement = styled(Label)`
   text-overflow: ellipsis;
 `
 
-const RouteDetails = styled.div`
-  padding: 8px;
-`
-
 class RouteRow extends PureComponent {
   static contextType = ComponentContext
 
@@ -228,12 +226,7 @@ class RouteRow extends PureComponent {
         </RouteRowButton>
         <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>
           {isActive && (
-            <RouteDetails>
-              {route.url
-                ? <a href={route.url} target='_blank'>Route Details</a>
-                : 'No route URL provided.'
-              }
-            </RouteDetails>
+            <RouteDetails route={route} routeColor={backgroundColor} textColor={color} />
           )}
         </VelocityTransitionGroup>
       </StyledRouteRow>