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

…1357

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

@@ -21,10 +21,20 @@ The PartnerLogo component is available in [sizes][dictionary-size].
 <UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </UNSTABLE_PartnerLogo>
-<UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner">
+<UNSTABLE_PartnerLogo size="medium" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </UNSTABLE_PartnerLogo>
-<UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner">
+<UNSTABLE_PartnerLogo size="large" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+```
+
+## Without Safe Zone
+
+The PartnerLogo component can be displayed without the safe zone (padding). Use `withoutSafeZone` prop to disable safe zone around logo.
+
+```jsx
+<UNSTABLE_PartnerLogo aria-label="Logo of the partner" withoutSafeZone>
   <!-- Logo go here -->
 </UNSTABLE_PartnerLogo>
 ```
@@ -59,10 +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    |
+| 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 |
 
 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,6 +6,7 @@ import { usePartnerLogoStyleProps } from './usePartnerLogoStyleProps';
 
 const defaultProps: Partial<SpiritPartnerLogoProps> = {
   size: 'medium',
+  withoutSafeZone: false,
 };
 
 const UNSTABLE_PartnerLogo = (props: SpiritPartnerLogoProps) => {

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

@@ -31,4 +31,10 @@ describe('UNSTABLE_PartnerLogo', () => {
 
     expect(screen.getByText('Content')).toHaveClass(`UNSTABLE_PartnerLogo--${size}`);
   });
+
+  it('should render without safe zone', () => {
+    render(<UNSTABLE_PartnerLogo withoutSafeZone>Content</UNSTABLE_PartnerLogo>);
+
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_PartnerLogo--withoutSafeZone');
+  });
 });

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

@@ -16,4 +16,11 @@ describe('usePartnerLogoStyleProps', () => {
 
     expect(result.current.classProps).toBe(`UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--${size}`);
   });
+
+  it('should return without safe zone', () => {
+    const props = { withoutSafeZone: true };
+    const { result } = renderHook(() => usePartnerLogoStyleProps(props));
+
+    expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--withoutSafeZone');
+  });
 });

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PartnerLogoDemoFactory from './PartnerLogoDemoFactory';
 
 const PartnerLogoDefault = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '48px' }}>
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
     <PartnerLogoDemoFactory />
   </div>
 );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import DocsSection from '../../../../docs/DocsSections';
 import { Sizes } from '../../../constants';
-import { ButtonBaseProps } from '../../../types';
+import { SpiritPartnerLogoProps } from '../../../types/partnerLogo';
 import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo';
 
 const logo = (
@@ -80,7 +80,7 @@ const logo = (
   </svg>
 );
 
-const PartnerLogoDemoFactory = ({ ...props }: ButtonBaseProps) => {
+const PartnerLogoDemoFactory = ({ ...props }: SpiritPartnerLogoProps) => {
   const sizes = Object.values(Sizes);
 
   return (
@@ -91,6 +91,7 @@ const PartnerLogoDemoFactory = ({ ...props }: ButtonBaseProps) => {
             style={{
               backgroundColor: '#F2F3F5',
               padding: '48px',
+              marginRight: '24px',
             }}
           >
             <UNSTABLE_PartnerLogo size={size} {...props}>

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

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

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

@@ -2,11 +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';
 
 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>
   </React.StrictMode>,
 );

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

@@ -12,6 +12,9 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
     docs: {
       page: () => <Markdown>{ReadMe}</Markdown>,
     },
+    backgrounds: {
+      default: 'light',
+    },
   },
   argTypes: {
     size: {
@@ -20,6 +23,7 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
     },
   },
   args: {
+    withoutSafeZone: 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,12 +8,14 @@ export interface PartnerLogoStyles<T> {
 }
 
 export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): PartnerLogoStyles<SpiritPartnerLogoProps> {
-  const { size } = props;
+  const { size, withoutSafeZone } = props;
 
   const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo');
   const partnerLogoSizeClass = `${partnerLogoClass}--${size}`;
+  const partnerLogoWithoutSafeZoneClass = `${partnerLogoClass}--withoutSafeZone`;
   const classProps = classNames(partnerLogoClass, {
     [partnerLogoSizeClass]: size,
+    [partnerLogoWithoutSafeZoneClass]: withoutSafeZone,
   });
 
   return {

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

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