blob: f2e20736cef1544c04498773170ca3cb6796d934 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import type { FC, HTMLAttributes } from 'react';
import { useIntl } from 'react-intl';
import { ButtonLink, Icon } from '../../atoms';
import styles from './back-to-top.module.scss';
export type BackToTopProps = HTMLAttributes<HTMLDivElement> & {
/**
* Define the element id to us as anchor.
*/
to: string;
};
/**
* BackToTop component
*
* Render a back to top link.
*/
export const BackToTop: FC<BackToTopProps> = ({
className = '',
to,
...props
}) => {
const intl = useIntl();
const linkName = intl.formatMessage({
defaultMessage: 'Back to top',
description: 'BackToTop: link text',
id: 'm+SUSR',
});
const btnClass = `${styles.wrapper} ${className}`;
const anchor = `#${to}`;
return (
<div {...props} className={btnClass}>
<ButtonLink
aria-label={linkName}
className={styles.link}
// eslint-disable-next-line react/jsx-no-literals -- Shape allowed
shape="square"
to={anchor}
>
{/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */}
<Icon aria-hidden={true} orientation="top" shape="arrow" />
</ButtonLink>
</div>
);
};
|
