refactor(console): tab nav (#2471)

packages/console/src/components/TabNav/TabNavItem.module.scss

@@ -1,27 +1,61 @@
 @use '@/scss/underscore' as _;
 
-.link {
+.item {
-  font: var(--font-subhead-2);
+  display: flex;
+  align-items: center;
 
   &:not(:last-child) {
     margin-right: _.unit(6);
   }
 
+  .link {
+    font: var(--font-subhead-2);
+    padding: _.unit(0.5) _.unit(1.5);
+    margin-bottom: _.unit(1);
+    border-radius: 4px;
+
     a {
       display: inline-block;
       color: var(--color-text-secondary);
       text-decoration: none;
       cursor: pointer;
-    padding-bottom: _.unit(1);
+    }
+
+    &:hover {
+      background-color: var(--color-hover-variant);
     }
   }
 
   .selected {
+    position: relative;
     color: var(--color-text-link);
-  border-bottom: 2px solid var(--color-text-link);
-  margin-bottom: -1px;
 
     a {
       color: var(--color-text-link);
     }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      // Note: link item's margin-bottom (_.unit(1)) + TabNav's border-bottom width (1px)
+      bottom: -5px;
+      left: 0;
+      right: 0;
+      border-top: 2px solid var(--color-text-link);
+      border-radius: 8px 8px 0 0;
     }
+  }
+
+  .errors {
+    margin-left: _.unit(0.5);
+    font: var(--font-label-medium);
+    color: var(--color-white);
+    padding: _.unit(0.5) _.unit(1.5);
+    background-color: var(--color-error-50);
+    border-radius: 10px;
+    vertical-align: middle;
+    margin-bottom: _.unit(1);
+  }
+}
+

packages/console/src/components/TabNav/TabNavItem.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 
 import { onKeyDownHandler } from '@/utilities/a11y';
@@ -8,15 +9,18 @@ import * as styles from './TabNavItem.module.scss';
 type Props = {
   href?: string;
   isActive?: boolean;
+  errorCount?: number;
   onClick?: () => void;
   children: React.ReactNode;
 };
 
-const TabNavItem = ({ children, href, isActive, onClick }: Props) => {
+const TabNavItem = ({ children, href, isActive, errorCount = 0, onClick }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const location = useLocation();
   const selected = href ? location.pathname === href : isActive;
 
   return (
+    <div className={styles.item}>
       <div className={classNames(styles.link, selected && styles.selected)}>
         {href ? (
           <Link to={href}>{children}</Link>
@@ -27,6 +31,10 @@ const TabNavItem = ({ children, href, isActive, onClick }: Props) => {
           </a>
         )}
       </div>
+      {errorCount > 0 && (
+        <div className={styles.errors}>{t('general.tab_errors', { count: errorCount })}</div>
+      )}
+    </div>
   );
 };
 

packages/console/src/pages/SignInExperience/components/Preview.module.scss

@@ -31,8 +31,9 @@
   }
 
   .nav {
-    padding: 0 _.unit(6);
+    padding: 0 _.unit(6) 1px;
-    margin: _.unit(6) 0 0 0;
+    margin-top: _.unit(6);
+    border-bottom: unset;
   }
 
   .body {

packages/phrases/src/locales/de/translation/admin-console/general.ts

@@ -41,6 +41,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;

packages/phrases/src/locales/en/translation/admin-console/general.ts

@@ -40,6 +40,7 @@ const general = {
   got_it: 'Got it',
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}',
   learn_more: 'Learn more',
+  tab_errors: '{{count, number}} errors',
 };
 
 export default general;

packages/phrases/src/locales/fr/translation/admin-console/general.ts

@@ -41,6 +41,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;

packages/phrases/src/locales/ko/translation/admin-console/general.ts

@@ -40,6 +40,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;

packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts

@@ -40,6 +40,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;

packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts

@@ -41,6 +41,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;

packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts

@@ -40,6 +40,7 @@ const general = {
   got_it: 'Got it', // UNTRANSLATED
   page_info: '{{min, number}}-{{max, number}} 共 {{total, number}} 条', // UNTRANSLATED
   learn_more: 'Learn more', // UNTRANSLATED
+  tab_errors: '{{count, number}} errors', // UNTRANSLATED
 };
 
 export default general;