@kitconcept/volto-light-theme 7.0.0-beta.5 → 7.0.0-beta.7

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 (14) hide show
  1. package/.changelog.draft +5 -7
  2. package/CHANGELOG.md +18 -0
  3. package/package.json +1 -1
  4. package/src/components/Blocks/Listing/DefaultTemplate.jsx +2 -1
  5. package/src/components/Blocks/Listing/GridTemplate.jsx +13 -12
  6. package/src/components/Blocks/Listing/SummaryTemplate.jsx +2 -2
  7. package/src/components/Blocks/Teaser/DefaultBody.tsx +7 -6
  8. package/src/components/Summary/DefaultSummary.tsx +5 -0
  9. package/src/components/Theming/Theming.tsx +1 -1
  10. package/src/theme/blocks/_accordion.scss +3 -0
  11. package/src/theme/blocks/_grid.scss +36 -22
  12. package/src/theme/blocks/_search.scss +2 -0
  13. package/src/theme/card.scss +2 -2
  14. package/src/theme/person.scss +65 -27
package/.changelog.draft CHANGED
@@ -1,15 +1,13 @@
1
- ## 7.0.0-beta.5 (2025-09-18)
1
+ ## 7.0.0-beta.7 (2025-09-24)
2
2
 
3
3
  ### Feature
4
4
 
5
- - Add Refresh Content button for slider block and cypress test for the same @Tishasoumya-02
5
+ - Make it possible for custom Summary components to disable being linked. @davisagli
6
6
 
7
7
  ### Bugfix
8
8
 
9
- - Fix slider button - Improve button mixing for RAC buttons. @sneridagh [#663](https://github.com/kitconcept/volto-light-theme/pull/663)
10
-
11
- ### Internal
12
-
13
- - Fix A11y headlines Unique headings in example content @iRohitSingh [#661](https://github.com/kitconcept/volto-light-theme/pull/661)
9
+ - Enable add block button in accordion block @iRohitSingh [#668](https://github.com/kitconcept/volto-light-theme/pull/668)
10
+ - Safely check for `voltolighttheme.theme` behavior on Theming component. @ericof [#671](https://github.com/kitconcept/volto-light-theme/pull/671)
11
+ - Fix styles for person listing in Search block grid variation. @danalvrz
14
12
 
15
13
 
package/CHANGELOG.md CHANGED
@@ -8,6 +8,24 @@
8
8
 
9
9
  <!-- towncrier release notes start -->
10
10
 
11
+ ## 7.0.0-beta.7 (2025-09-24)
12
+
13
+ ### Feature
14
+
15
+ - Make it possible for custom Summary components to disable being linked. @davisagli
16
+
17
+ ### Bugfix
18
+
19
+ - Enable add block button in accordion block @iRohitSingh [#668](https://github.com/kitconcept/volto-light-theme/pull/668)
20
+ - Safely check for `voltolighttheme.theme` behavior on Theming component. @ericof [#671](https://github.com/kitconcept/volto-light-theme/pull/671)
21
+ - Fix styles for person listing in Search block grid variation. @danalvrz
22
+
23
+ ## 7.0.0-beta.6 (2025-09-22)
24
+
25
+ ### Bugfix
26
+
27
+ - Fix styles for H3 headings in slate grids. @danalvrz
28
+
11
29
  ## 7.0.0-beta.5 (2025-09-18)
12
30
 
13
31
  ### Feature
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kitconcept/volto-light-theme",
3
- "version": "7.0.0-beta.5",
3
+ "version": "7.0.0-beta.7",
4
4
  "description": "Volto Light Theme by kitconcept",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/components/Blocks/Listing/DefaultTemplate.jsx CHANGED
@@ -31,6 +31,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
31
31
  name: 'Summary',
32
32
  dependencies: [item['@type']],
33
33
  }).component || DefaultSummary;
34
+ const showLink = !Summary.hideLink && !isEditMode;
34
35
  return (
35
36
  <div
36
37
  className={cx('listing-item', {
@@ -38,7 +39,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
38
39
  })}
39
40
  key={item['@id']}
40
41
  >
41
- <Card href={!isEditMode ? item['@id'] : null}>
42
+ <Card href={showLink ? item['@id'] : null}>
42
43
  <Card.Summary>
43
44
  <Summary item={item} HeadingTag="h2" />
44
45
  </Card.Summary>
package/src/components/Blocks/Listing/GridTemplate.jsx CHANGED
@@ -26,18 +26,19 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
26
26
  <>
27
27
  <div className="items">
28
28
  {items.map((item) => {
29
- const ItemBodyTemplate = (props) => {
30
- const CustomItemBodyTemplate = config.getComponent({
31
- name: 'GridListingItemTemplate',
29
+ const CustomItemBodyTemplate = config.getComponent({
30
+ name: 'GridListingItemTemplate',
31
+ dependencies: [item['@type']],
32
+ }).component;
33
+ const Summary =
34
+ config.getComponent({
35
+ name: 'Summary',
32
36
  dependencies: [item['@type']],
33
- }).component;
34
- const Summary =
35
- config.getComponent({
36
- name: 'Summary',
37
- dependencies: [item['@type']],
38
- }).component || DefaultSummary;
37
+ }).component || DefaultSummary;
38
+ const showLink = !Summary.hideLink && !isEditMode;
39
39
 
40
- return CustomItemBodyTemplate ? (
40
+ const ItemBodyTemplate = (props) =>
41
+ CustomItemBodyTemplate ? (
41
42
  <CustomItemBodyTemplate item={item} />
42
43
  ) : (
43
44
  <>
@@ -53,7 +54,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
53
54
  </Card.Summary>
54
55
  </>
55
56
  );
56
- };
57
+
57
58
  return (
58
59
  <div
59
60
  className={cx('listing-item', {
@@ -61,7 +62,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
61
62
  })}
62
63
  key={item['@id']}
63
64
  >
64
- <Card href={!isEditMode ? item['@id'] : null}>
65
+ <Card href={showLink ? item['@id'] : null}>
65
66
  <ItemBodyTemplate item={item} />
66
67
  </Card>
67
68
  </div>
package/src/components/Blocks/Listing/SummaryTemplate.jsx CHANGED
@@ -34,7 +34,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
34
34
  name: 'Summary',
35
35
  dependencies: [item['@type']],
36
36
  }).component || DefaultSummary;
37
-
37
+ const showLink = !Summary.hideLink && !isEditMode;
38
38
  const ItemBodyTemplate = (props) =>
39
39
  CustomItemBodyTemplate ? (
40
40
  <CustomItemBodyTemplate item={item} />
@@ -57,7 +57,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
57
57
  })}
58
58
  key={item['@id']}
59
59
  >
60
- <Card href={!isEditMode ? item['@id'] : null}>
60
+ <Card href={showLink ? item['@id'] : null}>
61
61
  <ItemBodyTemplate item={item} />
62
62
  </Card>
63
63
  </div>
package/src/components/Blocks/Teaser/DefaultBody.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { isInternalURL } from '@plone/volto/helpers/Url/Url';
2
2
  import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
3
+ import type { SummaryComponentType } from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
3
4
  import Card from '../../../primitives/Card/Card';
4
5
  import config from '@plone/volto/registry';
5
6
 
@@ -10,11 +11,11 @@ const TeaserDefaultTemplate = (props) => {
10
11
  const url = data.preview_image?.[0]?.['@id'];
11
12
 
12
13
  const Image = config.getComponent('Image').component;
13
- const Summary =
14
- config.getComponent({
15
- name: 'Summary',
16
- dependencies: [href['@type']],
17
- }).component || DefaultSummary;
14
+ const Summary = (config.getComponent({
15
+ name: 'Summary',
16
+ dependencies: [href['@type']],
17
+ }).component || DefaultSummary) as SummaryComponentType;
18
+ const showLink = !Summary.hideLink && !isEditMode;
18
19
  const { openExternalLinkInNewTab } = config.settings;
19
20
  const openLinkInNewTab =
20
21
  data.openLinkInNewTab ||
@@ -23,7 +24,7 @@ const TeaserDefaultTemplate = (props) => {
23
24
 
24
25
  return (
25
26
  <Card
26
- href={!isEditMode ? href['@id'] : null}
27
+ href={showLink ? href['@id'] : null}
27
28
  openLinkInNewTab={openLinkInNewTab}
28
29
  >
29
30
  <Card.Image
package/src/components/Summary/DefaultSummary.tsx CHANGED
@@ -8,6 +8,10 @@ export type DefaultSummaryProps = {
8
8
  hide_description?: boolean;
9
9
  };
10
10
 
11
+ export type SummaryComponentType = React.ComponentType<DefaultSummaryProps> & {
12
+ hideLink?: boolean;
13
+ };
14
+
11
15
  const DefaultSummary = (props: DefaultSummaryProps) => {
12
16
  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
13
17
  return (
@@ -20,5 +24,6 @@ const DefaultSummary = (props: DefaultSummaryProps) => {
20
24
  </>
21
25
  );
22
26
  };
27
+ DefaultSummary.hideLink = false;
23
28
 
24
29
  export default DefaultSummary;
package/src/components/Theming/Theming.tsx CHANGED
@@ -48,7 +48,7 @@ const Theming = ({ content }: { content: Content }) => {
48
48
  const addingFromInherited =
49
49
  location.pathname.endsWith('/add') &&
50
50
  flattenToAppURL(
51
- content?.['@components']?.inherit?.['voltolighttheme.theme'].from['@id'],
51
+ content?.['@components']?.inherit?.['voltolighttheme.theme']?.from['@id'],
52
52
  ) === getBaseUrl(location.pathname);
53
53
 
54
54
  let liveContent;
package/src/theme/blocks/_accordion.scss CHANGED
@@ -5,6 +5,9 @@
5
5
 
6
6
  .accordion-block,
7
7
  .block-editor-accordion {
8
+ .block-add-button {
9
+ display: block !important;
10
+ }
8
11
  .ui.styled.accordion {
9
12
  border-top: 1px solid $black;
10
13
 
package/src/theme/blocks/_grid.scss CHANGED
@@ -60,18 +60,18 @@
60
60
  height: 100%;
61
61
 
62
62
  .image-wrapper {
63
- margin-bottom: 40px;
63
+ margin-bottom: $spacing-medium;
64
64
 
65
65
  img {
66
66
  position: relative;
67
67
  }
68
68
  }
69
69
  .content {
70
- padding: 0 20px 20px 20px;
70
+ padding: 0 $spacing-small $spacing-small $spacing-small;
71
71
  @include body-text();
72
72
 
73
73
  .headline {
74
- margin-bottom: 20px;
74
+ margin-bottom: $spacing-small;
75
75
  letter-spacing: 1px;
76
76
  text-transform: uppercase;
77
77
  @include headtitle1();
@@ -79,12 +79,12 @@
79
79
 
80
80
  h2 {
81
81
  padding: 0;
82
- margin-bottom: 20px !important;
82
+ margin-bottom: $spacing-small !important;
83
83
  @include text-heading-h3();
84
84
  }
85
85
 
86
86
  p {
87
- margin-bottom: 20px;
87
+ margin-bottom: $spacing-small;
88
88
  }
89
89
  }
90
90
  }
@@ -105,7 +105,7 @@
105
105
  }
106
106
 
107
107
  .slate:not(.inner) {
108
- padding: 40px 20px 20px 20px;
108
+ padding: $spacing-medium $spacing-small $spacing-small $spacing-small;
109
109
  margin: 0;
110
110
  p {
111
111
  padding: 0;
@@ -137,7 +137,7 @@
137
137
  margin: 0;
138
138
 
139
139
  .title {
140
- margin: 0 0 20px 0;
140
+ margin: 0 0 $spacing-small 0;
141
141
  color: $white !important;
142
142
  letter-spacing: 0;
143
143
  @include text-heading-h3();
@@ -190,7 +190,7 @@
190
190
  }
191
191
  }
192
192
  h2 {
193
- margin-bottom: 40px !important;
193
+ margin-bottom: $spacing-medium !important;
194
194
  }
195
195
  &.previous--is--same--block-type.previous--has--same--backgroundColor:not(
196
196
  .has--headline
@@ -227,9 +227,9 @@
227
227
  }
228
228
  }
229
229
  .card-summary {
230
- padding-top: 40px;
230
+ padding-top: $spacing-medium;
231
231
  h3 {
232
- margin-bottom: 20px !important;
232
+ margin-bottom: $spacing-small !important;
233
233
  }
234
234
  }
235
235
  }
@@ -243,7 +243,7 @@
243
243
  .block.listing {
244
244
  .listing-item {
245
245
  &:last-child {
246
- padding-bottom: 0px !important;
246
+ padding-bottom: 0 !important;
247
247
  }
248
248
  }
249
249
  .pagination-wrapper {
@@ -263,7 +263,7 @@
263
263
  .block.listing {
264
264
  .listing-item {
265
265
  &:last-child {
266
- padding-bottom: 0px !important;
266
+ padding-bottom: 0 !important;
267
267
  }
268
268
  }
269
269
  }
@@ -295,15 +295,19 @@
295
295
  @media only screen and (min-width: $largest-mobile-screen) {
296
296
  .one {
297
297
  .block.teaser .teaser-item .content h2 {
298
- margin-bottom: 40px !important;
298
+ margin-bottom: $spacing-medium !important;
299
299
  @include text-heading-h2();
300
300
  }
301
301
 
302
302
  .slate {
303
303
  h2 {
304
- margin-bottom: 40px !important;
304
+ margin-bottom: $spacing-medium !important;
305
305
  @include text-heading-h2();
306
306
  }
307
+
308
+ h3 {
309
+ margin-bottom: $spacing-small !important;
310
+ }
307
311
  }
308
312
 
309
313
  .image {
@@ -320,7 +324,7 @@
320
324
  .teaser {
321
325
  .teaser-item .content {
322
326
  h2 {
323
- margin-bottom: 20px !important;
327
+ margin-bottom: $spacing-small !important;
324
328
  @include text-heading-h3();
325
329
  }
326
330
  }
@@ -330,7 +334,7 @@
330
334
  .title {
331
335
  @include text-heading-h3();
332
336
  @include word-break();
333
- margin: 0 0 20px 0;
337
+ margin: 0 0 $spacing-small 0;
334
338
  }
335
339
  }
336
340
  figure:after {
@@ -339,9 +343,14 @@
339
343
  }
340
344
  .slate {
341
345
  h2 {
342
- margin-bottom: 20px !important;
346
+ margin-bottom: $spacing-small !important;
343
347
  @include text-heading-h3();
344
348
  }
349
+
350
+ h3 {
351
+ margin-bottom: $spacing-small !important;
352
+ @include text-heading-h4();
353
+ }
345
354
  }
346
355
  }
347
356
 
@@ -349,14 +358,14 @@
349
358
  .teaser {
350
359
  .teaser-item {
351
360
  .image-wrapper {
352
- margin-bottom: 20px !important;
361
+ margin-bottom: $spacing-small !important;
353
362
  }
354
363
  .content {
355
364
  .headline {
356
365
  @include headtitle2();
357
366
  }
358
367
  h2 {
359
- margin-bottom: 20px !important;
368
+ margin-bottom: $spacing-small !important;
360
369
  @include text-heading-h4();
361
370
  }
362
371
  p {
@@ -382,7 +391,12 @@
382
391
 
383
392
  .slate {
384
393
  h2 {
385
- margin-bottom: 20px !important;
394
+ margin-bottom: $spacing-small !important;
395
+ @include text-heading-h3();
396
+ }
397
+
398
+ h3 {
399
+ margin-bottom: $spacing-small !important;
386
400
  @include text-heading-h4();
387
401
  }
388
402
 
@@ -390,7 +404,7 @@
390
404
  margin-bottom: 0;
391
405
  }
392
406
 
393
- padding-top: 20px !important;
407
+ padding-top: $spacing-small !important;
394
408
  }
395
409
  }
396
410
  }
@@ -402,7 +416,7 @@
402
416
  }
403
417
 
404
418
  .block.gridBlock h2.title {
405
- margin-bottom: 20px !important;
419
+ margin-bottom: $spacing-small !important;
406
420
  }
407
421
 
408
422
  // Watch out for the following rule, it is used to override the default
package/src/theme/blocks/_search.scss CHANGED
@@ -77,7 +77,9 @@
77
77
 
78
78
  .search-input {
79
79
  position: relative;
80
+ display: block;
80
81
  height: 75px;
82
+ padding-right: $spacing-xlarge;
81
83
  background-color: $secondary-grey;
82
84
 
83
85
  .ui.input {
package/src/theme/card.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  transition: box-shadow 0.15s ease;
4
4
  }
5
5
 
6
- .card:has(a):hover,
7
- .card:has(a):focus-within {
6
+ .card:has(> a):hover,
7
+ .card:has(> a):focus-within {
8
8
  cursor: pointer;
9
9
  }
10
10
 
package/src/theme/person.scss CHANGED
@@ -227,37 +227,72 @@ body .block.gridBlock .contained .person-teaser .card-inner {
227
227
  .description {
228
228
  margin-bottom: $spacing-small;
229
229
  }
230
+
231
+ .summary-extra-info.email {
232
+ a {
233
+ width: auto;
234
+ }
235
+ svg.icon {
236
+ margin-right: 8px;
237
+ }
238
+ }
230
239
  }
231
240
  }
232
- }
233
241
 
234
- .block.listing.grid .listing-item.person-listing {
235
- .card {
236
- background: var(--theme-color);
237
- }
238
- .image-wrapper {
239
- margin: 0 auto;
240
- }
241
- .listing-item {
242
- &,
243
- & a {
244
- align-items: inherit;
242
+ &:not(.grid) .listing-item.person-listing {
243
+ .summary-room-phone {
244
+ justify-content: flex-start;
245
+ gap: 0;
246
+ .summary-extra-info {
247
+ &:not(:last-child)::after {
248
+ margin: 0 7px 0 10px;
249
+ content: '|';
250
+ }
251
+ }
245
252
  }
246
253
  }
247
- .card-summary {
248
- padding-right: 0px !important;
249
- padding-left: 0px !important;
250
- text-align: center;
254
+ }
251
255
 
252
- .description {
253
- margin-bottom: $spacing-small !important;
256
+ .block.listing.grid,
257
+ .block.search.grid {
258
+ .listing-item.person-listing {
259
+ .card {
260
+ background: var(--theme-color);
254
261
  }
255
- }
262
+ .image-wrapper {
263
+ margin: 0 auto;
264
+ }
265
+ .listing-item {
266
+ &,
267
+ & a {
268
+ align-items: inherit;
269
+ }
270
+ }
271
+ .card-summary {
272
+ padding-right: 0px !important;
273
+ padding-left: 0px !important;
274
+ text-align: center;
256
275
 
257
- .summary-extra-info,
258
- .summary-room-phone {
259
- display: inline-flex;
260
- justify-content: center;
276
+ .description {
277
+ margin-bottom: $spacing-small !important;
278
+ }
279
+ }
280
+
281
+ .summary-extra-info {
282
+ justify-content: center;
283
+ }
284
+ .summary-room-phone {
285
+ display: inline-flex;
286
+ }
287
+
288
+ .summary-extra-info.email {
289
+ svg.icon {
290
+ margin-right: 10px;
291
+ }
292
+ a {
293
+ width: auto;
294
+ }
295
+ }
261
296
  }
262
297
  }
263
298
 
@@ -308,10 +343,13 @@ body.person-squared-images,
308
343
  }
309
344
  }
310
345
  }
311
- .block.listing .listing-item.person-listing .card-summary {
312
- .summary-room-phone {
313
- flex-direction: column;
314
- gap: 0;
346
+ .block.listing,
347
+ .block.search {
348
+ .listing-item.person-listing .card-summary {
349
+ .summary-room-phone {
350
+ flex-direction: column;
351
+ gap: 0;
352
+ }
315
353
  }
316
354
  }
317
355
  }