Feat(web-react): Introduce UNSTABLE_PartnerLogo component #DS-1356

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'] },
 ];

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';
+
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+```
+
+## Sizes
+
+The PartnerLogo component is available in [sizes][dictionary-size].
+
+```jsx
+<UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+<UNSTABLE_PartnerLogo size="medium" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+<UNSTABLE_PartnerLogo size="large" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+```
+
+## Disabled safe area
+
+The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeAreaDisabled` prop to disable safe area around logo.
+
+```jsx
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner" hasSafeAreaDisabled>
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+```
+
+## Content
+
+The content of the PartnerLogo component can be an image or svg.
+
+### Image
+
+```jsx
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
+  <img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
+</UNSTABLE_PartnerLogo>
+```
+
+ℹ️ 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
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
+  <svg width="300" height="130">
+    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
+  </svg>
+</UNSTABLE_PartnerLogo>
+```
+
+ℹ️ 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

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<SpiritPartnerLogoProps> = {
+  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 (
+    <div {...otherProps} className={classNames(classProps, styleProps.className)} style={styleProps.style}>
+      {children}
+    </div>
+  );
+};
+
+export default UNSTABLE_PartnerLogo;

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(<UNSTABLE_PartnerLogo>Content</UNSTABLE_PartnerLogo>);
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should have correct className', () => {
+    render(<UNSTABLE_PartnerLogo>Content</UNSTABLE_PartnerLogo>);
+
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo');
+  });
+
+  it.each(Object.values(Sizes))('should return %s size', (size) => {
+    render(<UNSTABLE_PartnerLogo size={size}>Content</UNSTABLE_PartnerLogo>);
+
+    expect(screen.getByText('Content')).toHaveClass(`UNSTABLE_PartnerLogo--${size}`);
+  });
+
+  it('should render without safe area', () => {
+    render(<UNSTABLE_PartnerLogo hasSafeAreaDisabled>Content</UNSTABLE_PartnerLogo>);
+
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--hasSafeAreaDisabled');
+  });
+});

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');
+  });
+});

packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDefault.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import PartnerLogoDemoFactory from './PartnerLogoDemoFactory';
+
+const PartnerLogoDefault = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px' }}>
+    <PartnerLogoDemoFactory />
+  </div>
+);
+
+export default PartnerLogoDefault;