feat: ✨ Create BackToTop component #139
Conversation
src/BackToTop.tsx
Outdated
| const { t } = useTranslation(); | ||
| const { anchor = "#top", right = false } = props; | ||
| return ( | ||
| <div className={right ? cx(fr.cx("fr-grid-row", "fr-grid-row--right")) : ""}> |
There was a problem hiding this comment.
| <div className={right ? cx(fr.cx("fr-grid-row", "fr-grid-row--right")) : ""}> | |
| <div className={!right ? undefined : fr.cx("fr-grid-row", "fr-grid-row--right")}> |
src/BackToTop.tsx
Outdated
| const { useTranslation, addBackToTopTranslations } = createComponentI18nApi({ | ||
| "componentName": symToStr({ BackToTop }), | ||
| "frMessages": { | ||
| "page_top": "Haut de page" |
There was a problem hiding this comment.
| "page_top": "Haut de page" | |
| "page top": "Haut de page" |
There was a problem hiding this comment.
We do not need the keys to be valid variable names. They arent for other components.
| ); | ||
| }) | ||
| ); | ||
|
|
There was a problem hiding this comment.
We also want export default
| export default BackToTop; |
sylvainlg
force-pushed
the
feat/back-to-top
branch
from
9f5b04b
to
968379d
Compare
| import { createComponentI18nApi } from "./i18n"; | ||
|
|
||
| export type BackToTopProps = { | ||
| anchor?: string; |
There was a problem hiding this comment.
If no anchor is explicitely provided the default behaviour shoud be to scroll sroll smoothly to the top of the page.
In this case you'll have to use a <button /> component since it's not accible to use a <a /> without a valid href. We need to apply the fr-link class to the button to make it look a <a />.
Beside it's ok accept a css selector but the recomended approach should be to provide ref. Dsfr components do not allow to provide html id but all enable to provide ref.
|
|
||
| export type BackToTopProps = { | ||
| anchor?: string; | ||
| right?: boolean; |
There was a problem hiding this comment.
| right?: boolean; | |
| /** Default: false (the back to top button is centered) */ | |
| right?: boolean; |
|
|
||
| export default meta; | ||
|
|
||
| export const Default = getStory({}); |
There was a problem hiding this comment.
It would be best to have a story for when the back to top is to the right.
No description provided.