@khanacademy/wonder-blocks-tabs 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-tabs
 
+## 0.2.0
+
+### Minor Changes
+
+- 27f6298: `NavigationTabs`: Add `animated` prop to enable transition animation. Defaults to false.
+
+## 0.1.1
+
+### Patch Changes
+
+- 70fbe23: Update ts config
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/navigation-tab-item.d.ts

@@ -0,0 +1,63 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+type NavigationTabItemLinkProps = {
+    style: StyleType;
+    "aria-current"?: "page";
+};
+/**
+ * A component for a tab item in NavigationTabs. It is used with a Link
+ * component.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {NavigationTab, NavigationTabItem} from "@khanacademy/wonder-blocks-tabs";
+ * import Link from "@khanacademy/wonder-blocks-link";
+ *
+ * <NavigationTabs>
+ *  <NavigationTabItem>
+ *    <Link href="/link-1">Link 1</Link>
+ *  </NavigationTabItem>
+ *  <NavigationTabItem>
+ *    <Link href="/link-2">Link 2</Link>
+ *  </NavigationTabItem>
+ * </NavigationTabs>
+ * ```
+ */
+export declare const NavigationTabItem: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The `Link` to render for the navigation tab item.
+     *
+     * When a `Link` component is passed in for the `children` prop,
+     * `NavigationTabItem` will inject props for the `Link`. For specific use
+     * cases where the `Link` component is wrapped by another component (like a
+     * `Tooltip` or `Popover`), a render function can be used instead. The
+     * render function provides the Link props that should be applied to the
+     * Link component. See example in the docs for more details.
+     */
+    children: React.ReactElement | ((linkProps: NavigationTabItemLinkProps) => React.ReactElement);
+    /**
+     * An id for the root element.
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * If the `NavigationTabItem` is the current page. If `true`, current
+     * styling and aria-current=page will be applied to the Link.
+     *
+     * Note: NavigationTabs provides the styling for the current tab item.
+     */
+    current?: boolean;
+    /**
+     * Custom styles for overriding default styles. For custom link styling,
+     * prefer applying the styles to the `Link` component. Note: The
+     * `NavigationTabItem` will also set styles to the `Link` child component.
+     */
+    style?: StyleType;
+} & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/components/navigation-tabs.d.ts

@@ -0,0 +1,72 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+/**
+ * The `NavigationTabs` component is a tabbed interface for link navigation.
+ * The tabs are links and keyboard users can change tabs using tab.
+ * The `NavigationTabs` component is used with `NavigationTabItem` and `Link`
+ * components. If the tabs should not be links, see the `Tabs` component,
+ * which implements different semantics and keyboard interactions.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {NavigationTab, NavigationTabItem} from "@khanacademy/wonder-blocks-tabs";
+ * import Link from "@khanacademy/wonder-blocks-link";
+ *
+ * <NavigationTabs>
+ *  <NavigationTabItem>
+ *    <Link href="/link-1">Link 1</Link>
+ *  </NavigationTabItem>
+ *  <NavigationTabItem>
+ *    <Link href="/link-2">Link 2</Link>
+ *  </NavigationTabItem>
+ * </NavigationTabs>
+ * ```
+ */
+export declare const NavigationTabs: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The NavigationTabItem components to render.
+     */
+    children: React.ReactElement | Array<React.ReactElement>;
+    /**
+     * An id for the navigation element.
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Accessible label for the navigation element.
+     *
+     * It is important to provide a unique aria-label if there are multiple
+     * navigation elements on the page.
+     *
+     * If there is a visual label for the navigation tabs already, use
+     * `aria-labelledby` instead.
+     */
+    "aria-label"?: string;
+    /**
+     * If there is a visual label for the navigation tabs already, set
+     * `aria-labelledby` to the `id` of the element that labels the navigation
+     * tabs.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Custom styles for the elements in NavigationTabs.
+     * - `root`: Styles the root `nav` element.
+     * - `list`: Styles the underlying `ul` element that wraps the
+     * `NavigationTabItem` components
+     */
+    styles?: {
+        root?: StyleType;
+        list?: StyleType;
+    };
+    /**
+     * Whether to include animation in the `NavigationTabs`. This should be false
+     * if the user has `prefers-reduced-motion` opted in. Defaults to `false`.
+     */
+    animated?: boolean;
+} & React.RefAttributes<HTMLElement>>;

package/dist/es/index.js

@@ -1,14 +1,15 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { addStyle, useOnMountEffect, View } from '@khanacademy/wonder-blocks-core';
 import { sizing, semanticColor, breakpoint } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet } from 'aphrodite';
 import * as React from 'react';
 import { styles as styles$2 } from '@khanacademy/wonder-blocks-typography';
 
-const _excluded$1 = ["id", "testId", "children", "aria-label", "aria-labelledby", "styles"];
+const _excluded$1 = ["id", "testId", "children", "aria-label", "aria-labelledby", "styles", "animated"];
 const StyledNav = addStyle("nav");
 const StyledUl = addStyle("ul");
+const StyledDiv = addStyle("div");
 const NavigationTabs = React.forwardRef(function NavigationTabs(props, ref) {
   const {
       id,
@@ -16,9 +17,56 @@ const NavigationTabs = React.forwardRef(function NavigationTabs(props, ref) {
       children,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
-      styles: stylesProp
+      styles: stylesProp,
+      animated = false
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const listRef = React.useRef(null);
+  const indicatorIsReady = React.useRef(false);
+  const [underlineStyle, setUnderlineStyle] = React.useState({
+    left: 0,
+    width: 0
+  });
+  const updateUnderlineStyle = React.useCallback(() => {
+    if (!listRef.current) {
+      return;
+    }
+    const activeTab = Array.from(listRef.current.children).find(child => {
+      var _child$children$;
+      return (_child$children$ = child.children[0]) == null ? void 0 : _child$children$.ariaCurrent;
+    });
+    if (activeTab) {
+      const tabRect = activeTab.getBoundingClientRect();
+      const parentRect = listRef.current.getBoundingClientRect();
+      const zoomFactor = parentRect.width / listRef.current.offsetWidth;
+      const left = (tabRect.left - parentRect.left) / zoomFactor;
+      const width = tabRect.width / zoomFactor;
+      setUnderlineStyle({
+        left,
+        width
+      });
+    }
+  }, [setUnderlineStyle, listRef]);
+  useOnMountEffect(() => {
+    if (!listRef.current || !window.ResizeObserver) {
+      return;
+    }
+    const observer = new window.ResizeObserver(([entry]) => {
+      if (entry) {
+        updateUnderlineStyle();
+        if (!indicatorIsReady.current) {
+          indicatorIsReady.current = true;
+        }
+      }
+    });
+    observer.observe(listRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  });
+  React.useEffect(() => {
+    updateUnderlineStyle();
+  }, [children, updateUnderlineStyle]);
   return React.createElement(StyledNav, _extends({
     id: id,
     "data-testid": testId,
@@ -26,14 +74,26 @@ const NavigationTabs = React.forwardRef(function NavigationTabs(props, ref) {
     "aria-labelledby": ariaLabelledBy,
     ref: ref,
     style: [styles$1.nav, stylesProp == null ? void 0 : stylesProp.root]
-  }, otherProps), React.createElement(StyledUl, {
-    style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list]
-  }, children));
+  }, otherProps), React.createElement(StyledDiv, {
+    style: styles$1.contents
+  }, React.createElement(StyledUl, {
+    style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list],
+    ref: listRef
+  }, children), indicatorIsReady.current && React.createElement(View, {
+    style: [{
+      transform: `translateX(${underlineStyle.left}px)`,
+      width: `${underlineStyle.width}px`
+    }, styles$1.currentUnderline, animated && styles$1.underlineTransition],
+    role: "presentation"
+  })));
 });
 const styles$1 = StyleSheet.create({
   nav: {
     overflowX: "auto"
   },
+  contents: {
+    position: "relative"
+  },
   list: {
     paddingInline: sizing.size_050,
     paddingBlock: sizing.size_0,
@@ -41,6 +101,16 @@ const styles$1 = StyleSheet.create({
     display: "flex",
     gap: sizing.size_200,
     flexWrap: "nowrap"
+  },
+  currentUnderline: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    height: sizing.size_050,
+    backgroundColor: semanticColor.action.secondary.progressive.default.foreground
+  },
+  underlineTransition: {
+    transition: "transform 0.3s ease, width 0.3s ease"
   }
 });
 
@@ -90,9 +160,8 @@ const styles = StyleSheet.create({
     }
   },
   current: {
-    boxShadow: `inset 0 -${sizing.size_050} 0 0 ${semanticColor.action.secondary.progressive.default.foreground}`,
     [":has(a:hover)"]: {
-      boxShadow: `inset 0 -${sizing.size_050} 0 0 ${semanticColor.action.secondary.progressive.default.foreground}`
+      boxShadow: "none"
     }
   },
   currentLink: {

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationTabs } from "./components/navigation-tabs";
+export { NavigationTabItem } from "./components/navigation-tab-item";

package/dist/index.js

@@ -34,9 +34,10 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const _excluded$1 = ["id", "testId", "children", "aria-label", "aria-labelledby", "styles"];
+const _excluded$1 = ["id", "testId", "children", "aria-label", "aria-labelledby", "styles", "animated"];
 const StyledNav = wonderBlocksCore.addStyle("nav");
 const StyledUl = wonderBlocksCore.addStyle("ul");
+const StyledDiv = wonderBlocksCore.addStyle("div");
 const NavigationTabs = React__namespace.forwardRef(function NavigationTabs(props, ref) {
   const {
       id,
@@ -44,9 +45,56 @@ const NavigationTabs = React__namespace.forwardRef(function NavigationTabs(props
       children,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
-      styles: stylesProp
+      styles: stylesProp,
+      animated = false
     } = props,
     otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+  const listRef = React__namespace.useRef(null);
+  const indicatorIsReady = React__namespace.useRef(false);
+  const [underlineStyle, setUnderlineStyle] = React__namespace.useState({
+    left: 0,
+    width: 0
+  });
+  const updateUnderlineStyle = React__namespace.useCallback(() => {
+    if (!listRef.current) {
+      return;
+    }
+    const activeTab = Array.from(listRef.current.children).find(child => {
+      var _child$children$;
+      return (_child$children$ = child.children[0]) == null ? void 0 : _child$children$.ariaCurrent;
+    });
+    if (activeTab) {
+      const tabRect = activeTab.getBoundingClientRect();
+      const parentRect = listRef.current.getBoundingClientRect();
+      const zoomFactor = parentRect.width / listRef.current.offsetWidth;
+      const left = (tabRect.left - parentRect.left) / zoomFactor;
+      const width = tabRect.width / zoomFactor;
+      setUnderlineStyle({
+        left,
+        width
+      });
+    }
+  }, [setUnderlineStyle, listRef]);
+  wonderBlocksCore.useOnMountEffect(() => {
+    if (!listRef.current || !window.ResizeObserver) {
+      return;
+    }
+    const observer = new window.ResizeObserver(([entry]) => {
+      if (entry) {
+        updateUnderlineStyle();
+        if (!indicatorIsReady.current) {
+          indicatorIsReady.current = true;
+        }
+      }
+    });
+    observer.observe(listRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  });
+  React__namespace.useEffect(() => {
+    updateUnderlineStyle();
+  }, [children, updateUnderlineStyle]);
   return React__namespace.createElement(StyledNav, _extends__default["default"]({
     id: id,
     "data-testid": testId,
@@ -54,14 +102,26 @@ const NavigationTabs = React__namespace.forwardRef(function NavigationTabs(props
     "aria-labelledby": ariaLabelledBy,
     ref: ref,
     style: [styles$1.nav, stylesProp == null ? void 0 : stylesProp.root]
-  }, otherProps), React__namespace.createElement(StyledUl, {
-    style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list]
-  }, children));
+  }, otherProps), React__namespace.createElement(StyledDiv, {
+    style: styles$1.contents
+  }, React__namespace.createElement(StyledUl, {
+    style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list],
+    ref: listRef
+  }, children), indicatorIsReady.current && React__namespace.createElement(wonderBlocksCore.View, {
+    style: [{
+      transform: `translateX(${underlineStyle.left}px)`,
+      width: `${underlineStyle.width}px`
+    }, styles$1.currentUnderline, animated && styles$1.underlineTransition],
+    role: "presentation"
+  })));
 });
 const styles$1 = aphrodite.StyleSheet.create({
   nav: {
     overflowX: "auto"
   },
+  contents: {
+    position: "relative"
+  },
   list: {
     paddingInline: wonderBlocksTokens.sizing.size_050,
     paddingBlock: wonderBlocksTokens.sizing.size_0,
@@ -69,6 +129,16 @@ const styles$1 = aphrodite.StyleSheet.create({
     display: "flex",
     gap: wonderBlocksTokens.sizing.size_200,
     flexWrap: "nowrap"
+  },
+  currentUnderline: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    height: wonderBlocksTokens.sizing.size_050,
+    backgroundColor: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
+  },
+  underlineTransition: {
+    transition: "transform 0.3s ease, width 0.3s ease"
   }
 });
 
@@ -118,9 +188,8 @@ const styles = aphrodite.StyleSheet.create({
     }
   },
   current: {
-    boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_050} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground}`,
     [":has(a:hover)"]: {
-      boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_050} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground}`
+      boxShadow: "none"
     }
   },
   currentLink: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tabs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "design": "v1",
   "description": "Tabs are used to control what content is shown",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-tokens": "5.1.1",
+    "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-typography": "3.1.3",
-    "@khanacademy/wonder-blocks-core": "12.2.1"
+    "@khanacademy/wonder-blocks-tokens": "5.1.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",