feat(RC-28267): Create LogoImage component

packages/core/src/LogoImage/LogoImage.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, screen } from '../__test__/testing-library'
+import { LogoImage } from './LogoImage'
+
+describe('LogoImage', () => {
+  it('renders with small size', () => {
+    render(<LogoImage alt='Test Logo' size='small' src='test-image.jpg' />)
+    const img = screen.getByAltText('Test Logo')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveStyleRule('max-height', '16px')
+    expect(img).toHaveStyleRule('max-width', '60px')
+  })
+
+  it('renders with medium size', () => {
+    render(<LogoImage alt='Test Logo' size='medium' src='test-image.jpg' />)
+    const img = screen.getByAltText('Test Logo')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveStyleRule('max-height', '28px')
+    expect(img).toHaveStyleRule('max-width', '104px')
+  })
+
+  it('applies common styles', () => {
+    render(<LogoImage alt='Test Logo' size='small' src='test-image.jpg' />)
+    const img = screen.getByAltText('Test Logo')
+    expect(img).toHaveStyleRule('object-fit', 'contain')
+    expect(img).toHaveStyleRule('margin', 'auto')
+  })
+
+  it('passes src prop correctly', () => {
+    render(<LogoImage alt='Test Logo' size='small' src='test-image.jpg' />)
+    const img = screen.getByAltText('Test Logo')
+    expect(img).toHaveAttribute('src', 'test-image.jpg')
+  })
+})

packages/core/src/LogoImage/LogoImage.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { LogoImage } from './LogoImage'
+
+export default {
+  title: 'LogoImage',
+  component: LogoImage,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium'],
+      },
+    },
+  },
+}
+
+const Template = (args) => <LogoImage {...args} />
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+  src: 'https://s1qa.pclncdn.com/rc-static/v2/partner-logos/AV/AV.png?width=250&height=72&opto&fit=bounds',
+  alt: 'Avis logo',
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+  size: 'medium',
+  src: 'https://s1qa.pclncdn.com/rc-static/v2/partner-logos/AV/AV.png?width=250&height=72&opto&fit=bounds',
+  alt: 'Avis logo',
+}
+
+export const MissingImage = Template.bind({})
+MissingImage.args = {
+  size: 'medium',
+  src: 'non-existent-image.jpg',
+  alt: 'Missing image',
+}

packages/core/src/LogoImage/LogoImage.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { Image } from '../Image/Image'
+
+const ImageWrapper = styled(Image)`
+  ${(props) => {
+    switch (props.size) {
+      case 'small':
+        return css`
+          max-height: 16px;
+          max-width: 60px;
+        `
+      case 'medium':
+        return css`
+          max-height: 28px;
+          max-width: 104px;
+        `
+    }
+  }}
+  object-fit: contain;
+  margin: auto;
+`
+
+type Size = 'small' | 'medium'
+
+/**
+ * @public
+ */
+export type LogoImageProps = {
+  alt: string
+  size: Size
+  src: string
+}
+
+/**
+ * @public
+ */
+export function LogoImage({ alt, size, src }: LogoImageProps) {
+  return <ImageWrapper alt={alt} src={src} size={size} />
+}

packages/core/src/index.ts

@@ -73,7 +73,12 @@ export {
   type DotLoaderSizes,
   type DotLoaderSpeeds,
 } from './DotLoader/DotLoader'
-export { Drawer, type DrawerProps, type PlacementOptions, type SnapPositionChangeParams } from './Drawer/Drawer'
+export {
+  Drawer,
+  type DrawerProps,
+  type PlacementOptions,
+  type SnapPositionChangeParams,
+} from './Drawer/Drawer'
 export { Flag, type FlagProps } from './Flag/Flag'
 export { Flex, type FlexProps } from './Flex/Flex'
 export {
@@ -110,6 +115,7 @@ export {
   type ListListStyle,
   type ListProps,
 } from './List/List'
+export { LogoImage, type LogoImageProps } from './LogoImage/LogoImage'
 export { Motion, type MotionProps } from './Motion/Motion'
 export { PasswordInput, type PasswordInputProps } from './PasswordInput/PasswordInput'
 export { PlaceholderImage, type PlaceholderImageProps } from './PlaceholderImage/PlaceholderImage'