@purpurds/tabs 6.12.0 → 6.12.2

package/src/tabs.module.scss

@@ -23,9 +23,12 @@
       color: var(--purpur-color-text-default);
       background: var(--purpur-color-background-primary);
       box-shadow: var(--purpur-shadow-md);
-      transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
       cursor: pointer;
 
+      @media (prefers-reduced-motion: no-preference) {
+        transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+      }
+
       &::after {
         content: "";
         position: absolute;
@@ -34,7 +37,10 @@
         border-radius: var(--purpur-border-radius-xs);
         box-sizing: border-box;
         opacity: 0;
-        transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+        }
       }
 
       &:hover {
@@ -110,7 +116,10 @@
       left: 0;
       z-index: 10;
       height: var(--purpur-border-width-sm);
-      transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+      }
     }
   }
 
@@ -134,6 +143,14 @@
     }
   }
 
+  &__content-wrapper {
+    overflow: hidden;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: height var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+    }
+  }
+
   &--contained,
   &--contained-negative {
     #{$root}__list {

package/src/tabs.stories.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { Button } from "@purpurds/button";
+import { Paragraph } from "@purpurds/paragraph";
 import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/button/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/paragraph/styles";
 import { Tabs } from "./tabs";
 import { tabsVariants } from "./tabs.utils";
 
@@ -61,6 +64,11 @@ const meta = {
     negative: {
       table: { type: { summary: "boolean" } },
     },
+    animateHeight: {
+      table: {
+        type: { summary: "When true, animates the height of the component when switching tabs." },
+      },
+    },
     ["data-testid"]: { table: { type: { summary: "string" } }, control: { type: "text" } },
     className: {
       table: {
@@ -89,7 +97,13 @@ export const Showcase: Story = {
         name={`${name}-1`}
         style={{ padding: "var(--purpur-spacing-250)" }}
       >
-        <div>Content 1</div>
+        <div>
+          <Paragraph>
+            Telia is a leading telecom provider in the Nordics and Baltics, offering mobile,
+            broadband, and TV services to millions of customers. Known for its reliability and
+            coverage, Telia plays a key role in keeping people and businesses connected.
+          </Paragraph>
+        </div>
       </Tabs.Content>,
       <Tabs.Content
         key="2"
@@ -97,7 +111,18 @@ export const Showcase: Story = {
         name={`${name}-2`}
         style={{ padding: "var(--purpur-spacing-250)" }}
       >
-        <div>Content 2</div>
+        <div>
+          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
+            Telia is at the forefront of digital innovation in Northern Europe, investing heavily in
+            5G networks, fiber broadband, and cloud-based business solutions. Its technology powers
+            communication for individuals, families, and companies across the region.
+          </Paragraph>
+          <Paragraph>
+            Beyond connectivity, Telia also offers advanced tools for remote work, IoT, and
+            cybersecurity. The company supports both public and private sector partners with
+            scalable, secure, and future-ready digital infrastructure.
+          </Paragraph>
+        </div>
       </Tabs.Content>,
       <Tabs.Content
         key="3"
@@ -105,10 +130,28 @@ export const Showcase: Story = {
         name={`${name}-3`}
         style={{ padding: "var(--purpur-spacing-250)" }}
       >
-        <div>Content 3</div>
+        <div>
+          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
+            Telia has a long-standing history in telecommunications, with roots stretching back to
+            the early days of phone services in Sweden. Today, it operates in multiple countries and
+            continues to evolve alongside the needs of a digital society.
+          </Paragraph>
+          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
+            A major focus for Telia is sustainability. The company is working to reduce its
+            environmental impact through energy-efficient networks, circular economy initiatives,
+            and climate-smart services. Its goal is to become climate-neutral across its entire
+            value chain.
+          </Paragraph>
+          <Paragraph>
+            In addition to its consumer offerings, Telia collaborates closely with governments,
+            cities, and enterprises. From smart city solutions to secure connectivity for remote
+            healthcare, Telia is helping build the digital infrastructure of tomorrow.
+          </Paragraph>
+        </div>
       </Tabs.Content>,
     ],
     negative: false,
+    animateHeight: false,
   },
   render: ({ children, ...args }) => (
     <div

package/src/tabs.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactElement, useEffect, useRef, useState } from "react";
+import React, { Children, type ReactElement, useEffect, useRef, useState } from "react";
 import { Icon } from "@purpurds/icon";
 import { chevronLeft } from "@purpurds/icon/assets/chevron-left";
 import { chevronRight } from "@purpurds/icon/assets/chevron-right";
@@ -8,7 +8,12 @@ import c from "classnames/bind";
 import { isTabContent, TabContent } from "./tab-content";
 import { TabHeader } from "./tab-header";
 import styles from "./tabs.module.scss";
-import { createTabChangeDetailEvent, TabChangeDetail, TabsCmp, TabsVariant } from "./tabs.utils";
+import {
+  createTabChangeDetailEvent,
+  type TabChangeDetail,
+  type TabsCmp,
+  type TabsVariant,
+} from "./tabs.utils";
 
 type TabsProps = {
   children: Array<ReactElement<typeof TabContent>> | ReactElement<typeof TabContent>;
@@ -24,6 +29,10 @@ type TabsProps = {
    * */
   onChange?: (event: CustomEvent<TabChangeDetail>) => void;
   defaultValue?: string;
+  /**
+   * When true, animates the height of the component when switching tabs.
+   * */
+  animateHeight?: boolean;
   "data-testid"?: string;
 } & Pick<React.HTMLAttributes<HTMLDivElement>, "style" | "className">;
 
@@ -77,10 +86,13 @@ export const Tabs: TabsCmp<TabsProps> = ({
   onChange,
   className,
   defaultValue,
+  animateHeight = false,
   "data-testid": dataTestId,
   value,
   ...props
 }) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [height, setHeight] = useState(-1);
   const [scrollClasses, setScrollClasses] = useState<{ [key: string]: boolean }>({});
   const [selectedTriggerOffset, setSelectedTriggerOffset] = useState(0);
   const [selectedTriggerWidth, setSelectedTriggerWidth] = useState(0);
@@ -160,12 +172,26 @@ export const Tabs: TabsCmp<TabsProps> = ({
   );
 
   useEffect(() => {
-    window.addEventListener("resize", handleLinePosition);
+    const setNewHeight = () => {
+      if (contentRef.current && animateHeight) {
+        const newHeight = contentRef.current.offsetHeight;
+        setHeight(newHeight);
+      }
+    };
+
+    const handleResize = () => {
+      setNewHeight();
+      handleLinePosition();
+    };
+
+    setNewHeight();
+
+    window.addEventListener("resize", handleResize);
 
     return () => {
-      window.removeEventListener("resize", handleLinePosition);
+      window.removeEventListener("resize", handleResize);
     };
-  }, [activeIndex]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [activeIndex, animateHeight]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     handleLinePosition();
@@ -266,8 +292,13 @@ export const Tabs: TabsCmp<TabsProps> = ({
           <ScrollButton side="left" />
           <ScrollButton side="right" />
         </div>
-        <div className={cx(`${rootClassName}__content-container`)}>
-          {Children.map(tabContentChildren, (child) => child)}
+        <div
+          className={cx(`${rootClassName}__content-wrapper`)}
+          style={{ height: animateHeight && height > -1 ? `${height}px` : "auto" }}
+        >
+          <div ref={contentRef} className={cx(`${rootClassName}__content-container`)}>
+            {Children.map(tabContentChildren, (child) => child)}
+          </div>
         </div>
       </div>
     </Root>