From b23b3adb551373b062abe67b25f32eae2f6017d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C4=8Curda?= Date: Fri, 28 Jun 2024 12:55:17 +0200 Subject: [PATCH] Feat(web-react): Introduce UNSTABLE_PartnerLogo component #DS-1357 --- packages/web-react/scripts/entryPoints.js | 2 +- .../components/UNSTABLE_PartnerLogo/README.md | 20 ++++ .../UNSTABLE_PartnerLogo.tsx} | 14 +-- .../__tests__/UNSTABLE_PartnerLogo.test.tsx | 35 ++++++ .../usePartnerLogoStyleProps.test.ts | 19 ++++ .../demo/PartnerLogoDefault.tsx | 12 ++ .../demo/PartnerLogoDemoFactory.tsx | 106 +++++++++++++++++ .../demo/index.tsx | 9 +- .../components/UNSTABLE_PartnerLogo/index.ts | 2 + .../stories/UNSTABLE_PartnerLogo.stories.tsx | 107 ++++++++++++++++++ .../usePartnerLogoStyleProps.ts | 23 ++++ .../components/UNSTABLE_ProductLogo/README.md | 41 ------- .../__tests__/UNSTABLE_ProductLogo.test.tsx | 35 ------ .../useProductLogoStyleProps.test.ts | 20 ---- .../demo/ProductLogoDefault.tsx | 73 ------------ .../demo/ProductLogoInverted.tsx | 60 ---------- .../UNSTABLE_ProductLogo/index.html | 1 - .../components/UNSTABLE_ProductLogo/index.ts | 2 - .../stories/UNSTABLE_ProductLogo.stories.tsx | 31 ----- .../useProductLogoStyleProps.ts | 23 ---- packages/web-react/src/components/index.ts | 2 +- packages/web-react/src/types/partnerLogo.ts | 5 + packages/web-react/src/types/productLogo.ts | 5 - 23 files changed, 340 insertions(+), 307 deletions(-) create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md rename packages/web-react/src/components/{UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx => UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx} (57%) create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/UNSTABLE_PartnerLogo.test.tsx create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx rename packages/web-react/src/components/{UNSTABLE_ProductLogo => UNSTABLE_PartnerLogo}/demo/index.tsx (56%) create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/README.md delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/index.html delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx delete mode 100644 packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts create mode 100644 packages/web-react/src/types/partnerLogo.ts delete mode 100644 packages/web-react/src/types/productLogo.ts diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index f149c22a60..bc78d6a5e4 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -49,7 +49,7 @@ const entryPoints = [ { dirs: ['components', 'UNSTABLE_Avatar'] }, { dirs: ['components', 'UNSTABLE_Divider'] }, { dirs: ['components', 'UNSTABLE_EmptyState'] }, - { dirs: ['components', 'UNSTABLE_ProductLogo'] }, + { dirs: ['components', 'UNSTABLE_PartnerLogo'] }, { dirs: ['components', 'UNSTABLE_Slider'] }, { dirs: ['components', 'VisuallyHidden'] }, ]; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md new file mode 100644 index 0000000000..287b9430bf --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md @@ -0,0 +1,20 @@ +# UNSTABLE PartnerLogo + +⚠️ 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. + +## API + +| Name | Type | Default | Required | Description | +| ---------- | ------------------------------------------- | -------- | -------- | -------------------------- | +| `children` | `ReactNode` | `null` | ✓ | Content of the ProductLogo | +| `size` | [Size Extended dictionary][dictionary-size] | `medium` | ✕ | Size of the PartnerLogo | + +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]. + +[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size +[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_PartnerLogo/UNSTABLE_PartnerLogo.tsx similarity index 57% rename from packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx rename to packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx index 8a6d790060..4e3543a08b 100644 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx @@ -1,18 +1,18 @@ import classNames from 'classnames'; import React from 'react'; import { useStyleProps } from '../../hooks'; -import { SpiritProductLogoProps } from '../../types/productLogo'; -import { useProductLogoStyleProps } from './useProductLogoStyleProps'; +import { SpiritPartnerLogoProps } from '../../types/partnerLogo'; +import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps'; -const defaultProps: Partial = { - isInverted: false, +const defaultProps: Partial = { + size: 'medium', }; -const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => { +const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => { const propsWithDefaults = { ...defaultProps, ...props }; const { children, ...restProps } = propsWithDefaults; - const { classProps, props: modifiedProps } = useProductLogoStyleProps(restProps); + const { classProps, props: modifiedProps } = usePartnerLogoStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); return ( @@ -22,4 +22,4 @@ const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => { ); }; -export default UNSTABLE_ProductLogo; +export default UNSTABLE_PartnerLogo; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/UNSTABLE_PartnerLogo.test.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/UNSTABLE_PartnerLogo.test.tsx new file mode 100644 index 0000000000..542cb2549d --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/UNSTABLE_PartnerLogo.test.tsx @@ -0,0 +1,35 @@ +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 { Sizes } from '../../../constants'; +import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; + +describe('UNSTABLE_PartnerLogo', () => { + classNamePrefixProviderTest(UNSTABLE_PartnerLogo, 'UNSTABLE_PartnerLogo'); + + stylePropsTest(UNSTABLE_PartnerLogo); + + restPropsTest(UNSTABLE_PartnerLogo, '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_PartnerLogo'); + }); + + it.each(Object.values(Sizes))('should return %s size', (size) => { + render(Content); + const element = screen.getByText('Content'); + + expect(element).toHaveClass(`UNSTABLE_PartnerLogo--${size}`); + }); +}); diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts new file mode 100644 index 0000000000..71e6e4c393 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts @@ -0,0 +1,19 @@ +import { renderHook } from '@testing-library/react'; +import { Sizes } from '../../../constants'; +import { usePartnerLogoStyleProps } from '../usePartnerLogoStyleProps'; + +describe('usePartnerLogoStyleProps', () => { + it('should return defaults', () => { + const props = {}; + const { result } = renderHook(() => usePartnerLogoStyleProps(props)); + + expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo'); + }); + + it.each(Object.values(Sizes))('should return %s size PartnerLogo', (size) => { + const props = { size }; + const { result } = renderHook(() => usePartnerLogoStyleProps(props)); + + expect(result.current.classProps).toBe(`UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--${size}`); + }); +}); diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx new file mode 100644 index 0000000000..63c2cd8a31 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PartnerLogoDemoFactory from './PartnerLogoDemoFactory'; + +const PartnerLogoDefault = () => { + return ( +
+ +
+ ); +}; + +export default PartnerLogoDefault; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx new file mode 100644 index 0000000000..d04ee510c2 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import DocsSection from '../../../../docs/DocsSections'; +import { Sizes } from '../../../constants'; +import { ButtonBaseProps } from '../../../types'; +import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; + +const logo = ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const PartnerLogoDemoFactory = ({ ...props }: ButtonBaseProps) => { + const sizes = Object.values(Sizes); + + return ( + <> + {sizes.map((size) => ( + +
+ + {logo} + {' '} +
+ + ))} + + ); +}; + +export default PartnerLogoDemoFactory; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx similarity index 56% rename from packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx rename to packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx index 294f096ca2..b41b8844a1 100644 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/index.tsx +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx @@ -1,17 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import DocsSection from '../../../../docs/DocsSections'; -import ProductLogoDefault from './ProductLogoDefault'; -import ProductLogoInverted from './ProductLogoInverted'; +import PartnerLogoDefault from './PartnerLogoDefault'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - - - - + , ); diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts new file mode 100644 index 0000000000..b325d1fbab --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts @@ -0,0 +1,2 @@ +export * from './UNSTABLE_PartnerLogo'; +export * from './usePartnerLogoStyleProps'; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx new file mode 100644 index 0000000000..08c7dd44de --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx @@ -0,0 +1,107 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Sizes } from '../../../constants'; +import ReadMe from '../README.md'; +import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; + +const meta: Meta = { + title: 'Experimental/UNSTABLE_PartnerLogo', + component: UNSTABLE_PartnerLogo, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + size: { + control: 'select', + options: [...Object.values(Sizes)], + }, + }, + args: { + children: ( + + + + + + + + + + + + + + + + + + + + + + + + + + ), + size: 'medium', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'UNSTABLE_PartnerLogo', +}; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts new file mode 100644 index 0000000000..1f032bb90d --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts @@ -0,0 +1,23 @@ +import classNames from 'classnames'; +import { useClassNamePrefix } from '../../hooks'; +import { SpiritPartnerLogoProps } from '../../types/partnerLogo'; + +export interface PartnerLogoStyles { + classProps: string; + props: T; +} + +export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): PartnerLogoStyles { + const { size } = props; + + const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo'); + const partnerLogoSizeClass = `${partnerLogoClass}--${size}`; + const classProps = classNames(partnerLogoClass, { + [partnerLogoSizeClass]: size, + }); + + return { + classProps, + props, + }; +} 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/__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/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, - }; -} diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts index c2b1b768b8..9b9c74a332 100644 --- a/packages/web-react/src/components/index.ts +++ b/packages/web-react/src/components/index.ts @@ -35,5 +35,5 @@ export * from './Toast'; export * from './Tooltip'; export * from './UNSTABLE_Avatar'; export * from './UNSTABLE_Divider'; -export * from './UNSTABLE_ProductLogo'; +export * from './UNSTABLE_PartnerLogo'; export * from './VisuallyHidden'; diff --git a/packages/web-react/src/types/partnerLogo.ts b/packages/web-react/src/types/partnerLogo.ts new file mode 100644 index 0000000000..d2bd78d960 --- /dev/null +++ b/packages/web-react/src/types/partnerLogo.ts @@ -0,0 +1,5 @@ +import { ChildrenProps, SizesDictionaryType, StyleProps } from './shared'; + +export interface SpiritPartnerLogoProps extends ChildrenProps, StyleProps { + size?: SizesDictionaryType | S; +} diff --git a/packages/web-react/src/types/productLogo.ts b/packages/web-react/src/types/productLogo.ts deleted file mode 100644 index a6f6eecf3f..0000000000 --- a/packages/web-react/src/types/productLogo.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ChildrenProps, StyleProps } from './shared'; - -export interface SpiritProductLogoProps extends ChildrenProps, StyleProps { - isInverted?: boolean; -}