[UIK-5669][accordion] rebranding

playground/components/ControlPanel.tsx

@@ -44,7 +44,7 @@ function GroupControl({ groupName, controls, groupPropName, onControlChange, isO
       <Accordion.Item value={0}>
         <Accordion.Item.Toggle className={styles.fullWidthItem}>
           <Accordion.Item.ToggleButton>
-            <Accordion.Item.Chevron mr={2} color='var(--intergalactic-icon-secondary-neutral)' />
+            <Accordion.Item.Chevron color='var(--intergalactic-icon-secondary-neutral)' />
             <Text size={200} fontWeight={500}>
               {groupName}
             </Text>

semcore/accordion/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,15 +6,30 @@ exports[`Accordion > Verify data-ui-name 1`] = `
     {
       "children": [
         {
-          "children": [],
-          "uiName": "Item.ToggleButton",
+          "children": [
+            {
+              "children": [
+                {
+                  "children": [],
+                  "uiName": "Item.ToggleButton",
+                },
+              ],
+              "uiName": "Item.Toggle",
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "uiName": "Box",
+                },
+              ],
+              "uiName": "Item.Collapse",
+            },
+          ],
+          "uiName": "Accordion.Item",
         },
       ],
-      "uiName": "Item.Toggle",
-    },
-    {
-      "children": [],
-      "uiName": "Item.Collapse",
+      "uiName": "Accordion",
     },
   ],
   "uiName": null,

semcore/accordion/__tests__/accordion.axe-test.tsx

@@ -20,14 +20,6 @@ test.describe(`@accordion ${TAG.ACCESSIBILITY}`, () => {
     }
   });
 
-  test('Custom styles', async ({ page }) => {
-    await loadPage(page, 'stories/components/accordion/docs/examples/custom_styles.tsx', 'en');
-
-    const violations = await getAccessibilityViolations({ page });
-
-    expect(violations).toEqual([]);
-  });
-
   test('Heading tag', async ({ page }) => {
     await loadPage(page, 'stories/components/accordion/docs/examples/heading_tag.tsx', 'en');
 
@@ -36,12 +28,21 @@ test.describe(`@accordion ${TAG.ACCESSIBILITY}`, () => {
     expect(violations).toEqual([]);
   });
 
-  test('Non compact', async ({ page }) => {
-    await loadPage(page, 'stories/components/accordion/docs/examples/non_compact.tsx', 'en');
+  test('Primary accordion', async ({ page }) => {
+    await loadPage(page, 'stories/components/accordion/docs/examples/primary_accordion.tsx', 'en');
 
-    const violations = await getAccessibilityViolations({ page });
+    {
+      const violations = await getAccessibilityViolations({ page });
 
-    expect(violations).toEqual([]);
+      expect(violations).toEqual([]);
+    }
+    {
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Space');
+      const violations = await getAccessibilityViolations({ page });
+
+      expect(violations).toEqual([]);
+    }
   });
 
   test('One section opening', async ({ page }) => {

semcore/accordion/__tests__/accordion.browser-test.tsx

@@ -4,10 +4,21 @@ import { loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
 
 export const locators = {
+  accordion: (page: Page) => page.locator(`[data-ui-name="Accordion"]`),
+  item: (page: Page, index?: number) => {
+    const base = page.locator(`[data-ui-name="Accordion.Item"]`);
+    return typeof index === 'number' ? base.nth(index) : base;
+  },
   collapse: (page: Page, index?: number) => {
     const base = page.locator(`[data-ui-name="Item.Collapse"]`);
     return typeof index === 'number' ? base.nth(index) : base;
   },
+  // The collapse content wrapper carries the generic data-ui-name="Box",
+  // so it is addressed as the direct child of Item.Collapse.
+  collapseContainer: (page: Page, index?: number) => {
+    const base = page.locator(`[data-ui-name="Item.Collapse"] > [data-ui-name="Box"]`);
+    return typeof index === 'number' ? base.nth(index) : base;
+  },
   chevron: (page: Page, index?: number) => {
     const base = page.locator(`svg[data-ui-name="Item.Chevron"]`);
     return typeof index === 'number' ? base.nth(index) : base;
@@ -20,6 +31,10 @@ export const locators = {
     const base = page.getByRole('heading');
     return typeof index === 'number' ? base.nth(index) : base;
   },
+  toggleButton: (page: Page, index?: number) => {
+    const base = page.locator(`[data-ui-name="Item.ToggleButton"]`);
+    return typeof index === 'number' ? base.nth(index) : base;
+  },
 };
 
 /* =====================================================
@@ -28,8 +43,21 @@ Visual states, hover and focus styles, paddings, margins, and snapshots.
 ===================================================== */
 test.describe(`${TAG.VISUAL}`, () => {
   const variables = [
-    { use: 'primary' },
-    { use: 'secondary' },
+    {
+      use: 'primary',
+      // The chevron stays in the flow: `order` moves it after the label and
+      // `justify-content: space-between` on the toggle button pins it to the right edge.
+      chevronOrder: '1',
+      toggleButtonGap: '8px',
+      togglePadding: '8px 16px 8px 20px',
+    },
+    {
+      use: 'secondary',
+      // Here the chevron leads the label, separated only by the toggle button gap.
+      chevronOrder: '0',
+      toggleButtonGap: '4px',
+      togglePadding: '8px 2px',
+    },
   ];
   variables.forEach((item) => {
     test(`Verify use=${item.use}`, {
@@ -38,7 +66,7 @@ test.describe(`${TAG.VISUAL}`, () => {
         '@accordion'],
     },
     async ({ page }) => {
-      await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', item);
+      await loadPage(page, 'stories/components/accordion/docs/examples/basic_usage.tsx', 'en', { use: item.use });
 
       await test.step('Verify active and normal states', async () => {
         await expect(page).toHaveScreenshot();
@@ -50,20 +78,38 @@ test.describe(`${TAG.VISUAL}`, () => {
         await expect(page).toHaveScreenshot();
       });
 
-      await test.step('Verify toggle margins', async () => {
+      await test.step('Verify chevron placement', async () => {
         const count = await locators.chevron(page).count();
         for (let i = 0; i < count; i++) {
-          await expect(locators.chevron(page, i)).toHaveCSS('margin-right', '8px');
+          await expect(locators.chevron(page, i)).toHaveCSS('order', item.chevronOrder);
+          // The spacing comes from the toggle button gap, never from a margin on the chevron.
+          await expect(locators.chevron(page, i)).toHaveCSS('margin-right', '0px');
         }
       });
 
-      await test.step('Verify item padding', async () => {
+      await test.step('Verify gap between chevron and label', async () => {
+        const count = await locators.toggleButton(page).count();
+        for (let i = 0; i < count; i++) {
+          await expect(locators.toggleButton(page, i)).toHaveCSS('column-gap', item.toggleButtonGap);
+        }
+      });
+
+      await test.step('Verify toggle padding', async () => {
         const count = await locators.toggle(page).count();
         for (let i = 0; i < count; i++) {
-          await expect(locators.toggle(page, i)).toHaveCSS('padding-bottom', '8px');
+          await expect(locators.toggle(page, i)).toHaveCSS('padding', item.togglePadding);
         }
       });
 
+      await test.step('Verify accordion stacks items in a column with a gap', async () => {
+        await expect(locators.accordion(page)).toHaveCSS('flex-direction', 'column');
+        await expect(locators.accordion(page)).toHaveCSS('row-gap', '2px');
+      });
+
+      await test.step('Verify collapse content padding', async () => {
+        await expect(locators.collapseContainer(page, 0)).toHaveCSS('padding', '12px 20px');
+      });
+
       await test.step('Verify h3 tab by default', async () => {
         const count = await locators.toggle(page).count();
 
@@ -85,16 +131,62 @@ test.describe(`${TAG.VISUAL}`, () => {
     await expect(page).toHaveScreenshot();
   });
 
-  test('Verify custom styles for selected toggle ', {
-    tag: [TAG.PRIORITY_MEDIUM,
+  test('Verify selected item styles in primary accordion', {
+    tag: [TAG.PRIORITY_HIGH,
       '@accordion'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/accordion/docs/examples/custom_styles.tsx', 'en');
+    await loadPage(page, 'stories/components/accordion/docs/examples/primary_accordion.tsx', 'en');
+
+    await test.step('Verify collapsed item keeps all corners rounded', async () => {
+      await expect(locators.item(page, 0)).toHaveCSS('border-radius', '8px');
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-left-radius', '8px');
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-right-radius', '8px');
+    });
+
     await locators.toggle(page, 0).click();
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Space');
-    await locators.collapse(page, 1).waitFor({ state: 'visible' });
-    await expect(page).toHaveScreenshot();
+    await locators.collapse(page, 0).waitFor({ state: 'visible' });
+
+    await test.step('Verify expanded toggle squares its bottom corners', async () => {
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-left-radius', '0px');
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-right-radius', '0px');
+    });
+
+    await test.step('Verify accent bar is shown on the expanded item', async () => {
+      // In the primary variant the accent bar is the item's ::before overlay,
+      // toggled through opacity, so it cannot be read from a regular locator.
+      // The bar fades in, so poll until the opacity transition settles.
+      await expect
+        .poll(async () =>
+          locators.item(page, 0).evaluate((el) => getComputedStyle(el, '::before').opacity),
+        )
+        .toBe('1');
+
+      const width = await locators
+        .item(page, 0)
+        .evaluate((el) => getComputedStyle(el, '::before').width);
+
+      expect(width).toBe('2px');
+    });
+
+    await test.step('Verify expanded state snapshot', async () => {
+      await expect(page).toHaveScreenshot();
+    });
+
+    await test.step('Verify corners are restored after collapsing', async () => {
+      await locators.toggle(page, 0).click();
+      await locators.collapse(page, 0).waitFor({ state: 'hidden' });
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-left-radius', '8px');
+      await expect(locators.toggle(page, 0)).toHaveCSS('border-bottom-right-radius', '8px');
+    });
+
+    await test.step('Verify accent bar is hidden after collapsing', async () => {
+      // The bar fades out, so poll until the opacity transition settles.
+      await expect
+        .poll(async () =>
+          locators.item(page, 0).evaluate((el) => getComputedStyle(el, '::before').opacity),
+        )
+        .toBe('0');
+    });
   });
 
   test('Verify focus on focusable item inside accordion', {
@@ -330,7 +422,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
       TAG.MOUSE,
       '@accordion'],
   }, async ({ page }) => {
-    await loadPage(page, 'stories/components/accordion/tests/examples/default-values.tsx', 'en');
+    await loadPage(page, 'stories/components/accordion/tests/examples/values.tsx', 'en');
     await expect(page.locator('[data-test-id="default-value"]')).toBeVisible();
   });
 

semcore/accordion/src/Accordion.tsx

@@ -1,4 +1,4 @@
-import { Collapse as CollapseAnimate, Flex } from '@semcore/base-components';
+import { Collapse as CollapseAnimate, Flex, Box } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
@@ -70,8 +70,10 @@ class RootAccordion extends Component<
   }
 
   render() {
-    const { Children } = this.asProps;
-    return <Children />;
+    const SAccordion = Root;
+    const { styles } = this.asProps;
+
+    return sstyled(styles)(<SAccordion render={Flex} />);
   }
 }
 export class RootItem extends Component<
@@ -131,8 +133,10 @@ export class RootItem extends Component<
   }
 
   render() {
-    const { Children } = this.asProps;
-    return <Children />;
+    const SAccordionItem = Root;
+    const { styles } = this.asProps;
+
+    return sstyled(styles)(<SAccordionItem render={Box} />);
   }
 }
 
@@ -184,10 +188,11 @@ function ToggleButton(
     'ToggleButton'
   >,
 ) {
+  const SItemToggleButton = Root;
   const { styles } = props;
 
   return sstyled(styles)(
-    <Root render={Flex} alignItems='center' role='button' />,
+    <SItemToggleButton render={Flex} alignItems='center' role='button' />,
   );
 }
 
@@ -198,17 +203,23 @@ function Collapse(
     'Collapse'
   >,
 ) {
-  const { selected } = props;
+  const SItemCollapse = Root;
+  const SItemCollapseContainer = Box;
+  const { selected, styles, Children } = props;
   const visible = selected;
 
-  return (
-    <Root
+  return sstyled(styles)(
+    <SItemCollapse
       render={CollapseAnimate}
       visible={visible}
       interactive
       inert={!visible ? '' : undefined}
       aria-hidden={!visible}
-    />
+    >
+      <SItemCollapseContainer>
+        <Children />
+      </SItemCollapseContainer>
+    </SItemCollapse>,
   );
 }