fix: review header (#271)

ogcio · Oct 8, 2024 · 3371e03 · 3371e03
1 parent 34e6525
commit 3371e03
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 35 deletions.
diff --git a/packages/design/tailwind/css/typography.css b/packages/design/tailwind/css/typography.css
@@ -1,37 +1,37 @@
 /* GOV.IE Typography Stylesheets */
 
 .gi-heading-xl {
-  font: theme('typography.default.css.h1.font');
+  font: theme('typography.DEFAULT.css.h1.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
 
 .gi-heading-lg {
-  font: theme('typography.default.css.h2.font');
+  font: theme('typography.DEFAULT.css.h2.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
 
 .gi-heading-md {
-  font: theme('typography.default.css.h3.font');
+  font: theme('typography.DEFAULT.css.h3.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
 
 .gi-heading-sm {
-  font: theme('typography.default.css.h4.font');
+  font: theme('typography.DEFAULT.css.h4.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
 
 .gi-heading-xs {
-  font: theme('typography.default.css.h5.font');
+  font: theme('typography.DEFAULT.css.h5.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
 
 .gi-heading-2xs {
-  font: theme('typography.default.css.h6.font');
+  font: theme('typography.DEFAULT.css.h6.font');
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
@@ -43,15 +43,15 @@
 .gi-paragraph-lg,
 .gi-paragraph-md,
 .gi-paragraph-xs {
-  font: theme('typography.default.css.p.font');
+  font: theme('typography.DEFAULT.css.p.font');
   margin-bottom: 2em;
   @apply gi-mt-0 gi-max-w-prose;
 }
 
 .gi-span-lg,
 .gi-span-md,
 .gi-span-xs {
-  font: theme('typography.default.css.p.font');
+  font: theme('typography.DEFAULT.css.p.font');
 }
 
 @media screen(sm) {

diff --git a/packages/design/tailwind/src/create-theme.ts b/packages/design/tailwind/src/create-theme.ts
@@ -31,7 +31,7 @@ export function createTheme(
     ...tailwindTheme,
     container: {
       padding: {
-        default: '16px', // TODO: use tokens
+        DEFAULT: '16px', // TODO: use tokens
         sm: '16px',
         md: '32px',
         lg: '64px',
@@ -153,7 +153,7 @@ export function createTheme(
       '2xl': variables.primitive.border.width['600'],
       '3xl': variables.primitive.border.width['700'],
       '4xl': variables.primitive.border.width['800'],
-      default: variables.primitive.border.width['100'],
+      DEFAULT: variables.primitive.border.width['100'],
     },
     borderRadius: {
       // "none": tokens.goiveBorderRadiusNone,
@@ -164,7 +164,7 @@ export function createTheme(
       '2xl': variables.primitive.border.radius['500'],
       '3xl': variables.primitive.border.radius['600'],
       full: variables.primitive.border.radius.full,
-      default: variables.primitive.border.radius['200'],
+      DEFAULT: variables.primitive.border.radius['200'],
     },
     zIndex: {
       1: variables.primitive.zIndex['1'],
@@ -302,7 +302,7 @@ export function createTheme(
     extend: {
       typography: () => {
         return {
-          default: {
+          DEFAULT: {
             css: {
               p: {
                 font: variables.semantic.typography.default.text.md,

diff --git a/packages/html/ds/src/header/components/headerMenu.html b/packages/html/ds/src/header/components/headerMenu.html
@@ -1,29 +1,33 @@
-{% from 'header/components/headerSearchContainer.html' import HeaderSearchContainer %}
+{% from 'header/components/headerSearchContainer.html' import HeaderSearchContainer %} 
 {% from 'icon/icon.html' import govieIcon %}
-
 {% macro headerMenu(props) %}
 
 <div
   data-element="menu-container"
   class="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0"
 >
   <div
-    class="gi-border-gray-100 gi-border-b gi-border-solid gi-h-20 gi-flex gi-justify-end"
+    class="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4"
   >
-    <button
-      data-element="close-menu-icon"
-      class="gi-mr-4 sm:gi-mr-8 gi-text-md gi-flex gi-items-center gi-gap-2 gi-cursor-pointer"
-    >
-      <span class="gi-text-2md gi-font-bold">Close</span>
-      {{ govieIcon({"icon": "close"}) }}
-    </button>
+    <div class="gi-flex gi-items-center">
+      <label
+        data-element="close-menu-icon"
+        class="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 focus-within:gi-outline-offset-0 focus-within:gi-outline-none focus-within:gi-border focus-within:gi-border-solid focus-within:gi-border-yellow-400"
+      >
+        <span class="gi-text-2md gi-font-bold">Close</span>
+        {{ govieIcon({"icon": "close"}) }}
+      </label>
+    </div>
   </div>
-  <ul id="links-container-mobile" class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen">
+  <ul
+    id="links-container-mobile"
+    class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen"
+  >
     {% for link in props.navLinks %}
     <li>
       <a
         href="{{ link.href }}"
-        class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b gi-border-solid"
+        class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
       >
         <span class="gi-font-bold gi-text-sm">{{ link.label }}</span>
       </a>
@@ -38,7 +42,7 @@
         <span class="gi-text-sm">{{ link.label }}</span>
       </a>
     </li>
-    {% endfor %}
+    {% endfor %} 
     {% if props.searchUrl %}
       <li class="xs:gi-hidden gi-mt-8">
         {{ HeaderSearchContainer({"searchUrl": props.searchUrl, "dataElement": "search-container-mobile" , "dataTestId": "search-container-mobile"}) }}

diff --git a/packages/react/ds/src/header/components/header-menu.tsx b/packages/react/ds/src/header/components/header-menu.tsx
@@ -24,21 +24,23 @@ function HeaderMenu({ languages, navLinks, searchProps }: HeaderMenuProps) {
       id="HeaderMenuContainer"
       className="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0"
     >
-      <div className="gi-border-gray-100 gi-border-b gi-border-solid gi-h-20 gi-flex gi-justify-end">
-        <label
-          htmlFor="MobileMenuTrigger"
-          className="gi-mr-4 sm:gi-mr-8 gi-text-md gi-flex gi-items-center gi-gap-2 gi-cursor-pointer"
-        >
-          <span className="gi-text-2md gi-font-bold">Close</span>
-          <Icon icon="close" />
-        </label>
+      <div className="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4">
+        <div className="gi-flex gi-items-center">
+          <label
+            htmlFor="MobileMenuTrigger"
+            className="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 focus-within:gi-outline-offset-0 focus-within:gi-outline-none focus-within:gi-border focus-within:gi-border-solid focus-within:gi-border-yellow-400"
+          >
+            <span className="gi-text-2md gi-font-bold">Close</span>
+            <Icon icon={'close'} />
+          </label>
+        </div>
       </div>
       <ul className="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen">
         {navLinks?.map((link, index) => (
           <li key={index}>
             <a
               href={link.href}
-              className="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b gi-border-solid"
+              className="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
             >
               <span className="gi-text-sm gi-font-bold">{link.label}</span>
             </a>

diff --git a/packages/react/ds/src/header/header.tsx b/packages/react/ds/src/header/header.tsx
@@ -132,7 +132,7 @@ export function Header({
             ))}
           </ul>
           {navLinks && hasDivider && (
-            <div className="gi-hidden sm:gi-block gi-border-xs gi-border-solid gi-border-white gi-h-8 gi-mx-6"></div>
+            <div className="gi-hidden sm:gi-block gi-border-l-xs gi-border-solid gi-border-white gi-h-8 gi-mx-6"></div>
           )}
           {tools?.search && (
             <label
@@ -185,6 +185,11 @@ export function Header({
               id="MobileMenuTrigger"
               type="checkbox"
             />
+            {tools?.menu?.label && (
+              <span className="gi-hidden sm:gi-block gi-text-2md gi-font-bold gi-text-white">
+                {tools.menu.label}
+              </span>
+            )}
             <Icon
               className="gi-text-white"
               icon={tools?.menu?.icon || 'menu'}