Refactor some digitransit library code

app/component/DepartureRow.js

@@ -18,6 +18,7 @@ import { configShape, departureShape } from '../util/shapes';
 import { epochToTime } from '../util/timeUtils';
 import Icon from './Icon';
 import PlatformNumber from './PlatformNumber';
+import IconBackground from './icon/IconBackground';
 
 const getMostSevereAlert = route => {
   const alerts = [...getAlertsForObject(route)];
@@ -176,7 +177,7 @@ export default function DepartureRow(
               className={backgroundShape}
               img={icon}
               color={iconColor}
-              backgroundShape={backgroundShape}
+              background={<IconBackground backgroundShape={backgroundShape} />}
             />
             {sr}
           </>

app/component/Icon.js

@@ -2,67 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 
-const isBadgeTextLong = badgeText => badgeText.length > 1 || badgeText > 9;
-
-const IconBadge = ({ badgeFill, badgeText, textFill }) => {
-  if (!badgeFill || (!badgeText && badgeText !== 0)) {
-    return null;
-  }
-  return (
-    <svg className="icon-badge" viewBox="0 0 40 40">
-      <circle
-        className="badge-circle"
-        cx="20"
-        cy="20"
-        fill={badgeFill}
-        r="18"
-      />
-      <text
-        className={cx('badge-text', {
-          long: isBadgeTextLong(badgeText),
-        })}
-        dy="0.35em"
-        x="20"
-        y="20"
-        style={textFill ? { fill: textFill } : {}}
-      >
-        {badgeText}
-      </text>
-    </svg>
-  );
-};
-
-IconBadge.propTypes = {
-  badgeFill: PropTypes.string,
-  badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  textFill: PropTypes.string,
-};
-
-IconBadge.defaultProps = {
-  badgeFill: undefined,
-  badgeText: undefined,
-  textFill: '#fff',
-};
-
-IconBadge.asString = (badgeFill, badgeText, badgeTextFill) => {
-  if (!badgeFill || (!badgeText && badgeText !== 0)) {
-    return '';
-  }
-  return `
-  <svg class="icon-badge" viewBox="0 0 40 40">
-    <circle class="badge-circle" cx="20" cy="20" fill="${badgeFill}" r="20"/>
-    <text class="${cx('badge-text', {
-      long: isBadgeTextLong(badgeText),
-    })}" dy="0.3em" x="20" y="20" fill=${badgeTextFill}>${badgeText}</text>
-  </svg>`;
-};
-
-function Icon({
-  backgroundShape,
-  backgroundColor,
-  badgeFill,
-  badgeText,
-  badgeTextFill,
+const Icon = ({
   className,
   color,
   height,
@@ -73,50 +13,47 @@ function Icon({
   width,
   dataURI,
   ariaLabel,
-}) {
-  return (
-    <span aria-hidden className="icon-container">
-      <svg
-        id={id}
+  iconScale,
+  background,
+  foreground,
+}) => (
+  <span aria-hidden className="icon-container">
+    <svg
+      id={id}
+      style={{
+        color: color || null,
+        fill: color || null,
+        height: height ? `${height}em` : null,
+        width: width ? `${width}em` : null,
+        outline: 0,
+      }}
+      viewBox={!omitViewBox ? viewBox : null}
+      className={cx('icon', className)}
+      aria-label={ariaLabel}
+    >
+      {background}
+      <g
         style={{
           fill: color || null,
           height: height ? `${height}em` : null,
           width: width ? `${width}em` : null,
           outline: 0,
+          transformOrigin: 'center',
+          transform: `scale(${iconScale})`,
         }}
-        viewBox={!omitViewBox ? viewBox : null}
-        className={cx('icon', className)}
-        aria-label={ariaLabel}
       >
-        {backgroundShape === 'circle' && (
-          <circle
-            className="icon-circle"
-            cx="20"
-            cy="20"
-            fill={backgroundColor}
-            r="20"
-          />
-        )}
-        {!dataURI && <use xlinkHref={`#${img}`} />}
-        {dataURI && (
+        {dataURI ? (
           <image href={dataURI} x={0} y={0} width="100%" height="100%" />
+        ) : (
+          <use xlinkHref={`#${img}`} />
         )}
-      </svg>
-      <IconBadge
-        badgeFill={badgeFill}
-        badgeText={badgeText}
-        textFill={badgeTextFill}
-      />
-    </span>
-  );
-}
+      </g>
+    </svg>
+    {foreground}
+  </span>
+);
 
 Icon.propTypes = {
-  backgroundShape: PropTypes.oneOf(['circle']),
-  backgroundColor: PropTypes.string,
-  badgeFill: PropTypes.string,
-  badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  badgeTextFill: PropTypes.string,
   className: PropTypes.string,
   color: PropTypes.string,
   height: PropTypes.number,
@@ -127,14 +64,12 @@ Icon.propTypes = {
   width: PropTypes.number,
   dataURI: PropTypes.string,
   ariaLabel: PropTypes.string,
+  iconScale: PropTypes.number,
+  background: PropTypes.node,
+  foreground: PropTypes.node,
 };
 
 Icon.defaultProps = {
-  backgroundShape: undefined,
-  backgroundColor: 'white',
-  badgeFill: undefined,
-  badgeText: undefined,
-  badgeTextFill: undefined,
   className: undefined,
   color: undefined,
   height: undefined,
@@ -144,36 +79,12 @@ Icon.defaultProps = {
   width: undefined,
   ariaLabel: '',
   dataURI: undefined,
+  iconScale: 1,
+  background: undefined,
+  foreground: undefined,
 };
 
-Icon.asString = ({
-  img,
-  className,
-  id,
-  badgeFill = undefined,
-  badgeText = undefined,
-  badgeTextFill = undefined,
-  backgroundShape = undefined,
-  color,
-}) => `
-  <span class="icon-container">
-    <svg
-      ${id ? ` id=${id}` : ''}
-      viewBox="0 0 40 40"
-      class="${cx('icon', className)}"
-      style="fill: ${color || null}",
-    >
-      ${
-        backgroundShape === 'circle'
-          ? '<circle className="icon-circle" cx="20" cy="20" fill="white" r="20" />'
-          : ''
-      }
-      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#${img}"/>
-    </svg>
-    ${IconBadge.asString(badgeFill, badgeText, badgeTextFill)}
-  </span>
-`;
-
 Icon.displayName = 'Icon';
 Icon.description = 'Shows an icon from the SVG sprite';
+
 export default Icon;

app/component/IconWithIcon.js

@@ -3,6 +3,8 @@ import React from 'react';
 
 import { intlShape } from 'react-intl';
 import Icon from './Icon';
+import IconBackground from './icon/IconBackground';
+import IconBadge from './icon/IconBadge';
 
 const IconWithIcon = (
   {
@@ -24,21 +26,33 @@ const IconWithIcon = (
   <span id={id} className={className}>
     <span>
       <Icon
-        badgeFill={badgeFill}
-        badgeText={badgeText}
-        badgeTextFill={badgeTextFill}
         color={color}
         img={img}
         viewBox={mode === 'call' ? '0 0 60 60' : undefined}
         omitViewBox={omitViewBox}
+        foreground={
+          (badgeFill || badgeText) && (
+            <IconBadge
+              badgeFill={badgeFill}
+              badgeText={badgeText}
+              badgeTextFill={badgeTextFill}
+            />
+          )
+        }
       />
     </span>
     {subIcon && (
       <span
         className={subIconClassName}
         title={intl.formatMessage({ id: 'disruption' })}
       >
-        <Icon backgroundShape={subIconShape} img={subIcon} />
+        <Icon
+          img={subIcon}
+          omitViewBox={omitViewBox}
+          background={
+            subIconShape && <IconBackground backgroundShape={subIconShape} />
+          }
+        />
       </span>
     )}
   </span>

app/component/icon/IconBackground.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const STOP_SIGN_POLE_WIDTH = 4;
+const STOP_SIGN_POLE_X = 20 - STOP_SIGN_POLE_WIDTH / 2;
+
+const IconBackground = ({ backgroundShape, backgroundColor }) => (
+  <>
+    <circle
+      className="icon-circle"
+      cx="20"
+      cy="20"
+      fill={backgroundColor}
+      r={backgroundShape === 'stopsign' ? '13.33' : '20'}
+    />
+    {backgroundShape === 'stopsign' && (
+      <rect
+        x={STOP_SIGN_POLE_X}
+        y="33.33"
+        width={STOP_SIGN_POLE_WIDTH}
+        height="6.67"
+        fill="#333333"
+        rx="2"
+      />
+    )}
+  </>
+);
+
+IconBackground.propTypes = {
+  backgroundShape: PropTypes.oneOf(['circle', 'stopsign']).isRequired,
+  backgroundColor: PropTypes.string,
+};
+
+IconBackground.defaultProps = {
+  backgroundColor: 'white',
+};
+
+export default IconBackground;

app/component/icon/IconBadge.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
+
+const isBadgeTextLong = badgeText => badgeText.length > 1 || badgeText > 9;
+
+const IconBadge = ({ badgeFill, badgeText, textFill }) => {
+  if (!badgeFill || (!badgeText && badgeText !== 0)) {
+    return null;
+  }
+
+  return (
+    <svg className="icon-badge" viewBox="0 0 40 40">
+      <circle
+        className="badge-circle"
+        cx="20"
+        cy="20"
+        fill={badgeFill}
+        r="18"
+      />
+      <text
+        className={cx('badge-text', {
+          long: isBadgeTextLong(badgeText),
+        })}
+        dy="0.35em"
+        x="20"
+        y="20"
+        style={textFill ? { fill: textFill } : {}}
+      >
+        {badgeText}
+      </text>
+    </svg>
+  );
+};
+
+IconBadge.propTypes = {
+  badgeFill: PropTypes.string,
+  badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textFill: PropTypes.string,
+};
+
+IconBadge.defaultProps = {
+  badgeFill: undefined,
+  badgeText: undefined,
+  textFill: '#fff',
+};
+
+export default IconBadge;

app/component/itinerary/VehicleRentalLeg.js

@@ -26,6 +26,7 @@ import {
 } from '../../util/legUtils';
 import { getIdWithoutFeed } from '../../util/feedScopedIdUtils';
 import ScooterLinkContainer from './ScooterLinkContainer';
+import IconBadge from '../icon/IconBadge';
 
 function VehicleRentalLeg(
   {
@@ -104,15 +105,19 @@ function VehicleRentalLeg(
                 img={vehicleIcon}
                 width={1.655}
                 height={1.655}
-                badgeText={
-                  vehicleRentalStation &&
-                  vehicleCapacity !== BIKEAVL_UNKNOWN &&
-                  !returnBike
-                    ? vehicleRentalStation?.availableVehicles.total
-                    : ''
+                foreground={
+                  <IconBadge
+                    badgeText={
+                      vehicleRentalStation &&
+                      vehicleCapacity !== BIKEAVL_UNKNOWN &&
+                      !returnBike
+                        ? vehicleRentalStation?.availableVehicles.total
+                        : ''
+                    }
+                    badgeFill={returnBike ? null : availabilityIndicatorColor}
+                    badgeTextFill={returnBike ? null : availabilityTextColor}
+                  />
                 }
-                badgeFill={returnBike ? null : availabilityIndicatorColor}
-                badgeTextFill={returnBike ? null : availabilityTextColor}
               />
             </div>
             <div className="itinerary-with-link-text-container">