Introduce button-box replacing modal-loan__buttons

Since we need the expression in different places besides modals we can
generalise it

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/button-box/button-box";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

src/stories/Library/Modals/modal-loan/ModalLoan.tsx

@@ -145,7 +145,7 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
             </div>
           )}
           {buttonsUpTop && (
-            <div className="modal-loan__buttons">
+            <div className="button-box">
               <Checkbox
                 hiddenLabel={false}
                 isChecked={isAllChecked}
@@ -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="button-box button-box--sticky-bottom">
               <Checkbox
                 hiddenLabel={false}
                 isChecked={isAllChecked}

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;
-  }
-}

src/stories/Library/button-box/ButtonBox.stories.tsx

@@ -0,0 +1,48 @@
+import StickyFooterBoxMobileOnly from "./StickyButtonBoxMobileOnly";
+
+export default {
+  title: "Library / Button 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>
+);

src/stories/Library/button-box/StickyButtonBoxMobileOnly.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+export interface StickyButtonBoxMobileOnlyProps {
+  label: string;
+}
+
+const StickyButtonBoxMobileOnly: FC<StickyButtonBoxMobileOnlyProps> = ({
+  label,
+}) => {
+  return (
+    <div className="hide-on-desktop button-box button-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 StickyButtonBoxMobileOnly;

src/stories/Library/button-box/button-box.scss

@@ -0,0 +1,30 @@
+.button-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;
+  }
+}
+
+.button-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;
+  }
+}