aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout')
-rw-r--r--src/components/molecules/layout/branding.module.scss110
-rw-r--r--src/components/molecules/layout/branding.stories.tsx115
-rw-r--r--src/components/molecules/layout/branding.test.tsx109
-rw-r--r--src/components/molecules/layout/branding.tsx86
-rw-r--r--src/components/molecules/layout/index.ts1
5 files changed, 0 insertions, 421 deletions
diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
deleted file mode 100644
index 6f67c8b..0000000
--- a/src/components/molecules/layout/branding.module.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-@mixin typing-animation {
- --typing-animation: none;
-
- width: fit-content;
- position: relative;
- overflow: hidden;
-
- &::after {
- content: "|";
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- background: var(--color-bg);
- color: var(--color-primary-darker);
- font-weight: 400;
- text-align: left;
- visibility: hidden;
- transform: translateX(100%);
- transform-origin: right;
- animation: var(--typing-animation);
-
- :global {
- animation: var(--typing-animation);
- }
- }
-}
-
-.wrapper {
- --logo-size: #{clamp(fun.convert-px(90), 12vw, fun.convert-px(100))};
-
- display: grid;
- grid-template-columns: minmax(0, 1fr);
- justify-items: center;
- width: 100%;
-
- @include mix.media("screen") {
- @include mix.dimensions("2xs") {
- grid-template-columns:
- var(--logo-size)
- minmax(0, 1fr);
- grid-template-rows: 1fr min-content;
- align-items: center;
- justify-items: left;
- column-gap: var(--spacing-sm);
- width: unset;
- }
- }
-
- .logo {
- grid-row: span 2;
- animation: flip-logo 9s ease-in 0s 1;
- }
-
- .title {
- font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
- text-align: center;
-
- @include typing-animation;
- }
-
- .baseline {
- color: var(--color-fg-light);
- font-size: var(--font-size-lg);
- text-align: center;
-
- @include typing-animation;
- }
-
- .link {
- background: linear-gradient(
- to top,
- var(--color-primary-light) fun.convert-px(5),
- transparent fun.convert-px(5)
- )
- left / 0 100% no-repeat;
- text-decoration: none;
- transition: all 0.6s ease-out 0s;
-
- &:hover,
- &:focus {
- background-size: 100% 100%;
- }
-
- &:focus {
- color: var(--color-primary-light);
- }
-
- &:active {
- background-size: 0 100%;
- color: var(--color-primary-dark);
- }
- }
-}
-
-@keyframes flip-logo {
- 0%,
- 90% {
- transform: rotateY(180deg);
- }
-
- 100% {
- transform: rotateY(0deg);
- }
-}
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
deleted file mode 100644
index 7ff88c9..0000000
--- a/src/components/molecules/layout/branding.stories.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import NextImage from 'next/image';
-import { Logo } from '../../atoms';
-import { Branding } from './branding';
-
-/**
- * Branding - Storybook Meta
- */
-export default {
- title: 'Molecules/Layout/Branding',
- component: Branding,
- args: {
- isHome: false,
- withLink: false,
- },
- argTypes: {
- baseline: {
- control: {
- type: 'text',
- },
- description: 'The Branding baseline.',
- type: {
- name: 'string',
- required: false,
- },
- },
- isHome: {
- control: {
- type: 'boolean',
- },
- description: 'Use H1 if the current page is homepage.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- photo: {
- control: {
- type: 'text',
- },
- description: 'The Branding photo.',
- type: {
- name: 'string',
- required: true,
- },
- },
- title: {
- control: {
- type: 'text',
- },
- description: 'The Branding title.',
- type: {
- name: 'string',
- required: true,
- },
- },
- withLink: {
- control: {
- type: 'boolean',
- },
- description: 'Wraps the title with a link to homepage.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- },
-} as ComponentMeta<typeof Branding>;
-
-const Template: ComponentStory<typeof Branding> = (args) => (
- <Branding {...args} />
-);
-
-/**
- * Branding Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
- logo: <Logo heading="A logo example" />,
- photo: (
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- ),
- title: 'Website title',
-};
-
-/**
- * Branding Stories - With baseline
- */
-export const WithBaseline = Template.bind({});
-WithBaseline.args = {
- baseline: 'Maiores corporis qui',
- logo: <Logo heading="A logo example" />,
- photo: (
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- ),
- title: 'Website title',
-};
diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx
deleted file mode 100644
index cfb55c5..0000000
--- a/src/components/molecules/layout/branding.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import NextImage from 'next/image';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { Logo } from '../../atoms';
-import { Branding } from './branding';
-
-describe('Branding', () => {
- it('renders a photo', () => {
- const altText = 'A photo example';
-
- render(
- <Branding
- logo={<Logo />}
- photo={
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- }
- title="Website title"
- />
- );
- expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
- });
-
- it('renders a logo', () => {
- const logoHeading = 'sed enim voluptatem';
-
- render(
- <Branding
- logo={<Logo heading={logoHeading} />}
- photo={
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- }
- title="Website name"
- />
- );
- expect(rtlScreen.getByTitle(logoHeading)).toBeInTheDocument();
- });
-
- it('renders a baseline', () => {
- render(
- <Branding
- logo={<Logo />}
- photo={
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- }
- title="Website title"
- baseline="Website baseline"
- />
- );
- expect(rtlScreen.getByText('Website baseline')).toBeInTheDocument();
- });
-
- it('renders a title wrapped with h1 element', () => {
- render(
- <Branding
- logo={<Logo />}
- photo={
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- }
- title="Website title"
- isHome={true}
- />
- );
- expect(
- rtlScreen.getByRole('heading', { level: 1, name: 'Website title' })
- ).toBeInTheDocument();
- });
-
- it('renders a title with h1 styles', () => {
- render(
- <Branding
- logo={<Logo />}
- photo={
- <NextImage
- alt="A photo example"
- height={200}
- src="https://picsum.photos/200"
- width={200}
- />
- }
- title="Website title"
- isHome={false}
- />
- );
- expect(
- rtlScreen.queryByRole('heading', { level: 1, name: 'Website title' })
- ).not.toBeInTheDocument();
- expect(rtlScreen.getByText('Website title')).toHaveClass('heading--1');
- });
-});
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
deleted file mode 100644
index 9f8e6ce..0000000
--- a/src/components/molecules/layout/branding.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { type FC, useRef, type ReactNode } from 'react';
-import { useStyles } from '../../../utils/hooks';
-import { Heading, Link } from '../../atoms';
-import { FlippingLogo } from '../images';
-import styles from './branding.module.scss';
-
-export type BrandingProps = {
- /**
- * The Branding baseline.
- */
- baseline?: string;
- /**
- * Use H1 if the current page is homepage. Default: false.
- */
- isHome?: boolean;
- /**
- * The website logo.
- */
- logo: ReactNode;
- /**
- * Your photo.
- */
- photo: ReactNode;
- /**
- * The Branding title;
- */
- title: string;
- /**
- * Wraps the title with a link to homepage. Default: false.
- */
- withLink?: boolean;
-};
-
-/**
- * Branding component
- *
- * Render the branding logo, title and optional baseline.
- */
-export const Branding: FC<BrandingProps> = ({
- baseline,
- isHome = false,
- logo,
- photo,
- title,
- withLink = false,
-}) => {
- const baselineRef = useRef<HTMLParagraphElement>(null);
- const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
-
- useStyles({
- property: '--typing-animation',
- styles: 'blink 0.7s ease-in-out 0s 2, typing 4.3s linear 0s 1',
- target: titleRef,
- });
- useStyles({
- property: '--typing-animation',
- styles:
- 'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1',
- target: baselineRef,
- });
-
- return (
- <div className={styles.wrapper}>
- <FlippingLogo back={logo} className={styles.logo} front={photo} />
- <Heading
- className={styles.title}
- isFake={!isHome}
- level={1}
- ref={titleRef}
- >
- {withLink ? (
- <Link className={styles.link} href="/">
- {title}
- </Link>
- ) : (
- title
- )}
- </Heading>
- {baseline ? (
- <Heading className={styles.baseline} isFake level={4} ref={baselineRef}>
- {baseline}
- </Heading>
- ) : null}
- </div>
- );
-};
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
index 1580baa..e43e664 100644
--- a/src/components/molecules/layout/index.ts
+++ b/src/components/molecules/layout/index.ts
@@ -1,4 +1,3 @@
-export * from './branding';
export * from './card';
export * from './code';
export * from './columns';
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 13:54:30 +0000