Image customCss Implementation

packages/styled-components/src/components/primitives/Image/Image.stories.tsx

@@ -18,5 +18,6 @@ export const Playground = () => (
       ),
     }}
     onLoad={action('Image loaded')}
+    customCss={text('Custom css', "custom")}
   />
 );

packages/styled-components/src/components/primitives/Image/Image.styled.ts

@@ -1,9 +1,11 @@
+import { StyledCssProps } from 'components/Components.styled.types';
 import styled from 'styled-components';
+import { customCss } from 'utils/customCss';
 
-export const StyledSource = styled.source`
-  user-select: none;
-`;
+type Props = StyledCssProps;
 
-export const StyledImage = styled.img`
+export const StyledImage = styled.img<StyledCssProps>`
   user-select: none;
+
+  ${(props) => customCss(props)}
 `;

packages/styled-components/src/components/primitives/Image/Image.test.tsx

@@ -43,4 +43,9 @@ describe('Image', () => {
     fireEvent.load(image);
     expect(mockOnLoad).toHaveBeenCalledTimes(1);
   });
+  it('should render custom CSS as a class', () => {
+    render(<Image image={imageType} customCss="customCss" />);
+    const image = screen.getByTestId(imageContentTestId);
+    expect(image).toHaveClass('custom');
+  });
 });

packages/styled-components/src/components/primitives/Image/Image.tsx

@@ -1,26 +1,31 @@
 import React from 'react';
+import cn from 'classnames';
 import { Props } from './Image.types';
-import { StyledImage, StyledSource } from './Image.styled';
+import { StyledImage } from './Image.styled';
 
 export const Image = ({
   className,
   imageClassName,
+  customCss,
   image: { title, url },
   testId = 'image',
   onLoad,
 }: Props) => {
   return (
     <picture className={className}>
-      <StyledSource
-        className={imageClassName}
+      <StyledImage
+        as="source"
+        css={customCss}
+        className={cn(imageClassName, { custom: customCss })}
         data-testid={testId}
         type="image/webp"
         srcSet={`${url}?fm=webp`}
       />
       <StyledImage
         data-testid="imageContent"
         onLoad={onLoad}
-        className={imageClassName}
+        css={customCss}
+        className={cn(imageClassName, { custom: customCss })}
         alt={title}
         src={url}
       />

packages/styled-components/src/components/primitives/Image/Image.types.ts

@@ -1,6 +1,6 @@
-import { BaseProps } from 'components/Components.types';
+import { CssCustomizableProps } from 'components/Components.types';
 
-export type Props = BaseProps & {
+export type Props = CssCustomizableProps & {
   imageClassName?: string;
   image: Image;
   onLoad?: () => void;