summaryrefslogtreecommitdiffstats
path: root/src/components/organisms/widgets/image-widget.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-16 16:08:49 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-16 16:41:30 +0200
commit5a6e4eea16047083e2de0e91a1b3ed9be8d6eb68 (patch)
treeea0c5390aca73907aade5321f30cb7bf8d3ab1cb /src/components/organisms/widgets/image-widget.tsx
parentdaffe6e8b9e2021ffb9d006482143bc4db985f02 (diff)
refactor: support React 18
I replaced the deprecated VFC type with FC type and made all children explicits. Formatjs is still not compatible with React 18 so I need to skip type checking when comitting. There are some type errors because of IntlProvider in Storybook stories.
Diffstat (limited to 'src/components/organisms/widgets/image-widget.tsx')
-rw-r--r--src/components/organisms/widgets/image-widget.tsx34
1 files changed, 11 insertions, 23 deletions
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index 928d5ea..ba04c6a 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,28 +1,16 @@
-import ResponsiveImage from '@components/molecules/images/responsive-image';
+import ResponsiveImage, {
+ type ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { VFC } from 'react';
+import { FC } from 'react';
import styles from './image-widget.module.scss';
export type Alignment = 'left' | 'center' | 'right';
-export type Image = {
- /**
- * An alternative text for the image.
- */
- alt: string;
- /**
- * The image height.
- */
- height: number;
- /**
- * The image source.
- */
- src: string;
- /**
- * The image width.
- */
- width: number;
-};
+export type Image = Pick<
+ ResponsiveImageProps,
+ 'alt' | 'height' | 'src' | 'width'
+>;
export type ImageWidgetProps = Pick<
WidgetProps,
@@ -35,7 +23,7 @@ export type ImageWidgetProps = Pick<
/**
* Add a caption to the image.
*/
- description?: string;
+ description?: ResponsiveImageProps['caption'];
/**
* An object describing the image.
*/
@@ -43,7 +31,7 @@ export type ImageWidgetProps = Pick<
/**
* Add a link to the image.
*/
- url?: string;
+ url?: ResponsiveImageProps['target'];
};
/**
@@ -51,7 +39,7 @@ export type ImageWidgetProps = Pick<
*
* Renders a widget that print an image and an optional text.
*/
-const ImageWidget: VFC<ImageWidgetProps> = ({
+const ImageWidget: FC<ImageWidgetProps> = ({
alignment = 'left',
description,
img,