Merge pull request #1493 from weather-gov/mgwalker/1445-wind-direction

Add wind cardinal direction and update icon

web/themes/new_weather_theme/assets/sass/components/current-conditions.scss

@@ -9,10 +9,13 @@
       fill: color("primary-dark");
     }
   }
+
+  & table td {
+    padding-right: 0;
+  }
 }
 
 .wx-current-conditions__temp {
   // Custom size not in typecale
   font-size: units(5) + units(0.5);
 }
-

web/themes/new_weather_theme/new_weather_theme.libraries.yml

@@ -6,7 +6,7 @@ uswds-init:
       minified: true
 
 uswds-customized:
-  version: 2024-07-02
+  version: 2024-07-31
   css:
     theme:
       assets/css/styles.css: {}

web/themes/new_weather_theme/templates/partials/wind.html.twig

@@ -6,14 +6,17 @@
   #}
   <div class="display-flex flex-row flex-align-center" aria-hidden="true">
     <span>{{wind.speed}} {{ "mph" | t }}</span>
-    {#
-    The +180 here is to account for the fact that wind direction
-    is reported as a FROM direction, but our arrow points in the
-    TO direction. So we just need to spin it 'round.
-    #}
-    <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2 margin-left-05 padding-2px" style="transform: rotate({{ wind.direction.angle + 180 }}deg);">
-      <use xlink:href="{{ "/" ~ directory ~ "/assets/images/spritesheet.svg#wind_arrow_s" }}"></use>
-    </svg>
+    <span class="padding-x-05">{{ wind.direction.short }}</span>
+    <span class="display-flex flex-align-center margin-bottom-2px">
+      {#
+      The +180 here is to account for the fact that wind direction
+      is reported as a FROM direction, but our arrow points in the
+      TO direction. So we just need to spin it 'round.
+      #}
+      <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2" style="transform: rotate({{ wind.direction.angle + 180 }}deg);">
+        <use xlink:href="{{ "/" ~ directory ~ "/assets/images/spritesheet.svg#wx_wind_arrow" }}"></use>
+      </svg>
+    </span>
   </div>
   {#
   By putting all of the content into a single span, we can get VoiceOver to read