Improve navigation tabs

Animations! And remove the annoying outline that is always triggered on
on press

packages/lego-bricks/src/components/Layout/Page/Page.module.css

@@ -11,6 +11,7 @@
     align-items: center;
     width: fit-content;
     margin-bottom: var(--spacing-sm);
+    outline: none;
   }
 
   span.backLabel {
@@ -22,6 +23,7 @@
     transition: transform var(--easing-medium);
   }
 
+  .back:focus > .backIcon,
   .back:hover > .backIcon {
     transform: translateX(calc(-1 * var(--spacing-xs)));
   }

packages/lego-bricks/src/components/Tabs/Tab.module.css

@@ -1,15 +1,28 @@
+.tabContainer {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
 .tab {
   display: inline-block;
   color: var(--lego-font-color);
   padding: var(--spacing-sm) var(--spacing-md);
-  border-bottom: 2px solid var(--border-gray);
-}
-
-.tab.active {
-  border-bottom: 2px solid var(--color-black);
+  cursor: pointer;
+  outline: none;
 }
 
 .tab.disabled {
-  color: var(--border-gray);
+  opacity: 0.5;
   pointer-events: none;
 }
+
+.tabIndicator {
+  position: absolute;
+  bottom: -2px;
+  height: 2px;
+  background-color: var(--color-black);
+  transition:
+    transform var(--easing-medium),
+    width var(--easing-medium);
+}

packages/lego-bricks/src/components/Tabs/Tab.tsx

@@ -13,31 +13,31 @@ type Props = {
 };
 
 export const Tab = ({ active, disabled, onPress, href, children }: Props) => {
-  const className = cx(
-    styles.tab,
-    active && styles.active,
-    disabled && styles.disabled,
-  );
+  const className = cx(styles.tab, disabled && styles.disabled);
 
-  return href ? (
-    <Link
-      href={href}
-      isDisabled={disabled}
-      onPress={onPress}
-      className={className}
-      data-test-id="tab"
-    >
-      {children}
-    </Link>
-  ) : (
-    <Button
-      isDisabled={disabled}
-      onPress={onPress}
-      className={className}
-      data-test-id="tab"
-    >
-      {children}
-    </Button>
+  return (
+    <div className={styles.tabContainer} data-active={active}>
+      {href ? (
+        <Link
+          href={href}
+          isDisabled={disabled}
+          onPress={onPress}
+          className={className}
+          data-test-id="tab"
+        >
+          {children}
+        </Link>
+      ) : (
+        <Button
+          isDisabled={disabled}
+          onPress={onPress}
+          className={className}
+          data-test-id="tab"
+        >
+          {children}
+        </Button>
+      )}
+    </div>
   );
 };
 

packages/lego-bricks/src/components/Tabs/TabContainer.module.css

@@ -1,8 +1,24 @@
 .container {
   margin: var(--spacing-sm) 0 var(--spacing-md);
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.spacer {
-  flex-grow: 1;
+.tabList {
+  display: flex;
+  position: relative;
   border-bottom: 2px solid var(--border-gray);
+  width: 100%;
+}
+
+.indicator {
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  height: 2px;
+  background-color: var(--color-black);
+  transition:
+    transform var(--easing-medium),
+    width var(--easing-medium);
 }

packages/lego-bricks/src/components/Tabs/TabContainer.tsx

@@ -1,5 +1,6 @@
 import cx from 'classnames';
-import { Flex } from '../Layout';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import styles from './TabContainer.module.css';
 import type { ReactNode } from 'react';
 
@@ -9,9 +10,28 @@ type Props = {
   children?: ReactNode;
 };
 
-export const TabContainer = ({ className, lineColor, children }: Props) => (
-  <Flex wrap className={cx(styles.container, className)}>
-    {children}
-    <div className={styles.spacer} style={{ borderColor: lineColor }} />
-  </Flex>
-);
+export const TabContainer = ({ className, lineColor, children }: Props) => {
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({});
+  const location = useLocation();
+
+  useEffect(() => {
+    const activeTab = document.querySelector('[data-active="true"]');
+    if (activeTab) {
+      const width = activeTab.clientWidth;
+      const left = (activeTab as HTMLElement).offsetLeft;
+      setIndicatorStyle({
+        width: `${width}px`,
+        transform: `translateX(${left}px)`,
+      });
+    }
+  }, [children, location.pathname]);
+
+  return (
+    <div className={cx(styles.container, className)}>
+      <div className={styles.tabList} style={{ borderColor: lineColor }}>
+        {children}
+        <div className={styles.indicator} style={indicatorStyle} />
+      </div>
+    </div>
+  );
+};