diff options
Diffstat (limited to 'src/components/molecules/images')
5 files changed, 0 insertions, 221 deletions
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<typeof FlippingLogoComponent>; - -const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( - <FlippingLogoComponent {...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( - <FlippingLogo - altText="Alternative text" - photo="http://placeimg.com/640/480" - /> - ); - expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); - }); - - it('renders a logo', () => { - render( - <FlippingLogo - altText="Alternative text" - logoTitle="A logo title" - photo="http://placeimg.com/640/480" - /> - ); - 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<HTMLDivElement> -) => { - const wrapperClass = `${styles.logo} ${className}`; - const size = 100; - - return ( - <div className={wrapperClass} ref={ref}> - <div className={styles.logo__front}> - <NextImage - {...props} - alt={altText} - height={size} - src={photo} - style={{ objectFit: 'cover' }} - width={size} - /> - </div> - <div className={styles.logo__back}> - <Logo heading={logoTitle} /> - </div> - </div> - ); -}; - -/** - * 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'; |