Merge pull request danskernesdigitalebibliotek#239 from itk-dev/featu…

…re/5389-group-modal-fixed-buttons 5389: positioning of pager/buttons fixed in bottom
reload · Jun 14, 2023 · fa7b440 · fa7b440
2 parents 7769be7 + 47d7ac7
commit fa7b440
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 88 deletions.
diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx
@@ -24,7 +24,9 @@ export default {
 } as ComponentMeta<typeof ListMaterials>;
 
 const Template: ComponentStory<typeof ListMaterials> = (args) => (
-  <ListMaterials {...args} />
+  <ul>
+    <ListMaterials {...args} />
+  </ul>
 );
 
 export const Item = Template.bind({});

diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx
@@ -28,7 +28,7 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
   };
 
   return (
-    <ul className="modal-loan__list-materials">
+    <>
       <li>
         <div
           className={`list-materials ${
@@ -108,6 +108,6 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
           </div>
         </div>
       </li>
-    </ul>
+    </>
   );
 };
diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx
@@ -8,6 +8,7 @@ import {
 } from "../../Lists/list-materials/ListMaterials";
 import { WarningStatus } from "../../warning-status/WarningStatus";
 import Modal from "../Modal";
+import ResultPager from "../../card-list-page/ResultPager";
 
 type LoanMaterials = Array<{
   materialType?: string;
@@ -113,88 +114,91 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
   };
 
   return (
-    <Modal shownModal={showModal} classNames="modal-loan">
-      <div className="modal-loan__container">
-        <div className="modal-loan__header">
+    <Modal shownModal={showModal}>
+      <div className="modal-loan">
+        <div className="modal-loan__container">
+          <div className="modal-loan__header">
+            {isExpired && (
+              <div className="mr-32">
+                <Counter
+                  label="dage"
+                  percentage={100}
+                  value={0}
+                  status="danger"
+                  isReady={false}
+                />
+              </div>
+            )}
+            <div>
+              <h2 className="modal-loan__title text-header-h2">{title}</h2>
+              <p className="text-body-medium-regular color-secondary-gray mt-4">
+                {description}
+              </p>
+            </div>
+          </div>
           {isExpired && (
-            <div className="mr-32">
-              <Counter
-                label="dage"
-                percentage={100}
-                value={0}
-                status="danger"
-                isReady={false}
+            <div className="modal-loan__warning mt-48 mb-48">
+              <WarningStatus
+                url="/"
+                description="Afleveringsdatoen for lånet er overskredet, derfor pålægges du et gebyr, når materialet afleveres"
               />
             </div>
           )}
-          <div>
-            <h2 className="modal-loan__title text-header-h2">{title}</h2>
-            <p className="text-body-medium-regular color-secondary-gray mt-4">
-              {description}
-            </p>
-          </div>
-        </div>
-        {isExpired && (
-          <div className="modal-loan__warning mt-48 mb-48">
-            <WarningStatus
-              url="/"
-              description="Afleveringsdatoen for lånet er overskredet, derfor pålægges du et gebyr, når materialet afleveres"
-            />
-          </div>
-        )}
-        {buttonsUpTop && (
-          <div className="modal-loan__buttons">
-            <Checkbox
-              hiddenLabel={false}
-              isChecked={isAllChecked}
-              callback={handleToggleAll}
-              label="Vælg alle med mulighed for fornyelse"
-            />
-            <Button
-              buttonType="default"
-              label="Forny mulige (2)"
-              size="small"
-              variant="filled"
-              disabled={false}
-              collapsible
-            />
-          </div>
-        )}
-        <ul className="modal-loan__list-container">
-          {loanList.map(({ list }) => (
-            <li className="modal-loan__list">
-              <ul className="modal-loan__list-materials">
+          {buttonsUpTop && (
+            <div className="modal-loan__buttons">
+              <Checkbox
+                hiddenLabel={false}
+                isChecked={isAllChecked}
+                callback={handleToggleAll}
+                label="Vælg alle med mulighed for fornyelse"
+              />
+              <Button
+                buttonType="default"
+                label="Forny mulige (2)"
+                size="small"
+                variant="filled"
+                disabled={false}
+                collapsible
+              />
+            </div>
+          )}
+          <ul className="modal-loan__list-materials">
+            {loanList.map(({ list }) => (
+              <>
                 {list.map((listItem, index) => (
-                  <li>
-                    <ListMaterials
-                      key={`${index}-${isAllChecked}`}
-                      {...listItem}
-                      isChecked={listItem.isChecked}
-                    />
-                  </li>
+                  <ListMaterials
+                    key={`${index}-${isAllChecked}`}
+                    {...listItem}
+                    isChecked={listItem.isChecked}
+                  />
                 ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-        {!buttonsUpTop && (
-          <div className="modal-loan__buttons modal-loan__buttons--bottom">
-            <Checkbox
-              hiddenLabel={false}
-              isChecked={isAllChecked}
-              callback={handleToggleAll}
-              label="Vælg alle med mulighed for fornyelse"
-            />
-            <Button
-              buttonType="default"
-              label="Forny mulige (2)"
-              size="small"
-              variant="filled"
-              disabled={false}
-              collapsible
-            />
-          </div>
-        )}
+              </>
+            ))}
+          </ul>
+          <ResultPager
+            currentResults={1}
+            totalResults={2}
+            classNames="result-pager--margin-bottom"
+          />
+          {!buttonsUpTop && (
+            <div className="modal-loan__buttons modal-loan__buttons--bottom">
+              <Checkbox
+                hiddenLabel={false}
+                isChecked={isAllChecked}
+                callback={handleToggleAll}
+                label="Vælg alle med mulighed for fornyelse"
+              />
+              <Button
+                buttonType="default"
+                label="Forny mulige (2)"
+                size="small"
+                variant="filled"
+                disabled={false}
+                collapsible
+              />
+            </div>
+          )}
+        </div>
       </div>
     </Modal>
   );

diff --git a/src/stories/Library/Modals/modal-loan/modal-loan.scss b/src/stories/Library/Modals/modal-loan/modal-loan.scss
@@ -8,7 +8,6 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
 
 .modal-loan__container {
   max-width: $MODAL_LOAN_CONTAINER_WIDTH;
-  width: 100%;
   overflow: scroll;
 }
 
@@ -25,6 +24,7 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
 .modal-loan__list {
   position: relative;
   margin-top: 24px;
+  padding-bottom: 10px;
 }
 
 .modal-loan__count {
@@ -42,6 +42,7 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
 }
 
 .modal-loan__buttons {
+  background-color: $c-global-primary;
   display: flex;
   grid-gap: 24px;
   justify-content: flex-end;
@@ -51,16 +52,14 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
 
 .modal-loan__buttons--bottom {
   position: fixed;
-  left: 0;
+  right: 0;
   bottom: 0;
-  width: 100vw;
-  background-color: $c-global-primary;
   padding: $s-md;
 
-  @include breakpoint-m {
-    padding: $s-sm $s-7xl;
+  @include breakpoint-s {
+    padding: $s-lg $s-7xl $s-lg 0;
     bottom: 100px;
+    right: 100px;
     left: 100px;
-    width: calc(100vw - 200px);
   }
 }
diff --git a/src/stories/Library/card-list-page/ResultPager.tsx b/src/stories/Library/card-list-page/ResultPager.tsx
@@ -3,12 +3,17 @@ import { Button } from "../Buttons/button/Button";
 interface ResultPagerProps {
   currentResults: number;
   totalResults: number;
+  classNames?: string;
 }
 
-const ResultPager = ({ currentResults, totalResults }: ResultPagerProps) => {
+const ResultPager = ({
+  currentResults,
+  totalResults,
+  classNames,
+}: ResultPagerProps) => {
   const total = totalResults.toLocaleString("da-Dk");
   return (
-    <div className="result-pager">
+    <div className={`${classNames} result-pager`}>
       <p className="text-small-caption result-pager__title">
         {`Viser ${currentResults} ud af ${total} resultater`}
       </p>

diff --git a/src/stories/Library/card-list-page/result-pager.scss b/src/stories/Library/card-list-page/result-pager.scss
@@ -6,6 +6,10 @@
   }
 }
 
+.result-pager--margin-bottom {
+  margin-bottom: 80px;
+  margin-top: 0px;
+}
 // Override button css (Center + Width)
 .result-pager > .btn-primary {
   margin: 0 auto;