diff options
Diffstat (limited to 'src/components/molecules/images/flipping-logo')
5 files changed, 139 insertions, 0 deletions
diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo/flipping-logo.module.scss new file mode 100644 index 0000000..d93b6e9 --- /dev/null +++ b/src/components/molecules/images/flipping-logo/flipping-logo.module.scss @@ -0,0 +1,24 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.wrapper { + border-radius: 50%; + width: fit-content; +} + +.side { + width: var(--logo-size, fun.convert-px(100)); + height: var(--logo-size, fun.convert-px(100)); + border: fun.convert-px(2) solid var(--color-primary-dark); + border-radius: 50%; + 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); + + > * { + padding: fun.convert-px(2); + background: var(--color-bg); + border-radius: 50%; + } +} diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx new file mode 100644 index 0000000..43ef150 --- /dev/null +++ b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import NextImage from 'next/image'; +import { Logo } from '../../../atoms'; +import { FlippingLogo as FlippingLogoComponent } from './flipping-logo'; + +/** + * FlippingLogo - Storybook Meta + */ +export default { + title: 'Molecules/Images/Flipping Logo', + component: FlippingLogoComponent, + args: {}, + argTypes: {}, +} as ComponentMeta<typeof FlippingLogoComponent>; + +const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( + <FlippingLogoComponent {...args} /> +); + +/** + * FlippingLogo Story + */ +export const FlippingLogo = Template.bind({}); +FlippingLogo.args = { + back: <Logo heading="A logo example" />, + front: ( + <NextImage + alt="A photo example" + height={200} + src="https://picsum.photos/200" + width={200} + /> + ), +}; diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo/flipping-logo.test.tsx new file mode 100644 index 0000000..5409262 --- /dev/null +++ b/src/components/molecules/images/flipping-logo/flipping-logo.test.tsx @@ -0,0 +1,39 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import NextImage from 'next/image'; +import { FlippingLogo } from './flipping-logo'; + +describe('FlippingLogo', () => { + it('renders both sides of the logo', () => { + const frontAltTxt = 'aliquam officia et'; + const backAltTxt = 'voluptas nesciunt itaque'; + + render( + <FlippingLogo + back={ + <NextImage + alt={backAltTxt} + height={100} + src="https://picsum.photos/100" + width={100} + /> + } + front={ + <NextImage + alt={frontAltTxt} + height={100} + src="https://picsum.photos/100" + width={100} + /> + } + /> + ); + + expect( + rtlScreen.getByRole('img', { name: frontAltTxt }) + ).toBeInTheDocument(); + expect( + rtlScreen.getByRole('img', { name: backAltTxt }) + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.tsx b/src/components/molecules/images/flipping-logo/flipping-logo.tsx new file mode 100644 index 0000000..e22feae --- /dev/null +++ b/src/components/molecules/images/flipping-logo/flipping-logo.tsx @@ -0,0 +1,41 @@ +import { + forwardRef, + type ReactNode, + type ForwardRefRenderFunction, +} from 'react'; +import { Flip, type FlipProps, FlipSide } from '../../../atoms'; +import styles from './flipping-logo.module.scss'; + +type FlippingLogoProps = Omit<FlipProps, 'children'> & { + /** + * The back face. + */ + back: ReactNode; + /** + * The front face. + */ + front: ReactNode; +}; + +const FlippingLogoWithRef: ForwardRefRenderFunction< + HTMLDivElement, + FlippingLogoProps +> = ({ back, className = '', front, ...props }, ref) => { + const wrapperClass = `${styles.wrapper} ${className}`; + + return ( + <Flip {...props} className={wrapperClass} ref={ref}> + <FlipSide className={styles.side}>{front}</FlipSide> + <FlipSide className={styles.side} isBack> + {back} + </FlipSide> + </Flip> + ); +}; + +/** + * FlippingLogo component + * + * Renders a website logo with two faces. + */ +export const FlippingLogo = forwardRef(FlippingLogoWithRef); diff --git a/src/components/molecules/images/flipping-logo/index.ts b/src/components/molecules/images/flipping-logo/index.ts new file mode 100644 index 0000000..318a6af --- /dev/null +++ b/src/components/molecules/images/flipping-logo/index.ts @@ -0,0 +1 @@ +export * from './flipping-logo'; |