Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introducing button box #332

Merged
merged 3 commits into from
Nov 9, 2023
Merged

Introducing button box #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70b4fb4
Introduce hide-on-desktop class
spaceo Nov 4, 2023
aa43f12
Introduce button-box replacing modal-loan__buttons
spaceo Nov 4, 2023
2c61224
Make sure that there is room for the pager
spaceo Nov 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
4 changes: 2 additions & 2 deletions src/stories/Library/Modals/modal-loan/ModalLoan.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
30 changes: 0 additions & 30 deletions src/stories/Library/Modals/modal-loan/modal-loan.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
48 changes: 48 additions & 0 deletions src/stories/Library/button-box/ButtonBox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
23 changes: 23 additions & 0 deletions src/stories/Library/button-box/StickyButtonBoxMobileOnly.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
30 changes: 30 additions & 0 deletions src/stories/Library/button-box/button-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion src/stories/Library/loan-list-page/loan-list-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.loan-list-page {
background: $c-global-primary;
padding: $s-md;
padding: $s-md $s-md $s-4xl $s-md;
position: sticky;

@include breakpoint-m {
Expand Down
6 changes: 6 additions & 0 deletions src/styles/scss/shared.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
}
}

.hide-on-desktop {
@include breakpoint-s {
display: none;
}
}

:root {
--parent-bg-color: #fff;
}
Expand Down