fixup! Feat(web-react): Introduce UNSTABLE_Header #DS-1524

lmc-eu · Dec 14, 2024 · 1500a68 · 1500a68
1 parent 3356270
commit 1500a68
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 12 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Header/README.md b/packages/web-react/src/components/UNSTABLE_Header/README.md
@@ -5,7 +5,7 @@
 
 The `UNSTABLE_Header` component is planned to replace the `Header` component in the future.
 
-This component provides these components:
+The `UNSTABLE_Header` is a composition of several subcomponents:
 
 - [UNSTABLE_Header](#unstable-header)
 - [UNSTABLE_HeaderLogo](#unstable-headerlogo)

diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx
@@ -4,12 +4,12 @@ import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritHeaderProps } from '../../types';
-import { useHeaderStyleProps } from './useHeaderStyleProps';
+import { useUnstableHeaderStyleProps } from './useUnstableHeaderStyleProps';
 
 const UNSTABLE_Header = (props: SpiritHeaderProps): JSX.Element => {
   const { children, ...restProps } = props;
 
-  const { classProps, props: modifiedProps } = useHeaderStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useUnstableHeaderStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (

diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_HeaderLogo.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_HeaderLogo.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { PolymorphicRef, SpiritHeaderLogoProps } from '../../types';
-import { useHeaderStyleProps } from './useHeaderStyleProps';
+import { useUnstableHeaderStyleProps } from './useUnstableHeaderStyleProps';
 
 const defaultProps: Partial<SpiritHeaderLogoProps> = {
   elementType: 'a',
@@ -22,7 +22,7 @@ const _HeaderLogo = <E extends ElementType = 'a'>(
     children,
     ...restProps
   } = propsWithDefaults;
-  const { classProps, props: modifiedProps } = useHeaderStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useUnstableHeaderStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (

diff --git a/...der/__tests__/useHeaderStyleProps.test.ts → ...sts__/useUnstableHeaderStyleProps.test.ts b/...der/__tests__/useHeaderStyleProps.test.ts → ...sts__/useUnstableHeaderStyleProps.test.ts
@@ -1,10 +1,10 @@
 import { renderHook } from '@testing-library/react';
-import { useHeaderStyleProps } from '../useHeaderStyleProps';
+import { useUnstableHeaderStyleProps } from '../useUnstableHeaderStyleProps';
 
-describe('useHeaderStyleProps', () => {
+describe('useUnstableHeaderStyleProps', () => {
   it('should return defaults', () => {
     const props = {};
-    const { result } = renderHook(() => useHeaderStyleProps(props));
+    const { result } = renderHook(() => useUnstableHeaderStyleProps(props));
 
     expect(result.current.classProps.root).toBe('UNSTABLE_Header');
     expect(result.current.classProps.logo).toBe('UNSTABLE_HeaderLogo');

diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '../../Button';
 import { ButtonLink } from '../../ButtonLink';
 import { Container } from '../../Container';
 import { Flex } from '../../Flex';
@@ -34,9 +35,9 @@ const HeaderDefault = () => {
           </Navigation>
           <Navigation marginLeft="auto" aria-label="Secondary Navigation">
             <NavigationItem>
-              <ButtonLink href="#" color="tertiary" isSymmetrical>
+              <Button color="tertiary" isSymmetrical>
                 <Icon name="search" />
-              </ButtonLink>
+              </Button>
             </NavigationItem>
             <NavigationItem>
               <ButtonLink href="#" color="secondary">

diff --git a/packages/web-react/src/components/UNSTABLE_Header/index.ts b/packages/web-react/src/components/UNSTABLE_Header/index.ts
@@ -2,4 +2,4 @@
 
 export { default as UNSTABLE_Header } from './UNSTABLE_Header';
 export { default as UNSTABLE_HeaderLogo } from './UNSTABLE_HeaderLogo';
-export * as useUnstableHeaderStyleProps from './useHeaderStyleProps';
+export * as useUnstableHeaderStyleProps from './useUnstableHeaderStyleProps';
diff --git a/...ts/UNSTABLE_Header/useHeaderStyleProps.ts → ...BLE_Header/useUnstableHeaderStyleProps.ts b/...ts/UNSTABLE_Header/useHeaderStyleProps.ts → ...BLE_Header/useUnstableHeaderStyleProps.ts
@@ -9,7 +9,7 @@ export interface HeaderStyles<T> {
   props: T;
 }
 
-export const useHeaderStyleProps = (props: SpiritHeaderProps): HeaderStyles<SpiritHeaderProps> => {
+export const useUnstableHeaderStyleProps = (props: SpiritHeaderProps): HeaderStyles<SpiritHeaderProps> => {
   const headerClass = useClassNamePrefix('UNSTABLE_Header');
   const headerLogoClass = useClassNamePrefix('UNSTABLE_HeaderLogo');