@eeacms/volto-clms-theme 1.0.77 → 1.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/components/CclCard/CclCard.jsx +140 -124
package/CHANGELOG.md CHANGED
@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [1.0.78](https://github.com/eea/volto-clms-theme/compare/1.0.77...1.0.78)
8
+
9
+ - refactor card link [`e3ab510`](https://github.com/eea/volto-clms-theme/commit/e3ab51012c21a1bc62e2600431aac225dbd76003)
10
+ - add link to the entire card [`aee0981`](https://github.com/eea/volto-clms-theme/commit/aee09811585c925a050347259bb10369c0ec4845)
11
+
7
12
  #### [1.0.77](https://github.com/eea/volto-clms-theme/compare/1.0.76...1.0.77)
8
13
 
14
+ > 3 March 2022
15
+
16
+ - Develop [`#222`](https://github.com/eea/volto-clms-theme/pull/222)
9
17
  - cardContainerBlock refactoring, remove cardBlock and make ImageEditor… [`#221`](https://github.com/eea/volto-clms-theme/pull/221)
10
18
  - fix image uploading workflow [`86c10e6`](https://github.com/eea/volto-clms-theme/commit/86c10e6b9bf2d0e82aa1415539d291d04b6f86e9)
11
19
  - cardContainerBlock refactoring, remove cardBlock and make ImageEditor reusable [`2292c6b`](https://github.com/eea/volto-clms-theme/commit/2292c6bdb11eeac3f99df080b096b2d923ed2926)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.0.77",
3
+ "version": "1.0.78",
4
4
  "description": "volto-clms-theme: Volto theme for CLMS site",
5
5
  "main": "src/index.js",
6
6
  "author": "CodeSyntax for the European Environment Agency",
package/src/components/CclCard/CclCard.jsx CHANGED
@@ -25,17 +25,23 @@ const CardImage = ({ card, size = 'preview', isCustomCard }) => {
25
25
  );
26
26
  };
27
27
 
28
- const CardLink = ({ url, title }) => {
28
+ const CardLink = ({ url, children, className, condition = true }) => {
29
29
  function hasProtocol(protocolUrl) {
30
30
  return (
31
31
  protocolUrl.startsWith('https://') || protocolUrl.startsWith('http://')
32
32
  );
33
33
  }
34
34
  const RenderElement = hasProtocol(url) ? 'a' : Link;
35
- return hasProtocol(url) ? (
36
- <RenderElement href={url}>{title || 'Card default title'}</RenderElement>
35
+ return !condition ? (
36
+ children
37
+ ) : hasProtocol(url) ? (
38
+ <RenderElement className={className} href={url}>
39
+ {children}
40
+ </RenderElement>
37
41
  ) : (
38
- <RenderElement to={url}>{title || 'Card default title'}</RenderElement>
42
+ <RenderElement className={className} to={url}>
43
+ {children}
44
+ </RenderElement>
39
45
  );
40
46
  };
41
47
 
@@ -99,136 +105,146 @@ function CclCard(props) {
99
105
  'threeColumns',
100
106
  'globalSearch',
101
107
  ];
108
+ const wrapperClass =
109
+ 'card-' + (type === 'globalSearch' ? 'doc' : type || 'line');
102
110
  return (
103
- <div
104
- tabIndex="0"
105
- role="button"
106
- onClick={() => onClickImage()}
107
- onKeyDown={() => onClickImage()}
108
- className={'card-' + (type === 'globalSearch' ? 'doc' : type || 'line')}
111
+ <CardLink
112
+ url={url}
113
+ className={wrapperClass}
114
+ condition={type === 'block' || type === 'threeColumns'}
109
115
  >
110
- {conditional_types.includes(type) ? (
111
- <>
112
- {type === 'doc' && (
113
- <>
114
- <DocCard card={card} url={url} showEditor={showEditor}>
115
- {children}
116
- </DocCard>
117
- </>
118
- )}
119
- {type === 'globalSearch' && (
120
- <>
121
- <Label ribbon="right" color="olive">
122
- {content_type}
123
- </Label>
124
- <DocCard card={card} url={url} showEditor={showEditor}>
125
- {children}
126
- </DocCard>
127
- </>
128
- )}
129
- {(type === 'block' || type === 'threeColumns') && (
130
- <>
131
- <div className={`card-${type}-image`}>
132
- {isCustomCard && CclImageEditor ? (
133
- CclImageEditor
134
- ) : (
135
- <CardImage
136
- isCustomCard={isCustomCard}
137
- card={card}
138
- size={'preview'}
139
- />
140
- )}
141
- </div>
142
- <div className="card-text">
143
- <div className="card-title">
144
- <CardLink url={url} title={card?.title} />
145
- </div>
146
- <div className="card-description">{card?.description}</div>
147
- {children}
148
- </div>
149
- </>
150
- )}
151
- {type === 'news' && (
152
- <>
153
- <div className="card-news-image">
154
- {isCustomCard && CclImageEditor ? (
155
- CclImageEditor
156
- ) : (
157
- <CardImage
158
- isCustomCard={isCustomCard}
159
- card={card}
160
- size={'mini'}
161
- />
162
- )}
163
- </div>
164
- <div className="card-news-text">
165
- <div className="card-news-title">
166
- <CardLink url={url} title={card?.title} />
167
- </div>
168
- <div className="card-news-date">
169
- {new Date(card?.effective).toLocaleString()}
116
+ <div
117
+ tabIndex="0"
118
+ role="button"
119
+ onClick={() => onClickImage()}
120
+ onKeyDown={() => onClickImage()}
121
+ className={
122
+ !(type === 'block' || type === 'threeColumns') && wrapperClass
123
+ }
124
+ >
125
+ {conditional_types.includes(type) ? (
126
+ <>
127
+ {type === 'doc' && (
128
+ <>
129
+ <DocCard card={card} url={url} showEditor={showEditor}>
130
+ {children}
131
+ </DocCard>
132
+ </>
133
+ )}
134
+ {type === 'globalSearch' && (
135
+ <>
136
+ <Label ribbon="right" color="olive">
137
+ {content_type}
138
+ </Label>
139
+ <DocCard card={card} url={url} showEditor={showEditor}>
140
+ {children}
141
+ </DocCard>
142
+ </>
143
+ )}
144
+ {(type === 'block' || type === 'threeColumns') && (
145
+ <>
146
+ <div className={`card-${type}-image`}>
147
+ {isCustomCard && CclImageEditor ? (
148
+ CclImageEditor
149
+ ) : (
150
+ <CardImage
151
+ isCustomCard={isCustomCard}
152
+ card={card}
153
+ size={'preview'}
154
+ />
155
+ )}
170
156
  </div>
171
- <p className="card-news-description">{card?.description}</p>
172
- </div>
173
- </>
174
- )}
175
- {type === 'event' && (
176
- <>
177
- <div className={'card-event-text'}>
178
- <div className="card-event-title">
179
- <CardLink url={url} title={card?.title} />
157
+ <div className="card-text">
158
+ <div className="card-title">{card?.title}</div>
159
+ <div className="card-description">{card?.description}</div>
160
+ {children}
180
161
  </div>
181
- <div className="card-event-when">
182
- <FontAwesomeIcon icon={['far', 'calendar-alt']} />
183
- <div className="card-event-when-text">
184
- <When
185
- start={card.start}
186
- end={card.whole_day ? card.start : card.end}
187
- whole_day={card.whole_day}
162
+ </>
163
+ )}
164
+ {type === 'news' && (
165
+ <>
166
+ <div className="card-news-image">
167
+ {isCustomCard && CclImageEditor ? (
168
+ CclImageEditor
169
+ ) : (
170
+ <CardImage
171
+ isCustomCard={isCustomCard}
172
+ card={card}
173
+ size={'mini'}
188
174
  />
175
+ )}
176
+ </div>
177
+ <div className="card-news-text">
178
+ <div className="card-news-title">
179
+ <CardLink url={url}>{card?.title}</CardLink>
180
+ {/* <CardLink url={url} title={card?.title} /> */}
189
181
  </div>
182
+ <div className="card-news-date">
183
+ {new Date(card?.effective).toLocaleString()}
184
+ </div>
185
+ <p className="card-news-description">{card?.description}</p>
190
186
  </div>
191
- {card?.location ? (
192
- <div className="card-event-where">
193
- <>
194
- <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
195
- <div className="card-event-where-text">
196
- {card?.location}
197
- </div>
198
- </>
187
+ </>
188
+ )}
189
+ {type === 'event' && (
190
+ <>
191
+ <div className={'card-event-text'}>
192
+ <div className="card-event-title">
193
+ <CardLink url={url}>{card?.title}</CardLink>
194
+ {/* <CardLink url={url} title={card?.title} /> */}
199
195
  </div>
200
- ) : (
201
- ''
202
- )}
203
- <p className="card-event-description">{card?.description}</p>
204
- </div>
205
- </>
206
- )}
207
- </>
208
- ) : (
209
- <>
210
- <div className="card-image">
211
- {isCustomCard && CclImageEditor ? (
212
- CclImageEditor
213
- ) : (
214
- <CardImage
215
- isCustomCard={isCustomCard}
216
- card={card}
217
- size={'mini'}
218
- />
196
+ <div className="card-event-when">
197
+ <FontAwesomeIcon icon={['far', 'calendar-alt']} />
198
+ <div className="card-event-when-text">
199
+ <When
200
+ start={card.start}
201
+ end={card.whole_day ? card.start : card.end}
202
+ whole_day={card.whole_day}
203
+ />
204
+ </div>
205
+ </div>
206
+ {card?.location ? (
207
+ <div className="card-event-where">
208
+ <>
209
+ <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
210
+ <div className="card-event-where-text">
211
+ {card?.location}
212
+ </div>
213
+ </>
214
+ </div>
215
+ ) : (
216
+ ''
217
+ )}
218
+ <p className="card-event-description">{card?.description}</p>
219
+ </div>
220
+ </>
219
221
  )}
220
- </div>
221
- <div className={'card-text'}>
222
- <div className="card-title">
223
- <CardLink url={url} title={card?.title} />
224
- {/* <Link to={url}>{card?.title || 'Card default title'}</Link> */}
222
+ </>
223
+ ) : (
224
+ <>
225
+ <div className="card-image">
226
+ {isCustomCard && CclImageEditor ? (
227
+ CclImageEditor
228
+ ) : (
229
+ <CardImage
230
+ isCustomCard={isCustomCard}
231
+ card={card}
232
+ size={'mini'}
233
+ />
234
+ )}
235
+ </div>
236
+ <div className={'card-text'}>
237
+ <div className="card-title">
238
+ <CardLink url={url}>{card?.title}</CardLink>
239
+ {/* <CardLink url={url} title={card?.title} /> */}
240
+ </div>
241
+ <div className="card-description">{card?.description}</div>
242
+ {children}
225
243
  </div>
226
- <div className="card-description">{card?.description}</div>
227
- {children}
228
- </div>
229
- </>
230
- )}
231
- </div>
244
+ </>
245
+ )}
246
+ </div>
247
+ </CardLink>
232
248
  );
233
249
  }
234
250