aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules')
-rw-r--r--src/components/molecules/buttons/back-to-top.stories.tsx7
-rw-r--r--src/components/molecules/buttons/back-to-top.tsx12
-rw-r--r--src/components/molecules/buttons/help-button.stories.tsx4
-rw-r--r--src/components/molecules/buttons/help-button.tsx10
-rw-r--r--src/components/molecules/images/responsive-image.tsx6
-rw-r--r--src/components/molecules/layout/branding.tsx10
-rw-r--r--src/components/molecules/layout/flipping-logo.stories.tsx23
-rw-r--r--src/components/molecules/layout/flipping-logo.tsx12
-rw-r--r--src/components/molecules/modals/modal.stories.tsx13
-rw-r--r--src/components/molecules/modals/modal.tsx22
-rw-r--r--src/components/molecules/modals/tooltip.stories.tsx23
-rw-r--r--src/components/molecules/modals/tooltip.tsx15
12 files changed, 113 insertions, 44 deletions
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index f1a36e5..fe58293 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -6,11 +6,14 @@ export default {
title: 'Molecules/Buttons',
component: BackToTopComponent,
argTypes: {
- additionalClasses: {
+ className: {
control: {
type: 'text',
},
- description: 'Add additional classes to the button wrapper.',
+ description: 'Set additional classnames to the button wrapper.',
+ table: {
+ category: 'Styles',
+ },
type: {
name: 'string',
required: false,
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index f25d3e9..56c5247 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,14 +1,14 @@
import ButtonLink from '@components/atoms/buttons/button-link';
import Arrow from '@components/atoms/icons/arrow';
-import { FC } from 'react';
+import { VFC } from 'react';
import { useIntl } from 'react-intl';
import styles from './back-to-top.module.scss';
-type BackToTopProps = {
+export type BackToTopProps = {
/**
- * Add additional classes to the button wrapper.
+ * Set additional classnames to the button wrapper.
*/
- additionalClasses?: string;
+ className?: string;
/**
* An element id (without hashtag) to use as anchor.
*/
@@ -20,7 +20,7 @@ type BackToTopProps = {
*
* Render a back to top link.
*/
-const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => {
+const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => {
const intl = useIntl();
const linkName = intl.formatMessage({
defaultMessage: 'Back to top',
@@ -29,7 +29,7 @@ const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => {
});
return (
- <div className={`${styles.wrapper} ${additionalClasses}`}>
+ <div className={`${styles.wrapper} ${className}`}>
<ButtonLink shape="square" target={`#${target}`} aria-label={linkName}>
<Arrow direction="top" />
</ButtonLink>
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index 7ed953e..cfc1b0b 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -6,11 +6,11 @@ export default {
title: 'Molecules/Buttons',
component: HelpButtonComponent,
argTypes: {
- classes: {
+ className: {
control: {
type: 'text',
},
- description: 'Set additional classes to the button.',
+ description: 'Set additional classnames to the button wrapper.',
table: {
category: 'Options',
},
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index d933829..aeb84ec 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,13 +1,13 @@
import Button, { ButtonProps } from '@components/atoms/buttons/button';
-import { FC } from 'react';
+import { VFC } from 'react';
import { useIntl } from 'react-intl';
import styles from './help-button.module.scss';
export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
/**
- * Set additional classes to the button.
+ * Set additional classnames to the button wrapper.
*/
- classes?: string;
+ className?: string;
};
/**
@@ -15,7 +15,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
*
* Render a button with an interrogation mark icon.
*/
-const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => {
+const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => {
const intl = useIntl();
const text = intl.formatMessage({
defaultMessage: 'Help',
@@ -26,7 +26,7 @@ const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => {
return (
<Button
shape="circle"
- additionalClasses={`${styles.btn} ${classes}`}
+ className={`${styles.btn} ${className}`}
onClick={onClick}
>
<span className="screen-reader-text">{text}</span>
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index db2f5ab..9f96f18 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -1,6 +1,6 @@
import Link from '@components/atoms/links/link';
import Image, { ImageProps } from 'next/image';
-import { FC } from 'react';
+import { VFC } from 'react';
import styles from './responsive-image.module.scss';
type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & {
@@ -31,7 +31,7 @@ type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & {
*
* Render a responsive image wrapped in a figure element.
*/
-const ResponsiveImage: FC<ResponsiveImageProps> = ({
+const ResponsiveImage: VFC<ResponsiveImageProps> = ({
alt,
caption,
layout,
@@ -42,7 +42,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
return (
<figure className={styles.wrapper}>
{target ? (
- <Link href={target} classes={styles.link}>
+ <Link href={target} className={styles.link}>
<Image alt={alt} layout={layout || 'intrinsic'} {...props} />
{caption && (
<figcaption className={styles.caption}>{caption}</figcaption>
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index efb2e34..9f564bf 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,6 +1,6 @@
import Heading from '@components/atoms/headings/heading';
import Link from 'next/link';
-import { FC } from 'react';
+import { VFC } from 'react';
import { useIntl } from 'react-intl';
import styles from './branding.module.scss';
import FlippingLogo from './flipping-logo';
@@ -33,7 +33,7 @@ type BrandingProps = {
*
* Render the branding logo, title and optional baseline.
*/
-const Branding: FC<BrandingProps> = ({
+const Branding: VFC<BrandingProps> = ({
baseline,
isHome = false,
photo,
@@ -61,7 +61,7 @@ const Branding: FC<BrandingProps> = ({
return (
<div className={styles.wrapper}>
<FlippingLogo
- additionalClasses={styles.logo}
+ className={styles.logo}
altText={altText}
logoTitle={logoTitle}
photo={photo}
@@ -70,7 +70,7 @@ const Branding: FC<BrandingProps> = ({
isFake={!isHome}
level={1}
withMargin={false}
- additionalClasses={styles.title}
+ className={styles.title}
>
{withLink ? (
<Link href="/">
@@ -85,7 +85,7 @@ const Branding: FC<BrandingProps> = ({
isFake={true}
level={4}
withMargin={false}
- additionalClasses={styles.baseline}
+ className={styles.baseline}
>
{baseline}
</Heading>
diff --git a/src/components/molecules/layout/flipping-logo.stories.tsx b/src/components/molecules/layout/flipping-logo.stories.tsx
index 1508269..1ac8de8 100644
--- a/src/components/molecules/layout/flipping-logo.stories.tsx
+++ b/src/components/molecules/layout/flipping-logo.stories.tsx
@@ -5,11 +5,21 @@ export default {
title: 'Molecules/Layout',
component: FlippingLogoComponent,
argTypes: {
- additionalClasses: {
+ altText: {
+ control: {
+ type: 'text',
+ },
+ description: 'Photo alternative text.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
+ className: {
control: {
type: 'text',
},
- description: 'Adds additional classes to the logo wrapper.',
+ description: 'Set additional classnames to the logo wrapper.',
table: {
category: 'Options',
},
@@ -18,14 +28,17 @@ export default {
required: false,
},
},
- altText: {
+ logoTitle: {
control: {
type: 'text',
},
- description: 'Photo alternative text.',
+ description: 'An accessible name for the logo.',
+ table: {
+ category: 'Accessibility',
+ },
type: {
name: 'string',
- required: true,
+ required: false,
},
},
photo: {
diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx
index 7bb7afc..6f7645f 100644
--- a/src/components/molecules/layout/flipping-logo.tsx
+++ b/src/components/molecules/layout/flipping-logo.tsx
@@ -1,13 +1,13 @@
import Logo from '@components/atoms/images/logo';
import Image from 'next/image';
-import { FC } from 'react';
+import { VFC } from 'react';
import styles from './flipping-logo.module.scss';
type FlippingLogoProps = {
/**
- * Adds additional classes to the logo wrapper.
+ * Set additional classnames to the logo wrapper.
*/
- additionalClasses?: string;
+ className?: string;
/**
* Photo alternative text.
*/
@@ -27,14 +27,14 @@ type FlippingLogoProps = {
*
* Render a logo and a photo with a flipping effect.
*/
-const FlippingLogo: FC<FlippingLogoProps> = ({
- additionalClasses,
+const FlippingLogo: VFC<FlippingLogoProps> = ({
+ className = '',
altText,
logoTitle,
photo,
}) => {
return (
- <div className={`${styles.logo} ${additionalClasses}`}>
+ <div className={`${styles.logo} ${className}`}>
<div className={styles.logo__front}>
<Image src={photo} alt={altText} layout="fill" objectFit="cover" />
</div>
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index b68a24b..bd7d9f4 100644
--- a/src/components/molecules/modals/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -15,6 +15,19 @@ export default {
required: true,
},
},
+ className: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the modal.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
icon: {
control: {
type: 'select',
diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index 4dc3b0a..ce12e7a 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -1,17 +1,29 @@
import Heading from '@components/atoms/headings/heading';
+import { CogProps } from '@components/atoms/icons/cog';
+import { MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass';
import dynamic from 'next/dynamic';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
import styles from './modal.module.scss';
export type Icons = 'cogs' | 'search';
export type ModalProps = {
+ /**
+ * Set additional classnames.
+ */
+ className?: string;
+ /**
+ * A icon to illustrate the modal.
+ */
icon?: Icons;
+ /**
+ * The modal title.
+ */
title?: string;
};
-const CogIcon = dynamic<ReactNode>(() => import('@components/atoms/icons/cog'));
-const SearchIcon = dynamic<ReactNode>(
+const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog'));
+const SearchIcon = dynamic<MagnifyingGlassProps>(
() => import('@components/atoms/icons/magnifying-glass')
);
@@ -20,7 +32,7 @@ const SearchIcon = dynamic<ReactNode>(
*
* Render a modal component with an optional title and icon.
*/
-const Modal: FC<ModalProps> = ({ children, icon, title }) => {
+const Modal: FC<ModalProps> = ({ children, className = '', icon, title }) => {
const getIcon = (id: Icons) => {
switch (id) {
case 'cogs':
@@ -33,7 +45,7 @@ const Modal: FC<ModalProps> = ({ children, icon, title }) => {
};
return (
- <div className={styles.wrapper}>
+ <div className={`${styles.wrapper} ${className}`}>
{title && (
<Heading isFake={true} level={3}>
{icon && <span className={styles.icon}>{getIcon(icon)}</span>}
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
index a57cf34..63fc71d 100644
--- a/src/components/molecules/modals/tooltip.stories.tsx
+++ b/src/components/molecules/modals/tooltip.stories.tsx
@@ -5,6 +5,19 @@ export default {
title: 'Molecules/Modals',
component: TooltipComponent,
argTypes: {
+ className: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the tooltip.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
content: {
control: {
type: 'text',
@@ -15,6 +28,16 @@ export default {
required: true,
},
},
+ icon: {
+ control: {
+ type: 'text',
+ },
+ description: 'The tooltip icon.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
title: {
control: {
type: 'text',
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index ceb0b14..73f36e7 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -1,12 +1,12 @@
import List, { type ListItem } from '@components/atoms/lists/list';
-import { FC, ReactNode } from 'react';
+import { ReactNode, VFC } from 'react';
import styles from './tooltip.module.scss';
export type TooltipProps = {
/**
- * Set additional classes to the tooltip wrapper.
+ * Set additional classnames to the tooltip wrapper.
*/
- classes?: string;
+ className?: string;
/**
* The tooltip body.
*/
@@ -26,7 +26,12 @@ export type TooltipProps = {
*
* Render a tooltip modal.
*/
-const Tooltip: FC<TooltipProps> = ({ classes = '', content, icon, title }) => {
+const Tooltip: VFC<TooltipProps> = ({
+ className = '',
+ content,
+ icon,
+ title,
+}) => {
/**
* Format an array of strings to an array of object with id and value.
*
@@ -40,7 +45,7 @@ const Tooltip: FC<TooltipProps> = ({ classes = '', content, icon, title }) => {
};
return (
- <div className={`${styles.wrapper} ${classes}`}>
+ <div className={`${styles.wrapper} ${className}`}>
<div className={styles.title}>
<span className={styles.icon}>{icon}</span>
{title}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 08:40:11 +0000