fix: update small design misalignments in various components (#608)

* refactor: update storybook error message text to match docs site * refactor: move content into i18n files * fix: update font weight for required label * refactor: add mobile tokens for breadcrumbs item * fix: button text alignment in details summary * chore: update tokens package
cds-snc · Aug 13, 2024 · 9bcb4ae · 9bcb4ae
1 parent e9a6f2d
commit 9bcb4ae
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -45,7 +45,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^1.15.0",
+    "@cdssnc/gcds-tokens": "^1.16.0",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
@@ -1,4 +1,4 @@
-@layer reset, default, hover, focus;
+@layer reset, default, hover, focus, mobile;
 
 @layer reset {
   :host(.gcds-breadcrumbs-item) {
@@ -33,3 +33,21 @@
     }
   }
 }
+
+/* Note: mobile specific style decision */
+@layer mobile {
+  @media screen and (max-width: 30rem) {
+    :host(.gcds-breadcrumbs-item) {
+      display: block;
+
+      &:before {
+        top: var(--gcds-breadcrumbs-mobile-item-arrow-top);
+      }
+
+      gcds-link::part(link) {
+        margin: var(--gcds-breadcrumbs-mobile-item-margin);
+        padding: var(--gcds-breadcrumbs-mobile-item-padding);
+      }
+    }
+  }
+}
diff --git a/packages/web/src/components/gcds-date-modified/gcds-date-modified.tsx b/packages/web/src/components/gcds-date-modified/gcds-date-modified.tsx
@@ -51,7 +51,7 @@ export class GcdsDateModified {
         <dl class="gcds-date-modified">
           <dt>
             <gcds-text display="inline" margin-bottom="0">
-              {type === 'version' ? 'Version ' : i18n[lang].term}
+              {type === 'version' ? i18n[lang].version : i18n[lang].date}
             </gcds-text>
           </dt>
           <dd>

diff --git a/packages/web/src/components/gcds-date-modified/i18n/i18n.js b/packages/web/src/components/gcds-date-modified/i18n/i18n.js
@@ -1,9 +1,11 @@
 const I18N = {
   en: {
-    term: 'Date modified:',
+    date: 'Date modified:',
+    version: 'Version ',
   },
   fr: {
-    term: 'Date de modification :',
+    date: 'Date de modification :',
+    version: 'Version ',
   },
 };
 

diff --git a/packages/web/src/components/gcds-details/gcds-details.css b/packages/web/src/components/gcds-details/gcds-details.css
@@ -39,10 +39,13 @@
       padding: var(--gcds-details-summary-padding);
       color: var(--gcds-details-default-text);
       font: var(--gcds-details-font);
+      text-align: left;
       text-decoration-style: solid;
       text-decoration-line: underline;
       text-decoration-color: currentColor;
-      text-decoration-thickness: var(--gcds-details-default-decoration-thickness);
+      text-decoration-thickness: var(
+        --gcds-details-default-decoration-thickness
+      );
       text-underline-offset: 0.2em;
       transition:
         background-color 0.15s ease-in-out,

diff --git a/packages/web/src/components/gcds-error-message/stories/gcds-error-message.stories.tsx b/packages/web/src/components/gcds-error-message/stories/gcds-error-message.stories.tsx
@@ -53,21 +53,21 @@ const TemplatePlayground = args => `
 export const Default = Template.bind({});
 Default.args = {
   messageId: 'message-default',
-  default: 'Error message or validation message.',
+  default: 'Error message.',
 };
 
 // ------ Error message events & props ------
 
 export const Props = Template.bind({});
 Props.args = {
   messageId: 'message-props',
-  default: 'Error message or validation message.',
+  default: 'Error message.',
 };
 
 // ------ Error message playground ------
 
 export const Playground = TemplatePlayground.bind({});
 Playground.args = {
   messageId: 'message-playground',
-  default: 'Error message or validation message.',
+  default: 'Error message.',
 };
diff --git a/packages/web/src/components/gcds-label/gcds-label.css b/packages/web/src/components/gcds-label/gcds-label.css
@@ -31,6 +31,7 @@
     }
 
     .label--required {
+      font-weight: var(--gcds-label-required-font-weight);
       margin: var(--gcds-label-required-margin) !important;
     }
   }

diff --git a/packages/web/src/components/gcds-side-nav/gcds-side-nav.tsx b/packages/web/src/components/gcds-side-nav/gcds-side-nav.tsx
@@ -177,9 +177,9 @@ export class GcdsSideNav {
           <h2 class="gcds-side-nav__heading">{label}</h2>
           <ul>
             <gcds-nav-group
-              menuLabel="Menu"
-              closeTrigger={lang == 'fr' ? 'Fermer' : 'Close'}
-              openTrigger="Menu"
+              menuLabel={I18N[lang].menuLabel}
+              closeTrigger={I18N[lang].closeTrigger}
+              openTrigger={I18N[lang].menuLabel}
               class="gcds-mobile-nav"
               ref={element =>
                 (this.mobile = element as HTMLGcdsNavGroupElement)

diff --git a/packages/web/src/components/gcds-side-nav/i18n/i18n.js b/packages/web/src/components/gcds-side-nav/i18n/i18n.js
@@ -1,9 +1,13 @@
 const I18N = {
   en: {
+    closeTrigger: 'Close',
+    menuLabel: 'Menu',
     navLabel:
       ' - Use the enter key to select a menu item and travel to its page. Use the left and right arrow keys to navigate between menu and submenu items. Use the right arrow key to open submenus when they are available. Use the left arrow or escape keys to close a menu.',
   },
   fr: {
+    closeTrigger: 'Fermer',
+    menuLabel: 'Menu',
     navLabel:
       " - Utiliser la touche d'entrée pour sélectionner un élément du menu et voyager à la page indiquée. Utiliser les flèches gauches et droites pour naviguer entre les éléments et les sous-éléments du menu. Ouvrir les sous-éléments du menu avec la flèche droite lorsqu'il sont disponible. Fermer le menu avec la flèche gauche ou la touche d'échappement.",
   },

diff --git a/packages/web/src/components/gcds-top-nav/gcds-top-nav.tsx b/packages/web/src/components/gcds-top-nav/gcds-top-nav.tsx
@@ -180,9 +180,9 @@ export class GcdsTopNav {
           <nav aria-label={`${label}${I18N[lang].navLabel}`}>
             <ul class="gcds-top-nav__container">
               <gcds-nav-group
-                menuLabel="Menu"
-                closeTrigger={lang == 'fr' ? 'Fermer' : 'Close'}
-                openTrigger="Menu"
+                menuLabel={I18N[lang].menuLabel}
+                closeTrigger={I18N[lang].closeTrigger}
+                openTrigger={I18N[lang].menuLabel}
                 class="gcds-mobile-nav gcds-mobile-nav-topnav"
                 ref={element =>
                   (this.mobile = element as HTMLGcdsNavGroupElement)

diff --git a/packages/web/src/components/gcds-top-nav/i18n/i18n.js b/packages/web/src/components/gcds-top-nav/i18n/i18n.js
@@ -1,9 +1,13 @@
 const I18N = {
   en: {
+    closeTrigger: 'Close',
+    menuLabel: 'Menu',
     navLabel:
       ' - Use the enter key to select a menu item and travel to its page. Use the left and right arrow keys to navigate between menu and submenu items. Use the right arrow key to open submenus when they are available. Use the left arrow or escape keys to close a menu.',
   },
   fr: {
+    closeTrigger: 'Fermer',
+    menuLabel: 'Menu',
     navLabel:
       " - Utiliser la touche d'entrée pour sélectionner un élément du menu et voyager à la page indiquée. Utiliser les flèches gauches et droites pour naviguer entre les éléments et les sous-éléments du menu. Ouvrir les sous-éléments du menu avec la flèche droite lorsqu'il sont disponible. Fermer le menu avec la flèche gauche ou la touche d'échappement.",
   },