diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index a16c5945c7..bc78d6a5e4 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_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..f4bea048b3 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md @@ -0,0 +1,85 @@ +# UNSTABLE PartnerLogo + +> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. +> Please use it with caution. + +PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.). + +```jsx +import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react'; + + + + +``` + +## Sizes + +The PartnerLogo component is available in [sizes][dictionary-size]. + +```jsx + + + + + + + + + +``` + +## Disabled safe area + +The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeAreaDisabled` prop to disable safe area around logo. + +```jsx + + + +``` + +## Content + +The content of the PartnerLogo component can be an image or svg. + +### Image + +```jsx + + + +``` + +ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` +attribute is set on the container. + +### SVG + +```jsx + + + + + +``` + +ℹ️ Don't forget to add the `aria-label` attribute for accessible title. + +## API + +| Name | Type | Default | Required | Description | +| --------------------- | ---------------------------------- | -------- | -------- | ------------------------------------------------------- | +| `children` | `ReactNode` | `null` | ✓ | Content of the PartnerLogo | +| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size of the PartnerLogo | +| `hasSafeAreaDisabled` | `boolean` | `false` | ✕ | If true, the PartnerLogo is displayed without safe area | + +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..2e703f6f4d --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx @@ -0,0 +1,27 @@ +import classNames from 'classnames'; +import React from 'react'; +import { Sizes } from '../../constants'; +import { useStyleProps } from '../../hooks'; +import { SpiritPartnerLogoProps } from '../../types/partnerLogo'; +import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps'; + +const defaultProps: Partial = { + size: Sizes.MEDIUM, + hasSafeAreaDisabled: false, +}; + +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..0cc7144cb1 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/UNSTABLE_PartnerLogo.test.tsx @@ -0,0 +1,40 @@ +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); + + expect(screen.getByText('Content')).toHaveClass(`UNSTABLE_PartnerLogo--${size}`); + }); + + it('should render without safe area', () => { + render(Content); + + expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--hasSafeAreaDisabled'); + }); +}); 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..45dcafb89e --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts @@ -0,0 +1,26 @@ +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}`); + }); + + it('should return without safe area', () => { + const props = { hasSafeAreaDisabled: true }; + const { result } = renderHook(() => usePartnerLogoStyleProps(props)); + + expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--hasSafeAreaDisabled'); + }); +}); 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..32649c72fd --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import PartnerLogoDemoFactory from './PartnerLogoDemoFactory'; + +const PartnerLogoDefault = () => ( +
+ +
+); + +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..53f6d0f0ce --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { Sizes } from '../../../constants'; +import { SpiritPartnerLogoProps } from '../../../types/partnerLogo'; +import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; + +const logo = ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const PartnerLogoDemoFactory = ({ ...props }: SpiritPartnerLogoProps) => { + const sizes = Object.values(Sizes); + + return ( + <> + {sizes.map((size) => ( +
+

{`Size ${size}`}

+
+ + {logo} + +
+
+ ))} + + ); +}; + +export default PartnerLogoDemoFactory; diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx new file mode 100644 index 0000000000..ce1a595ad2 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import PartnerLogoDemoFactory from './PartnerLogoDemoFactory'; + +const PartnerLogoSafeAreaDisabled = () => ( +
+ +
+); + +export default PartnerLogoSafeAreaDisabled; 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..2ef4d58558 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import DocsSection from '../../../../docs/DocsSections'; +import PartnerLogoDefault from './PartnerLogoDefault'; +import PartnerLogoSafeAreaDisabled from './PartnerLogoSafeAreaDisabled'; + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + + + + + + , +); diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.html b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.html new file mode 100644 index 0000000000..8ddd1b2783 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.html @@ -0,0 +1 @@ +{{> web-react/demo }} 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..f6e9bef9ea --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts @@ -0,0 +1,3 @@ +export * from './UNSTABLE_PartnerLogo'; +export * from './usePartnerLogoStyleProps'; +export { default as UNSTABLE_PartnerLogo } from './UNSTABLE_PartnerLogo'; 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..38205021d4 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx @@ -0,0 +1,111 @@ +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}, + }, + backgrounds: { + default: 'light', + }, + }, + argTypes: { + size: { + control: 'select', + options: [...Object.values(Sizes)], + }, + }, + args: { + hasSafeAreaDisabled: false, + 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..f8cea99fb6 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts @@ -0,0 +1,25 @@ +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, hasSafeAreaDisabled } = props; + + const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo'); + const partnerLogoSizeClass = `${partnerLogoClass}--${size}`; + const partnerLogoSafeAreaDisabledClass = `${partnerLogoClass}--hasSafeAreaDisabled`; + const classProps = classNames(partnerLogoClass, { + [partnerLogoSizeClass]: size, + [partnerLogoSafeAreaDisabledClass]: hasSafeAreaDisabled, + }); + + return { + classProps, + props, + }; +} diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts index f62a29c8b7..9b9c74a332 100644 --- a/packages/web-react/src/components/index.ts +++ b/packages/web-react/src/components/index.ts @@ -35,4 +35,5 @@ export * from './Toast'; export * from './Tooltip'; export * from './UNSTABLE_Avatar'; export * from './UNSTABLE_Divider'; +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..d08c862ea8 --- /dev/null +++ b/packages/web-react/src/types/partnerLogo.ts @@ -0,0 +1,6 @@ +import { ChildrenProps, SizesDictionaryType, StyleProps } from './shared'; + +export interface SpiritPartnerLogoProps extends ChildrenProps, StyleProps { + size?: SizesDictionaryType | S; + hasSafeAreaDisabled?: boolean; +} 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..edf01fc3dd --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md @@ -0,0 +1,81 @@ +# UNSTABLE PartnerLogo + +> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. +> Please use it with caution. + +PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.). + +```html + +``` + +## Sizes + +The PartnerLogo component is available in [sizes][dictionary-size]. +Use the `UNSTABLE_PartnerLogo--` modifier class to change the size of the PartnerLogo component. + +```html + + + +``` + +## Disabled safe area + +The PartnerLogo component can be displayed without the safe area (padding). Use `UNSTABLE_PartnerLogo--hasSafeAreaDisabled` modifier to disable safe area around logo. + +```html +