Skip to content

Commit 12dfdd6

Browse files
martim07833martim07833
authored
Merge pull request #219 from NIAEFEUP/component/card
Added card component
2 parents a52de27 + 2b9260a commit 12dfdd6

File tree

4 files changed

+228
-36
lines changed

4 files changed

+228
-36
lines changed

‎content-scripts/components/Card.tsx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import jsx from "texsaur";
3+
interface CardProps {
4+
id: string;
5+
title?: string;
6+
description?: string;
7+
imgSrc?: string;
8+
subtitles?: string[];
9+
button?: Element;
10+
}
11+
12+
const Card: JSX.Component<CardProps> = ({
13+
id,
14+
title,
15+
description,
16+
imgSrc,
17+
subtitles,
18+
button,
19+
}) => {
20+
const finalClassName = "se-card";
21+
return (
22+
<div className={finalClassName} id={id}>
23+
<div className="container">
24+
{title && description && imgSrc && subtitles && button ? (
25+
<div className="details">
26+
{imgSrc ? (
27+
<img className="img" src={imgSrc}></img>
28+
) : (
29+
" "
30+
)}
31+
{title ? <h2 className="title">{title}</h2> : " "}
32+
{subtitles && subtitles.length > 0
33+
? subtitles.map((subtitle) => {
34+
return (
35+
<div className="subtitles">
36+
{subtitle}
37+
</div>
38+
);
39+
})
40+
: " "}
41+
{description ? (
42+
<p className="description">{description}</p>
43+
) : (
44+
""
45+
)}
46+
{button ? button : " "}
47+
</div>
48+
) : (
49+
<div className="detailsalt">
50+
{imgSrc ? (
51+
<img className="img" src={imgSrc}></img>
52+
) : (
53+
" "
54+
)}
55+
<div className="other">
56+
<div className="textbox">
57+
{title ? (
58+
<h2 className="title">{title}</h2>
59+
) : (
60+
" "
61+
)}
62+
{description ? (
63+
<p className="description">{description}</p>
64+
) : (
65+
" "
66+
)}
67+
</div>
68+
<div className="buttonbox">
69+
{button ? button : " "}
70+
</div>
71+
</div>
72+
</div>
73+
)}
74+
</div>
75+
</div>
76+
);
77+
};
78+
79+
export default Card;

‎content-scripts/pages/components_page.tsx

+58-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import jsx from "texsaur";
33
import Button from "../components/Button";
44
import { Table } from "../components/Table";
55
import Icon from "../components/Icon";
6+
import Card from "../components/Card";
67
import { Accordion } from "../components/Accordion";
7-
8-
const components = ["Icon", "Button", "Table", "Accordion"];
9-
8+
const components = ["Icon", "Button", "Table", "Cards", "Accordion"];
109
export function createComponentsPage() {
1110
// TODO: remove this check
1211
if (!document.location.href.toLowerCase().includes("components")) {
@@ -209,6 +208,62 @@ export function createComponentsPage() {
209208
]}
210209
/>
211210
</Component>
211+
{/* Card */}
212+
<Component
213+
name="Card"
214+
description="Our card component, that allows the creation of cards with different styles."
215+
code={`<Card
216+
id="1"
217+
title="Default Card"
218+
description="I have all attributes possible (i.e; image, title, description, subtitles and a button)"
219+
subtitles={["One", "Two"]}
220+
imgSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThD4or2R-Tpyokw8NzJyn-LXt6R8YK9Sih5w&s"
221+
button ={<Button title="Button" variant="solid" size="sm" color="primary"/>}
222+
/>
223+
`}
224+
>
225+
<Card
226+
id="1"
227+
title="Default Card"
228+
description="I have all attributes possible (i.e; image, title, description, subtitles and a button)"
229+
subtitles={["One", "Two"]}
230+
imgSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThD4or2R-Tpyokw8NzJyn-LXt6R8YK9Sih5w&s"
231+
button={
232+
<Button
233+
title="Button"
234+
variant="solid"
235+
size="sm"
236+
color="primary"
237+
/>
238+
}
239+
/>
240+
<Card
241+
id="2"
242+
title="Alt Card 1"
243+
description="I don't have subtitles"
244+
imgSrc="https://preview.redd.it/i-once-found-a-silly-cat-picture-in-black-and-white-v0-tzn8uvux7vmd1.png?width=236&format=png&auto=webp&s=f17ce524ff01e70fce304712ca5bf58a194b5fbe"
245+
button={
246+
<Button
247+
title="Button"
248+
variant="solid"
249+
size="sm"
250+
color="primary"
251+
/>
252+
}
253+
/>
254+
<Card
255+
id="3"
256+
title="Alt Card 2"
257+
description="I don't have an image nor subtitles"
258+
button={
259+
<Button
260+
icon="ri-notification-line"
261+
radius="full"
262+
color="primary"
263+
/>
264+
}
265+
/>
266+
</Component>
212267

213268
{/* Accordion */}
214269
<Component

‎css/card.css

-10
This file was deleted.

‎css/components.css

+91-23
Original file line numberDiff line numberDiff line change
@@ -130,28 +130,96 @@
130130
}
131131
}
132132

133-
.se-card-header {
134-
display: flex;
135-
flex-direction: row;
136-
justify-content: space-between;
137-
align-items: center;
138-
width: 100%;
139-
cursor: pointer;
140-
}
141-
142-
.se-card-expand-button {
143-
background: inherit !important;
144-
border: none !important;
145-
padding: none !important;
146-
margin: none !important;
147-
box-shadow: none !important;
148-
}
149-
150-
.se-card-expand-button:hover {
151-
background: inherit !important;
152-
}
133+
/* Card Component */
134+
.se-card {
135+
.container {
136+
background-color: #eeeeee;
137+
max-width: 250px;
138+
border-radius: 20px;
139+
color: #8c2d19;
140+
}
141+
.details {
142+
padding-bottom: 16px;
143+
padding-left: 16px;
144+
padding-right: 16px;
145+
padding-top: 16px;
146+
147+
.title {
148+
font-size: 24px;
149+
font-weight: 600;
150+
color: #8c2d19;
151+
margin-top: 8px;
152+
margin-left: 8px;
153+
margin-bottom: 4px;
154+
}
155+
.subtitles {
156+
padding: 5px;
157+
background-color: #8c2d19;
158+
border-radius: 12px;
159+
margin-left: 8px;
160+
font-size: 15px;
161+
font-weight: 400;
162+
color: #eeeeee;
163+
display: inline-block;
164+
white-space: nowrap;
165+
}
166+
.description {
167+
font-size: 14px;
168+
color: #000000;
169+
line-height: 150%;
170+
margin-left: 8px;
171+
margin-right: 8px;
172+
}
173+
.img {
174+
width: 100%;
175+
border-radius: 12px;
176+
height: 214px;
177+
object-fit: cover;
178+
}
179+
.se-button {
180+
margin: 0% auto;
181+
}
182+
}
153183

154-
.se-expandable-card-wrapper {
155-
overflow: hidden;
156-
transition: max-height 300ms ease-in-out;
184+
.detailsalt {
185+
.img {
186+
width: 100%;
187+
border-top-left-radius: 12px;
188+
border-top-right-radius: 12px;
189+
height: 150px;
190+
width: 250px;
191+
object-fit: cover;
192+
}
193+
.other {
194+
display: flex;
195+
.textbox {
196+
padding: 8px;
197+
.title {
198+
font-size: 20px;
199+
font-weight: 600;
200+
margin: 0% auto;
201+
margin-left: 8px;
202+
}
203+
.description {
204+
font-size: 14px;
205+
color: grey;
206+
line-height: 150%;
207+
margin-top: 0px;
208+
margin-bottom: 0px;
209+
margin-left: 8px;
210+
margin-right: 8px;
211+
}
212+
}
213+
.buttonbox {
214+
padding-left: 0px;
215+
padding-right: 8px;
216+
padding-top: 8px;
217+
padding-bottom: 8px;
218+
.se-button {
219+
margin: 0% auto;
220+
margin-top: 12px;
221+
}
222+
}
223+
}
224+
}
157225
}

0 commit comments

Comments
 (0)