diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index 49767f4e54..bc78d6a5e4 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -50,7 +50,6 @@ const entryPoints = [ { dirs: ['components', 'UNSTABLE_Divider'] }, { dirs: ['components', 'UNSTABLE_EmptyState'] }, { dirs: ['components', 'UNSTABLE_PartnerLogo'] }, - { dirs: ['components', 'UNSTABLE_ProductLogo'] }, { dirs: ['components', 'UNSTABLE_Slider'] }, { dirs: ['components', 'VisuallyHidden'] }, ]; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md b/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md deleted file mode 100644 index 708fd68cfb..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# UNSTABLE ProductLogo - -⚠️ This component is UNSTABLE. It may significantly change at any point in the future. Please use it with caution. -The UNSTABLE_ProductLogo component is used to display a product logo. - -The `UNSTABLE_ProductLogo` component is used to display the logo of the product. - -```jsx -import { UNSTABLE_ProductLogo } from '@spirit/web-react'; - - - -; -``` - -### Inverted color - -You can add an `isInverted` prop to invert the color of the logo. - -```jsx -import { UNSTABLE_ProductLogo } from '@spirit/web-react'; - - - -; -``` - -## API - -| Name | Type | Default | Required | Description | -| ------------ | ----------- | ------- | -------- | --------------------------------- | -| `children` | `ReactNode` | `null` | ✓ | Content of the ProductLogo | -| `isInverted` | `bool` | `false` | ✕ | f true, Logo is in inverted color | - -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] -and [escape hatches][readme-escape-hatches]. - -[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes -[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches -[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx deleted file mode 100644 index 8a6d790060..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import classNames from 'classnames'; -import React from 'react'; -import { useStyleProps } from '../../hooks'; -import { SpiritProductLogoProps } from '../../types/productLogo'; -import { useProductLogoStyleProps } from './useProductLogoStyleProps'; - -const defaultProps: Partial = { - isInverted: false, -}; - -const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => { - const propsWithDefaults = { ...defaultProps, ...props }; - const { children, ...restProps } = propsWithDefaults; - - const { classProps, props: modifiedProps } = useProductLogoStyleProps(restProps); - const { styleProps, props: otherProps } = useStyleProps(modifiedProps); - - return ( -
- {children} -
- ); -}; - -export default UNSTABLE_ProductLogo; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx deleted file mode 100644 index 5d85fd8234..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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_ProductLogo from '../UNSTABLE_ProductLogo'; - -describe('UNSTABLE_ProductLogo', () => { - classNamePrefixProviderTest(UNSTABLE_ProductLogo, 'UNSTABLE_ProductLogo'); - - stylePropsTest(UNSTABLE_ProductLogo); - - restPropsTest(UNSTABLE_ProductLogo, 'div'); - - it('should render children', () => { - render(Content); - - expect(screen.getByText('Content')).toBeInTheDocument(); - }); - - it('should have correct className', () => { - render(Content); - - expect(screen.getByText('Content')).toHaveClass('UNSTABLE_ProductLogo'); - }); - - it('should have inverted className', () => { - render(Content); - const element = screen.getByText('Content'); - - expect(element).toHaveClass('UNSTABLE_ProductLogo'); - expect(element).toHaveClass('UNSTABLE_ProductLogo--inverted'); - }); -}); diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts deleted file mode 100644 index a0b698357b..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { useProductLogoStyleProps } from '../useProductLogoStyleProps'; - -describe('useProductLogoStyleProps', () => { - it('should return defaults', () => { - const props = {}; - const { result } = renderHook(() => useProductLogoStyleProps(props)); - - expect(result.current.classProps).toBe('UNSTABLE_ProductLogo'); - }); - - it('should return inverted', () => { - const props = { - isInverted: true, - }; - const { result } = renderHook(() => useProductLogoStyleProps(props)); - - expect(result.current.classProps).toBe('UNSTABLE_ProductLogo UNSTABLE_ProductLogo--inverted'); - }); -}); diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx deleted file mode 100644 index 3cda65cb47..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo'; - -const ProductLogoDefault = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default ProductLogoDefault; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx deleted file mode 100644 index 4617abf9b7..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo'; - -const ProductLogoDefault = () => ( - - - - - - - - - - - - - - - - - - - - - -); - -export default ProductLogoDefault; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx deleted file mode 100644 index 294f096ca2..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -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( - - - - - - - - - , -); diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.html b/packages/web-react/src/components/UNSTABLE_ProductLogo/index.html deleted file mode 100644 index 8ddd1b2783..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.html +++ /dev/null @@ -1 +0,0 @@ -{{> web-react/demo }} diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts deleted file mode 100644 index 7af45dbac7..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './UNSTABLE_ProductLogo'; -export * from './useProductLogoStyleProps'; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx deleted file mode 100644 index eb3f01777d..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Markdown } from '@storybook/blocks'; -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import ReadMe from '../README.md'; -import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo'; - -const meta: Meta = { - title: 'Components/UNSTABLE_ProductLogo', - component: UNSTABLE_ProductLogo, - parameters: { - docs: { - page: () => {ReadMe}, - }, - }, - argTypes: { - isInverted: { - control: 'checkbox', - }, - }, - args: { - children: 'Click me', - isInverted: false, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - name: 'Button', -}; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts deleted file mode 100644 index 850ec340c7..0000000000 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts +++ /dev/null @@ -1,23 +0,0 @@ -import classNames from 'classnames'; -import { useClassNamePrefix } from '../../hooks'; -import { SpiritProductLogoProps } from '../../types/productLogo'; - -export interface ProductLogoStyles { - classProps: string; - props: T; -} - -export function useProductLogoStyleProps(props: SpiritProductLogoProps): ProductLogoStyles { - const { isInverted } = props; - - const productLogoClass = useClassNamePrefix('UNSTABLE_ProductLogo'); - const productLogoInvertedColorClass = `${productLogoClass}--inverted`; - const classProps = classNames(productLogoClass, { - [productLogoInvertedColorClass]: isInverted, - }); - - return { - classProps, - props, - }; -}