diff options
Diffstat (limited to 'src/components/molecules/images')
7 files changed, 23 insertions, 25 deletions
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx index 9d09293..ae4739a 100644 --- a/src/components/molecules/images/flipping-logo.stories.tsx +++ b/src/components/molecules/images/flipping-logo.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import FlippingLogoComponent from './flipping-logo'; +import { FlippingLogo as FlippingLogoComponent } from './flipping-logo'; /** * FlippingLogo - Storybook Meta diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx index c3ee492..3a29891 100644 --- a/src/components/molecules/images/flipping-logo.test.tsx +++ b/src/components/molecules/images/flipping-logo.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import FlippingLogo from './flipping-logo'; +import { FlippingLogo } from './flipping-logo'; describe('FlippingLogo', () => { it('renders a photo', () => { diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx index a739b30..64e69ca 100644 --- a/src/components/molecules/images/flipping-logo.tsx +++ b/src/components/molecules/images/flipping-logo.tsx @@ -1,6 +1,6 @@ import Image, { type ImageProps } from 'next/image'; import { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react'; -import Logo, { type LogoProps } from '../../atoms/images/logo'; +import { Logo, type LogoProps } from '../../atoms'; import styles from './flipping-logo.module.scss'; export type FlippingLogoProps = { @@ -22,12 +22,7 @@ export type FlippingLogoProps = { photo: ImageProps['src']; }; -/** - * FlippingLogo component - * - * Render a logo and a photo with a flipping effect. - */ -const FlippingLogo: ForwardRefRenderFunction< +const FlippingLogoWithRef: ForwardRefRenderFunction< HTMLDivElement, FlippingLogoProps > = ( @@ -38,12 +33,12 @@ const FlippingLogo: ForwardRefRenderFunction< <div className={`${styles.logo} ${className}`} ref={ref}> <div className={styles.logo__front}> <Image - src={photo} + {...props} alt={altText} - style={{ objectFit: 'cover' }} height="100" + src={photo} + style={{ objectFit: 'cover' }} width="100" - {...props} /> </div> <div className={styles.logo__back}> @@ -53,4 +48,9 @@ const FlippingLogo: ForwardRefRenderFunction< ); }; -export default forwardRef(FlippingLogo); +/** + * FlippingLogo component + * + * Render a logo and a photo with a flipping effect. + */ +export const FlippingLogo = forwardRef(FlippingLogoWithRef); diff --git a/src/components/molecules/images/index.ts b/src/components/molecules/images/index.ts new file mode 100644 index 0000000..33ec886 --- /dev/null +++ b/src/components/molecules/images/index.ts @@ -0,0 +1,2 @@ +export * from './flipping-logo'; +export * from './responsive-image'; diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index 4917cde..cc6b088 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ResponsiveImage from './responsive-image'; +import { ResponsiveImage } from './responsive-image'; /** * ResponsiveImage - Storybook Meta diff --git a/src/components/molecules/images/responsive-image.test.tsx b/src/components/molecules/images/responsive-image.test.tsx index 68e810b..a738686 100644 --- a/src/components/molecules/images/responsive-image.test.tsx +++ b/src/components/molecules/images/responsive-image.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import ResponsiveImage from './responsive-image'; +import { ResponsiveImage } from './responsive-image'; describe('ResponsiveImage', () => { it('renders a responsive image', () => { diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index 1160027..85c0c46 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -1,6 +1,6 @@ import Image, { type ImageProps } from 'next/image'; import { FC, ReactNode } from 'react'; -import Link, { type LinkProps } from '../../atoms/links/link'; +import { Link, type LinkProps } from '../../atoms'; import styles from './responsive-image.module.scss'; export type ResponsiveImageProps = Omit< @@ -42,7 +42,7 @@ export type ResponsiveImageProps = Omit< * * Render a responsive image wrapped in a figure element. */ -const ResponsiveImage: FC<ResponsiveImageProps> = ({ +export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, caption, className = '', @@ -55,20 +55,18 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ const linkModifier = target ? styles['wrapper--has-link'] : styles['wrapper--no-link']; + const figureClass = `${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`; return ( - <figure - aria-label={caption ? undefined : title} - className={`${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`} - > + <figure aria-label={caption ? undefined : title} className={figureClass}> {target ? ( <Link href={target} className={styles.link}> <Image + {...props} alt={alt} className={styles.img} sizes="100vw" title={title} - {...props} /> {caption && ( <figcaption className={styles.caption}>{caption}</figcaption> @@ -77,11 +75,11 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ ) : ( <> <Image + {...props} alt={alt} className={styles.img} sizes="100vw" title={title} - {...props} /> {caption && ( <figcaption className={styles.caption}>{caption}</figcaption> @@ -91,5 +89,3 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({ </figure> ); }; - -export default ResponsiveImage; |