From afc5e0b28e8074a65200dac6e318fd492ef3301c Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Fri, 6 Sep 2024 12:25:36 +0200 Subject: [PATCH] Feat(web-react): Prop `hasSafeAreaDisabled` changed to `hasSafeArea` in `PartnerLogo` component - Default value of `hasSafeArea` changed to `true` - Preparation for stabilization of the PartnerLogo component - Solves #DS-1373 --- .../components/UNSTABLE_PartnerLogo/README.md | 14 ++++---- .../UNSTABLE_PartnerLogo.tsx | 2 +- .../__tests__/UNSTABLE_PartnerLogo.test.tsx | 8 +++-- .../usePartnerLogoStyleProps.test.ts | 33 ++++++++++++------- .../demo/PartnerLogoSafeAreaDisabled.tsx | 2 +- .../stories/UNSTABLE_PartnerLogo.stories.tsx | 2 +- .../usePartnerLogoStyleProps.ts | 6 ++-- packages/web-react/src/types/partnerLogo.ts | 2 +- 8 files changed, 40 insertions(+), 29 deletions(-) diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md index f4bea048b3..22f44459f5 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md @@ -31,10 +31,10 @@ The PartnerLogo component is available in [sizes][dictionary-size]. ## Disabled safe area -The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeAreaDisabled` prop to disable safe area around logo. +The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeArea` prop set to `false` to disable safe area around logo. ```jsx - + ``` @@ -69,11 +69,11 @@ attribute is set on the container. ## 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 | +| Name | Type | Default | Required | Description | +| ------------- | ---------------------------------- | -------- | -------- | -------------------------------------------------------- | +| `children` | `ReactNode` | `null` | ✓ | Content of the PartnerLogo | +| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size of the PartnerLogo | +| `hasSafeArea` | `boolean` | `true` | ✕ | If false, 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] diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx index 19327b1e35..ae4dca5667 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx @@ -9,7 +9,7 @@ import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps'; const defaultProps: Partial = { size: Sizes.MEDIUM, - hasSafeAreaDisabled: false, + hasSafeArea: true, }; const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => { 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 index 0cc7144cb1..92e2663ece 100644 --- 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 @@ -23,7 +23,9 @@ describe('UNSTABLE_PartnerLogo', () => { it('should have correct className', () => { render(Content); - expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo'); + expect(screen.getByText('Content')).toHaveClass( + 'UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--safeArea', + ); }); it.each(Object.values(Sizes))('should return %s size', (size) => { @@ -33,8 +35,8 @@ describe('UNSTABLE_PartnerLogo', () => { }); it('should render without safe area', () => { - render(Content); + render(Content); - expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--hasSafeAreaDisabled'); + expect(screen.getByText('Content')).not.toHaveClass('UNSTABLE_PartnerLogo--safeArea'); }); }); 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 index 558c4f1958..52eb9fd735 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts @@ -10,18 +10,27 @@ describe('usePartnerLogoStyleProps', () => { expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo'); }); - describe('hasSafeAreaDisabled prop', () => { - const props = { - hasSafeAreaDisabled: true, - }; - const { result } = renderHook(() => usePartnerLogoStyleProps(props)); - - it('should return hasSafeAreaDisabled class names', () => { - expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--hasSafeAreaDisabled'); - }); - - it('should not return hasSafeAreaDisabled prop', () => { - expect(result.current.props).toStrictEqual({}); + describe('hasSafeArea prop', () => { + const testCases = [ + { hasSafeArea: false, expectedClassName: 'UNSTABLE_PartnerLogo' }, + { + hasSafeArea: true, + expectedClassName: 'UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--safeArea', + }, + ]; + + testCases.forEach(({ hasSafeArea, expectedClassName }) => { + describe(`when hasSafeArea is ${hasSafeArea}`, () => { + const { result } = renderHook(() => usePartnerLogoStyleProps({ hasSafeArea })); + + it(`should ${hasSafeArea ? '' : 'not '}return safe area class name`, () => { + expect(result.current.classProps).toBe(expectedClassName); + }); + + it('should not return hasSafeArea prop', () => { + expect(result.current.props).toStrictEqual({}); + }); + }); }); }); diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx index ce1a595ad2..8424489684 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoSafeAreaDisabled.tsx @@ -3,7 +3,7 @@ import PartnerLogoDemoFactory from './PartnerLogoDemoFactory'; const PartnerLogoSafeAreaDisabled = () => (
- +
); 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 index 38205021d4..de3f5a8bc6 100644 --- 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 @@ -23,7 +23,7 @@ const meta: Meta = { }, }, args: { - hasSafeAreaDisabled: false, + hasSafeArea: true, children: ( diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts index 68d2451066..1a46709c31 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts @@ -8,14 +8,14 @@ export interface PartnerLogoStyles { } export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): PartnerLogoStyles { - const { size, hasSafeAreaDisabled, ...restProps } = props; + const { size, hasSafeArea, ...restProps } = props; const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo'); const partnerLogoSizeClass = `${partnerLogoClass}--${size}`; - const partnerLogoSafeAreaDisabledClass = `${partnerLogoClass}--hasSafeAreaDisabled`; + const partnerLogoSafeAreaDisabledClass = `${partnerLogoClass}--safeArea`; const classProps = classNames(partnerLogoClass, { [partnerLogoSizeClass]: size, - [partnerLogoSafeAreaDisabledClass]: hasSafeAreaDisabled, + [partnerLogoSafeAreaDisabledClass]: hasSafeArea, }); return { diff --git a/packages/web-react/src/types/partnerLogo.ts b/packages/web-react/src/types/partnerLogo.ts index d08c862ea8..283171da9d 100644 --- a/packages/web-react/src/types/partnerLogo.ts +++ b/packages/web-react/src/types/partnerLogo.ts @@ -2,5 +2,5 @@ import { ChildrenProps, SizesDictionaryType, StyleProps } from './shared'; export interface SpiritPartnerLogoProps extends ChildrenProps, StyleProps { size?: SizesDictionaryType | S; - hasSafeAreaDisabled?: boolean; + hasSafeArea?: boolean; }