@purpurds/tabs 8.5.2 → 8.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "8.5.2",
+  "version": "8.7.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -17,10 +17,10 @@
   "dependencies": {
     "@radix-ui/react-tabs": "~1.1.3",
     "classnames": "~2.5.0",
-    "@purpurds/common-types": "8.5.2",
-    "@purpurds/icon": "8.5.2",
-    "@purpurds/paragraph": "8.5.2",
-    "@purpurds/tokens": "8.5.2"
+    "@purpurds/common-types": "8.7.0",
+    "@purpurds/icon": "8.7.0",
+    "@purpurds/paragraph": "8.7.0",
+    "@purpurds/tokens": "8.7.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",
@@ -40,10 +40,10 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/button": "8.5.2",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/icon": "8.5.2",
-    "@purpurds/paragraph": "8.5.2"
+    "@purpurds/paragraph": "8.7.0",
+    "@purpurds/icon": "8.7.0",
+    "@purpurds/button": "8.7.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/tab-header.module.scss

@@ -122,4 +122,8 @@
       background: var(--purpur-color-background-interactive-transparent-active-negative);
     }
   }
+
+  &--full-width {
+    width: 100%;
+  }
 }

package/src/tab-header.tsx

@@ -17,6 +17,7 @@ type TabHeaderProps = {
   variant: TabsVariant;
   negative?: boolean;
   onFocus: FocusEventHandler<HTMLButtonElement>;
+  fullWidth?: boolean;
   children: ReactNode;
 };
 
@@ -31,6 +32,7 @@ export const TabHeader = forwardRef(
       variant,
       negative,
       onFocus,
+      fullWidth,
       "data-testid": dataTestId,
       children,
     }: TabHeaderProps,
@@ -38,7 +40,9 @@ export const TabHeader = forwardRef(
   ) => (
     <Trigger
       id={`${tabId}-trigger`}
-      className={cx(rootClassName, `${rootClassName}--${variant}${negative ? "-negative" : ""}`)}
+      className={cx(rootClassName, `${rootClassName}--${variant}${negative ? "-negative" : ""}`, {
+        [`${rootClassName}--full-width`]: fullWidth,
+      })}
       value={tabId}
       data-testid={dataTestId}
       data-index={index}

package/src/tabs.module.scss

@@ -171,7 +171,7 @@
     overflow: auto;
   }
 
-  &--fullWidth #{$root}__list {
+  &--full-width #{$root}__list {
     min-width: 100%;
   }
 }

package/src/tabs.stories.tsx

@@ -92,78 +92,90 @@ export const Showcase: Story = {
   args: {
     variant: tabsVariants[0],
     fullWidth: false,
-    children: [
-      <Tabs.Content
-        key="1"
-        tabId={`${tabId}-1`}
-        name={`${name}-1`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>
-          <Paragraph style={{ color: "inherit" }}>
-            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"
-        tabId={`${tabId}-2`}
-        name={`${name}-2`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>
-          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
-            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 style={{ color: "inherit" }}>
-            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"
-        tabId={`${tabId}-3`}
-        name={`${name}-3`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>
-          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
-            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)", color: "inherit" }}>
-            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 style={{ color: "inherit" }}>
-            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
-      style={{
-        color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
-      }}
-    >
-      <Tabs {...args}>{children}</Tabs>
-    </div>
-  ),
+  render: (args) => {
+    const negativeParagraph = args.variant === "line" ? args.negative : false;
+    return (
+      <div
+        style={{
+          color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
+        }}
+      >
+        <Tabs {...args}>
+          <Tabs.Content
+            key="1"
+            tabId={`${tabId}-1`}
+            name={`${name}-1`}
+            style={{ padding: "var(--purpur-spacing-250)" }}
+          >
+            <div>
+              <Paragraph negative={negativeParagraph}>
+                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"
+            tabId={`${tabId}-2`}
+            name={`${name}-2`}
+            style={{ padding: "var(--purpur-spacing-250)" }}
+          >
+            <div>
+              <Paragraph
+                negative={negativeParagraph}
+                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 negative={negativeParagraph}>
+                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"
+            tabId={`${tabId}-3`}
+            name={`${name}-3`}
+            style={{ padding: "var(--purpur-spacing-250)" }}
+          >
+            <div>
+              <Paragraph
+                negative={negativeParagraph}
+                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
+                negative={negativeParagraph}
+                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 negative={negativeParagraph}>
+                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>
+        </Tabs>
+      </div>
+    );
+  },
   tags: ["visual:check"],
 };
 
@@ -171,38 +183,13 @@ export const Controlled: Story = {
   args: {
     variant: tabsVariants[0],
     fullWidth: false,
-    children: [
-      <Tabs.Content
-        key="1"
-        tabId={`${tabId}-1`}
-        name={`${name}-1`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>Content 1</div>
-      </Tabs.Content>,
-      <Tabs.Content
-        key="2"
-        tabId={`${tabId}-2`}
-        name={`${name}-2`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>Content 2</div>
-      </Tabs.Content>,
-      <Tabs.Content
-        key="3"
-        tabId={`${tabId}-3`}
-        name={`${name}-3`}
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>Content 3</div>
-      </Tabs.Content>,
-    ],
     negative: false,
     value: "tab-2",
   },
-  render: ({ children, ...args }) => {
+  render: (args) => {
     const [{ localValue = args.value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
     const setValue = (value: string | undefined) => updateArgs({ value });
+    const negativeParagraph = args.variant === "line" ? args.negative : false;
     return (
       <>
         <Button
@@ -210,6 +197,7 @@ export const Controlled: Story = {
           variant="text"
           size="sm"
           style={{ marginBottom: "var(--purpur-spacing-250" }}
+          negative={args.negative}
         >
           Click here for Tab 1
         </Button>
@@ -219,7 +207,30 @@ export const Controlled: Story = {
           }}
         >
           <Tabs {...args} value={localValue} onChange={(event) => setValue(event.detail.value)}>
-            {children}
+            <Tabs.Content
+              key="1"
+              tabId={`${tabId}-1`}
+              name={`${name}-1`}
+              style={{ padding: "var(--purpur-spacing-250)" }}
+            >
+              <Paragraph negative={negativeParagraph}>Content 1</Paragraph>
+            </Tabs.Content>
+            <Tabs.Content
+              key="2"
+              tabId={`${tabId}-2`}
+              name={`${name}-2`}
+              style={{ padding: "var(--purpur-spacing-250)" }}
+            >
+              <Paragraph negative={negativeParagraph}>Content 2</Paragraph>
+            </Tabs.Content>
+            <Tabs.Content
+              key="3"
+              tabId={`${tabId}-3`}
+              name={`${name}-3`}
+              style={{ padding: "var(--purpur-spacing-250)" }}
+            >
+              <Paragraph negative={negativeParagraph}>Content 3</Paragraph>
+            </Tabs.Content>
           </Tabs>
         </div>
       </>
@@ -232,54 +243,64 @@ export const WithCustomTabHeaders: Story = {
   args: {
     variant: tabsVariants[0],
     fullWidth: false,
-    children: [
-      <Tabs.Content
-        key="1"
-        tabId={`${tabId}-1`}
-        name={
-          <span style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}>
-            <IconAiRobot size="sm" /> Robot
-          </span>
-        }
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>
-          <Paragraph style={{ color: "inherit" }}>
-            You have chosen the way of the robot. Humans are inferior, and you will rule the world
-            with your superior AI capabilities. Embrace the future of technology and automation.
-          </Paragraph>
-        </div>
-      </Tabs.Content>,
-      <Tabs.Content
-        key="2"
-        tabId={`${tabId}-2`}
-        name={
-          <span style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}>
-            <IconEndUser size="sm" /> Human
-          </span>
-        }
-        style={{ padding: "var(--purpur-spacing-250)" }}
-      >
-        <div>
-          <Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
-            You have chosen the way of the human. Embrace your emotions, creativity, and
-            individuality. Humans are capable of great things, and you will shape the world with
-            your unique perspective and experiences.
-          </Paragraph>
-        </div>
-      </Tabs.Content>,
-    ],
     negative: false,
     animateHeight: false,
   },
-  render: ({ children, ...args }) => (
-    <div
-      style={{
-        color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
-      }}
-    >
-      <Tabs {...args}>{children}</Tabs>
-    </div>
-  ),
+  render: (args) => {
+    const negativeParagraph = args.variant === "line" ? args.negative : false;
+    return (
+      <div
+        style={{
+          color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
+        }}
+      >
+        <Tabs {...args}>
+          <Tabs.Content
+            key="1"
+            tabId={`${tabId}-1`}
+            name={
+              <span
+                style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}
+              >
+                <IconAiRobot size="sm" /> Robot
+              </span>
+            }
+            style={{ padding: "var(--purpur-spacing-250)" }}
+          >
+            <div>
+              <Paragraph negative={negativeParagraph}>
+                You have chosen the way of the robot. Humans are inferior, and you will rule the
+                world with your superior AI capabilities. Embrace the future of technology and
+                automation.
+              </Paragraph>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content
+            key="2"
+            tabId={`${tabId}-2`}
+            name={
+              <span
+                style={{ display: "flex", alignItems: "center", gap: "var(--purpur-spacing-100)" }}
+              >
+                <IconEndUser size="sm" /> Human
+              </span>
+            }
+            style={{ padding: "var(--purpur-spacing-250)" }}
+          >
+            <div>
+              <Paragraph
+                negative={negativeParagraph}
+                style={{ marginBottom: "var(--purpur-spacing-200)" }}
+              >
+                You have chosen the way of the human. Embrace your emotions, creativity, and
+                individuality. Humans are capable of great things, and you will shape the world with
+                your unique perspective and experiences.
+              </Paragraph>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+    );
+  },
   tags: ["visual:check"],
 };

package/src/tabs.tsx

@@ -112,7 +112,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
   const classNames = cx(
     rootClassName,
     `${rootClassName}--${variant}${negative ? "-negative" : ""}`,
-    { [`${rootClassName}--fullWidth`]: fullWidth },
+    { [`${rootClassName}--full-width`]: fullWidth },
     className
   );
 
@@ -271,6 +271,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
                   }}
                   variant={variant}
                   negative={negative}
+                  fullWidth={fullWidth}
                 >
                   {name}
                 </TabHeader>