Merge pull request #26 from IATI/piped-list

Fixes to header global nav

Author: tillywoodfield

src/scss/components/header/_header.scss

@@ -33,7 +33,7 @@
     &:not(:has(.iati-header__nav[hidden])) {
       padding-block-end: 0;
     }
-    @media (min-width: $screen-sm) {
+    @media (min-width: $mobile_nav_breakpoint) {
       padding-block: 2rem;
     }
   }
@@ -50,7 +50,7 @@
   > :last-child {
     margin-inline-start: auto;
   }
-  @media (min-width: $screen-sm) {
+  @media (min-width: $mobile_nav_breakpoint) {
     border-block-end: none;
     padding-block-end: 0;
     margin-block-end: 0;

src/scss/components/header/header.stories.ts

@@ -60,7 +60,7 @@ export const Header: Story = {
         <div class="iati-header__container iati-brand-background__content">
           <div class="iati-header__actions">
             ${CountrySwitcher.render?.call({ ...args })}
-            <button class="iati-button iati-button--light hide display--sm">
+            <button class="iati-button iati-button--light hide--mobile-nav">
               <span>Help Docs</span>
               <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
             </button>
@@ -77,6 +77,5 @@ export const Header: Story = {
         </div>
       </div>
     </header>
-    <script src="js/header.js"></script>
   `,
 };

src/scss/components/piped-list/_piped-list.scss

@@ -1,28 +1,20 @@
 @use "../../tokens/color" as *;
 @use "../../tokens/font" as *;
+@use "../../base/mixins";
 
 .iati-piped-list {
+  @include mixins.unstyled-list();
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5em;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
   & > * {
     line-height: 1;
-    position: relative;
+    padding: 0.2em;
+    &:not(:first-child) {
+      padding-left: 1em;
+    }
     &:not(:last-child) {
-      &:after {
-        content: "";
-        position: absolute;
-        right: 1rem;
-        height: 120%;
-        width: 1px;
-        display: block;
-        background-color: currentColor;
-        top: -10%;
-      }
-      padding-inline-end: 2rem;
+      border-right: 1px solid black;
+      padding-right: 1em;
     }
   }
 }

src/scss/tokens/_screens.scss

@@ -4,4 +4,4 @@ $screen-lg: 1024px;
 $screen-xl: 1280px;
 $screen-2xl: 1536px;
 
-$mobile_nav_breakpoint: $screen-sm;
+$mobile_nav_breakpoint: $screen-md;

src/scss/utilities/_display.scss

@@ -8,6 +8,13 @@
   display: none;
 }
 
+.hide--mobile-nav {
+  display: none;
+  @media (min-width: $mobile_nav_breakpoint) {
+    display: var(--display);
+  }
+}
+
 .display--sm {
   @media (min-width: $screen-sm) {
     display: var(--display);