Skip to content

Commit 8968346

Browse files
francescozaiafrancescozaia
committed
Introduces a unique return Tag, adds interactive component
1 parent ac5c763 commit 8968346

File tree

3 files changed

+157
-244
lines changed

3 files changed

+157
-244
lines changed

‎.editorconfig

+1-14
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,16 @@ root = true
33

44
[*]
55
indent_style = space
6-
indent_size = 4
6+
indent_size = 2
77
end_of_line = lf
88
charset = utf-8
99
trim_trailing_whitespace = true
1010
insert_final_newline = true
1111

12-
# Use 4 spaces for the Python files
13-
[*.py]
14-
indent_size = 4
15-
max_line_length = 80
16-
1712
# The JSON files contain newlines inconsistently
1813
[*.json]
1914
insert_final_newline = true
2015

21-
# Makefiles always use tabs for indentation
22-
[Makefile]
23-
indent_style = tab
24-
25-
# Batch files use tabs for indentation
26-
[*.bat]
27-
indent_style = tab
28-
2916
[*.md]
3017
trim_trailing_whitespace = false
3118

‎src/components/Card/Card.js

+91-212
Original file line numberDiff line numberDiff line change
@@ -7,244 +7,123 @@ import { Icon, Button } from '../../../src'
77
const propTypes = {
88
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
99
className: PropTypes.node,
10-
title: PropTypes.node,
11-
text: PropTypes.node,
12-
shade: PropTypes.node,
13-
big: PropTypes.node,
14-
after: PropTypes.node,
15-
space: PropTypes.node,
16-
article: PropTypes.node,
17-
category: PropTypes.node,
18-
signature: PropTypes.node,
19-
date: PropTypes.node,
20-
link: PropTypes.node,
21-
icon: PropTypes.node,
22-
name: PropTypes.node,
23-
iconName: PropTypes.node,
24-
tagCard: PropTypes.node,
25-
tagName: PropTypes.node,
26-
image: PropTypes.node,
27-
imageTitle: PropTypes.node,
28-
specialCard: PropTypes.node
10+
isBig: PropTypes.bool,
11+
hasShade: PropTypes.bool,
12+
hasSpace: PropTypes.bool,
13+
hasCTA: PropTypes.bool,
14+
hasLinkOnTitle: PropTypes.bool,
15+
isIconCard: PropTypes.bool,
16+
isSpecialCard: PropTypes.bool,
17+
isArticleCard: PropTypes.bool,
18+
title: PropTypes.string,
19+
text: PropTypes.string,
20+
after: PropTypes.string,
21+
articleCategoryName: PropTypes.string,
22+
articleCategoryLink: PropTypes.string,
23+
articleDate: PropTypes.string,
24+
signature: PropTypes.string,
25+
link: PropTypes.string,
26+
iconName: PropTypes.string,
27+
tags: PropTypes.array,
28+
imageSrc: PropTypes.string,
29+
imageTitle: PropTypes.string,
30+
imageAlt: PropTypes.string
2931
}
3032

3133
const defaultProps = {
3234
tag: 'div',
33-
link: '#'
35+
link: false
3436
}
3537

3638
class Card extends React.Component {
3739
render () {
3840
const {
39-
className,
40-
tag: Tag,
41-
title,
42-
text,
43-
shade,
44-
big,
45-
after,
46-
space,
47-
article,
48-
category,
49-
signature,
50-
date,
51-
link,
52-
icon,
53-
name,
54-
iconName,
55-
tagCard,
56-
tagName,
57-
image,
58-
imageTitle,
59-
specialCard,
60-
...attributes
41+
tag: Tag
6142
} = this.props
6243

6344
const cardWrapperClasses = classNames(
64-
space ? 'card-space' : false,
45+
this.props.hasSpace ? 'card-space' : false,
6546
'card-wrapper'
6647
)
6748
const innerCardWrapperClasses = classNames(
68-
shade ? 'card-bg' : false,
69-
big ? 'card-big' : false,
70-
after ? 'no-after' : false,
49+
this.props.hasShade ? 'card-bg' : false,
50+
this.props.isBig ? 'card-big' : false,
51+
this.props.imageSrc ? 'card-img' : false,
52+
this.props.isSpecialCard ? 'special-card' : false,
53+
this.props.after ? 'no-after' : false,
7154
'card'
7255
)
73-
if (shade || space) {
74-
return (
75-
<Tag className={cardWrapperClasses} {...attributes}>
76-
<div className={innerCardWrapperClasses}>
77-
<div className='card-body'>
78-
<h5 className='card-title'>{this.props.title}</h5>
79-
<p className='card-text'>{this.props.text}</p>
80-
<a className='read-more' href={this.props.link}>
81-
<span className='text'>Leggi di più</span>
82-
<Icon icon={'it-arrow-right'} />
83-
</a>
84-
</div>
85-
</div>
86-
</Tag>
87-
)
88-
}
89-
if (icon) {
90-
return (
91-
<Tag className={cardWrapperClasses} {...attributes}>
92-
<div className={innerCardWrapperClasses}>
93-
<div className='card-body'>
94-
<div className='categoryicon-top'>
95-
<Icon icon={this.props.iconName} />
96-
<span className='text'>
97-
{this.props.category}
98-
<br />
99-
{this.props.name}
100-
</span>
101-
</div>
102-
<a href={this.props.link}>
103-
<h5 className='card-title'>
104-
{this.props.title}
105-
</h5>
106-
</a>
107-
<p className='card-text'>{this.props.text}</p>
108-
</div>
109-
</div>
110-
</Tag>
111-
)
112-
}
113-
if (article) {
114-
return (
115-
<Tag className={cardWrapperClasses} {...attributes}>
116-
<div className={innerCardWrapperClasses}>
117-
<div className='card-body'>
118-
<div className='category-top'>
119-
<a className='category' href={this.props.link}>
120-
{this.props.category}
121-
</a>
122-
<span className='data'>{this.props.date}</span>
123-
</div>
124-
<h5 className='card-title big-heading'>
125-
{this.props.title}
126-
</h5>
127-
<p className='card-text'>{this.props.text} </p>
128-
<span className='card-signature'>
129-
{this.props.signature}
130-
</span>
131-
<a className='read-more' href={this.props.link}>
132-
<span className='text'>Leggi di più</span>
133-
<Icon icon={'it-arrow-right'} />
134-
</a>
135-
</div>
136-
</div>
137-
</Tag>
138-
)
139-
}
140-
if (big && tagCard) {
141-
return (
142-
<div className='card-wrapper card-space'>
143-
<div className='card card-bg card-big no-after'>
144-
<div className='card-body'>
145-
<div className='head-tags'>
146-
<a className='card-tag' href={this.props.link}>
147-
{this.props.tagName}
148-
</a>
149-
<span className='data'>{this.props.date}</span>
150-
</div>
151-
<h5 className='card-title'>{this.props.title}</h5>
152-
<p className='card-text'>{this.props.text}</p>
153-
<div className='it-card-footer'>
154-
<span className='card-signature'>
155-
{this.props.signature}
156-
</span>
157-
<Button outline color='primary' size='sm'>
158-
Action
159-
</Button>
160-
</div>
161-
</div>
162-
</div>
163-
</div>
164-
)
165-
}
16656

167-
if (big) {
168-
return (
169-
<div className='card-wrapper card-space'>
170-
<div className='card card-bg card-big'>
171-
<div className='card-body'>
172-
<div className='top-icon'>
173-
<Icon icon={this.props.iconName} />
174-
</div>
175-
<h5 className='card-title'>{this.props.title}</h5>
176-
<p className='card-text'>{this.props.text}</p>
177-
<a className='read-more' href={this.props.link}>
178-
<span className='text'>Leggi di più</span>
179-
<Icon icon={'it-arrow-right'} />
180-
</a>
181-
</div>
182-
</div>
183-
</div>
184-
)
185-
}
186-
if (image && specialCard) {
187-
return (
188-
<div className='card-wrapper'>
189-
<a
190-
className='card card-img no-after special-card'
191-
href={this.props.link}
192-
>
193-
<div className='img-responsive-wrapper'>
194-
<div className='img-responsive'>
195-
<div className='img-wrapper'>
196-
<img
197-
src={this.props.image}
198-
title={this.props.imageTitle}
199-
alt='imagealt'
200-
/>
201-
</div>
202-
</div>
203-
</div>
204-
<div className='card-body'>
205-
<div className='head-tags'>
206-
<span className='data'>{this.props.date}</span>
207-
</div>
208-
<h5 className='card-title'>{this.props.title}</h5>
209-
</div>
210-
</a>
57+
const iconTag = (this.props.isIconCard)
58+
? <div className='categoryicon-top'>
59+
<Icon icon={this.props.iconName} />
60+
<span className='text'>{this.props.articleCategoryName}</span>
61+
</div> : false
62+
let titleTag = <h5 className='card-title'>{this.props.title}</h5>
63+
const imageTag = (this.props.imageSrc)
64+
? <div className='img-responsive-wrapper'>
65+
<div className='img-responsive'>
66+
<figure className='img-wrapper'>
67+
<img src={this.props.imageSrc}
68+
title={this.props.imageTitle}
69+
alt={this.props.imageAlt} />
70+
</figure>
21171
</div>
212-
)
72+
</div> : false
73+
const dateTag = (this.props.articleDate)
74+
? <span className='data'>{this.props.articleDate}</span> : false
75+
const signatureTag = (this.props.signature) ? <span
76+
className='card-signature'>{this.props.signature}</span> : false
77+
const callToActionTag = (this.props.hasCTA)
78+
? <Button outline color='primary' size='sm'>Action</Button> : false
79+
const cardFooterTag = (signatureTag || callToActionTag)
80+
? <div className='it-card-footer'>
81+
{signatureTag}
82+
{callToActionTag}
83+
</div> : false
84+
85+
let cardHeaderTag
86+
let readMoreTag
87+
88+
if (this.props.link) {
89+
if (this.props.hasLinkOnTitle) {
90+
titleTag = <a href={this.props.link}>
91+
<h5 className='card-title'>{this.props.title}</h5>
92+
</a>
93+
} else {
94+
readMoreTag = <a className='read-more' href={this.props.link}>
95+
<span className='text'>Leggi di più</span>
96+
<Icon icon={'it-arrow-right'} />
97+
</a>
98+
}
21399
}
214-
if (image) {
215-
return (
216-
<div className='card-wrapper'>
217-
<div className='card card-img no-after'>
218-
<div className='img-responsive-wrapper'>
219-
<div className='img-responsive'>
220-
<figure className='img-wrapper'>
221-
<img
222-
src={this.props.image}
223-
title={this.props.imageTitle}
224-
alt='ExampleImage'
225-
/>
226-
</figure>
227-
</div>
228-
</div>
229-
<div className='card-body'>
230-
<h5 className='card-title'>{this.props.title}</h5>
231-
<p className='card-text' />
232-
<a className='read-more' href={this.props.link}>
233-
<span className='text'>Leggi di più</span>
234-
<Icon icon={'it-arrow-right'} />
235-
</a>
236-
</div>
237-
</div>
238-
</div>
239-
)
100+
101+
if (this.props.isArticleCard) {
102+
cardHeaderTag = <div className='category-top'>
103+
<a className='category'
104+
href='{this.props.articleCategoryLink}'>{this.props.articleCategoryName}</a>
105+
{dateTag}
106+
</div>
107+
} else if (this.props.tags && this.props.tags.split(',').length) {
108+
cardHeaderTag = <div className='head-tags'>
109+
{this.props.tags.split(',').map((item, index) => (
110+
<span className='card-tag' key={index}>{item}</span>
111+
))}
112+
{dateTag}
113+
</div>
240114
}
241115

242116
return (
243-
<Tag className={cardWrapperClasses} {...attributes}>
117+
<Tag className={cardWrapperClasses}>
244118
<div className={innerCardWrapperClasses}>
119+
{imageTag}
245120
<div className='card-body'>
246-
<h5 className='card-title'>{this.props.title}</h5>
121+
{cardHeaderTag}
122+
{iconTag}
123+
{titleTag}
247124
<p className='card-text'>{this.props.text}</p>
125+
{cardFooterTag}
126+
{readMoreTag}
248127
</div>
249128
</div>
250129
</Tag>

0 commit comments

Comments
 (0)