Feat(web-react): Use renamed Dropdown classes #DS-1248

lmc-eu · May 21, 2024 · 5f14fee · 5f14fee
1 parent 2817911
commit 5f14fee
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 31 deletions.
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx
@@ -43,7 +43,7 @@ export const Dropdown = (props: SpiritDropdownProps) => {
     <DropdownProvider value={{ id, isOpen, fullWidthMode, placement, onToggle, dropdownRef, triggerRef }}>
       <div
         ref={dropdownRef}
-        className={classNames(classProps.wrapperClassName, styleProps.className)}
+        className={classNames(classProps.root, styleProps.className)}
         style={styleProps.style}
         {...otherProps}
       >

diff --git a/packages/web-react/src/components/Dropdown/DropdownPopover.tsx b/packages/web-react/src/components/Dropdown/DropdownPopover.tsx
@@ -17,7 +17,7 @@ export const DropdownPopover = (props: DropdownPopoverProps) => {
 
   return (
     <div
-      className={classNames(classProps.contentClassName, styleProps.className)}
+      className={classNames(classProps.popover, styleProps.className)}
       style={styleProps.style}
       {...contentProps}
       {...otherProps}

diff --git a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
@@ -29,7 +29,7 @@ export const DropdownTrigger = (props: DropdownTriggerProps) => {
       id={id}
       {...rest}
       ref={triggerRef}
-      className={classNames(classProps.triggerClassName, styleProps.className)}
+      className={classNames(classProps.trigger, styleProps.className)}
       style={styleProps.style}
       {...triggerProps}
       {...otherProps}

diff --git a/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx b/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx
@@ -22,7 +22,7 @@ export const UncontrolledDropdown = (props: UncontrolledDropdownProps) => {
         ref={dropdownRef}
         {...styleProps}
         {...otherProps}
-        className={classNames(classProps.wrapperClassName, styleProps.className)}
+        className={classNames(classProps.root, styleProps.className)}
       >
         {children}
       </div>

diff --git a/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/web-react/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -9,7 +9,7 @@ import DropdownPopover from '../DropdownPopover';
 import DropdownTrigger from '../DropdownTrigger';
 
 describe('Dropdown', () => {
-  classNamePrefixProviderTest(Dropdown, 'DropdownWrapper');
+  classNamePrefixProviderTest(Dropdown, 'Dropdown');
 
   stylePropsTest(
     (props: Record<string, unknown>) => (
@@ -18,7 +18,7 @@ describe('Dropdown', () => {
     'test-dropdown',
   );
 
-  restPropsTest(Dropdown, '.DropdownWrapper');
+  restPropsTest(Dropdown, '.Dropdown');
 
   it('should render text children', () => {
     const dom = render(
@@ -27,11 +27,11 @@ describe('Dropdown', () => {
         <DropdownPopover>Hello World</DropdownPopover>
       </Dropdown>,
     );
-    const trigger = dom.container.querySelector('button') as HTMLElement;
-    const element = dom.container.querySelector('.Dropdown') as HTMLElement;
+    const trigger = screen.getByRole('button');
+    const element = dom.container.querySelector('.DropdownPopover') as HTMLElement;
 
-    expect(trigger.textContent).toBe('Trigger');
-    expect(element.textContent).toBe('Hello World');
+    expect(trigger).toHaveTextContent('Trigger');
+    expect(element).toHaveTextContent('Hello World');
   });
 
   it('should be opened', () => {
@@ -43,8 +43,8 @@ describe('Dropdown', () => {
         <DropdownPopover>Hello World</DropdownPopover>
       </Dropdown>,
     );
-    const element = dom.container.querySelector('.Dropdown') as HTMLElement;
-    const trigger = dom.container.querySelector('button') as HTMLElement;
+    const element = dom.container.querySelector('.DropdownPopover') as HTMLElement;
+    const trigger = screen.getByRole('button');
 
     expect(element).toHaveClass('is-open');
     expect(trigger).toHaveClass('is-expanded');

diff --git a/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx b/packages/web-react/src/components/Dropdown/__tests__/DropdownPopover.test.tsx
@@ -7,15 +7,15 @@ import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import DropdownPopover from '../DropdownPopover';
 
 describe('DropdownPopover', () => {
-  classNamePrefixProviderTest(DropdownPopover, 'Dropdown');
+  classNamePrefixProviderTest(DropdownPopover, 'DropdownPopover');
 
   stylePropsTest(DropdownPopover);
 
-  restPropsTest(DropdownPopover, '.Dropdown');
+  restPropsTest(DropdownPopover, '.DropdownPopover');
 
   it('should have children', () => {
     const dom = render(<DropdownPopover>Popover</DropdownPopover>);
-    const popover = dom.container.querySelector('.Dropdown') as HTMLElement;
+    const popover = dom.container.querySelector('.DropdownPopover') as HTMLElement;
 
     expect(popover).toHaveTextContent('Popover');
   });

diff --git a/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts b/packages/web-react/src/components/Dropdown/__tests__/useDropdownStyleProps.test.ts
@@ -5,8 +5,8 @@ describe('useDropdownStyleProps', () => {
   it('should return defaults', () => {
     const { result } = renderHook(() => useDropdownStyleProps());
 
-    expect(result.current.classProps.contentClassName).toBe('Dropdown');
-    expect(result.current.classProps.wrapperClassName).toBe('DropdownWrapper');
+    expect(result.current.classProps.root).toBe('Dropdown');
+    expect(result.current.classProps.popover).toBe('DropdownPopover');
   });
 
   it('should render as open', () => {
@@ -15,8 +15,8 @@ describe('useDropdownStyleProps', () => {
     };
     const { result } = renderHook(() => useDropdownStyleProps(props));
 
-    expect(result.current.classProps.contentClassName).toBe('Dropdown is-open');
-    expect(result.current.classProps.triggerClassName).toBe('is-expanded');
+    expect(result.current.classProps.popover).toBe('DropdownPopover is-open');
+    expect(result.current.classProps.trigger).toBe('is-expanded');
   });
 
   it('should transfer additional props', () => {
@@ -26,7 +26,7 @@ describe('useDropdownStyleProps', () => {
     };
     const { result } = renderHook(() => useDropdownStyleProps(props));
 
-    expect(result.current.classProps.contentClassName).toBe('Dropdown');
+    expect(result.current.classProps.popover).toBe('DropdownPopover');
     expect(result.current.props).toEqual({ transferProp: 'test' });
   });
 });
diff --git a/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts b/packages/web-react/src/components/Dropdown/useDropdownStyleProps.ts
@@ -4,29 +4,29 @@ import { DropdownStyleProps } from '../../types';
 
 export interface UseDropdownStylePropsReturn {
   classProps: {
-    wrapperClassName: string;
-    triggerClassName: string;
-    contentClassName: string;
+    root: string;
+    trigger: string;
+    popover: string;
   };
   props: DropdownStyleProps;
 }
 
 export const useDropdownStyleProps = (props: DropdownStyleProps = { isOpen: false }): UseDropdownStylePropsReturn => {
   const { isOpen, ...modifiedProps } = props;
 
-  const dropdownClass = useClassNamePrefix('Dropdown');
-  const dropdownWrapperClass = `${dropdownClass}Wrapper`;
+  const dropdownRootClass = useClassNamePrefix('Dropdown');
+  const dropdownPopoverClass = `${dropdownRootClass}Popover`;
   const expandedClass = isOpen ? 'is-expanded' : '';
   const openClass = isOpen ? 'is-open' : '';
 
-  const dropdownClassName = classNames(dropdownClass, openClass);
-  const triggerClassName = classNames(expandedClass);
+  const popoverClass = classNames(dropdownPopoverClass, openClass);
+  const triggerClass = classNames(expandedClass);
 
   return {
     classProps: {
-      wrapperClassName: dropdownWrapperClass,
-      triggerClassName,
-      contentClassName: dropdownClassName,
+      root: dropdownRootClass,
+      trigger: triggerClass,
+      popover: popoverClass,
     },
     props: modifiedProps,
   };