summaryrefslogtreecommitdiffstats
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.stories.tsx46
-rw-r--r--src/components/molecules/layout/branding.tsx4
-rw-r--r--src/components/molecules/layout/card.module.scss5
-rw-r--r--src/components/molecules/layout/card.stories.tsx69
-rw-r--r--src/components/molecules/layout/card.tsx2
-rw-r--r--src/components/molecules/layout/flipping-logo.module.scss59
-rw-r--r--src/components/molecules/layout/flipping-logo.stories.tsx66
-rw-r--r--src/components/molecules/layout/flipping-logo.test.tsx25
-rw-r--r--src/components/molecules/layout/flipping-logo.tsx48
-rw-r--r--src/components/molecules/layout/meta.stories.tsx11
-rw-r--r--src/components/molecules/layout/widget.module.scss5
-rw-r--r--src/components/molecules/layout/widget.stories.tsx46
12 files changed, 147 insertions, 239 deletions
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 726ba26..1637c99 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,10 +1,13 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { IntlProvider } from 'react-intl';
-import BrandingComponent from './branding';
+import Branding from './branding';
+/**
+ * Branding - Storybook Meta
+ */
export default {
- title: 'Molecules/Layout',
- component: BrandingComponent,
+ title: 'Molecules/Layout/Branding',
+ component: Branding,
args: {
isHome: false,
},
@@ -53,6 +56,7 @@ export default {
required: true,
},
},
+ unoptimized: { table: { disable: true } },
withLink: {
control: {
type: 'boolean',
@@ -68,16 +72,38 @@ export default {
},
},
},
-} as ComponentMeta<typeof BrandingComponent>;
+ decorators: [
+ (Story) => (
+ <IntlProvider locale="en">
+ <Story />
+ </IntlProvider>
+ ),
+ ],
+} as ComponentMeta<typeof Branding>;
-const Template: ComponentStory<typeof BrandingComponent> = (args) => (
- <IntlProvider locale="en">
- <BrandingComponent {...args} />
- </IntlProvider>
+const Template: ComponentStory<typeof Branding> = (args) => (
+ <Branding {...args} />
);
-export const Branding = Template.bind({});
-Branding.args = {
+/**
+ * Branding Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
title: 'Website title',
photo: 'http://placeimg.com/640/480',
+ // @ts-ignore - Needed because of the placeholder image.
+ unoptimized: true,
+};
+
+/**
+ * Branding Stories - With baseline
+ */
+export const WithBaseline = Template.bind({});
+WithBaseline.args = {
+ title: 'Website title',
+ baseline: 'Maiores corporis qui',
+ photo: 'http://placeimg.com/640/480',
+ // @ts-ignore - Needed because of the placeholder image.
+ unoptimized: true,
};
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 9fe89e7..423c54f 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -2,8 +2,8 @@ import Heading from '@components/atoms/headings/heading';
import Link from 'next/link';
import { FC } from 'react';
import { useIntl } from 'react-intl';
+import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
import styles from './branding.module.scss';
-import FlippingLogo, { type FlippingLogoProps } from './flipping-logo';
export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
/**
@@ -35,6 +35,7 @@ const Branding: FC<BrandingProps> = ({
photo,
title,
withLink = false,
+ ...props
}) => {
const intl = useIntl();
const altText = intl.formatMessage(
@@ -61,6 +62,7 @@ const Branding: FC<BrandingProps> = ({
altText={altText}
logoTitle={logoTitle}
photo={photo}
+ {...props}
/>
<Heading
isFake={!isHome}
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 2b1b7dc..85c319a 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -17,10 +17,6 @@
justify-content: flex-start;
}
- .footer {
- margin-top: var(--spacing-md);
- }
-
.cover {
align-self: flex-start;
max-height: fun.convert-px(150);
@@ -46,6 +42,7 @@
.tagline {
flex: 1;
+ margin-bottom: var(--spacing-md);
color: var(--color-fg);
font-weight: 400;
}
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index a07f8dc..ed78d00 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,9 +1,12 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CardComponent from './card';
+import Card from './card';
+/**
+ * Card - Storybook Meta
+ */
export default {
- title: 'Molecules/Layout',
- component: CardComponent,
+ title: 'Molecules/Layout/Card',
+ component: Card,
argTypes: {
cover: {
description: 'The card cover data (src, dimensions, alternative text).',
@@ -53,6 +56,8 @@ export default {
titleLevel: {
control: {
type: 'number',
+ min: 1,
+ max: 6,
},
description: 'The title level.',
type: {
@@ -71,17 +76,16 @@ export default {
},
},
},
-} as ComponentMeta<typeof CardComponent>;
+} as ComponentMeta<typeof Card>;
-const Template: ComponentStory<typeof CardComponent> = (args) => (
- <CardComponent {...args} />
-);
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
const cover = {
alt: 'A picture',
height: 480,
src: 'http://placeimg.com/640/480',
width: 640,
+ unoptimized: true,
};
const meta = [
@@ -92,10 +96,57 @@ const meta = [
},
];
-export const Card = Template.bind({});
-Card.args = {
+/**
+ * Card Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+ title: 'Veritatis dicta quod',
+ titleLevel: 2,
+ url: '#',
+};
+
+/**
+ * Card Stories - With cover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+ cover,
+ title: 'Veritatis dicta quod',
+ titleLevel: 2,
+ url: '#',
+};
+
+/**
+ * Card Stories - With meta
+ */
+export const WithMeta = Template.bind({});
+WithMeta.args = {
+ meta,
+ title: 'Veritatis dicta quod',
+ titleLevel: 2,
+ url: '#',
+};
+
+/**
+ * Card Stories - With tagline
+ */
+export const WithTagline = Template.bind({});
+WithTagline.args = {
+ tagline: 'Ullam accusantium ipsa',
+ title: 'Veritatis dicta quod',
+ titleLevel: 2,
+ url: '#',
+};
+
+/**
+ * Card Stories - With all data
+ */
+export const WithAll = Template.bind({});
+WithAll.args = {
cover,
meta,
+ tagline: 'Ullam accusantium ipsa',
title: 'Veritatis dicta quod',
titleLevel: 2,
url: '#',
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 89f100e..15927e9 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -93,7 +93,7 @@ const Card: FC<CardProps> = ({
{title}
</Heading>
</header>
- <div className={styles.tagline}>{tagline}</div>
+ {tagline && <div className={styles.tagline}>{tagline}</div>}
{meta && (
<footer className={styles.footer}>
<DescriptionList
diff --git a/src/components/molecules/layout/flipping-logo.module.scss b/src/components/molecules/layout/flipping-logo.module.scss
deleted file mode 100644
index 89b9499..0000000
--- a/src/components/molecules/layout/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/layout/flipping-logo.stories.tsx b/src/components/molecules/layout/flipping-logo.stories.tsx
deleted file mode 100644
index 1ac8de8..0000000
--- a/src/components/molecules/layout/flipping-logo.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FlippingLogoComponent from './flipping-logo';
-
-export default {
- title: 'Molecules/Layout',
- 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} />
-);
-
-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/layout/flipping-logo.test.tsx b/src/components/molecules/layout/flipping-logo.test.tsx
deleted file mode 100644
index 806fdbe..0000000
--- a/src/components/molecules/layout/flipping-logo.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { render, screen } from '@test-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/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx
deleted file mode 100644
index 4a216ef..0000000
--- a/src/components/molecules/layout/flipping-logo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Logo, { type LogoProps } from '@components/atoms/images/logo';
-import Image from 'next/image';
-import { FC } from 'react';
-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['title'];
- /**
- * Photo url.
- */
- photo: string;
-};
-
-/**
- * FlippingLogo component
- *
- * Render a logo and a photo with a flipping effect.
- */
-const FlippingLogo: FC<FlippingLogoProps> = ({
- className = '',
- altText,
- logoTitle,
- photo,
-}) => {
- return (
- <div className={`${styles.logo} ${className}`}>
- <div className={styles.logo__front}>
- <Image src={photo} alt={altText} layout="fill" objectFit="cover" />
- </div>
- <div className={styles.logo__back}>
- <Logo title={logoTitle} />
- </div>
- </div>
- );
-};
-
-export default FlippingLogo;
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index e7a932d..0323f90 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,6 +1,9 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import MetaComponent from './meta';
+/**
+ * Meta - Storybook Meta
+ */
export default {
title: 'Molecules/Layout',
component: MetaComponent,
@@ -18,10 +21,7 @@ export default {
required: false,
},
},
- meta: {
- control: {
- type: null,
- },
+ data: {
description: 'The page metadata.',
type: {
name: 'object',
@@ -51,6 +51,9 @@ const data = {
},
};
+/**
+ * Layout Stories - Meta
+ */
export const Meta = Template.bind({});
Meta.args = {
data,
diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
index 727ffb7..5854206 100644
--- a/src/components/molecules/layout/widget.module.scss
+++ b/src/components/molecules/layout/widget.module.scss
@@ -5,9 +5,14 @@
flex-flow: column;
&__header {
+ z-index: 2;
background: var(--color-bg);
}
+ &__body {
+ position: relative;
+ }
+
&--has-borders & {
&__body {
border: fun.convert-px(2) solid var(--color-primary-dark);
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index d79f66e..c113db9 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,12 +1,14 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { IntlProvider } from 'react-intl';
-import WidgetComponent from './widget';
+import Widget from './widget';
+/**
+ * Widget - Storybook Meta
+ */
export default {
- title: 'Molecules/Layout',
- component: WidgetComponent,
+ title: 'Molecules/Layout/Widget',
+ component: Widget,
args: {
- expanded: true,
withBorders: false,
},
argTypes: {
@@ -37,6 +39,8 @@ export default {
level: {
control: {
type: 'number',
+ min: 1,
+ max: 6,
},
description: 'The heading level.',
type: {
@@ -69,17 +73,35 @@ export default {
},
},
},
-} as ComponentMeta<typeof WidgetComponent>;
+ decorators: [
+ (Story) => (
+ <IntlProvider locale="en">
+ <Story />
+ </IntlProvider>
+ ),
+ ],
+} as ComponentMeta<typeof Widget>;
-const Template: ComponentStory<typeof WidgetComponent> = (args) => (
- <IntlProvider locale="en">
- <WidgetComponent {...args} />
- </IntlProvider>
-);
+const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;
-export const Widget = Template.bind({});
-Widget.args = {
+/**
+ * Widget Stories - Expanded
+ */
+export const Expanded = Template.bind({});
+Expanded.args = {
children: 'Widget body',
+ expanded: true,
+ level: 2,
+ title: 'Widget title',
+};
+
+/**
+ * Widget Stories - Collapsed
+ */
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+ children: 'Widget body',
+ expanded: false,
level: 2,
title: 'Widget title',
};
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 10:34:42 +0000