BREAKING CHANGE(web-react): Remove Header deprecations #DS-651

 ## Migration Guide

Instead of `HeaderModern`, now use `Header` and its structure.

The most notable change is that the mobile and desktop navigation
are now separate components that cannot be nested:

- `Header`
- `HeaderDialog`

Formerly, the desktop dialog (holding the site navigation) was
a responsive CSS modification of a shared HTML code. With the
new `Header` and `HeaderDialog`, each component has its own
instance of the navigation, i.e. the navigation code is duplicated.
This is because `HeaderDialog` will become an independent
component in the future.

You may need to take additional measures so your SEO is not
affected by the duplicate HTML code of the navigation.

The old components in `Header` can be roughly mapped onto the
new subcomponents like this:

- `NavbarToggler` → `HeaderMobileOnlyActions`
- `Navbar` → removed without a replacement
- `Navbar variant="dialog"` → `HeaderDialog`, stands outside `Header`
- `NavbarClose` → removed without a replacement
- `HeaderActions` → `HeaderDesktopOnlyActions`
- `HeaderBackdrop` → removed without a replacement
- `Nav` → `HeaderNav`
- `NavItem` → `HeaderNavItem`
- `NavLink` → `HeaderLink`
- `Header__text` → removed without a replacement

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.

packages/web-react/src/components/Header/Header.stories.ts

@@ -3,7 +3,7 @@ import argTypes from './stories/argTypes';
 import Header from './Header';
 
 export default {
-  title: 'Components/HeaderModern',
+  title: 'Components/Header',
   component: Header,
   parameters: {
     docs: {

packages/web-react/src/components/Header/Header.tsx

@@ -1,25 +1,16 @@
 import React from 'react';
 import classNames from 'classnames';
-import { useStyleProps, useDeprecationMessage } from '../../hooks';
-import { HeaderModernProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useStyleProps } from '../../hooks';
+import { HeaderProps } from '../../types';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { HEADER_COLOR_DEFAULT } from './constants';
 
-const Header = (props: HeaderModernProps) => {
+const Header = (props: HeaderProps) => {
   const { children, color = HEADER_COLOR_DEFAULT, isSimple, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps({ color, isSimple });
+  const { classProps } = useHeaderStyleProps({ color, isSimple });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
-  useDeprecationMessage({
-    method: 'component',
-    trigger: true,
-    componentName: 'HeaderModern',
-    componentProps: {
-      newName: 'Header',
-    },
-  });
-
   return (
     <header {...otherProps} className={classNames(classProps.root, styleProps.className)} style={styleProps.style}>
       {children}

packages/web-react/src/components/Header/HeaderButton.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderButtonProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderButton = (props: HeaderButtonProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderDesktopActions.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDesktopActionsProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { HEADER_ACTIONS_COLOR_DEFAULT } from './constants';
 
 const HeaderDesktopActions = (props: HeaderDesktopActionsProps) => {
   const { color = HEADER_ACTIONS_COLOR_DEFAULT, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps({ actionsColor: color });
+  const { classProps } = useHeaderStyleProps({ actionsColor: color });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (

packages/web-react/src/components/Header/HeaderDialog.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps, useLastActiveFocus } from '../../hooks';
 import { HeaderDialogProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { HeaderDialogProvider } from './HeaderDialogContext';
 import { Dialog } from '../Dialog';
 
 const HeaderDialog = (props: HeaderDialogProps) => {
   const { children, id, isOpen, onClose, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   const providerValue = { id, isOpen, onClose };

packages/web-react/src/components/Header/HeaderDialogActions.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogActionsProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { HEADER_ACTIONS_COLOR_DEFAULT } from './constants';
 
 const HeaderDialogActions = (props: HeaderDialogActionsProps) => {
   const { color = HEADER_ACTIONS_COLOR_DEFAULT, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps({ actionsColor: color });
+  const { classProps } = useHeaderStyleProps({ actionsColor: color });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (

packages/web-react/src/components/Header/HeaderDialogButton.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogButtonProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderDialogButton = (props: HeaderDialogButtonProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx

@@ -3,14 +3,14 @@ import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { ClickEvent, HeaderDialogCloseButtonProps } from '../../types';
 import { HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT } from './constants';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { useHeaderDialogContext } from './HeaderDialogContext';
 import { Icon } from '../Icon';
 
 const HeaderDialogCloseButton = (props: HeaderDialogCloseButtonProps) => {
   const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
   const { id, isOpen, onClose } = useHeaderDialogContext();
 

packages/web-react/src/components/Header/HeaderDialogLink.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogLinkProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderDialogLink = (props: HeaderDialogLinkProps) => {
   const { children, isCurrent, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps({ isCurrentLink: isCurrent });
+  const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (

packages/web-react/src/components/Header/HeaderDialogNav.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogNavProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderDialogNav = (props: HeaderDialogNavProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderDialogNavItem.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogNavItemProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderDialogNavItem = (props: HeaderDialogNavItemProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderDialogText.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderDialogTextProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderDialogText = (props: HeaderDialogTextProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderLink.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderLinkProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderLink = (props: HeaderLinkProps) => {
   const { children, isCurrent, ...restProps } = props;
 
-  const { classProps } = useHeaderModernStyleProps({ isCurrentLink: isCurrent });
+  const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (

packages/web-react/src/components/Header/HeaderMobileActions.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderMobileActionsProps } from '../../types';
 import { HEADER_MENU_TOGGLE_LABEL_DEFAULT } from './constants';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 
@@ -17,7 +17,7 @@ const HeaderMobileActions = (props: HeaderMobileActionsProps) => {
     ...restProps
   } = props;
 
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (

packages/web-react/src/components/Header/HeaderNav.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderNavProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderNav = (props: HeaderNavProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/HeaderNavItem.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
 import { HeaderNavItemProps } from '../../types';
-import { useHeaderModernStyleProps } from './useHeaderStyleProps';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderNavItem = (props: HeaderNavItemProps) => {
-  const { classProps } = useHeaderModernStyleProps();
+  const { classProps } = useHeaderStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(props);
 
   return (

packages/web-react/src/components/Header/README.md

@@ -4,12 +4,6 @@ The Header is a highly variable and customizable component. It comes in several
 design variants and provides a handful of building blocks you can use to achieve
 your specific design goals.
 
-### DEPRECATION NOTICE
-
-⚠️ The header now exists in two versions. Original `Header` and updated `HeaderModern`.
-The original version will be replaced by the updated version and at the same time
-renamed back to the original name in the next major version. Read more about [deprecation][deprecated].
-
 The Header and HeaderDialog are a composition of several subcomponents:
 
 ```jsx
@@ -201,7 +195,7 @@ const handleUserMenuClose = () => setUserMenuOpen(false);
 </HeaderDialog>
 ```
 
-## Header (HeaderModern)
+## Header
 
 **Available props**
 
@@ -405,4 +399,3 @@ For detailed information see the [Header](https://github.com/lmc-eu/spirit-desig
 [DialogUListDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 [DialogListItemDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
 [DialogSpanDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations

packages/web-react/src/components/Header/__tests__/useHeaderStyleProps.test.ts

@@ -1,10 +1,10 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { useHeaderModernStyleProps } from '../useHeaderStyleProps';
+import { useHeaderStyleProps } from '../useHeaderStyleProps';
 import { HEADER_COLOR_DEFAULT, HEADER_ACTIONS_COLOR_DEFAULT } from '../constants';
 
 describe('useHeaderStyleProps', () => {
   it('should return defaults', () => {
-    const { result } = renderHook(() => useHeaderModernStyleProps({}));
+    const { result } = renderHook(() => useHeaderStyleProps({}));
 
     expect(result.current.classProps).toBeDefined();
     expect(result.current.classProps.root).toBe(`Header Header--${HEADER_COLOR_DEFAULT}`);