From 49eb11c4fa20138b89295a3a9fadc7ff2178c6a0 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-1356 --- packages/web-react/scripts/entryPoints.js | 1 + .../components/UNSTABLE_PartnerLogo/README.md | 20 ++++ .../UNSTABLE_PartnerLogo.tsx | 25 ++++ .../__tests__/UNSTABLE_PartnerLogo.test.tsx | 35 ++++++ .../usePartnerLogoStyleProps.test.ts | 19 ++++ .../demo/PartnerLogoDefault.tsx | 99 ++++++++++++++++ .../UNSTABLE_PartnerLogo/demo/index.tsx | 12 ++ .../components/UNSTABLE_PartnerLogo/index.ts | 2 + .../stories/UNSTABLE_PartnerLogo.stories.tsx | 107 ++++++++++++++++++ .../usePartnerLogoStyleProps.ts | 23 ++++ packages/web-react/src/components/index.ts | 1 + packages/web-react/src/types/partnerLogo.ts | 5 + .../components/UNSTABLE_PartnerLogo/README.md | 13 +++ 13 files changed, 362 insertions(+) create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md create mode 100644 packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx 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/index.tsx 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 create mode 100644 packages/web-react/src/types/partnerLogo.ts create mode 100644 packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index f149c22a60..49767f4e54 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -49,6 +49,7 @@ const entryPoints = [ { dirs: ['components', 'UNSTABLE_Avatar'] }, { 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_PartnerLogo/README.md b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md new file mode 100644 index 0000000000..f64e7ece77 --- /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_PartnerLogo/UNSTABLE_PartnerLogo.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx new file mode 100644 index 0000000000..4e3543a08b --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx @@ -0,0 +1,25 @@ +import classNames from 'classnames'; +import React from 'react'; +import { useStyleProps } from '../../hooks'; +import { SpiritPartnerLogoProps } from '../../types/partnerLogo'; +import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps'; + +const defaultProps: Partial = { + size: 'medium', +}; + +const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => { + const propsWithDefaults = { ...defaultProps, ...props }; + const { children, ...restProps } = propsWithDefaults; + + const { classProps, props: modifiedProps } = usePartnerLogoStyleProps(restProps); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); + + return ( +
+ {children} +
+ ); +}; + +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..948d90c98f --- /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 PartnerLogo', (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..cbaa6d13b8 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; + +const logo = ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const PartnerLogoDefault = () => { + return ( +
+ {logo} + {logo} + {logo} +
+ ); +}; + +export default PartnerLogoDefault; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx new file mode 100644 index 0000000000..b41b8844a1 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import DocsSection from '../../../../docs/DocsSections'; +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/index.ts b/packages/web-react/src/components/index.ts index c2b1b768b8..bf43e42351 100644 --- a/packages/web-react/src/components/index.ts +++ b/packages/web-react/src/components/index.ts @@ -35,5 +35,6 @@ export * from './Toast'; export * from './Tooltip'; export * from './UNSTABLE_Avatar'; export * from './UNSTABLE_Divider'; +export * from './UNSTABLE_PartnerLogo'; export * from './UNSTABLE_ProductLogo'; 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/src/scss/components/UNSTABLE_PartnerLogo/README.md b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md new file mode 100644 index 0000000000..a7395fe48f --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md @@ -0,0 +1,13 @@ +# 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. + +The `UNSTABLE_PartnerLogo` component is used to display the logo of the product. + +```html + +``` +