diff options
Diffstat (limited to 'src')
80 files changed, 352 insertions, 289 deletions
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx index 77a7f7b..906fa76 100644 --- a/src/components/atoms/buttons/button-link.tsx +++ b/src/components/atoms/buttons/button-link.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './buttons.module.scss'; export type ButtonLinkProps = { @@ -8,6 +8,10 @@ export type ButtonLinkProps = { */ 'aria-label'?: string; /** + * The button link body. + */ + children: ReactNode; + /** * Set additional classnames to the button link. */ className?: string; diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index 545c5c5..a6eef8b 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -1,8 +1,12 @@ -import { FC, MouseEventHandler } from 'react'; +import { FC, MouseEventHandler, ReactNode } from 'react'; import styles from './buttons.module.scss'; export type ButtonProps = { /** + * The button body. + */ + children: ReactNode; + /** * Set additional classnames to the button wrapper. */ className?: string; diff --git a/src/components/atoms/forms/checkbox.tsx b/src/components/atoms/forms/checkbox.tsx index 8babcc8..aec97f0 100644 --- a/src/components/atoms/forms/checkbox.tsx +++ b/src/components/atoms/forms/checkbox.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, VFC } from 'react'; +import { FC, SetStateAction } from 'react'; export type CheckboxProps = { /** @@ -32,7 +32,7 @@ export type CheckboxProps = { * * Render a checkbox type input. */ -const Checkbox: VFC<CheckboxProps> = ({ value, setValue, ...props }) => { +const Checkbox: FC<CheckboxProps> = ({ value, setValue, ...props }) => { return ( <input type="checkbox" diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx index 2e75d0f..e45a8a7 100644 --- a/src/components/atoms/forms/field.tsx +++ b/src/components/atoms/forms/field.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, SetStateAction, VFC } from 'react'; +import { ChangeEvent, FC, SetStateAction } from 'react'; import styles from './forms.module.scss'; export type FieldType = @@ -72,7 +72,7 @@ export type FieldProps = { * * Render either an input or a textarea. */ -const Field: VFC<FieldProps> = ({ +const Field: FC<FieldProps> = ({ className = '', setValue, type, diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx index 9cd3c58..8b534f1 100644 --- a/src/components/atoms/forms/form.test.tsx +++ b/src/components/atoms/forms/form.test.tsx @@ -3,7 +3,11 @@ import Form from './form'; describe('Form', () => { it('renders a form', () => { - render(<Form aria-label="Jest form" onSubmit={() => null}></Form>); + render( + <Form aria-label="Jest form" onSubmit={() => null}> + Fields + </Form> + ); expect(screen.getByRole('form', { name: 'Jest form' })).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx index 8e80930..ef8dce4 100644 --- a/src/components/atoms/forms/form.tsx +++ b/src/components/atoms/forms/form.tsx @@ -1,4 +1,4 @@ -import { Children, FC, FormEvent, Fragment } from 'react'; +import { Children, FC, FormEvent, Fragment, ReactNode } from 'react'; import styles from './forms.module.scss'; export type FormProps = { @@ -11,6 +11,10 @@ export type FormProps = { */ 'aria-labelledby'?: string; /** + * The form body. + */ + children: ReactNode; + /** * Set additional classnames to the form wrapper. */ className?: string; diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx index 8d57ee2..ce4c70f 100644 --- a/src/components/atoms/forms/label.tsx +++ b/src/components/atoms/forms/label.tsx @@ -1,8 +1,12 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './label.module.scss'; export type LabelProps = { /** + * The label body. + */ + children: ReactNode; + /** * Add classnames to the label. */ className?: string; diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx index 25e86e0..dbe9b37 100644 --- a/src/components/atoms/forms/select.tsx +++ b/src/components/atoms/forms/select.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, SetStateAction, VFC } from 'react'; +import { ChangeEvent, FC, SetStateAction } from 'react'; import styles from './forms.module.scss'; export type SelectOptions = { @@ -60,7 +60,7 @@ export type SelectProps = { * * Render a HTML select element. */ -const Select: VFC<SelectProps> = ({ +const Select: FC<SelectProps> = ({ className = '', options, setValue, diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 4703b5d..c5bf4ca 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,10 +1,14 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './heading.module.scss'; export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; export type HeadingProps = { /** + * The heading body. + */ + children: ReactNode; + /** * Set additional classnames. */ className?: string; diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx index 5f3c460..2962530 100644 --- a/src/components/atoms/icons/arrow.tsx +++ b/src/components/atoms/icons/arrow.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './arrow.module.scss'; export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; @@ -19,7 +19,7 @@ export type ArrowProps = { * * Render a svg arrow icon. */ -const Arrow: VFC<ArrowProps> = ({ className = '', direction }) => { +const Arrow: FC<ArrowProps> = ({ className = '', direction }) => { const directionClass = styles[`icon--${direction}`]; const classes = `${styles.icon} ${directionClass} ${className}`; diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx index 28edcc7..f28d399 100644 --- a/src/components/atoms/icons/career.tsx +++ b/src/components/atoms/icons/career.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './career.module.scss'; export type CareerProps = { @@ -13,7 +13,7 @@ export type CareerProps = { * * Render a career svg icon. */ -const Career: VFC<CareerProps> = ({ className = '' }) => { +const Career: FC<CareerProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx index 552504e..8239154 100644 --- a/src/components/atoms/icons/cc-by-sa.tsx +++ b/src/components/atoms/icons/cc-by-sa.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './cc-by-sa.module.scss'; @@ -14,7 +14,7 @@ export type CCBySAProps = { * * Render a CC BY SA svg icon. */ -const CCBySA: VFC<CCBySAProps> = ({ className = '' }) => { +const CCBySA: FC<CCBySAProps> = ({ className = '' }) => { const intl = useIntl(); return ( diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx index eb9ce7c..3e0adb5 100644 --- a/src/components/atoms/icons/close.tsx +++ b/src/components/atoms/icons/close.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './close.module.scss'; export type CloseProps = { @@ -13,7 +13,7 @@ export type CloseProps = { * * Render a close svg icon. */ -const Close: VFC<CloseProps> = ({ className = '' }) => { +const Close: FC<CloseProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx index df6d54d..9e78a7b 100644 --- a/src/components/atoms/icons/cog.tsx +++ b/src/components/atoms/icons/cog.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './cog.module.scss'; export type CogProps = { @@ -13,7 +13,7 @@ export type CogProps = { * * Render a cog svg icon. */ -const Cog: VFC<CogProps> = ({ className = '' }) => { +const Cog: FC<CogProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx index 310836f..8786139 100644 --- a/src/components/atoms/icons/computer-screen.tsx +++ b/src/components/atoms/icons/computer-screen.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './computer-screen.module.scss'; export type ComputerScreenProps = { @@ -13,7 +13,7 @@ export type ComputerScreenProps = { * * Render a computer screen svg icon. */ -const ComputerScreen: VFC<ComputerScreenProps> = ({ className = '' }) => { +const ComputerScreen: FC<ComputerScreenProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx index 7b50d1d..84dca97 100644 --- a/src/components/atoms/icons/envelop.tsx +++ b/src/components/atoms/icons/envelop.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './envelop.module.scss'; export type EnvelopProps = { @@ -13,7 +13,7 @@ export type EnvelopProps = { * * Render an envelop svg icon. */ -const Envelop: VFC<EnvelopProps> = ({ className = '' }) => { +const Envelop: FC<EnvelopProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx index 7e7c2c9..93aed2a 100644 --- a/src/components/atoms/icons/hamburger.tsx +++ b/src/components/atoms/icons/hamburger.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import styles from './hamburger.module.scss'; -type HamburgerProps = { +export type HamburgerProps = { /** * Set additional classnames to the icon wrapper. */ diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx index 71bbc4a..3b6732d 100644 --- a/src/components/atoms/icons/home.tsx +++ b/src/components/atoms/icons/home.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './home.module.scss'; export type HomeProps = { @@ -13,7 +13,7 @@ export type HomeProps = { * * Render a home svg icon. */ -const Home: VFC<HomeProps> = ({ className = '' }) => { +const Home: FC<HomeProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx index 445ef10..1ca2a44 100644 --- a/src/components/atoms/icons/magnifying-glass.tsx +++ b/src/components/atoms/icons/magnifying-glass.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './magnifying-glass.module.scss'; export type MagnifyingGlassProps = { @@ -13,7 +13,7 @@ export type MagnifyingGlassProps = { * * Render a magnifying glass svg icon. */ -const MagnifyingGlass: VFC<MagnifyingGlassProps> = ({ className = '' }) => { +const MagnifyingGlass: FC<MagnifyingGlassProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx index 4f52319..ec4fa0c 100644 --- a/src/components/atoms/icons/moon.tsx +++ b/src/components/atoms/icons/moon.tsx @@ -1,7 +1,7 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './moon.module.scss'; -type MoonProps = { +export type MoonProps = { /** * Set additional classnames to the icon. */ @@ -12,7 +12,7 @@ type MoonProps = { title?: string; }; -const Moon: VFC<MoonProps> = ({ className = '', title }) => { +const Moon: FC<MoonProps> = ({ className = '', title }) => { return ( <svg className={`${styles.icon} ${className}`} diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx index 78aa14a..e8897b7 100644 --- a/src/components/atoms/icons/plus-minus.tsx +++ b/src/components/atoms/icons/plus-minus.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import styles from './plus-minus.module.scss'; -type PlusMinusProps = { +export type PlusMinusProps = { /** * Set additional classnames to the icon. */ diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx index 1998d25..ab21323 100644 --- a/src/components/atoms/icons/posts-stack.tsx +++ b/src/components/atoms/icons/posts-stack.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './posts-stack.module.scss'; export type PostsStackProps = { @@ -13,7 +13,7 @@ export type PostsStackProps = { * * Render a posts stack svg icon. */ -const PostsStack: VFC<PostsStackProps> = ({ className = '' }) => { +const PostsStack: FC<PostsStackProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx index fa9d922..ca31747 100644 --- a/src/components/atoms/icons/sun.tsx +++ b/src/components/atoms/icons/sun.tsx @@ -1,7 +1,7 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './sun.module.scss'; -type SunProps = { +export type SunProps = { /** * Set additional classnames to the icon. */ @@ -17,7 +17,7 @@ type SunProps = { * * Render a svg sun icon. */ -const Sun: VFC<SunProps> = ({ className = '', title }) => { +const Sun: FC<SunProps> = ({ className = '', title }) => { return ( <svg className={`${styles.sun} ${className}`} diff --git a/src/components/atoms/images/logo.tsx b/src/components/atoms/images/logo.tsx index 2e52110..3978882 100644 --- a/src/components/atoms/images/logo.tsx +++ b/src/components/atoms/images/logo.tsx @@ -1,7 +1,7 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './logo.module.scss'; -type LogoProps = { +export type LogoProps = { /** * SVG Image title. */ @@ -13,7 +13,7 @@ type LogoProps = { * * Render a SVG logo. */ -const Logo: VFC<LogoProps> = ({ title }) => { +const Logo: FC<LogoProps> = ({ title }) => { return ( <svg viewBox="0 0 512 512" diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx index 76252ee..f70695d 100644 --- a/src/components/atoms/layout/copyright.tsx +++ b/src/components/atoms/layout/copyright.tsx @@ -1,4 +1,4 @@ -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './copyright.module.scss'; export type CopyrightDates = { @@ -32,7 +32,7 @@ export type CopyrightProps = { * * Renders a copyright information (owner, dates, license icon). */ -const Copyright: VFC<CopyrightProps> = ({ owner, dates, icon }) => { +const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => { const getFormattedDate = (date: string) => { const datetime = new Date(date).toISOString(); diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx index 4549328..d92a5c7 100644 --- a/src/components/atoms/layout/main.tsx +++ b/src/components/atoms/layout/main.tsx @@ -1,7 +1,11 @@ -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; export type MainProps = { /** + * The main body. + */ + children: ReactNode; + /** * Set additional classnames to the main element. */ className?: string; diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx index 6358cf8..a503e0c 100644 --- a/src/components/atoms/layout/no-script.tsx +++ b/src/components/atoms/layout/no-script.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './no-script.module.scss'; export type NoScriptProps = { @@ -12,7 +12,7 @@ export type NoScriptProps = { position?: 'initial' | 'top'; }; -const NoScript: VFC<NoScriptProps> = ({ message, position = 'initial' }) => { +const NoScript: FC<NoScriptProps> = ({ message, position = 'initial' }) => { const positionClass = styles[`noscript--${position}`]; return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>; diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx index b6e09c5..115bd9c 100644 --- a/src/components/atoms/layout/notice.tsx +++ b/src/components/atoms/layout/notice.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './notice.module.scss'; export type NoticeKind = 'error' | 'info' | 'success' | 'warning'; @@ -19,7 +19,7 @@ export type NoticeProps = { * * Render a colored message depending on notice kind. */ -const Notice: VFC<NoticeProps> = ({ kind, message }) => { +const Notice: FC<NoticeProps> = ({ kind, message }) => { const kindClass = `wrapper--${kind}`; return ( diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx index f1bbb34..cb727ff 100644 --- a/src/components/atoms/layout/section.tsx +++ b/src/components/atoms/layout/section.tsx @@ -1,4 +1,4 @@ -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import Heading from '../headings/heading'; import styles from './section.module.scss'; @@ -32,7 +32,7 @@ export type SectionProps = { * * Render a section element. */ -const Section: VFC<SectionProps> = ({ +const Section: FC<SectionProps> = ({ className = '', content, title, diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss index e7ead86..d23667a 100644 --- a/src/components/atoms/links/link.module.scss +++ b/src/components/atoms/links/link.module.scss @@ -5,7 +5,9 @@ &[hreflang] { &::after { display: inline-block; - content: "\0000a0["attr(hreflang) "]"; + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]"; font-size: var(--font-size-sm); } } @@ -13,22 +15,30 @@ &--external { &::after { display: inline-block; - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } &:focus:not(:active)::after { - content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } &[hreflang] { &::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' )); } &:focus:not(:active)::after { - content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' )); } diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx index 87f11fc..674c07b 100644 --- a/src/components/atoms/links/link.tsx +++ b/src/components/atoms/links/link.tsx @@ -1,9 +1,13 @@ import NextLink from 'next/link'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './link.module.scss'; export type LinkProps = { /** + * The link body. + */ + children: ReactNode; + /** * Set additional classnames to the link. */ className?: string; diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx index 25c0e7d..7c6fede 100644 --- a/src/components/atoms/links/nav-link.tsx +++ b/src/components/atoms/links/nav-link.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { VFC, ReactNode } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './nav-link.module.scss'; export type NavLinkProps = { @@ -22,7 +22,7 @@ export type NavLinkProps = { * * Render a navigation link. */ -const NavLink: VFC<NavLinkProps> = ({ href, label, logo }) => { +const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => { return ( <Link href={href}> <a className={styles.link}> diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx index 3cd2dd1..ca53ef9 100644 --- a/src/components/atoms/links/sharing-link.tsx +++ b/src/components/atoms/links/sharing-link.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './sharing-link.module.scss'; @@ -26,7 +26,7 @@ export type SharingLinkProps = { * * Render a sharing link. */ -const SharingLink: VFC<SharingLinkProps> = ({ medium, url }) => { +const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => { const intl = useIntl(); const text = intl.formatMessage( { diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx index 8c7c790..464bc60 100644 --- a/src/components/atoms/links/social-link.tsx +++ b/src/components/atoms/links/social-link.tsx @@ -2,7 +2,7 @@ import GithubIcon from '@assets/images/social-media/github.svg'; import GitlabIcon from '@assets/images/social-media/gitlab.svg'; import LinkedInIcon from '@assets/images/social-media/linkedin.svg'; import TwitterIcon from '@assets/images/social-media/twitter.svg'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './social-link.module.scss'; export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter'; @@ -23,7 +23,7 @@ export type SocialLinkProps = { * * Render a social icon link. */ -const SocialLink: VFC<SocialLinkProps> = ({ name, url }) => { +const SocialLink: FC<SocialLinkProps> = ({ name, url }) => { /** * Retrieve a social link icon by id. * @param {string} id - The social website id. diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx index 0a92465..a60a6a1 100644 --- a/src/components/atoms/lists/description-list.tsx +++ b/src/components/atoms/lists/description-list.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './description-list.module.scss'; export type DescriptionListItem = { @@ -52,7 +52,7 @@ export type DescriptionListProps = { * * Render a description list. */ -const DescriptionList: VFC<DescriptionListProps> = ({ +const DescriptionList: FC<DescriptionListProps> = ({ className = '', descriptionClassName = '', groupClassName = '', diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx index d100a31..6726802 100644 --- a/src/components/atoms/lists/list.tsx +++ b/src/components/atoms/lists/list.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './list.module.scss'; export type ListItem = { @@ -44,7 +44,7 @@ export type ListProps = { * * Render either an ordered or an unordered list. */ -const List: VFC<ListProps> = ({ +const List: FC<ListProps> = ({ className = '', items, itemsClassName = '', diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx index 1b1ff06..9bac847 100644 --- a/src/components/atoms/loaders/progress-bar.tsx +++ b/src/components/atoms/loaders/progress-bar.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './progress-bar.module.scss'; export type ProgressBarProps = { @@ -29,7 +29,7 @@ export type ProgressBarProps = { * * Render a progress bar. */ -const ProgressBar: VFC<ProgressBarProps> = ({ +const ProgressBar: FC<ProgressBarProps> = ({ current, info, min, diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx index bff0f25..6655141 100644 --- a/src/components/atoms/loaders/spinner.tsx +++ b/src/components/atoms/loaders/spinner.tsx @@ -1,4 +1,4 @@ -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './spinner.module.scss'; @@ -14,7 +14,7 @@ export type SpinnerProps = { * * Render a loading message with animation. */ -const Spinner: VFC<SpinnerProps> = ({ message }) => { +const Spinner: FC<SpinnerProps> = ({ message }) => { const intl = useIntl(); return ( diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index 8a52231..bd1925a 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,18 +1,16 @@ -import ButtonLink from '@components/atoms/buttons/button-link'; +import ButtonLink, { + type ButtonLinkProps, +} from '@components/atoms/buttons/button-link'; import Arrow from '@components/atoms/icons/arrow'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './back-to-top.module.scss'; -export type BackToTopProps = { +export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & { /** * Set additional classnames to the button wrapper. */ className?: string; - /** - * An element id (without hashtag) to use as anchor. - */ - target: string; }; /** @@ -20,7 +18,7 @@ export type BackToTopProps = { * * Render a back to top link. */ -const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => { +const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => { const intl = useIntl(); const linkName = intl.formatMessage({ defaultMessage: 'Back to top', diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index fc79749..0ed9a76 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,6 +1,6 @@ import Heading, { type HeadingProps } from '@components/atoms/headings/heading'; import PlusMinus from '@components/atoms/icons/plus-minus'; -import { SetStateAction, VFC } from 'react'; +import { FC, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import styles from './heading-button.module.scss'; @@ -28,7 +28,7 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { * * Render a button as accordion title to toggle body. */ -const HeadingButton: VFC<HeadingButtonProps> = ({ +const HeadingButton: FC<HeadingButtonProps> = ({ className = '', expanded, level, diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index aeb84ec..f19322f 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -1,5 +1,5 @@ -import Button, { ButtonProps } from '@components/atoms/buttons/button'; -import { VFC } from 'react'; +import Button, { type ButtonProps } from '@components/atoms/buttons/button'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './help-button.module.scss'; @@ -15,7 +15,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { * * Render a button with an interrogation mark icon. */ -const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => { +const HelpButton: FC<HelpButtonProps> = ({ className = '', onClick }) => { const intl = useIntl(); const text = intl.formatMessage({ defaultMessage: 'Help', diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx index e1e6b2d..ec27922 100644 --- a/src/components/molecules/forms/ackee-select.test.tsx +++ b/src/components/molecules/forms/ackee-select.test.tsx @@ -1,5 +1,5 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@test-utils'; +import user from '@testing-library/user-event'; +import { act, render, screen } from '@test-utils'; import AckeeSelect from './ackee-select'; describe('Select', () => { @@ -9,13 +9,15 @@ describe('Select', () => { expect(screen.queryByRole('combobox')).not.toHaveValue('partial'); }); - it('should correctly change value when user choose another option', () => { + it('should correctly change value when user choose another option', async () => { render(<AckeeSelect initialValue="full" />); - userEvent.selectOptions( - screen.getByRole('combobox'), - screen.getByRole('option', { name: 'Partial' }) - ); + await act(async () => { + await user.selectOptions( + screen.getByRole('combobox'), + screen.getByRole('option', { name: 'Partial' }) + ); + }); expect(screen.getByRole('combobox')).toHaveValue('partial'); expect(screen.queryByRole('combobox')).not.toHaveValue('full'); diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx index 4a8410c..101e5b5 100644 --- a/src/components/molecules/forms/ackee-select.tsx +++ b/src/components/molecules/forms/ackee-select.tsx @@ -1,8 +1,8 @@ import { SelectOptions } from '@components/atoms/forms/select'; -import { Dispatch, SetStateAction, useState, VFC } from 'react'; +import { Dispatch, FC, SetStateAction, useState } from 'react'; import { useIntl } from 'react-intl'; import SelectWithTooltip, { - SelectWithTooltipProps, + type SelectWithTooltipProps, } from './select-with-tooltip'; export type AckeeOptions = 'full' | 'partial'; @@ -22,7 +22,7 @@ export type AckeeSelectProps = Pick< * * Render a select to set Ackee settings. */ -const AckeeSelect: VFC<AckeeSelectProps> = ({ initialValue, ...props }) => { +const AckeeSelect: FC<AckeeSelectProps> = ({ initialValue, ...props }) => { const intl = useIntl(); const [value, setValue] = useState<AckeeOptions>(initialValue); diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx index 08d0126..ecc9255 100644 --- a/src/components/molecules/forms/labelled-field.tsx +++ b/src/components/molecules/forms/labelled-field.tsx @@ -1,6 +1,6 @@ import Field, { type FieldProps } from '@components/atoms/forms/field'; import Label from '@components/atoms/forms/label'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './labelled-field.module.scss'; export type LabelledFieldProps = FieldProps & { @@ -23,7 +23,7 @@ export type LabelledFieldProps = FieldProps & { * * Render a field tied to a label. */ -const LabelledField: VFC<LabelledFieldProps> = ({ +const LabelledField: FC<LabelledFieldProps> = ({ hideLabel = false, id, label, diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx index 7d4237a..23057d0 100644 --- a/src/components/molecules/forms/labelled-select.tsx +++ b/src/components/molecules/forms/labelled-select.tsx @@ -1,6 +1,6 @@ -import Label, { LabelProps } from '@components/atoms/forms/label'; +import Label, { type LabelProps } from '@components/atoms/forms/label'; import Select, { type SelectProps } from '@components/atoms/forms/select'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './labelled-select.module.scss'; export type LabelledSelectProps = Omit< @@ -14,7 +14,7 @@ export type LabelledSelectProps = Omit< /** * Set additional classnames to the label. */ - labelClassName?: string; + labelClassName?: LabelProps['className']; /** * The label position. Default: top. */ @@ -26,10 +26,15 @@ export type LabelledSelectProps = Omit< /** * Set additional classnames to the select field. */ - selectClassName?: string; + selectClassName?: SelectProps['className']; }; -const LabelledSelect: VFC<LabelledSelectProps> = ({ +/** + * LabelledSelect component + * + * Render a select with a label. + */ +const LabelledSelect: FC<LabelledSelectProps> = ({ id, label, labelClassName = '', diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index 9f30b42..24b54ae 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -1,8 +1,8 @@ import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; @@ -12,7 +12,7 @@ export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; * * Render a Toggle component to set reduce motion. */ -const MotionToggle: VFC<MotionToggleProps> = ({ value, ...props }) => { +const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => { const intl = useIntl(); const [isDeactivated, setIsDeactivated] = useState<boolean>(value); const reduceMotionLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index daee6bd..0b9c447 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -1,10 +1,10 @@ import Moon from '@components/atoms/icons/moon'; import Sun from '@components/atoms/icons/sun'; import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type PrismThemeToggleProps = Pick< @@ -17,7 +17,7 @@ export type PrismThemeToggleProps = Pick< * * Render a Toggle component to set code blocks theme. */ -const PrismThemeToggle: VFC<PrismThemeToggleProps> = ({ value, ...props }) => { +const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => { const intl = useIntl(); const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); const themeLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx index f537e1e..cf7b041 100644 --- a/src/components/molecules/forms/select-with-tooltip.tsx +++ b/src/components/molecules/forms/select-with-tooltip.tsx @@ -1,4 +1,4 @@ -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import HelpButton from '../buttons/help-button'; import Tooltip, { type TooltipProps } from '../modals/tooltip'; import LabelledSelect, { type LabelledSelectProps } from './labelled-select'; @@ -10,13 +10,9 @@ export type SelectWithTooltipProps = Omit< > & Pick<TooltipProps, 'title' | 'content'> & { /** - * The select label. - */ - label: string; - /** * Set additional classnames to the tooltip wrapper. */ - tooltipClassName?: string; + tooltipClassName?: TooltipProps['className']; }; /** @@ -24,7 +20,7 @@ export type SelectWithTooltipProps = Omit< * * Render a select with a button to display a tooltip about options. */ -const SelectWithTooltip: VFC<SelectWithTooltipProps> = ({ +const SelectWithTooltip: FC<SelectWithTooltipProps> = ({ title, content, id, diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index eb56ce9..10c6c47 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -1,10 +1,10 @@ import Moon from '@components/atoms/icons/moon'; import Sun from '@components/atoms/icons/sun'; import Toggle, { - ToggleChoices, - ToggleProps, + type ToggleChoices, + type ToggleProps, } from '@components/molecules/forms/toggle'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; @@ -14,7 +14,7 @@ export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>; * * Render a Toggle component to set theme. */ -const ThemeToggle: VFC<ThemeToggleProps> = ({ value, ...props }) => { +const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => { const intl = useIntl(); const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value); const themeLabel = intl.formatMessage({ diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx index dff2d2d..288062d 100644 --- a/src/components/molecules/forms/toggle.tsx +++ b/src/components/molecules/forms/toggle.tsx @@ -1,6 +1,6 @@ -import Checkbox from '@components/atoms/forms/checkbox'; +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label, { type LabelProps } from '@components/atoms/forms/label'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './toggle.module.scss'; export type ToggleChoices = { @@ -14,32 +14,24 @@ export type ToggleChoices = { right: ReactNode; }; -export type ToggleProps = { +export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & { /** * The toggle choices. */ choices: ToggleChoices; /** - * The input id. - */ - id: string; - /** * The toggle label. */ label: string; /** * Set additional classnames to the label. */ - labelClassName?: string; + labelClassName?: LabelProps['className']; /** * The label size. */ labelSize?: LabelProps['size']; /** - * The input name. - */ - name: string; - /** * The toggle value. True if checked. */ value: boolean; @@ -54,7 +46,7 @@ export type ToggleProps = { * * Render a toggle with a label and two choices. */ -const Toggle: VFC<ToggleProps> = ({ +const Toggle: FC<ToggleProps> = ({ choices, id, label, diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index 1d8787e..31cbcd1 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 { VFC } from 'react'; +import Link, { type LinkProps } from '@components/atoms/links/link'; +import Image, { type ImageProps } from 'next/image'; +import { FC } from 'react'; import styles from './responsive-image.module.scss'; export type ResponsiveImageProps = Omit< @@ -26,7 +26,7 @@ export type ResponsiveImageProps = Omit< /** * A link target. */ - target?: string; + target?: LinkProps['href']; /** * The image width. */ @@ -38,7 +38,7 @@ export type ResponsiveImageProps = Omit< * * Render a responsive image wrapped in a figure element. */ -const ResponsiveImage: VFC<ResponsiveImageProps> = ({ +const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, caption, className = '', diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index 9f564bf..9fe89e7 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -1,11 +1,11 @@ import Heading from '@components/atoms/headings/heading'; import Link from 'next/link'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './branding.module.scss'; -import FlippingLogo from './flipping-logo'; +import FlippingLogo, { type FlippingLogoProps } from './flipping-logo'; -type BrandingProps = { +export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & { /** * The Branding baseline. */ @@ -15,10 +15,6 @@ type BrandingProps = { */ isHome?: boolean; /** - * A photography URL. - */ - photo: string; - /** * The Branding title; */ title: string; @@ -33,7 +29,7 @@ type BrandingProps = { * * Render the branding logo, title and optional baseline. */ -const Branding: VFC<BrandingProps> = ({ +const Branding: FC<BrandingProps> = ({ baseline, isHome = false, photo, diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 23a0e54..89f100e 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -1,11 +1,11 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import DescriptionList, { - DescriptionListItem, + type DescriptionListItem, } from '@components/atoms/lists/description-list'; -import { VFC } from 'react'; +import { FC } from 'react'; import ResponsiveImage, { - ResponsiveImageProps, + type ResponsiveImageProps, } from '../images/responsive-image'; import styles from './card.module.scss'; @@ -68,7 +68,7 @@ export type CardProps = { * * Render a link with minimal information about its content. */ -const Card: VFC<CardProps> = ({ +const Card: FC<CardProps> = ({ className = '', cover, coverFit = 'cover', diff --git a/src/components/molecules/layout/flipping-logo.tsx b/src/components/molecules/layout/flipping-logo.tsx index 6f7645f..4a216ef 100644 --- a/src/components/molecules/layout/flipping-logo.tsx +++ b/src/components/molecules/layout/flipping-logo.tsx @@ -1,9 +1,9 @@ -import Logo from '@components/atoms/images/logo'; +import Logo, { type LogoProps } from '@components/atoms/images/logo'; import Image from 'next/image'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './flipping-logo.module.scss'; -type FlippingLogoProps = { +export type FlippingLogoProps = { /** * Set additional classnames to the logo wrapper. */ @@ -15,7 +15,7 @@ type FlippingLogoProps = { /** * Logo image title. */ - logoTitle?: string; + logoTitle?: LogoProps['title']; /** * Photo url. */ @@ -27,7 +27,7 @@ type FlippingLogoProps = { * * Render a logo and a photo with a flipping effect. */ -const FlippingLogo: VFC<FlippingLogoProps> = ({ +const FlippingLogo: FC<FlippingLogoProps> = ({ className = '', altText, logoTitle, diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index 218ebd9..fcce473 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -2,7 +2,7 @@ import DescriptionList, { type DescriptionListProps, type DescriptionListItem, } from '@components/atoms/lists/description-list'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; export type MetaItem = { /** @@ -43,7 +43,7 @@ export type MetaProps = { * * Renders the page metadata. */ -const Meta: VFC<MetaProps> = ({ data, ...props }) => { +const Meta: FC<MetaProps> = ({ data, ...props }) => { /** * Transform the metadata to description list item format. * diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx index c04362a..feb2add 100644 --- a/src/components/molecules/layout/widget.tsx +++ b/src/components/molecules/layout/widget.tsx @@ -1,5 +1,7 @@ -import { FC, useState } from 'react'; -import HeadingButton, { HeadingButtonProps } from '../buttons/heading-button'; +import { FC, ReactNode, useState } from 'react'; +import HeadingButton, { + type HeadingButtonProps, +} from '../buttons/heading-button'; import styles from './widget.module.scss'; export type WidgetProps = Pick< @@ -7,6 +9,10 @@ export type WidgetProps = Pick< 'expanded' | 'level' | 'title' > & { /** + * The widget body. + */ + children: ReactNode; + /** * Set additional classnames to the widget wrapper. */ className?: string; diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx index 14fb224..9a0e237 100644 --- a/src/components/molecules/modals/modal.test.tsx +++ b/src/components/molecules/modals/modal.test.tsx @@ -1,9 +1,18 @@ import { render, screen } from '@test-utils'; import Modal from './modal'; +const title = 'A custom title'; +const children = + 'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.'; + describe('Modal', () => { it('renders a title', () => { - render(<Modal title="A custom title" />); - expect(screen.getByText('A custom title')).toBeInTheDocument(); + render(<Modal title={title}>{children}</Modal>); + expect(screen.getByText(title)).toBeInTheDocument(); + }); + + it('renders the modal body', () => { + render(<Modal title={title}>{children}</Modal>); + expect(screen.getByText(children)).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx index 52ada57..58f5fa0 100644 --- a/src/components/molecules/modals/modal.tsx +++ b/src/components/molecules/modals/modal.tsx @@ -1,21 +1,25 @@ -import Heading from '@components/atoms/headings/heading'; -import { CogProps } from '@components/atoms/icons/cog'; -import { MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass'; +import Heading, { type HeadingProps } from '@components/atoms/headings/heading'; +import { type CogProps } from '@components/atoms/icons/cog'; +import { type MagnifyingGlassProps } from '@components/atoms/icons/magnifying-glass'; import dynamic from 'next/dynamic'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './modal.module.scss'; export type Icons = 'cogs' | 'search'; export type ModalProps = { /** + * The modal body. + */ + children: ReactNode; + /** * Set additional classnames. */ className?: string; /** * Set additional classnames to the heading. */ - headingClassName?: string; + headingClassName?: HeadingProps['className']; /** * A icon to illustrate the modal. */ diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx index 73f36e7..80721f3 100644 --- a/src/components/molecules/modals/tooltip.tsx +++ b/src/components/molecules/modals/tooltip.tsx @@ -1,5 +1,5 @@ import List, { type ListItem } from '@components/atoms/lists/list'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './tooltip.module.scss'; export type TooltipProps = { @@ -26,7 +26,7 @@ export type TooltipProps = { * * Render a tooltip modal. */ -const Tooltip: VFC<TooltipProps> = ({ +const Tooltip: FC<TooltipProps> = ({ className = '', content, icon, diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx index 33af735..6dc86a0 100644 --- a/src/components/molecules/nav/breadcrumb.tsx +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -1,7 +1,7 @@ import Link from '@components/atoms/links/link'; import { settings } from '@utils/config'; import Script from 'next/script'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import { BreadcrumbList, ListItem, WithContext } from 'schema-dts'; import styles from './breadcrumb.module.scss'; @@ -37,7 +37,7 @@ export type BreadcrumbProps = { * * Render a breadcrumb navigation. */ -const Breadcrumb: VFC<BreadcrumbProps> = ({ items, ...props }) => { +const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => { const intl = useIntl(); /** diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx index 6ef9158..2666ea2 100644 --- a/src/components/molecules/nav/nav.tsx +++ b/src/components/molecules/nav/nav.tsx @@ -1,6 +1,6 @@ import Link from '@components/atoms/links/link'; import NavLink from '@components/atoms/links/nav-link'; -import { ReactNode, VFC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './nav.module.scss'; export type NavItem = { @@ -46,7 +46,7 @@ export type NavProps = { * * Render the nav links. */ -const Nav: VFC<NavProps> = ({ +const Nav: FC<NavProps> = ({ className = '', items, kind, diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx index 1ab7cf2..670176c 100644 --- a/src/components/organisms/forms/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form.stories.tsx @@ -1,4 +1,3 @@ -import Notice from '@components/atoms/layout/notice'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import CommentFormComponent from './comment-form'; diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx index 6acbf94..d7cb0f5 100644 --- a/src/components/organisms/forms/comment-form.tsx +++ b/src/components/organisms/forms/comment-form.tsx @@ -3,7 +3,7 @@ import Form from '@components/atoms/forms/form'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import Spinner from '@components/atoms/loaders/spinner'; import LabelledField from '@components/molecules/forms/labelled-field'; -import { ReactNode, useState, VFC } from 'react'; +import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './comment-form.module.scss'; @@ -31,7 +31,7 @@ export type CommentFormProps = { titleLevel?: HeadingLevel; }; -const CommentForm: VFC<CommentFormProps> = ({ +const CommentForm: FC<CommentFormProps> = ({ className = '', Notice, saveComment, diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx index 994244a..4a6902b 100644 --- a/src/components/organisms/forms/contact-form.tsx +++ b/src/components/organisms/forms/contact-form.tsx @@ -2,7 +2,7 @@ import Button from '@components/atoms/buttons/button'; import Form from '@components/atoms/forms/form'; import Spinner from '@components/atoms/loaders/spinner'; import LabelledField from '@components/molecules/forms/labelled-field'; -import { ReactNode, useState, VFC } from 'react'; +import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './contact-form.module.scss'; @@ -27,7 +27,7 @@ export type ContactFormProps = { * * Render a contact form. */ -const ContactForm: VFC<ContactFormProps> = ({ +const ContactForm: FC<ContactFormProps> = ({ className = '', Notice, sendMail, diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx index 351d93c..18b7c08 100644 --- a/src/components/organisms/forms/search-form.tsx +++ b/src/components/organisms/forms/search-form.tsx @@ -2,15 +2,20 @@ import Button from '@components/atoms/buttons/button'; import Form from '@components/atoms/forms/form'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; import LabelledField, { - LabelledFieldProps, + type LabelledFieldProps, } from '@components/molecules/forms/labelled-field'; -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './search-form.module.scss'; export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'>; -const SearchForm: VFC<SearchFormProps> = ({ hideLabel }) => { +/** + * SearchForm component + * + * Render a search form. + */ +const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => { const intl = useIntl(); const fieldLabel = intl.formatMessage({ defaultMessage: 'Search for:', diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index a53df0d..33ffe23 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -3,7 +3,7 @@ import List, { type ListProps, } from '@components/atoms/lists/list'; import Card, { type CardProps } from '@components/molecules/layout/card'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './cards-list.module.scss'; export type CardsListItem = Omit< @@ -37,7 +37,7 @@ export type CardsListProps = { * * Return a list of Card components. */ -const CardsList: VFC<CardsListProps> = ({ +const CardsList: FC<CardsListProps> = ({ coverFit, items, kind = 'unordered', diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx index c9cb067..15bfa24 100644 --- a/src/components/organisms/layout/footer.tsx +++ b/src/components/organisms/layout/footer.tsx @@ -1,7 +1,9 @@ -import Copyright, { CopyrightProps } from '@components/atoms/layout/copyright'; +import Copyright, { + type CopyrightProps, +} from '@components/atoms/layout/copyright'; import BackToTop from '@components/molecules/buttons/back-to-top'; import Nav, { type NavItem } from '@components/molecules/nav/nav'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './footer.module.scss'; export type FooterProps = { @@ -28,12 +30,7 @@ export type FooterProps = { * * Renders a footer with copyright and nav; */ -const Footer: VFC<FooterProps> = ({ - className, - copyright, - navItems, - topId, -}) => { +const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => { return ( <footer className={`${styles.wrapper} ${className}`}> <Copyright diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index 3f83342..42d0431 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -2,7 +2,7 @@ import ResponsiveImage, { type ResponsiveImageProps, } from '@components/molecules/images/responsive-image'; import Meta, { type MetaMap } from '@components/molecules/layout/meta'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './overview.module.scss'; export type OverviewProps = { @@ -15,7 +15,7 @@ export type OverviewProps = { * * Render an overview. */ -const Overview: VFC<OverviewProps> = ({ cover, meta }) => { +const Overview: FC<OverviewProps> = ({ cover, meta }) => { return ( <div className={styles.wrapper}> {cover && ( diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx index 5214d70..b33acde 100644 --- a/src/components/organisms/layout/summary.stories.tsx +++ b/src/components/organisms/layout/summary.stories.tsx @@ -103,7 +103,7 @@ Summary.args = { cover: { alt: 'A cover', height: 480, - url: 'http://placeimg.com/640/480', + src: 'http://placeimg.com/640/480', width: 640, }, excerpt: diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx index ce87c0c..4944805 100644 --- a/src/components/organisms/layout/summary.test.tsx +++ b/src/components/organisms/layout/summary.test.tsx @@ -4,7 +4,7 @@ import Summary from './summary'; const cover = { alt: 'A cover', height: 480, - url: 'http://placeimg.com/640/480', + src: 'http://placeimg.com/640/480', width: 640, }; diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index 3624e5d..733a660 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -2,18 +2,18 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import Arrow from '@components/atoms/icons/arrow'; import Link from '@components/atoms/links/link'; -import ResponsiveImage from '@components/molecules/images/responsive-image'; +import ResponsiveImage, { + type ResponsiveImageProps, +} from '@components/molecules/images/responsive-image'; import Meta, { type MetaItem } from '@components/molecules/layout/meta'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './summary.module.scss'; -export type Cover = { - alt: string; - height: number; - url: string; - width: number; -}; +export type Cover = Pick< + ResponsiveImageProps, + 'alt' | 'src' | 'width' | 'height' +>; export type RequiredMetaKey = 'publication'; @@ -35,11 +35,29 @@ export type OptionalMeta = { export type Meta = RequiredMeta & OptionalMeta; export type SummaryProps = { + /** + * The post cover. + */ cover?: Cover; + /** + * The post excerpt. + */ excerpt: string; + /** + * The post meta. + */ meta: Meta; + /** + * The post title. + */ title: string; + /** + * The heading level (hn). + */ titleLevel?: HeadingLevel; + /** + * The post url. + */ url: string; }; @@ -48,7 +66,7 @@ export type SummaryProps = { * * Render a page summary. */ -const Summary: VFC<SummaryProps> = ({ +const Summary: FC<SummaryProps> = ({ cover, excerpt, meta, @@ -57,18 +75,23 @@ const Summary: VFC<SummaryProps> = ({ url, }) => { const intl = useIntl(); + const readMore = intl.formatMessage( + { + defaultMessage: 'Read more<a11y> about {title}</a11y>', + description: 'Summary: read more link', + id: 'Zpgv+f', + }, + { + title, + a11y: (chunks: string) => ( + <span className="screen-reader-text">{chunks}</span> + ), + } + ); return ( <article className={styles.wrapper}> - {cover && ( - <ResponsiveImage - alt={cover.alt} - src={cover.url} - width={cover.width} - height={cover.height} - className={styles.cover} - /> - )} + {cover && <ResponsiveImage className={styles.cover} {...cover} />} <header className={styles.header}> <Link href={url}> <Heading level={titleLevel} className={styles.title}> @@ -79,20 +102,10 @@ const Summary: VFC<SummaryProps> = ({ <div className={styles.body}> {excerpt} <ButtonLink target={url} className={styles['read-more']}> - {intl.formatMessage( - { - defaultMessage: 'Read more<a11y> about {title}</a11y>', - description: 'Summary: read more link', - id: 'Zpgv+f', - }, - { - title, - a11y: (chunks: string) => ( - <span className="screen-reader-text">{chunks}</span> - ), - } - )} - <Arrow direction="right" /> + <> + {readMore} + <Arrow direction="right" /> + </> </ButtonLink> </div> <footer className={styles.footer}> diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index 883b783..0e0ceed 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,5 +1,5 @@ -import Modal from '@components/molecules/modals/modal'; -import { VFC } from 'react'; +import Modal, { type ModalProps } from '@components/molecules/modals/modal'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import SearchForm from '../forms/search-form'; import styles from './search-modal.module.scss'; @@ -8,7 +8,7 @@ export type SearchModalProps = { /** * Set additional classnames to modal wrapper. */ - className?: string; + className?: ModalProps['className']; }; /** @@ -16,7 +16,7 @@ export type SearchModalProps = { * * Render a search form modal. */ -const SearchModal: VFC<SearchModalProps> = ({ className }) => { +const SearchModal: FC<SearchModalProps> = ({ className }) => { const intl = useIntl(); const modalTitle = intl.formatMessage({ defaultMessage: 'Search', diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 25d6f6f..20d2605 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -1,10 +1,12 @@ import Form from '@components/atoms/forms/form'; -import AckeeSelect from '@components/molecules/forms/ackee-select'; +import AckeeSelect, { + type AckeeSelectProps, +} from '@components/molecules/forms/ackee-select'; import MotionToggle from '@components/molecules/forms/motion-toggle'; import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; import ThemeToggle from '@components/molecules/forms/theme-toggle'; -import Modal from '@components/molecules/modals/modal'; -import { VFC } from 'react'; +import Modal, { type ModalProps } from '@components/molecules/modals/modal'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './settings-modal.module.scss'; @@ -12,11 +14,11 @@ export type SettingsModalProps = { /** * Set additional classnames to the modal wrapper. */ - className?: string; + className?: ModalProps['className']; /** * Set additional classnames to the tooltip wrapper. */ - tooltipClassName?: string; + tooltipClassName?: AckeeSelectProps['tooltipClassName']; }; /** @@ -24,7 +26,7 @@ export type SettingsModalProps = { * * Render a modal with settings options. */ -const SettingsModal: VFC<SettingsModalProps> = ({ +const SettingsModal: FC<SettingsModalProps> = ({ className = '', tooltipClassName = '', }) => { diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx index 50bbe8b..35e3fd6 100644 --- a/src/components/organisms/toolbar/main-nav.tsx +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -1,17 +1,20 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label from '@components/atoms/forms/label'; import Hamburger from '@components/atoms/icons/hamburger'; -import Nav, { type NavItem } from '@components/molecules/nav/nav'; -import { VFC } from 'react'; +import Nav, { + type NavProps, + type NavItem, +} from '@components/molecules/nav/nav'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -import sharedStyles from './toolbar-items.module.scss'; import mainNavStyles from './main-nav.module.scss'; +import sharedStyles from './toolbar-items.module.scss'; export type MainNavProps = { /** * Set additional classnames to the nav element. */ - className?: string; + className?: NavProps['className']; /** * The button state. */ @@ -26,7 +29,12 @@ export type MainNavProps = { setIsActive: CheckboxProps['setValue']; }; -const MainNav: VFC<MainNavProps> = ({ +/** + * MainNav component + * + * Render the main navigation. + */ +const MainNav: FC<MainNavProps> = ({ className = '', isActive, items, diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 070bce0..72cd576 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,17 +1,17 @@ -import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox'; +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label from '@components/atoms/forms/label'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SearchModal from '../modals/search-modal'; -import sharedStyles from './toolbar-items.module.scss'; +import SearchModal, { type SearchModalProps } from '../modals/search-modal'; import searchStyles from './search.module.scss'; +import sharedStyles from './toolbar-items.module.scss'; export type SearchProps = { /** * Set additional classnames to the modal wrapper. */ - className?: string; + className?: SearchModalProps['className']; /** * The button state. */ @@ -22,11 +22,7 @@ export type SearchProps = { setIsActive: CheckboxProps['setValue']; }; -const Search: VFC<SearchProps> = ({ - className = '', - isActive, - setIsActive, -}) => { +const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => { const intl = useIntl(); const label = isActive ? intl.formatMessage({ diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 88539fb..3b10226 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,11 +1,13 @@ -import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox'; +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label from '@components/atoms/forms/label'; import Cog from '@components/atoms/icons/cog'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SettingsModal from '../modals/settings-modal'; -import sharedStyles from './toolbar-items.module.scss'; +import SettingsModal, { + type SettingsModalProps, +} from '../modals/settings-modal'; import settingsStyles from './settings.module.scss'; +import sharedStyles from './toolbar-items.module.scss'; export type SettingsProps = { /** @@ -23,10 +25,10 @@ export type SettingsProps = { /** * Set additional classnames to the tooltip wrapper. */ - tooltipClassName?: string; + tooltipClassName?: SettingsModalProps['tooltipClassName']; }; -const Settings: VFC<SettingsProps> = ({ +const Settings: FC<SettingsProps> = ({ className = '', isActive, setIsActive, diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index 81e80cf..f1ce530 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,4 +1,4 @@ -import { useState, VFC } from 'react'; +import { FC, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; import Search from '../toolbar/search'; import Settings from '../toolbar/settings'; @@ -20,7 +20,7 @@ export type ToolbarProps = { * * Render the website toolbar. */ -const Toolbar: VFC<ToolbarProps> = ({ className = '', nav }) => { +const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => { const [isNavOpened, setIsNavOpened] = useState<boolean>(false); const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx index 928d5ea..ba04c6a 100644 --- a/src/components/organisms/widgets/image-widget.tsx +++ b/src/components/organisms/widgets/image-widget.tsx @@ -1,28 +1,16 @@ -import ResponsiveImage from '@components/molecules/images/responsive-image'; +import ResponsiveImage, { + type ResponsiveImageProps, +} from '@components/molecules/images/responsive-image'; import Widget, { type WidgetProps } from '@components/molecules/layout/widget'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './image-widget.module.scss'; export type Alignment = 'left' | 'center' | 'right'; -export type Image = { - /** - * An alternative text for the image. - */ - alt: string; - /** - * The image height. - */ - height: number; - /** - * The image source. - */ - src: string; - /** - * The image width. - */ - width: number; -}; +export type Image = Pick< + ResponsiveImageProps, + 'alt' | 'height' | 'src' | 'width' +>; export type ImageWidgetProps = Pick< WidgetProps, @@ -35,7 +23,7 @@ export type ImageWidgetProps = Pick< /** * Add a caption to the image. */ - description?: string; + description?: ResponsiveImageProps['caption']; /** * An object describing the image. */ @@ -43,7 +31,7 @@ export type ImageWidgetProps = Pick< /** * Add a link to the image. */ - url?: string; + url?: ResponsiveImageProps['target']; }; /** @@ -51,7 +39,7 @@ export type ImageWidgetProps = Pick< * * Renders a widget that print an image and an optional text. */ -const ImageWidget: VFC<ImageWidgetProps> = ({ +const ImageWidget: FC<ImageWidgetProps> = ({ alignment = 'left', description, img, diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx index 155354e..559d0b6 100644 --- a/src/components/organisms/widgets/links-list-widget.tsx +++ b/src/components/organisms/widgets/links-list-widget.tsx @@ -1,8 +1,11 @@ import Link from '@components/atoms/links/link'; -import List, { ListProps, type ListItem } from '@components/atoms/lists/list'; +import List, { + type ListProps, + type ListItem, +} from '@components/atoms/lists/list'; import Widget, { type WidgetProps } from '@components/molecules/layout/widget'; import { slugify } from '@utils/helpers/slugify'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './links-list-widget.module.scss'; export type LinksListItems = { @@ -33,7 +36,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> & * * Render a list of links inside a widget. */ -const LinksListWidget: VFC<LinksListWidgetProps> = ({ +const LinksListWidget: FC<LinksListWidgetProps> = ({ items, kind = 'unordered', ...props diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx index ccd3a21..571c1a4 100644 --- a/src/components/organisms/widgets/sharing.tsx +++ b/src/components/organisms/widgets/sharing.tsx @@ -2,7 +2,7 @@ import SharingLink, { type SharingMedium, } from '@components/atoms/links/sharing-link'; import Widget, { type WidgetProps } from '@components/molecules/layout/widget'; -import { VFC } from 'react'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './sharing.module.scss'; @@ -21,7 +21,7 @@ export type SharingData = { url: string; }; -export type SharingProps = WidgetProps & { +export type SharingProps = Omit<WidgetProps, 'children'> & { /** * The page data to share. */ @@ -37,7 +37,7 @@ export type SharingProps = WidgetProps & { * * Render a list of sharing links inside a widget. */ -const Sharing: VFC<SharingProps> = ({ data, media, ...props }) => { +const Sharing: FC<SharingProps> = ({ data, media, ...props }) => { const intl = useIntl(); /** |