diff --git a/base.scss b/base.scss index 24677307e..d86c7e389 100644 --- a/base.scss +++ b/base.scss @@ -95,6 +95,7 @@ @import "./src/stories/Library/scroll-lock-background/scroll-lock-background"; @import "./src/stories/Library/multiselect/multiselect"; @import "./src/stories/Library/input-with-dropdown/input-with-dropdown"; +@import "./src/stories/Library/footer-box/footer-box"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx index 39dce5b43..a8d74293b 100644 --- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx +++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx @@ -181,7 +181,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({ classNames="result-pager--margin-bottom" /> {!buttonsUpTop && ( - <div className="modal-loan__buttons modal-loan__buttons--bottom"> + <div className="footer-box footer-box--sticky-bottom"> <Checkbox hiddenLabel={false} isChecked={isAllChecked} diff --git a/src/stories/Library/Modals/modal-loan/modal-loan.scss b/src/stories/Library/Modals/modal-loan/modal-loan.scss index cf0b2c935..5065474d8 100644 --- a/src/stories/Library/Modals/modal-loan/modal-loan.scss +++ b/src/stories/Library/Modals/modal-loan/modal-loan.scss @@ -40,33 +40,3 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px; .modal-loan__list-materials--bottom-buttons-visible { padding-bottom: #{$s-75}px; } - -.modal-loan__buttons { - background-color: $c-global-primary; - display: flex; - justify-content: flex-end; - margin-top: 40px; - flex-direction: column; - margin-bottom: 10px; - - @include breakpoint-s { - align-items: center; - flex-direction: row; - } -} - -.modal-loan__buttons--bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - padding: $s-md; - margin-bottom: 0px; - - @include breakpoint-s { - padding: $s-lg $s-7xl $s-lg 0; - bottom: 100px; - right: 100px; - left: 100px; - } -} diff --git a/src/stories/Library/footer-box/FooterBox.stories.tsx b/src/stories/Library/footer-box/FooterBox.stories.tsx new file mode 100644 index 000000000..e34e0c596 --- /dev/null +++ b/src/stories/Library/footer-box/FooterBox.stories.tsx @@ -0,0 +1,48 @@ +import StickyFooterBoxMobileOnly from "./StickyFooterBoxMobileOnly"; + +export default { + title: "Library / Footer Box", +}; + +export const StickyAtBottomMobileOnly = () => ( + <div> + <h2> + Select mobile view and a sticky box should be shown in the bottom of the + viewport... + </h2> + <hr /> + <ul> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <StickyFooterBoxMobileOnly label="John" /> + </ul> + </div> +); diff --git a/src/stories/Library/footer-box/StickyFooterBoxMobileOnly.tsx b/src/stories/Library/footer-box/StickyFooterBoxMobileOnly.tsx new file mode 100644 index 000000000..2b57cd7fe --- /dev/null +++ b/src/stories/Library/footer-box/StickyFooterBoxMobileOnly.tsx @@ -0,0 +1,23 @@ +import { FC } from "react"; + +export interface StickyFooterBoxMobileOnlyProps { + label: string; +} + +const StickyFooterBoxMobileOnly: FC<StickyFooterBoxMobileOnlyProps> = ({ + label, +}) => { + return ( + <div className="hide-on-desktop footer-box footer-box--sticky-bottom"> + <button + data-cy="button" + type="button" + className="btn-primary btn-filled btn-small arrow__hover--right-small " + > + {label} + </button> + </div> + ); +}; + +export default StickyFooterBoxMobileOnly; diff --git a/src/stories/Library/footer-box/footer-box.scss b/src/stories/Library/footer-box/footer-box.scss new file mode 100644 index 000000000..fccc0e39b --- /dev/null +++ b/src/stories/Library/footer-box/footer-box.scss @@ -0,0 +1,30 @@ +.footer-box { + background-color: $c-global-primary; + display: flex; + justify-content: flex-end; + margin-top: 40px; + flex-direction: column; + margin-bottom: 10px; + + @include breakpoint-s { + align-items: center; + flex-direction: row; + } +} + +.footer-box--sticky-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + padding: $s-md; + margin-bottom: 0px; + z-index: $z-20; + + @include breakpoint-s { + padding: $s-lg $s-7xl $s-lg 0; + bottom: 100px; + right: 100px; + left: 100px; + } +}