From f244e82c339d91e4f68d4c3c40700566411fae44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Tue, 7 May 2024 13:56:06 +0200
Subject: [PATCH 1/2] BREAKING CHANGE(web-react): Add mandatory id prop for
 Collapse component #DS-1190

---
 .../Collapse/UncontrolledCollapse.tsx         |  2 -
 .../__tests__/UncontrolledCollapse.test.tsx   | 37 +++++++++----------
 .../src/components/Collapse/demo/Collapse.tsx |  4 +-
 .../Collapse/demo/CollapseDefault.tsx         |  2 +-
 .../Collapse/demo/CollapseHelperClass.tsx     |  2 +-
 .../Collapse/demo/CollapseHideTrigger.tsx     |  2 +-
 .../demo/CollapseMultipleTriggers.tsx         |  2 +-
 .../Collapse/demo/CollapseOpenOnInit.tsx      |  2 +-
 .../Collapse/demo/CollapseUncontrolled.tsx    |  4 +-
 .../CollapseVisibilityBreakpointDesktop.tsx   |  2 +-
 .../CollapseVisibilityBreakpointTablet.tsx    |  2 +-
 packages/web-react/src/types/collapse.ts      |  3 +-
 12 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
index 3322b66e4e..755cc76923 100644
--- a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
+++ b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
@@ -5,8 +5,6 @@ import { useCollapse } from './useCollapse';
 import { useCollapseAriaProps } from './useCollapseAriaProps';
 
 const defaultProps = {
-  /** @deprecated ID will be made a required user input in the next major version. */
-  id: Math.random().toString(36).slice(2, 7),
   isOpen: false,
 };
 
diff --git a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx
index e4d813dc1e..fed475121c 100644
--- a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx
+++ b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -13,9 +13,10 @@ describe('UncontrolledCollapse', () => {
 
   restPropsTest(UncontrolledCollapse, 'div');
 
-  it('should render text children', () => {
-    const dom = render(
+  beforeEach(() => {
+    render(
       <UncontrolledCollapse
+        id="exampleId"
         // Normally we want to display state change, not in this test, prop is passed anyway
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         renderTrigger={({ isOpen, ...rest }) => (
@@ -27,27 +28,17 @@ describe('UncontrolledCollapse', () => {
         Hello World
       </UncontrolledCollapse>,
     );
-    const element = dom.container.querySelector('div') as HTMLElement;
+  });
 
-    expect(element.textContent).toBe('Hello World');
+  it('should render text children', () => {
+    const element = screen.getByRole('button').parentElement as HTMLElement;
+
+    expect(element).toHaveTextContent('Hello World');
   });
 
   it('should toggle a collapse', () => {
-    const dom = render(
-      <UncontrolledCollapse
-        // Normally we want to display state change, not in this test, prop is passed anyway
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        renderTrigger={({ isOpen, ...rest }) => (
-          <button type="button" {...rest}>
-            trigger
-          </button>
-        )}
-      >
-        Hello World
-      </UncontrolledCollapse>,
-    );
-    const element = dom.container.querySelector('div') as HTMLElement;
-    const trigger = dom.container.querySelector('button') as HTMLElement;
+    const trigger = screen.getByRole('button') as HTMLElement;
+    const element = trigger.nextElementSibling as HTMLElement;
 
     fireEvent.click(trigger);
 
@@ -58,4 +49,10 @@ describe('UncontrolledCollapse', () => {
 
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
+
+  it('should have correct id', () => {
+    const element = screen.getByRole('button').nextElementSibling as HTMLElement;
+
+    expect(element).toHaveAttribute('id', 'exampleId');
+  });
 });
diff --git a/packages/web-react/src/components/Collapse/demo/Collapse.tsx b/packages/web-react/src/components/Collapse/demo/Collapse.tsx
index 63bf42699d..b7f0070adc 100644
--- a/packages/web-react/src/components/Collapse/demo/Collapse.tsx
+++ b/packages/web-react/src/components/Collapse/demo/Collapse.tsx
@@ -39,7 +39,9 @@ const Story: ComponentStory<typeof Collapse> = () => {
     <div>
       {content}
       <CollapseTrigger isOpen={isOpen} onClick={toggleHandler} />
-      <Collapse isOpen={isOpen}>{content}</Collapse>
+      <Collapse id="collapseId" isOpen={isOpen}>
+        {content}
+      </Collapse>
     </div>
   );
 };
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx b/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx
index 61b3f3d14b..20796c1739 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx
@@ -11,7 +11,7 @@ const CollapseDefault = () => {
       <Button isOpen={isOpen} onClick={toggleHandler}>
         Collapse trigger
       </Button>
-      <Collapse isOpen={isOpen}>
+      <Collapse id="collapseDefaultId" isOpen={isOpen}>
         Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla
         neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a lacinia, fermentum arcu ullamcorper
         posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseHelperClass.tsx b/packages/web-react/src/components/Collapse/demo/CollapseHelperClass.tsx
index fd5d59083a..9eb43f2027 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseHelperClass.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseHelperClass.tsx
@@ -17,7 +17,7 @@ const CollapseHelperClass = () => {
         posuere tristique bibendum aliquam. In donec dolor ut, imperdiet quam fermentum molestie vulputate scelerisque
         ac nec, tortor mi orci sollicitudin elementum.
       </p>
-      <Collapse isOpen={isOpen}>
+      <Collapse id="collapseHelperClassId" isOpen={isOpen}>
         Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla
         neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a lacinia, fermentum arcu ullamcorper
         posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseHideTrigger.tsx b/packages/web-react/src/components/Collapse/demo/CollapseHideTrigger.tsx
index 7208a1939b..13202ba5c4 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseHideTrigger.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseHideTrigger.tsx
@@ -17,7 +17,7 @@ const CollapseHideTrigger = () => {
       <a href="#" role="button" onClick={toggleHandler} aria-expanded={isOpen}>
         <span className="accessibility-closed">… more</span>
       </a>
-      <Collapse isOpen={isOpen}>
+      <Collapse id="collapseHideTriggerId" isOpen={isOpen}>
         Commodo metus a lorem, a aliquet vestibulum rutrum pharetra sapien sed, ullamcorper quis odio dolor ut aliquam.
         Rutrum suspendisse, fermentum tellus metus a lorem cursus volutpat proin bibendum, sed diam a duis id dui et
         tempus. Ligula non, sapien augue libero eget aliquam semper varius, posuere urna leo vitae ullamcorper.
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseMultipleTriggers.tsx b/packages/web-react/src/components/Collapse/demo/CollapseMultipleTriggers.tsx
index 9f21258eb4..8f8484cc48 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseMultipleTriggers.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseMultipleTriggers.tsx
@@ -11,7 +11,7 @@ const CollapseMultipleTriggers = () => {
       <Button isOpen={isOpen} onClick={toggleHandler}>
         Collapse trigger
       </Button>
-      <Collapse isOpen={isOpen}>
+      <Collapse id="collapseMultipleTriggersId" isOpen={isOpen}>
         Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla
         neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a lacinia, fermentum arcu ullamcorper
         posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseOpenOnInit.tsx b/packages/web-react/src/components/Collapse/demo/CollapseOpenOnInit.tsx
index ae6b286395..98e6442f7b 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseOpenOnInit.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseOpenOnInit.tsx
@@ -11,7 +11,7 @@ const CollapseOpenOnInit = () => {
       <Button isOpen={isOpen} onClick={toggleHandler}>
         Collapse trigger
       </Button>
-      <Collapse isOpen={isOpen}>
+      <Collapse id="collapseOpenOnInitId" isOpen={isOpen}>
         Cras dictum ante, mollis ollicitudin proin bibendum nec commodo consequat fusce ante, consequat venenatis
         suscipit odio morbi. Dolor sit amet porta, placerat tristique sit amet ligula nisl risus et vehicula, suscipit
         accumsan nunc curabitur. Et neque, augue ut nulla a sed porta scelerisque proin, elit sapien lacinia felis.
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx b/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx
index 635643dc1d..408d53f31e 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseUncontrolled.tsx
@@ -9,7 +9,9 @@ const Story: ComponentStory<typeof UncontrolledCollapse> = () => {
   return (
     <div>
       {content}
-      <UncontrolledCollapse renderTrigger={CollapseTrigger}>{content}</UncontrolledCollapse>
+      <UncontrolledCollapse id="uncontrolledCollapseId" renderTrigger={CollapseTrigger}>
+        {content}
+      </UncontrolledCollapse>
     </div>
   );
 };
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx b/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx
index f6f746dbfb..276041318f 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx
@@ -11,7 +11,7 @@ const CollapseVisibilityBreakpointDesktop = () => {
       <ButtonLink isOpen={isOpenDesktop} onClick={toggleHandlerDesktop} size="medium" UNSAFE_className="d-desktop-none">
         Collapse trigger
       </ButtonLink>
-      <Collapse isOpen={isOpenDesktop} collapsibleToBreakpoint="desktop">
+      <Collapse id="collapseVisibilityBreakpointDesktopId" isOpen={isOpenDesktop} collapsibleToBreakpoint="desktop">
         Elementum luctus ultrices, ultrices quam metus a lorem sollicitudin lorem fringilla curabitur felis a, sed urna
         consectetur maximus. Imperdiet donec, elit condimentum dolor ut accumsan congue nulla ut id ante vel arcu, lorem
         fringilla interdum pulvinar nullam. Curabitur interdum, semper donec dui et tempus fusce vitae ornare risus
diff --git a/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointTablet.tsx b/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointTablet.tsx
index bd379c26ba..b03e22525b 100644
--- a/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointTablet.tsx
+++ b/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointTablet.tsx
@@ -11,7 +11,7 @@ const CollapseVisibilityBreakpointTablet = () => {
       <ButtonLink isOpen={isOpenTablet} onClick={toggleHandlerTablet} size="medium" UNSAFE_className="d-tablet-none">
         Collapse trigger
       </ButtonLink>
-      <Collapse isOpen={isOpenTablet} collapsibleToBreakpoint="tablet">
+      <Collapse id="collapseVisibilityBreakpointTabletId" isOpen={isOpenTablet} collapsibleToBreakpoint="tablet">
         Turpis cursus, urna vehicula sed porttitor nulla non mauris sapien congue, urna dui augue facilisis. Nunc elit,
         ipsum porttitor curabitur sapien nulla finibus quis pulvinar, commodo convallis lorem fringilla nec. Quam
         libero, vitae massa ornare eget vestibulum et iaculis quisque sapien, turpis maximus maximus vivamus. Nibh
diff --git a/packages/web-react/src/types/collapse.ts b/packages/web-react/src/types/collapse.ts
index 3f98fc4f2d..9021fcd54d 100644
--- a/packages/web-react/src/types/collapse.ts
+++ b/packages/web-react/src/types/collapse.ts
@@ -13,8 +13,7 @@ export type CollapseRenderProps = {
 };
 
 export interface BaseCollapseProps extends ChildrenProps, StyleProps {
-  /** @deprecated The "id" property will be required instead of optional starting from the next major version. */
-  id?: string;
+  id: string;
 }
 
 export interface CollapseProps extends BaseCollapseProps {

From 105ec2f2671d29f66f9659609572e5683a076f75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Fri, 10 May 2024 13:57:00 +0200
Subject: [PATCH 2/2] BREAKING CHANGE(web-twig): Add mandatory id prop for
 Dropdown component #DS-1190

---
 .../web-twig/src/Resources/components/Dropdown/Dropdown.twig | 5 ++++-
 .../Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
index 95bda1f3ff..cd7ccdcfa3 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -3,6 +3,7 @@
 {%- set _fullWidthMode = props.fullWidthMode | default(null)  -%}
 {%- set _elementType = props.elementType | default('div') -%}
 {%- set _placement = props.placement | default('bottom-start') -%}
+{%- set _id = props.id -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%}
@@ -10,11 +11,12 @@
 {# Attributes #}
 {%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-spirit-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%}
 {%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%}
+{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
-{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-placement']) -%}
+{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-placement', 'id']) -%}
 
 <{{ _elementType }}
     {{ mainProps(_mainPropsWithoutReservedAttributes) }}
@@ -22,6 +24,7 @@
     {{ classProp(_classNames) }}
     {{ _dataFullWidthModeAttr | raw }}
     {{ _dataPlacementAttr | raw }}
+    {{ _idAttr | raw }}
 >
     {%- block content %}{% endblock -%}
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
index 7a2cbb30e1..0f0fef1e16 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
@@ -10,7 +10,7 @@
     </div>
     <!-- Render with all props -->
 
-    <aside id="my-dropdown" class="Dropdown" data-spirit-fullwidthmode="mobile-only" data-spirit-placement="top-end">
+    <aside class="Dropdown" data-spirit-fullwidthmode="mobile-only" data-spirit-placement="top-end" id="my-dropdown">
       content
     </aside>
   </body>