aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/buttons/back-to-top.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-08 19:41:40 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-08 19:41:40 +0200
commita5df28fad0dae266a857ae110c43b3cb8b23c996 (patch)
treea32ea390e90697dc51c3ccb9018de9da2ee4fac3 /src/components/molecules/buttons/back-to-top.tsx
parent5c75a302c2203cb3ebf31233121026b4775662cf (diff)
refactor: use a consistent classname prop and avoid children prop
I was using the FunctionComponent type for some component that do not use children. So I change the type to VoidFunctionComponent to avoid mistakes. I also rename all the "classes" or "additionalClasses" props to "className" to keep consistency between each components.
Diffstat (limited to 'src/components/molecules/buttons/back-to-top.tsx')
-rw-r--r--src/components/molecules/buttons/back-to-top.tsx12
1 files changed, 6 insertions, 6 deletions
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index f25d3e9..56c5247 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,14 +1,14 @@
import ButtonLink from '@components/atoms/buttons/button-link';
import Arrow from '@components/atoms/icons/arrow';
-import { FC } from 'react';
+import { VFC } from 'react';
import { useIntl } from 'react-intl';
import styles from './back-to-top.module.scss';
-type BackToTopProps = {
+export type BackToTopProps = {
/**
- * Add additional classes to the button wrapper.
+ * Set additional classnames to the button wrapper.
*/
- additionalClasses?: string;
+ className?: string;
/**
* An element id (without hashtag) to use as anchor.
*/
@@ -20,7 +20,7 @@ type BackToTopProps = {
*
* Render a back to top link.
*/
-const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => {
+const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => {
const intl = useIntl();
const linkName = intl.formatMessage({
defaultMessage: 'Back to top',
@@ -29,7 +29,7 @@ const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => {
});
return (
- <div className={`${styles.wrapper} ${additionalClasses}`}>
+ <div className={`${styles.wrapper} ${className}`}>
<ButtonLink shape="square" target={`#${target}`} aria-label={linkName}>
<Arrow direction="top" />
</ButtonLink>