Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Introduce UNSTABLE_PartnerLogo component #DS-1356 #1533

Merged
merged 2 commits into from
Jul 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/web-react/scripts/entryPoints.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'] },
];
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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');
});
});
Original file line number Diff line number Diff line change
@@ -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');
});
});
Original file line number Diff line number Diff line change
@@ -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;
Loading
Loading