AB#581 Traffic Now page Disruption "drill" behaviour instead of the accordion

app/component/trafficnow/CanceledTripCard.js

@@ -2,19 +2,18 @@ import React from 'react';
 import { useRouter } from 'found';
 import { DateTime } from 'luxon';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import { PREFIX_TIMETABLE, TRAFFICNOW, routePagePath } from '../../util/path';
 import Card from '../Card';
 import Icon from '../Icon';
 import CanceledDepartures from './components/CanceledDepartures';
+import DisruptionStatus from './components/DisruptionStatus';
 import RouteBadgeGroup from './components/RouteBadgeGroup';
 import DisruptionBadge from './DisruptionBadge';
 
-const CanceledTripCard = ({ mode, totalCount, trips }) => {
+const CanceledTripCard = ({ mode, totalCount, trips, isMobile = false }) => {
   const { router } = useRouter();
   const { colors } = useConfigContext();
-  const intl = useIntl();
 
   const handleRouteBadgeClick = url => e => {
     e.preventDefault();
@@ -60,7 +59,20 @@ const CanceledTripCard = ({ mode, totalCount, trips }) => {
       onClick={handleRouteBadgeClick(`/${TRAFFICNOW}/peruutukset/${mode}`)}
     >
       <header>
-        <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
+        <span className="disruption-card__header-left">
+          <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
+          {!isMobile && (
+            <>
+              {' '}
+              <div className="separator vertical" />
+              <DisruptionStatus
+                active
+                showDates={false}
+                className="text-xs-bold"
+              />
+            </>
+          )}
+        </span>
         <button type="button">
           <Icon
             img="icon_arrow-collapse--right"
@@ -103,10 +115,9 @@ const CanceledTripCard = ({ mode, totalCount, trips }) => {
           }
         />
       </div>
-      <div className="disruption-card__body-row-validity-icon text-xs">
-        <Icon img="icon_clock" />
-        {intl.formatMessage({ id: 'valid', defaultMessage: 'Active' })}
-      </div>
+      {isMobile && (
+        <DisruptionStatus active showDates={false} className="text-xs-bold" />
+      )}
     </Card>
   );
 };
@@ -115,6 +126,7 @@ CanceledTripCard.propTypes = {
   mode: PropTypes.string.isRequired,
   totalCount: PropTypes.number.isRequired,
   trips: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  isMobile: PropTypes.bool,
 };
 
 export default CanceledTripCard;

app/component/trafficnow/CanceledTrips.js

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import Link from 'found/Link';
 import { DateTime } from 'luxon';
 import PropTypes from 'prop-types';
-import { useIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { usePaginationFragment } from 'react-relay/hooks';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import Card from '../Card';
@@ -13,6 +13,7 @@ import CanceledTripsModal from './CanceledTripsModal';
 import CancellationContainer from './components/CancellationContainer';
 import ResultsProgressBar from './components/ResultsProgressBar';
 import DisruptionBadge from './DisruptionBadge';
+import DisruptionStatus from './components/DisruptionStatus';
 import CanceledTripsPaginationFragment from './queries/CanceledTripsPaginationFragment';
 
 const CANCELED_TRIPS_QUERY_AMOUNT = 20;
@@ -83,10 +84,7 @@ const CanceledTrips = ({ query, isMobile = false, ...props }) => {
     <>
       <header className="canceled-trips__header">
         <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
-        <div className="validity-container text-s-bold">
-          <Icon img="icon_clock" />
-          {intl.formatMessage({ id: 'valid', defaultMessage: 'Active' })}
-        </div>
+        <DisruptionStatus active showDates={false} className="text-s-bold" />
       </header>
       <div className="canceled-trips__body">
         {Object.entries(trips).map(
@@ -157,8 +155,8 @@ const CanceledTrips = ({ query, isMobile = false, ...props }) => {
   return (
     <>
       <div
-        className={cx('canceled-trips__cta-container', {
-          'canceled-trips__cta-container--mobile': isMobile,
+        className={cx('detail-view__cta-container', {
+          'detail-view__cta-container--mobile': isMobile,
         })}
       >
         <Link to="/liikenne" className="cta-small">

app/component/trafficnow/DisruptionCard.js

@@ -1,123 +1,80 @@
 import React from 'react';
-import { ButtonLink } from '@hsl-fi/layout-primitives';
-import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import { AlertSeverityLevelType } from '../../constants';
 import { alertShape } from '../../util/shapes';
-import { getFormattedTimeDate } from '../../util/timeUtils';
 import Card from '../Card';
 import DisruptionBadge from './DisruptionBadge';
+import DisruptionStatus from './components/DisruptionStatus';
 import Icon from '../Icon';
 import RouteBadges from './RouteBadges';
 
-const DATE_FORMAT = 'd.L.yyyy';
-
-export default function DisruptionCard({ alert, isOpen, onClick = () => {} }) {
+export default function DisruptionCard({
+  alert,
+  onClick = () => {},
+  isMobile = false,
+}) {
   const {
     id,
     alertSeverityLevel,
     alertEffect,
     alertHeaderText,
     entities,
-    alertDescriptionText,
     effectiveStartDate,
     effectiveEndDate,
-    alertUrl,
   } = alert;
   const { colors } = useConfigContext();
 
-  const now = Date.now();
-  const isValid =
-    now > effectiveStartDate * 1000 && now < effectiveEndDate * 1000;
-
-  const startDate = `${getFormattedTimeDate(
-    effectiveStartDate * 1000,
-    DATE_FORMAT,
-  )}`;
-  const endDate = `${getFormattedTimeDate(
-    effectiveEndDate * 1000,
-    DATE_FORMAT,
-  )}`;
-
   return (
     <Card
       className="disruption-card clickable"
       onClick={() => {
-        onClick(isOpen ? undefined : id);
+        onClick(id);
       }}
     >
       <header>
-        <DisruptionBadge
-          showIcon
-          variant={alertSeverityLevel}
-          label={alertEffect}
-        />
+        <span className="disruption-card__header-left">
+          <DisruptionBadge
+            showIcon
+            variant={alertSeverityLevel}
+            label={alertEffect}
+          />
+          {!isMobile && (
+            <>
+              <div className="separator vertical" />
+              <DisruptionStatus
+                effectiveStartDate={effectiveStartDate}
+                effectiveEndDate={effectiveEndDate}
+                className="text-xs-bold"
+                showDates={alertSeverityLevel !== AlertSeverityLevelType.Info}
+              />
+            </>
+          )}
+        </span>
         <button type="button">
           <Icon
             img="icon_arrow-collapse--right"
             color={colors.primary}
-            className={cx('disruption-card__icon', {
-              'disruption-card__icon--inverted': isOpen,
-            })}
+            className="disruption-card__icon"
           />
         </button>
       </header>
       {entities && <RouteBadges entities={entities} />}
       <h2 className="cta-small">{alertHeaderText}</h2>
-      <div
-        className={cx('disruption-card__body', {
-          'disruption-card__body--open': isOpen,
-        })}
-      >
-        <p className="text-xs">{alertDescriptionText}</p>
-      </div>
-      <div className="disruption-card__body-row">
-        <div className="disruption-card__body-row-validity text-xs">
-          <div className="disruption-card__body-row-validity-icon">
-            {isValid ? (
-              <>
-                <Icon img="icon_clock" />
-                <FormattedMessage id="valid" default="Active" />
-              </>
-            ) : (
-              <>
-                <Icon img="icon_calendar" />
-                <FormattedMessage id="upcoming" default="Upcoming" />
-              </>
-            )}
-          </div>
-          {alertSeverityLevel !== AlertSeverityLevelType.Info && (
-            <>
-              <div className="separator vertical" />
-              {startDate}
-              {startDate !== endDate && ` - ${endDate}`}
-            </>
-          )}
-        </div>
-        {alertUrl && isOpen && (
-          <div className="disruption-card__body-row-info">
-            <ButtonLink
-              size="s"
-              href={alertUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="secondary"
-            >
-              <FormattedMessage id="extra-info" default="Details">
-                {msg => <span className="link-small">{msg}</span>}
-              </FormattedMessage>
-            </ButtonLink>
-          </div>
-        )}
-      </div>
+      {isMobile && (
+        <DisruptionStatus
+          effectiveStartDate={effectiveStartDate}
+          effectiveEndDate={effectiveEndDate}
+          className="text-xs-bold"
+          showDates={alertSeverityLevel !== AlertSeverityLevelType.Info}
+        />
+      )}
     </Card>
   );
 }
 
 DisruptionCard.propTypes = {
   alert: alertShape.isRequired,
-  isOpen: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
+  isMobile: PropTypes.bool,
 };