From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 7 Oct 2023 18:44:14 +0200 Subject: feat(components): add a generic Flip component The flipping animation is used at several places so it makes sense to use a single component to handle the animation. It will avoid styles duplication. --- .../molecules/images/flipping-logo.module.scss | 59 ------------------ .../molecules/images/flipping-logo.stories.tsx | 72 ---------------------- .../molecules/images/flipping-logo.test.tsx | 26 -------- src/components/molecules/images/flipping-logo.tsx | 63 ------------------- src/components/molecules/images/index.ts | 1 - 5 files changed, 221 deletions(-) delete mode 100644 src/components/molecules/images/flipping-logo.module.scss delete mode 100644 src/components/molecules/images/flipping-logo.stories.tsx delete mode 100644 src/components/molecules/images/flipping-logo.test.tsx delete mode 100644 src/components/molecules/images/flipping-logo.tsx (limited to 'src/components/molecules/images') diff --git a/src/components/molecules/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss deleted file mode 100644 index b3b7c96..0000000 --- a/src/components/molecules/images/flipping-logo.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.logo { - width: var(--logo-size, fun.convert-px(100)); - height: var(--logo-size, fun.convert-px(100)); - position: relative; - border-radius: 50%; - transform-style: preserve-3d; - transition: all 0.6s linear 0s; - - &__front, - &__back { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - backface-visibility: hidden; - background: var(--color-bg); - border: fun.convert-px(2) solid var(--color-primary-dark); - border-radius: 50%; - transition: all 0.6s linear 0s; - - svg, - img { - // !important is required to override next/image styles... - padding: fun.convert-px(2) !important; - border-radius: 50%; - } - } - - &__front { - box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), - fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-light); - } - - &__back { - transform: rotateY(180deg); - } - - &:hover { - transform: rotateY(180deg); - } - - &:hover & { - &__front { - box-shadow: none; - } - - &__back { - box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), - fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-light); - } - } -} diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx deleted file mode 100644 index ae4739a..0000000 --- a/src/components/molecules/images/flipping-logo.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { FlippingLogo as FlippingLogoComponent } from './flipping-logo'; - -/** - * FlippingLogo - Storybook Meta - */ -export default { - title: 'Molecules/Images', - component: FlippingLogoComponent, - argTypes: { - altText: { - control: { - type: 'text', - }, - description: 'Photo alternative text.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the logo wrapper.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - logoTitle: { - control: { - type: 'text', - }, - description: 'An accessible name for the logo.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - photo: { - control: { - type: 'text', - }, - description: 'Photo url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Images Stories - Flipping Logo - */ -export const FlippingLogo = Template.bind({}); -FlippingLogo.args = { - altText: 'Website picture', - logoTitle: 'Website logo', - photo: 'http://placeimg.com/640/480', -}; diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx deleted file mode 100644 index ec0b787..0000000 --- a/src/components/molecules/images/flipping-logo.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { FlippingLogo } from './flipping-logo'; - -describe('FlippingLogo', () => { - it('renders a photo', () => { - render( - - ); - expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); - }); - - it('renders a logo', () => { - render( - - ); - expect(screen.getByTitle('A logo title')).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx deleted file mode 100644 index 703d5d6..0000000 --- a/src/components/molecules/images/flipping-logo.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import NextImage, { type ImageProps } from 'next/image'; -import { - type ForwardedRef, - forwardRef, - type ForwardRefRenderFunction, -} from 'react'; -import { Logo, type LogoProps } from '../../atoms'; -import styles from './flipping-logo.module.scss'; - -export type FlippingLogoProps = { - /** - * Set additional classnames to the logo wrapper. - */ - className?: string; - /** - * Photo alternative text. - */ - altText: string; - /** - * Logo image title. - */ - logoTitle?: LogoProps['heading']; - /** - * Photo url. - */ - photo: ImageProps['src']; -}; - -const FlippingLogoWithRef: ForwardRefRenderFunction< - HTMLDivElement, - FlippingLogoProps -> = ( - { className = '', altText, logoTitle, photo, ...props }, - ref: ForwardedRef -) => { - const wrapperClass = `${styles.logo} ${className}`; - const size = 100; - - return ( -
-
- -
-
- -
-
- ); -}; - -/** - * 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 index 33ec886..a00c6c2 100644 --- a/src/components/molecules/images/index.ts +++ b/src/components/molecules/images/index.ts @@ -1,2 +1 @@ -export * from './flipping-logo'; export * from './responsive-image'; -- cgit v1.2.3