BREAKING CHANGE(web-react): Remove inverted variant of ProductLogo …

…#DS-1450

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

@@ -13,19 +13,6 @@ import { UNSTABLE_ProductLogo } from '@spirit/web-react';
 </UNSTABLE_ProductLogo>;
 ```
 
-## Inverted variant
-
-You can add an `isInverted` prop to invert the color of the background.
-It is necessary to insert the appropriate inverted logo variant as a children.
-
-```jsx
-import { UNSTABLE_ProductLogo } from '@spirit/web-react';
-
-<UNSTABLE_ProductLogo isInverted aria-label="Logo of the product">
-  <!-- Inverted logo go here -->
-</UNSTABLE_ProductLogo>;
-```
-
 ## Content
 
 The content of the ProductLogo component can be an image or svg.
@@ -57,10 +44,9 @@ to specify the `height` and `width` of the embedded image.
 
 ## API
 
-| Name         | Type        | Default | Required | Description                        |
-| ------------ | ----------- | ------- | -------- | ---------------------------------- |
-| `children`   | `ReactNode` | `null`  | ✓        | Content of the ProductLogo         |
-| `isInverted` | `bool`      | `false` | ✕        | If true, Logo has inverted variant |
+| Name       | Type        | Default | Required | Description                |
+| ---------- | ----------- | ------- | -------- | -------------------------- |
+| `children` | `ReactNode` | `null`  | ✓        | Content of the ProductLogo |
 
 The components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

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

@@ -2,23 +2,17 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import { useStyleProps } from '../../hooks';
+import { useClassNamePrefix, useStyleProps } from '../../hooks';
 import { SpiritProductLogoProps } from '../../types/productLogo';
-import { useProductLogoStyleProps } from './useProductLogoStyleProps';
-
-const defaultProps: Partial<SpiritProductLogoProps> = {
-  isInverted: false,
-};
 
 const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => {
-  const propsWithDefaults = { ...defaultProps, ...props };
-  const { children, ...restProps } = propsWithDefaults;
+  const { children, ...restProps } = props;
 
-  const { classProps, props: modifiedProps } = useProductLogoStyleProps(restProps);
-  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  const productLogoClass = useClassNamePrefix('UNSTABLE_ProductLogo');
+  const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (
-    <div {...otherProps} className={classNames(classProps, styleProps.className)} style={styleProps.style}>
+    <div {...otherProps} className={classNames(productLogoClass, styleProps.className)} style={styleProps.style}>
       {children}
     </div>
   );

packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx

@@ -24,12 +24,4 @@ describe('UNSTABLE_ProductLogo', () => {
 
     expect(screen.getByText('Content')).toHaveClass('UNSTABLE_ProductLogo');
   });
-
-  it('should have inverted className', () => {
-    render(<UNSTABLE_ProductLogo isInverted>Content</UNSTABLE_ProductLogo>);
-    const element = screen.getByText('Content');
-
-    expect(element).toHaveClass('UNSTABLE_ProductLogo');
-    expect(element).toHaveClass('UNSTABLE_ProductLogo--inverted');
-  });
 });

packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx

@@ -2,16 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
 import ProductLogoDefault from './ProductLogoDefault';
-import ProductLogoInverted from './ProductLogoInverted';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <DocsSection title="Default">
       <ProductLogoDefault />
     </DocsSection>
-
-    <DocsSection title="Inverted">
-      <ProductLogoInverted />
-    </DocsSection>
   </React.StrictMode>,
 );

packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts

@@ -1,5 +1,4 @@
 'use client';
 
 export * from './UNSTABLE_ProductLogo';
-export * from './useProductLogoStyleProps';
 export { default as UNSTABLE_ProductLogo } from './UNSTABLE_ProductLogo';

packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx

@@ -2,7 +2,6 @@ import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { defaultSvgLogo } from '../demo/ProductLogoDefault';
-import { invertedSvgLogo } from '../demo/ProductLogoInverted';
 import ReadMe from '../README.md';
 import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';
 
@@ -14,25 +13,14 @@ const meta: Meta<typeof UNSTABLE_ProductLogo> = {
       page: () => <Markdown>{ReadMe}</Markdown>,
     },
   },
-  argTypes: {
-    isInverted: { control: 'boolean' },
-  },
   args: {
-    isInverted: false,
     children: defaultSvgLogo,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof UNSTABLE_ProductLogo>;
 
-const ProductLogoComponent = ({ ...args }) => {
-  const svg = args.isInverted ? invertedSvgLogo : defaultSvgLogo;
-
-  return <UNSTABLE_ProductLogo isInverted={args.isInverted}>{svg}</UNSTABLE_ProductLogo>;
-};
-
 export const Default: Story = {
   name: 'UNSTABLE_ProductLogo',
-  render: ProductLogoComponent,
 };

packages/web-react/src/types/productLogo.ts

@@ -1,5 +1,3 @@
 import { ChildrenProps, StyleProps } from './shared';
 
-export interface SpiritProductLogoProps extends ChildrenProps, StyleProps {
-  isInverted?: boolean;
-}
+export interface SpiritProductLogoProps extends ChildrenProps, StyleProps {}

tests/e2e/demo-components-compare.spec.ts

@@ -38,7 +38,6 @@ const IGNORED_TESTS: string[] = [
   'UNSTABLE_ActionLayout',
   'UNSTABLE_Avatar',
   'UNSTABLE_EmptyState',
-  'UNSTABLE_ProductLogo',
   'UNSTABLE_Section',
   'UNSTABLE_Slider',
   'UNSTABLE_Toggle',