init Back to top #585
init Back to top #585
Conversation
There was a problem hiding this comment.
Hi @SenChung,
This component is not showing on the PR's Storybook.
https://660e3e06af8da379e06be302-zrpzxabqbq.chromatic.com/?path=/story/3-components-backtotop--default
| <a href="#" id="backToTop" class="qld__btn qld__btn--floating qld__btn--back-to-top" aria-label="Back to top"> | ||
| <span>Back to top</span> | ||
| <div class="qld__widgets {{#if dynamic}}fixed{{/if}}"> | ||
| <a href="#" id="backToTop" class="qld__btn qld__btn--floating qld__btn--back-to-top show" data-offset="{{offset}}" data-dynamic="{{dynamic}}" aria-label="{{text}}"> |
There was a problem hiding this comment.
should have 'default' if 'text' is not set, i.e. 'Back to top'
offset default should be '100'.
Also why is dynamic when true == fix.
and data-dynamic default if not set is 'false'
There was a problem hiding this comment.
These issues are now fixed with the latest push
reverted: package-lock.json to the develop version
|
|
||
| export default { | ||
| tags: ["autodocs"], | ||
| title: "3. Components/BackToTop", |
There was a problem hiding this comment.
align to vanilla terminally ```3. Components/Widgets (Back to Top)``
https://github.com/qld-gov-au/qgds-vanilla/blob/main/src/components/widgets/stories/_widgets.stories.js#L19C24-L19C45
cross link to https://www.designsystem.qld.gov.au/components/back-to-top
add figma link
There was a problem hiding this comment.
I have updated the Back to Top to have these requirements
| @@ -0,0 +1,12 @@ | |||
| {{#unless hide_back_to_top}} | |||
| <div class="qld__widgets"> | |||
| <a href="#" id="backToTop" class="qld__btn qld__btn--back-to-top" data-min-page-height="{{min_page_height}}" aria-label="Back to top"> | |||
There was a problem hiding this comment.
There can only ever be one Back to Top component on a page.
So I added the id to make for simpler targeting [that said it could be removed]
| <a href="#" id="backToTop" class="qld__btn qld__btn--back-to-top" data-min-page-height="{{min_page_height}}" aria-label="Back to top"> | ||
| <span>Back to top</span> | ||
| {{#if has_icon}} | ||
| <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" class="qld__icon"> |
There was a problem hiding this comment.
should this be in css like in vanilla?
https://github.com/qld-gov-au/qgds-vanilla/blob/main/src/components/widgets/css/component.scss#L57
There was a problem hiding this comment.
I would like to use the CSS ::after rule to add the svg icon to the page, but as I can see the we are using the image/svg-icon.svg library of svg icons. So added it this way.
That said I also see that Accordion has done it different way, and would like to do it this way too.
Init Back To Top setup.
This is very much based on the work the Steve has done within The Vanilla Project.
There are a few small differences with the id of backToTop and CSS/SCSS names + the JS.