From 9d3754cb15eed1d6b95f3a7faa40848cc8dbffd1 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Sat, 4 Nov 2023 18:16:30 +0100
Subject: [PATCH] Introduce footer-box replacing modal-loan__buttons

Since we need the expression in different places besides modals we can
generalise it
---
 base.scss                                     |  1 +
 .../Library/Modals/modal-loan/ModalLoan.tsx   |  2 +-
 .../Library/Modals/modal-loan/modal-loan.scss | 30 ------------
 .../Library/footer-box/FooterBox.stories.tsx  | 48 +++++++++++++++++++
 .../footer-box/StickyFooterBoxMobileOnly.tsx  | 23 +++++++++
 .../Library/footer-box/footer-box.scss        | 30 ++++++++++++
 6 files changed, 103 insertions(+), 31 deletions(-)
 create mode 100644 src/stories/Library/footer-box/FooterBox.stories.tsx
 create mode 100644 src/stories/Library/footer-box/StickyFooterBoxMobileOnly.tsx
 create mode 100644 src/stories/Library/footer-box/footer-box.scss

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