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

lmc-eu · Dec 12, 2024 · 72cb750 · 72cb750
1 parent 7f31059
commit 72cb750
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 32 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Header/README.md b/packages/web-react/src/components/UNSTABLE_Header/README.md
@@ -70,7 +70,7 @@ Use [`Container`][web-react-container] and [`Flex`][web-react-flex] components t
         <ProductLogo>{/* Logo go here */}</ProductLogo>
       </UNSTABLE_HeaderLogo>
       {/* Navigation go here */}
-      {/* Other Navgation go here */}
+      {/* Other Navigation go here */}
     </Flex>
   </Container>
 </UNSTABLE_Header>
@@ -100,7 +100,7 @@ Or you can modify the gaps between the content by setting the `Flex` `spacing` p
         <ProductLogo>{/* Logo go here */}</ProductLogo>
       </UNSTABLE_HeaderLogo>
       {/* Navigation go here */}
-      {/* Other Navgation go here */}
+      {/* Other Navigation go here */}
     </Flex>
   </Container>
 </UNSTABLE_Header>

diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx
@@ -6,14 +6,8 @@ import { useStyleProps } from '../../hooks';
 import { SpiritHeaderProps } from '../../types';
 import { useHeaderStyleProps } from './useHeaderStyleProps';
 
-const defaultProps: Partial<SpiritHeaderProps> = {
-  isFluid: false,
-  isSimple: false,
-};
-
 const UNSTABLE_Header = (props: SpiritHeaderProps): JSX.Element => {
-  const propsWithDefaults = { ...defaultProps, ...props };
-  const { children, ...restProps } = propsWithDefaults;
+  const { children, ...restProps } = props;
 
   const { classProps, props: modifiedProps } = useHeaderStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);

diff --git a/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.test.tsx b/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.test.tsx
@@ -1,11 +1,14 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo';
 
 describe('UNSTABLE_HeaderLogo', () => {
+  classNamePrefixProviderTest(UNSTABLE_HeaderLogo, 'UNSTABLE_HeaderLogo');
+
   stylePropsTest(UNSTABLE_HeaderLogo);
 
   restPropsTest(UNSTABLE_HeaderLogo, 'a');

diff --git a/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_Header.stories.tsx b/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_Header.stories.tsx
@@ -15,34 +15,18 @@ const meta: Meta<typeof UNSTABLE_Header> = {
       page: () => <Markdown>{ReadMe}</Markdown>,
     },
   },
-  argTypes: {
-    isSimple: {
-      control: 'boolean',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    isFluid: {
-      control: 'boolean',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
   args: {
     children: (
       <UNSTABLE_HeaderLogo href="/">
         <ProductLogo>{defaultSvgLogo}</ProductLogo>
       </UNSTABLE_HeaderLogo>
     ),
-    isFluid: false,
-    isSimple: false,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof UNSTABLE_Header>;
 
-export const HeaderPlayground: Story = {
+export const Playground: Story = {
   name: 'UNSTABLE_Header',
 };
diff --git a/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts
@@ -11,7 +11,7 @@ export interface HeaderStyles<T> {
 
 export const useHeaderStyleProps = (props: SpiritHeaderProps): HeaderStyles<SpiritHeaderProps> => {
   const headerClass = useClassNamePrefix('UNSTABLE_Header');
-  const headerLogoClass = 'UNSTABLE_HeaderLogo';
+  const headerLogoClass = useClassNamePrefix('UNSTABLE_HeaderLogo');
 
   return {
     classProps: {

diff --git a/packages/web-react/src/types/unstableHeader.ts b/packages/web-react/src/types/unstableHeader.ts
@@ -2,11 +2,7 @@ import { ElementType } from 'react';
 import { LinkTarget } from './link';
 import { ChildrenProps, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps } from './shared';
 
-export type SpiritHeaderProps = {
-  isFluid?: boolean;
-  isSimple?: boolean;
-} & StyleProps &
-  ChildrenProps;
+export interface SpiritHeaderProps extends StyleProps, ChildrenProps {}
 
 export interface HeaderLogoBaseProps extends ChildrenProps, StyleProps, TransferProps {
   /** NavigationLink's href attribute */