Skip to content

Commit a9bf936

Browse files
author
Sine Jespersen
committed
5593: mobile view of group modal
1 parent befa727 commit a9bf936

File tree

5 files changed

+134
-137
lines changed

5 files changed

+134
-137
lines changed

‎src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { withDesign } from "storybook-addon-designs";
22
import { ComponentMeta, ComponentStory } from "@storybook/react";
3-
43
import { ListMaterials } from "./ListMaterials";
54

65
export default {
@@ -30,14 +29,12 @@ const Template: ComponentStory<typeof ListMaterials> = (args) => (
3029

3130
export const Item = Template.bind({});
3231
Item.args = {
32+
year: "2001",
3333
title: "Audrey Hepburn",
34-
author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
34+
author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
35+
statusMessage: "The item cannot be renewed further",
3536
isChecked: true,
36-
canBeRenewed: true,
37-
statusDelivery: {
38-
label: "AFLEVERES 20.11.21",
39-
status: "neutral",
40-
},
37+
disabled: true,
4138
statusMaterialType: {
4239
label: "bog",
4340
status: "outline",

‎src/stories/Library/Lists/list-materials/ListMaterials.tsx‎

Lines changed: 87 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
import { useState } from "react";
1+
import { useState, FC } from "react";
22
import { Checkbox } from "../../Forms/checkbox/Checkbox";
33
import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
44

55
export type ListMaterialsProps = {
66
title: string;
77
author: string;
8+
year: string;
9+
statusMessage: string;
810
statusMaterialType: StatusLabelProps;
9-
statusDelivery: StatusLabelProps;
10-
canBeRenewed: boolean;
1111
isChecked: boolean;
12+
disabled: boolean;
1213
};
1314

14-
export const ListMaterials: React.FC<ListMaterialsProps> = ({
15+
export const ListMaterials: FC<ListMaterialsProps> = ({
1516
title,
17+
year,
1618
author,
17-
statusDelivery,
1819
statusMaterialType,
19-
canBeRenewed,
2020
isChecked,
21+
statusMessage,
22+
disabled,
2123
}) => {
2224
const [isItChecked, setIsItChecked] = useState(isChecked);
2325

@@ -26,40 +28,86 @@ export const ListMaterials: React.FC<ListMaterialsProps> = ({
2628
};
2729

2830
return (
29-
<div
30-
className={`list-materials ${
31-
isItChecked ? "list-materials__selected" : ""
32-
}`}
33-
>
34-
{canBeRenewed && (
35-
<div className="list-materials__checkbox mr-32">
36-
<Checkbox
37-
hiddenLabel={false}
38-
isChecked={isItChecked}
39-
callback={handleToggle}
40-
ariaLabel="Vælg materiale"
41-
/>
31+
<ul className="modal-loan__list-materials">
32+
<li>
33+
<div
34+
className={`list-materials ${
35+
disabled ? "list-materials--disabled" : ""
36+
}`}
37+
>
38+
<div className="list-materials__checkbox mr-32">
39+
<Checkbox isChecked={false} hiddenLabel label={`Select ${title}`} />
40+
</div>
41+
<div className="list-materials__content">
42+
<div className="list-materials__content-status">
43+
<StatusLabel {...statusMaterialType} />
44+
</div>
45+
<p className="text-header-h5 mt-8">{title}</p>
46+
<p className="text-small-caption">
47+
{author} ({year})
48+
</p>
49+
</div>
50+
<div className="list-materials__status">
51+
{statusMessage && (
52+
<span className="list-materials__status__note-desktop">
53+
{statusMessage}
54+
</span>
55+
)}
56+
<div>
57+
<div className="status-label status-label--neutral">
58+
Afleveres 27-04-2023
59+
</div>
60+
{statusMessage && (
61+
<span className="list-materials__status__note-mobile">
62+
{statusMessage}
63+
</span>
64+
)}
65+
<button
66+
type="button"
67+
className="list-reservation__note"
68+
aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
69+
>
70+
Go to material details
71+
</button>
72+
</div>
73+
</div>
4274
</div>
43-
)}
44-
<div className="list-materials__content">
45-
<div className="list-materials__content-status">
46-
<StatusLabel {...statusMaterialType} />
47-
<StatusLabel
48-
classNames="list-materials__content-status-label"
49-
{...statusDelivery}
50-
/>
75+
</li>
76+
<li>
77+
<div className="list-materials">
78+
<div className="list-materials__checkbox mr-32">
79+
<Checkbox
80+
callback={handleToggle}
81+
isChecked={isItChecked}
82+
hiddenLabel
83+
label={`Select ${title}`}
84+
/>
85+
</div>
86+
<div className="list-materials__content">
87+
<div className="list-materials__content-status">
88+
<div className="status-label status-label--outline">Bog</div>
89+
</div>
90+
<p className="text-header-h5 mt-8">{title}</p>
91+
<p className="text-small-caption">
92+
{author} ({year})
93+
</p>
94+
</div>
95+
<div className="list-materials__status">
96+
<div>
97+
<div className="status-label status-label--neutral">
98+
Afleveres 27-04-2023
99+
</div>
100+
<button
101+
type="button"
102+
className="list-reservation__note"
103+
aria-label="Go to Alt om håndarbejdes strikkemagasin material details"
104+
>
105+
Go to material details
106+
</button>
107+
</div>
108+
</div>
51109
</div>
52-
<p className="text-header-h5 mt-8">{title}</p>
53-
<p className="text-small-caption">{author}</p>
54-
</div>
55-
<div className="list-materials__status">
56-
{!canBeRenewed && (
57-
<span className="text-small-caption">
58-
Digitale materialer kan ikke fornys
59-
</span>
60-
)}
61-
<StatusLabel {...statusDelivery} />
62-
</div>
63-
</div>
110+
</li>
111+
</ul>
64112
);
65113
};

‎src/stories/Library/Lists/list-materials/list-materials.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,20 @@
4343
margin-top: 0;
4444
align-items: center;
4545
grid-gap: 16px;
46+
}
4647

47-
.text-small-caption {
48-
color: $c-text-secondary-gray;
48+
.list-materials__status__note-desktop {
49+
@extend %text-small-caption;
50+
display: none;
51+
@include breakpoint-s {
52+
display: flex;
53+
}
54+
}
55+
.list-materials__status__note-mobile {
56+
@extend %text-small-caption;
57+
display: flex;
58+
@include breakpoint-s {
59+
display: none;
4960
}
5061
}
5162

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { withDesign } from "storybook-addon-designs";
22
import { ComponentMeta, ComponentStory } from "@storybook/react";
3-
43
import { ModalLoan } from "./ModalLoan";
54

65
export default {

0 commit comments

Comments
 (0)