Skip to content

Commit b5e3d1c

Browse files
yepzdkyepzdk
committed
5388: Add block widt loans and reservations status
1 parent 1807b07 commit b5e3d1c

File tree

4 files changed

+227
-0
lines changed

4 files changed

+227
-0
lines changed

‎base.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
@import "./src/stories/Blocks/header/header";
7575
@import "./src/stories/Blocks/material-banner/material-banner";
7676
@import "./src/stories/Blocks/status-loans/status-loans";
77+
@import "./src/stories/Blocks/status-userprofile/status-userprofile";
7778
@import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
7879

7980
@import "./src/styles/scss/shared";

‎src/stories/Blocks/status-userprofile/status-userprofile.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.status-userprofile {
2+
display: flex;
3+
flex-direction: column;
4+
column-gap: 25px;
5+
6+
@include breakpoint-s {
7+
flex-direction: row;
8+
row-gap: 25px;
9+
}
10+
11+
&__column {
12+
flex-basis: 50%;
13+
display: flex;
14+
flex-direction: column;
15+
row-gap: 16px;
16+
}
17+
}

‎src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { ComponentMeta, ComponentStory } from "@storybook/react";
2+
import { StatusUserprofile as StatusUserprofileComp } from "./statusUserprofile";
3+
4+
export default {
5+
title: "Blocks / Userprofile / Loans and Reservations",
6+
component: StatusUserprofileComp,
7+
parameters: {
8+
design: {
9+
type: "figma",
10+
url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1060%3A56449",
11+
},
12+
layout: "fullscreen",
13+
allowFullscreen: true,
14+
},
15+
argTypes: {
16+
loansTitle: {
17+
control: { type: "object" },
18+
defaultValue: [
19+
{
20+
title: "Fysiske lån",
21+
href: "/",
22+
counter: "12",
23+
},
24+
],
25+
},
26+
loans: {
27+
control: { type: "object" },
28+
defaultValue: [
29+
{
30+
label: {
31+
label: "overskredet",
32+
status: "danger",
33+
},
34+
number: {
35+
label: 1,
36+
status: "danger",
37+
},
38+
title: "Afleveret for sent",
39+
showDot: true,
40+
},
41+
{
42+
label: {
43+
label: "Udløber snart",
44+
status: "warning",
45+
},
46+
number: {
47+
label: 3,
48+
status: "warning",
49+
},
50+
title: "Afleveres snart",
51+
showDot: true,
52+
},
53+
{
54+
number: {
55+
label: 8,
56+
status: "neutral",
57+
},
58+
title: "Længere afleveringstid",
59+
showDot: false,
60+
},
61+
],
62+
},
63+
reservationsTitle: {
64+
control: { type: "object" },
65+
defaultValue: [
66+
{
67+
title: "Reserveringer",
68+
href: "/",
69+
counter: "12",
70+
},
71+
],
72+
},
73+
reservations: {
74+
control: { type: "object" },
75+
defaultValue: [
76+
{
77+
label: {
78+
label: "klar til lån",
79+
status: "info",
80+
},
81+
number: {
82+
label: 2,
83+
status: "info",
84+
},
85+
title: "Klar til dig",
86+
showDot: true,
87+
},
88+
{
89+
number: {
90+
label: 10,
91+
status: "neutral",
92+
},
93+
title: "Stadig i kø",
94+
showDot: false,
95+
},
96+
],
97+
},
98+
},
99+
} as ComponentMeta<typeof StatusUserprofileComp>;
100+
101+
const Template: ComponentStory<typeof StatusUserprofileComp> = (args) => (
102+
<StatusUserprofileComp {...args} />
103+
);
104+
105+
export const StatusUserprofile = Template.bind({});
106+
107+
export const StatusUserprofileEmpty = Template.bind({});
108+
109+
StatusUserprofileEmpty.parameters = {
110+
design: {
111+
type: "figma",
112+
url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1064%3A56889",
113+
},
114+
layout: "fullscreen",
115+
allowFullscreen: true,
116+
};
117+
StatusUserprofileEmpty.argTypes = {
118+
loansTitle: {
119+
control: { type: "object" },
120+
defaultValue: [
121+
{
122+
title: "Fysiske lån",
123+
href: "/",
124+
counter: "0",
125+
},
126+
],
127+
},
128+
loans: {
129+
control: { type: "object" },
130+
defaultValue: [],
131+
},
132+
reservationsTitle: {
133+
control: { type: "object" },
134+
defaultValue: [
135+
{
136+
title: "Reserveringer",
137+
href: "/",
138+
counter: "0",
139+
},
140+
],
141+
},
142+
reservations: {
143+
control: { type: "object" },
144+
defaultValue: [],
145+
},
146+
};

‎src/stories/Blocks/status-userprofile/statusUserprofile.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import ListEmpty from "../../Library/Lists/list-empty/ListEmpty";
2+
import {
3+
ListDashboard,
4+
ListDashboardProps,
5+
} from "../../Library/Lists/list-dashboard/ListDashboard";
6+
import {
7+
LinkFilters,
8+
LinkFilter,
9+
} from "../../Library/link-filters/LinkFilters";
10+
11+
export type StatusUserprofileProps = {
12+
loansTitle: LinkFilter[];
13+
loans: ListDashboardProps[];
14+
reservationsTitle: LinkFilter[];
15+
reservations: ListDashboardProps[];
16+
};
17+
18+
export const StatusUserprofile = (props: StatusUserprofileProps) => {
19+
const { loansTitle, loans, reservationsTitle, reservations } = props;
20+
return (
21+
<div className="status-userprofile">
22+
<div className="status-userprofile__column">
23+
<LinkFilters filters={loansTitle} />
24+
25+
{loans.length ? (
26+
loans.map((item, index) => (
27+
<div key={index} className="status-userprofile__loans-list-item">
28+
<ListDashboard
29+
title={item.title}
30+
number={item.number}
31+
label={item.label}
32+
showDot={item.showDot}
33+
/>
34+
</div>
35+
))
36+
) : (
37+
<ListEmpty text="Du har i øjebilkket 0 fysiske lån" />
38+
)}
39+
</div>
40+
<div className="status-userprofile__column">
41+
<LinkFilters filters={reservationsTitle} />
42+
43+
{reservations.length ? (
44+
reservations.map((item, index) => (
45+
<div
46+
key={index}
47+
className="status-userprofile__reservation-list-item"
48+
>
49+
<ListDashboard
50+
title={item.title}
51+
number={item.number}
52+
label={item.label}
53+
showDot={item.showDot}
54+
/>
55+
</div>
56+
))
57+
) : (
58+
<ListEmpty text="Du har i øjebilkket 0 reserveringer" />
59+
)}
60+
</div>
61+
</div>
62+
);
63+
};

0 commit comments

Comments
 (0)