diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md index e000688b0f..6b53e44147 100644 --- a/packages/web-react/DEPRECATIONS-v2.md +++ b/packages/web-react/DEPRECATIONS-v2.md @@ -95,6 +95,7 @@ See [Codemods documentation][readme-codemods] for more details. Or manually add `isScrollable` prop to the `ModalDialog` component. [readme-codemods]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/README.md +[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#placement [dropdown-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Dropdown/README.md [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations [tooltip-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Tooltip/README.md 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( ( @@ -27,27 +28,17 @@ describe('UncontrolledCollapse', () => { Hello World , ); - 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( - ( - - )} - > - Hello World - , - ); - 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..fbff1fe04b 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 = () => {
{content} - {content} + + {content} +
); }; diff --git a/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx b/packages/web-react/src/components/Collapse/demo/CollapseDefault.tsx index 61b3f3d14b..f08695091f 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 = () => { - + 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..c97678d73e 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.

- + 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..2f222b5d17 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 = () => { … more - + 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..e72ede3dbb 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 = () => { - + 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..ab746298bf 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 = () => { - + 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..e46b5b0401 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 = () => { return (
{content} - {content} + + {content} +
); }; diff --git a/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx b/packages/web-react/src/components/Collapse/demo/CollapseVisibilityBreakpointDesktop.tsx index f6f746dbfb..357b9a3fe4 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 = () => { Collapse trigger - + 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..156b98417a 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 = () => { Collapse trigger - + 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 {