fixup! Feat(web-react): Introduce UNSTABLE_PartnerLogo component #DS-…

…1357

packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md

@@ -29,12 +29,12 @@ The PartnerLogo component is available in [sizes][dictionary-size].
 </UNSTABLE_PartnerLogo>
 ```
 
-## Without safe zone
+## Disabled safe zone
 
-The PartnerLogo component can be displayed without the safe zone (padding). Use `withoutSafeZone` prop to disable safe zone around logo.
+The PartnerLogo component can be displayed without the safe zone (padding). Use `disableSafeZone` prop to disable safe zone around logo.
 
 ```jsx
-<UNSTABLE_PartnerLogo aria-label="Logo of the partner" withoutSafeZone>
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner" disableSafeZone>
   <!-- Logo go here -->
 </UNSTABLE_PartnerLogo>
 ```
@@ -70,10 +70,10 @@ 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                                 |
-| `withoutSafeZone` | `boolean`                          | `false`  | ✕        | If true, the PartnerLogo is displayed without safe zone |
+| `disableSafeZone` | `boolean`                          | `false`  | ✕        | If true, the PartnerLogo is displayed without safe zone |
 
 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

@@ -6,7 +6,7 @@ import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps';
 
 const defaultProps: Partial<SpiritPartnerLogoProps> = {
   size: 'medium',
-  withoutSafeZone: false,
+  disableSafeZone: false,
 };
 
 const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => {

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

@@ -33,8 +33,8 @@ describe('UNSTABLE_PartnerLogo', () => {
   });
 
   it('should render without safe zone', () => {
-    render(<UNSTABLE_PartnerLogo withoutSafeZone>Content</UNSTABLE_PartnerLogo>);
+    render(<UNSTABLE_PartnerLogo disableSafeZone>Content</UNSTABLE_PartnerLogo>);
 
-    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--withoutSafeZone');
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--disableSafeZone');
   });
 });

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

@@ -18,9 +18,9 @@ describe('usePartnerLogoStyleProps', () => {
   });
 
   it('should return without safe zone', () => {
-    const props = { withoutSafeZone: true };
+    const props = { disableSafeZone: true };
     const { result } = renderHook(() => usePartnerLogoStyleProps(props));
 
-    expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--withoutSafeZone');
+    expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--disableSafeZone');
   });
 });

packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoWithoutSafeZone.tsx → packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDisableSafeZone.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PartnerLogoDemoFactory from './PartnerLogoDemoFactory';
 
-const PartnerLogoWithoutSafeZone = () => (
+const PartnerLogoDisableSafeZone = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-    <PartnerLogoDemoFactory withoutSafeZone />
+    <PartnerLogoDemoFactory disableSafeZone />
   </div>
 );
 
-export default PartnerLogoWithoutSafeZone;
+export default PartnerLogoDisableSafeZone;

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

@@ -2,15 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
 import PartnerLogoDefault from './PartnerLogoDefault';
-import PartnerLogoWithoutSafeZone from './PartnerLogoWithoutSafeZone';
+import PartnerLogoDisableSafeZone from './PartnerLogoDisableSafeZone';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <DocsSection title="Default" stackAlignment="stretch">
       <PartnerLogoDefault />
     </DocsSection>
-    <DocsSection title="Without safe zone" stackAlignment="stretch">
-      <PartnerLogoWithoutSafeZone />
+    <DocsSection title="Disabled safe zone" stackAlignment="stretch">
+      <PartnerLogoDisableSafeZone />
     </DocsSection>
   </React.StrictMode>,
 );

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

@@ -23,7 +23,7 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
     },
   },
   args: {
-    withoutSafeZone: false,
+    disableSafeZone: false,
     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, withoutSafeZone } = props;
+  const { size, disableSafeZone } = props;
 
   const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo');
   const partnerLogoSizeClass = `${partnerLogoClass}--${size}`;
-  const partnerLogoWithoutSafeZoneClass = `${partnerLogoClass}--withoutSafeZone`;
+  const partnerLogoDisableSafeZoneClass = `${partnerLogoClass}--disableSafeZone`;
   const classProps = classNames(partnerLogoClass, {
     [partnerLogoSizeClass]: size,
-    [partnerLogoWithoutSafeZoneClass]: withoutSafeZone,
+    [partnerLogoDisableSafeZoneClass]: disableSafeZone,
   });
 
   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;
-  withoutSafeZone?: boolean;
+  disableSafeZone?: boolean;
 }