AB#94 Update Traffic now -link look and feel

app/component/DisruptionInfoButton.js

@@ -13,10 +13,7 @@ function DisruptionInfoButton(props, { config }) {
         className="cursor-pointer disruption-info noborder"
         onClick={props.openDisruptionInfo}
       >
-        <FormattedMessage
-          id="disruptions-and-diversions"
-          defaultMessage="Disruptions and diversions"
-        />
+        <FormattedMessage id="traffic-now-long" defaultMessage="Services now" />
         {props.viewer?.alerts?.length > 0 && (
           <Icon
             img="icon_caution_white_exclamation"

app/component/IndexPage.js

@@ -7,7 +7,6 @@ import isEqual from 'lodash/isEqual';
 import DTAutoSuggest from '@digitransit-component/digitransit-component-autosuggest';
 import DTAutosuggestPanel from '@digitransit-component/digitransit-component-autosuggest-panel';
 import CtrlPanel from '@digitransit-component/digitransit-component-control-panel';
-import TrafficNowLink from '@digitransit-component/digitransit-component-traffic-now-link';
 import { getModesWithAlerts } from '@digitransit-search-util/digitransit-search-util-query-utils';
 import { createUrl } from '@digitransit-store/digitransit-store-future-route';
 import inside from 'point-in-polygon';
@@ -47,14 +46,11 @@ import {
   checkPositioningPermission,
   startLocationWatch,
 } from '../action/PositionActions';
+import TrafficNowLink from './trafficnow/TrafficNowLink';
 
 const StopRouteSearch = withSearchContext(DTAutoSuggest);
 const LocationSearch = withSearchContext(DTAutosuggestPanel);
 
-const trafficNowHandler = () => {
-  window.location = `/${TRAFFICNOW}`;
-};
-
 class IndexPage extends React.Component {
   static contextTypes = {
     intl: intlShape.isRequired,
@@ -224,6 +220,11 @@ class IndexPage extends React.Component {
     this.context.router.push(url);
   };
 
+  trafficNowHandler = e => {
+    e.preventDefault();
+    this.context.router.push(`/${TRAFFICNOW}`);
+  };
+
   NearStops() {
     const { intl, config } = this.context;
     const { colors, fontWeights } = config;
@@ -410,7 +411,10 @@ class IndexPage extends React.Component {
               </>
             )}
             {trafficNowLink && (
-              <TrafficNowLink lang={lang} handleClick={trafficNowHandler} />
+              <TrafficNowLink
+                handleClick={this.trafficNowHandler}
+                href={`/${TRAFFICNOW}`}
+              />
             )}
           </CtrlPanel>
         </div>
@@ -457,9 +461,8 @@ class IndexPage extends React.Component {
             {!trafficNowLink ||
               (trafficNowLink !== '' && (
                 <TrafficNowLink
-                  lang={lang}
-                  handleClick={trafficNowHandler}
-                  fontWeights={fontWeights}
+                  handleClick={this.trafficNowHandler}
+                  href={`/${TRAFFICNOW}`}
                 />
               ))}
           </CtrlPanel>

app/component/trafficnow/Header.js

@@ -17,21 +17,21 @@ export default function Header() {
     >
       <span className="traffic-now__header-breadcrumb">
         <Link to="/">
-          <FormattedMessage id="trafficnow-bread" />
+          <FormattedMessage id="traffic-now_bread" />
         </Link>
         &nbsp;
         <Icon
           img="icon_arrow-dropdown"
           className="traffic-now__header-crumbarrow"
         />
         &nbsp;
-        <FormattedMessage id="trafficnow" />
+        <FormattedMessage id="traffic-now" />
       </span>
       <h2>
-        <FormattedMessage id="trafficnow" />
+        <FormattedMessage id="traffic-now" />
       </h2>
       <span className="traffic-now__header-description">
-        <FormattedMessage id="trafficnow-description" />
+        <FormattedMessage id="traffic-now_description" />
       </span>
     </div>
   );

app/component/trafficnow/RouteBadges.js

@@ -41,10 +41,12 @@ export default function RouteBadges({ entities: rawEntities }) {
               width={2}
               iconScale={isRoute ? NORMAL_ICON_SCALE : STOP_SIGN_ICON_SCALE}
               background={
-                <IconBackground
-                  backgroundShape={isRoute ? undefined : 'stopsign'}
-                  backgroundColor="currentcolor"
-                />
+                !isRoute && (
+                  <IconBackground
+                    backgroundShape="stopsign"
+                    backgroundColor="currentcolor"
+                  />
+                )
               }
             />
             <div className="route-badges-mode-lines flex-row vertically-centered">

app/component/trafficnow/TrafficNowLink.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Icon from '../Icon';
+
+const TrafficNowLink = ({ handleClick, href }) => {
+  return (
+    <a className="traffic-now__link" href={href} onClick={handleClick}>
+      <div className="traffic-now__link__left-column">
+        <Icon
+          img="icon_info-filled"
+          color="#007ac9"
+          height={1.5}
+          width={1.5}
+          colorAsFillOnly={false}
+        />
+        <div className="traffic-now__link__left-column-body">
+          <FormattedMessage
+            id="traffic-now_link"
+            defaultValue="Services now"
+            tagName="h2"
+          />
+          <FormattedMessage
+            id="traffic-now_link-description"
+            defaultValue="See changes and disruptions"
+            tagName="p"
+          />
+        </div>
+      </div>
+      <span className="traffic-now__link__caret">
+        <Icon img="icon_arrow-collapse--right" color="#007ac9" />
+      </span>
+    </a>
+  );
+};
+
+TrafficNowLink.propTypes = {
+  handleClick: PropTypes.func.isRequired,
+  href: PropTypes.string,
+};
+
+TrafficNowLink.defaultProps = {
+  href: undefined,
+};
+
+export default TrafficNowLink;

app/component/trafficnow/trafficnow.scss

@@ -222,3 +222,55 @@
     flex-direction: column;
   }
 }
+
+.traffic-now__link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover &__caret {
+    transform: translateX(4px);
+    transition: transform 0.1s;
+  }
+
+  &__left-column {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    gap: var(--space-s);
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      letter-spacing: -0.5px;
+      font-style: normal;
+
+      h2 {
+        @media (min-width: 768px) {
+          font-size: 1.25em;
+        }
+
+        margin: 0;
+        color: $black;
+        font-size: 1.125em;
+        font-weight: $font-weight-medium;
+        line-height: 24px;
+      }
+
+      p {
+        margin: 0;
+        color: $gray;
+        font-size: 14px;
+        font-weight: $font-weight-disclaimer;
+        line-height: 18px;
+      }
+    }
+  }
+}

app/translations.js

@@ -1769,10 +1769,13 @@ const translations = {
     'tracking-button-off': 'tracking off',
     'tracking-button-offline': 'tracking failed',
     'tracking-button-on': 'tracking on',
-    trafficnow: 'Traffic now',
-    'trafficnow-bread': 'Travelling',
-    'trafficnow-description':
+    'traffic-now': 'Traffic now',
+    'traffic-now-long': 'Services now',
+    'traffic-now_bread': 'Travelling',
+    'traffic-now_description':
       'Up-to-date information on disruptions and exceptions',
+    'traffic-now_link': 'Services now',
+    'traffic-now_link-description': 'See changes and disruptions',
     traficom: 'Traficom',
     tram: 'Tram',
     'tram-with-route-number': 'Tram {routeNumber} {headSign}',
@@ -3111,9 +3114,13 @@ const translations = {
     'tracking-button-off': 'paikannus pois päältä',
     'tracking-button-offline': 'paikannus epäonnistui',
     'tracking-button-on': 'paikannus päällä',
-    trafficnow: 'Liikenne nyt',
-    'trafficnow-bread': 'Matkustaminen',
-    'trafficnow-description': 'Ajantasaiset tiedot häiriöistä ja poikkeuksista',
+    'traffic-now': 'Liikenne nyt',
+    'traffic-now-long': 'Liikennetilanne nyt',
+    'traffic-now_bread': 'Matkustaminen',
+    'traffic-now_description':
+      'Ajantasaiset tiedot häiriöistä ja poikkeuksista',
+    'traffic-now_link': 'Liikennetilanne nyt',
+    'traffic-now_link-description': 'Katso häiriöt ja poikkeukset',
     traficom: 'Traficom',
     tram: 'Raitiovaunu',
     'tram-with-route-number': 'Raitiovaunu {routeNumber} {headSign}',
@@ -6092,9 +6099,12 @@ const translations = {
     'tracking-button-off': 'lokalisering av',
     'tracking-button-offline': 'lokalisering misslyckades',
     'tracking-button-on': 'lokalisering på',
-    trafficnow: 'Trafikläget nu',
-    'trafficnow-bread': 'Att resa med oss',
-    'trafficnow-description': 'Aktuell information om störningar och undantag',
+    'traffic-now': 'Trafikläget nu',
+    'traffic-now-long': 'Trafikläget nu',
+    'traffic-now_bread': 'Att resa med oss',
+    'traffic-now_description': 'Aktuell information om störningar och undantag',
+    'traffic-now_link': 'Trafikläget nu',
+    'traffic-now_link-description': 'Se störningar och förändringar',
     traficom: 'Traficom',
     tram: 'Spårvagn',
     'tram-with-route-number': 'Spårvagn {routeNumber} {headSign}',

digitransit-component/packages/digitransit-component-traffic-now-link/README.md

@@ -1,8 +1,11 @@
-# @digitransit-component/digitransit-component-traffic-now-link
+# DEPRECATED
+The component is no longer maintained or updated and is currently pending deletion from the project
+
+## @digitransit-component/digitransit-component-traffic-now-link
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-## TrafficNowLink
+### TrafficNowLink
 
 **Extends React.Component**
 
@@ -19,7 +22,7 @@ const lang = "fi"
 <TrafficNowLink lang={lang} handleClick={this.handleClick}/>
 ```
 
-## handleClick
+### handleClick
 
 Required. Function to handle when the banner is clicked. Also for KeyDown events
 
@@ -33,7 +36,7 @@ This module is part of the Digitransit-ui project. It is maintained in the
 [HSLdevcom/digitransit-ui](https://github.com/HSLdevcom/digitransit-ui) repository, where you can create
 PRs and issues.
 
-### Installation
+#### Installation
 
 Install this module individually: