@warp-ds/elements 2.8.0-next.4 → 2.8.0

package/dist/packages/tabs/tabs.test.js

@@ -0,0 +1,77 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../tab/tab.js';
+import '../tab-panel/tab-panel.js';
+import './tabs.js';
+test('renders the different tab components', async () => {
+    const component = html `<w-tabs>
+    <w-tab for="fellowship">Fellowship</w-tab>
+    <w-tab-panel id="fellowship">
+      <p>And my axe!</p>
+    </w-tab-panel>
+
+    <w-tab for="towers">Towers</w-tab>
+    <w-tab-panel id="towers">
+      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
+    </w-tab-panel>
+
+    <w-tab for="return">Return</w-tab>
+    <w-tab-panel id="return">
+      <p>I am no man.</p>
+    </w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    // defaults to the first tab if the active property is not set
+    await expect.element(page.getByText('And my axe!')).toBeVisible();
+    await expect.element(page.getByText('I am on nobody\'s side')).not.toBeVisible();
+    await expect.element(page.getByText('I am no man')).not.toBeVisible();
+});
+test('can control the visible tab with the active attribute', async () => {
+    const component = html `<w-tabs active="towers">
+    <w-tab for="fellowship">Fellowship</w-tab>
+    <w-tab-panel id="fellowship">
+      <p>And my axe!</p>
+    </w-tab-panel>
+
+    <w-tab for="towers">Towers</w-tab>
+    <w-tab-panel id="towers">
+      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
+    </w-tab-panel>
+
+    <w-tab for="return">Return</w-tab>
+    <w-tab-panel id="return">
+      <p>I am no man.</p>
+    </w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    await expect.element(page.getByText('I am on nobody\'s side')).toBeVisible();
+    await expect.element(page.getByText('And my axe!')).not.toBeVisible();
+    await expect.element(page.getByText('I am no man')).not.toBeVisible();
+});
+test('clicking a tab changes the active attribute, visible tab panel', async () => {
+    const component = html `<w-tabs active="towers">
+    <w-tab for="fellowship">Fellowship</w-tab>
+    <w-tab-panel id="fellowship">
+      <p>And my axe!</p>
+    </w-tab-panel>
+
+    <w-tab for="towers">Towers</w-tab>
+    <w-tab-panel id="towers">
+      <p>I am on nobody's side, because nobody is on my side, little orc.</p>
+    </w-tab-panel>
+
+    <w-tab for="return">Return</w-tab>
+    <w-tab-panel id="return">
+      <p>I am no man.</p>
+    </w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    await userEvent.click(page.getByRole('tab').last());
+    await page.container.querySelector('w-tabs').updateComplete;
+    await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
+    await expect.element(page.getByText('I am no man')).toBeVisible();
+    await expect.element(page.getByText('And my axe!')).not.toBeVisible();
+    await expect.element(page.getByText('I am on nobody\'s side')).not.toBeVisible();
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.8.0-next.3",
+  "version": "2.8.0-next.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1672,11 +1672,14 @@
           "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
           "doc-url": "",
           "attributes": [
+            { "name": "id", "value": { "type": "string", "default": "''" } },
             { "name": "for", "value": { "type": "string", "default": "''" } },
             {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "aria-selected",
+              "value": { "type": "'true' | 'false'" }
             },
+            { "name": "tabindex", "value": { "type": "number" } },
+            { "name": "active", "value": { "type": "boolean" } },
             {
               "name": "over",
               "value": { "type": "boolean", "default": "false" }
@@ -1685,7 +1688,10 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "id", "type": "string" },
               { "name": "for", "type": "string" },
+              { "name": "ariaSelected", "type": "'true' | 'false'" },
+              { "name": "tabIndex", "type": "number" },
               { "name": "active", "type": "boolean" },
               { "name": "over", "type": "boolean" }
             ],
@@ -1712,9 +1718,7 @@
           "name": "w-tabs",
           "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
           "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string", "default": "''" } }
-          ],
+          "attributes": [{ "name": "active", "value": { "type": "string" } }],
           "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.8.0-next.4",
+  "version": "2.8.0",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {