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

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
-<UNSTABLE_PartnerLogo aria-label="Logo of the partner" hasSafeAreaDisabled>
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner" hasSafeArea={false}>
   <!-- Logo go here -->
 </UNSTABLE_PartnerLogo>
 ```
@@ -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]

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

@@ -9,7 +9,7 @@ import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps';
 
 const defaultProps: Partial<SpiritPartnerLogoProps> = {
   size: Sizes.MEDIUM,
-  hasSafeAreaDisabled: false,
+  hasSafeArea: true,
 };
 
 const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => {

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(<UNSTABLE_PartnerLogo>Content</UNSTABLE_PartnerLogo>);
 
-    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(<UNSTABLE_PartnerLogo hasSafeAreaDisabled>Content</UNSTABLE_PartnerLogo>);
+    render(<UNSTABLE_PartnerLogo hasSafeArea={false}>Content</UNSTABLE_PartnerLogo>);
 
-    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--hasSafeAreaDisabled');
+    expect(screen.getByText('Content')).not.toHaveClass('UNSTABLE_PartnerLogo--safeArea');
   });
 });

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

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

@@ -3,7 +3,7 @@ import PartnerLogoDemoFactory from './PartnerLogoDemoFactory';
 
 const PartnerLogoSafeAreaDisabled = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px' }}>
-    <PartnerLogoDemoFactory hasSafeAreaDisabled />
+    <PartnerLogoDemoFactory hasSafeArea={false} />
   </div>
 );
 

packages/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
     },
   },
   args: {
-    hasSafeAreaDisabled: false,
+    hasSafeArea: true,
     children: (
       <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clipPath="url(#clip0_20364_10)">

packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts

@@ -8,14 +8,14 @@ export interface PartnerLogoStyles<T> {
 }
 
 export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): PartnerLogoStyles<SpiritPartnerLogoProps> {
-  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 {

packages/web-react/src/types/partnerLogo.ts

@@ -2,5 +2,5 @@ import { ChildrenProps, SizesDictionaryType, StyleProps } from './shared';
 
 export interface SpiritPartnerLogoProps<S = void> extends ChildrenProps, StyleProps {
   size?: SizesDictionaryType<S> | S;
-  hasSafeAreaDisabled?: boolean;
+  hasSafeArea?: boolean;
 }