diff options
Diffstat (limited to 'src/components/atoms')
38 files changed, 114 insertions, 72 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 ( |