@financial-times/o-topper 5.4.2 → 5.5.0

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.md +14 -0
  2. package/README.md +3 -1
  3. package/demos/src/full-bleed-image-center.mustache +1 -1
  4. package/demos/src/full-bleed-image-left.mustache +1 -1
  5. package/demos/src/full-bleed-offset-right-rail.mustache +1 -1
  6. package/demos/src/full-bleed-offset.mustache +1 -1
  7. package/demos/src/split-text-left.mustache +2 -1
  8. package/package.json +1 -1
  9. package/src/scss/_elements.scss +14 -0
  10. package/src/scss/_mixins.scss +7 -1
  11. package/src/scss/_variables.scss +2 -1
  12. package/src/scss/themes/_full-bleed-image.scss +2 -1
  13. package/src/scss/themes/_full-bleed-offset.scss +2 -2
  14. package/src/scss/themes/_split-text.scss +9 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [5.5.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.2...o-topper-v5.5.0) (2022-11-23)
4
+
5
+
6
+ ### Features
7
+
8
+ * Introduce an image caption element, to compliment the existing credit element. Only use the credit element when there is a credit to display and no image caption. Otherwise use the image caption element to display both caption and any credit. ([2bb7988](https://www.github.com/Financial-Times/origami/commit/2bb79886b7db19920883e61a192cccef926d8af2))
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * add credit to example ([005e3b4](https://www.github.com/Financial-Times/origami/commit/005e3b4c90cd30d95bce8e188b84d1d7980a5fe4))
14
+ * fix pa11y error on demos only one figcaption is alowed ([d71c350](https://www.github.com/Financial-Times/origami/commit/d71c350805a0823cafca734a4345b94bc067fec6))
15
+ * update README ([09f7cec](https://www.github.com/Financial-Times/origami/commit/09f7cec15a57491c52a0423c89ea373f8f02c61b))
16
+
3
17
  ### [5.4.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.1...o-topper-v5.4.2) (2022-11-16)
4
18
 
5
19
 
package/README.md CHANGED
@@ -52,7 +52,8 @@ Toppers support a wide array of [elements](#supported-elements) and can be custo
52
52
  | `.o-topper__visual` | Wrapper for the visual elements `__picture` and `__image`. Should be a `<figure>` tag. |
53
53
  | `.o-topper__picture` | A `<picture>` tag visual element. |
54
54
  | `.o-topper__image` | An `<img>` tag visual element, usually used as fallback for a `<picture>`. |
55
- | `.o-topper__image-credit` | Element showing credit/copyright for the `__picture` or `__image`. Should be a `<figcaption>` tag. |
55
+ | `.o-topper__image-credit` | Element showing credit/copyright for the `__picture` or `__image`, where no image caption is given. If an image caption is provided alongside credit/copyright information use `.o-topper__image-caption` instead. Should be a `<figcaption>` tag. |
56
+ | `.o-topper__image-caption` | Element showing caption and credit/copyright together for the `__picture` or `__image`. Should be a `<figcaption>` tag. |
56
57
 
57
58
  ### Themes
58
59
 
@@ -131,6 +132,7 @@ To include o-topper styles granularly specify which elements, themes, and colour
131
132
  'read-next',
132
133
  'image',
133
134
  'image-credit',
135
+ 'image-caption'
134
136
  ),
135
137
  'colors': (
136
138
  'white', // .o-topper--color-white
package/demos/src/full-bleed-image-center.mustache CHANGED
@@ -18,6 +18,6 @@
18
18
  <source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
19
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
20
20
  </picture>
21
- <figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
21
+ <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
22
22
  </figure>
23
23
  </div>
package/demos/src/full-bleed-image-left.mustache CHANGED
@@ -18,6 +18,6 @@
18
18
  <source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
19
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
20
20
  </picture>
21
- <figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
21
+ <figcaption class="o-topper__image-credit">@FT</figcaption>
22
22
  </figure>
23
23
  </div>
package/demos/src/full-bleed-offset-right-rail.mustache CHANGED
@@ -23,6 +23,6 @@
23
23
  <source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
24
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
25
25
  </picture>
26
- <figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
26
+ <figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
27
27
  </figure>
28
28
  </div>
package/demos/src/full-bleed-offset.mustache CHANGED
@@ -23,6 +23,6 @@
23
23
  <source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
24
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
25
25
  </picture>
26
- <figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
26
+ <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
27
27
  </figure>
28
28
  </div>
package/demos/src/split-text-left.mustache CHANGED
@@ -21,6 +21,7 @@
21
21
 
22
22
  <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
23
23
  </picture>
24
- <figcaption class="o-topper__image-credit">© KMG/SWNS.com</figcaption>
24
+ <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </figcaption>
25
+
25
26
  </figure>
26
27
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-topper",
3
- "version": "5.4.2",
3
+ "version": "5.5.0",
4
4
  "description": "Article header styling",
5
5
  "keywords": [
6
6
  "topper",
package/src/scss/_elements.scss CHANGED
@@ -41,6 +41,20 @@
41
41
  }
42
42
 
43
43
  @mixin _oTopperImageCredit {
44
+ @include oTypographySans(-2);
45
+ color: oColorsByName('white');
46
+ position: absolute;
47
+ text-shadow: 1px 1px 1px oColorsByName('slate');
48
+ text-align: right;
49
+ width: 100vw;
50
+ margin-left: 50%;
51
+ left: -50vw;
52
+ box-sizing: border-box;
53
+ padding: 5px;
54
+ transform: translate(0, -100%);
55
+ }
56
+
57
+ @mixin _oTopperImageCaption {
44
58
  @include oTypographySans(-1);
45
59
  padding: 10px 11px 0px;
46
60
  @include oGridRespondTo(L) {
package/src/scss/_mixins.scss CHANGED
@@ -221,6 +221,12 @@
221
221
  @include _oTopperImageCredit;
222
222
  }
223
223
  }
224
+
225
+ @if index($elements, 'image-caption') {
226
+ .o-topper__image-caption {
227
+ @include _oTopperImageCaption;
228
+ }
229
+ }
224
230
  }
225
231
 
226
232
  @mixin _oTopperColors($colors) {
@@ -293,7 +299,7 @@
293
299
  }
294
300
  }
295
301
 
296
- .o-topper__image-credit {
302
+ .o-topper__image-caption {
297
303
  color: oColorsMix($foreground, $color-name, 73);
298
304
  }
299
305
 
package/src/scss/_variables.scss CHANGED
@@ -63,7 +63,8 @@ $_o-topper-elements: (
63
63
  'topic',
64
64
  'read-next',
65
65
  'image',
66
- 'image-credit'
66
+ 'image-credit',
67
+ 'image-caption'
67
68
  );
68
69
 
69
70
  /// @access private
package/src/scss/themes/_full-bleed-image.scss CHANGED
@@ -65,7 +65,8 @@
65
65
  }
66
66
  }
67
67
 
68
- .o-topper__image-credit {
68
+ .o-topper__image-caption {
69
+ background-color: transparent;
69
70
  color: oColorsByName("black-70");
70
71
  margin-bottom: -20px;
71
72
  }
package/src/scss/themes/_full-bleed-offset.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @mixin _oTopperThemeFullBleedOffset {
4
4
  &.o-topper--right-rail {
5
- .o-topper__image-credit {
5
+ .o-topper__image-caption {
6
6
  @if not $o-topper-snappy {
7
7
  @include oGridRespondTo(L) {
8
8
  width: calc(100vw - 720px);
@@ -110,7 +110,7 @@
110
110
  display: flex;
111
111
  }
112
112
 
113
- .o-topper__image-credit {
113
+ .o-topper__image-caption {
114
114
  text-align: left;
115
115
  @include oGridRespondTo(L) {
116
116
  box-sizing: border-box;
package/src/scss/themes/_split-text.scss CHANGED
@@ -92,8 +92,16 @@
92
92
  }
93
93
  }
94
94
  }
95
-
96
95
  .o-topper__image-credit {
96
+ top: 350px;
97
+ @include oGridRespondTo(M) {
98
+ top: 480px;
99
+ }
100
+ @include oGridRespondTo(L) {
101
+ top: 600px;
102
+ }
103
+ }
104
+ .o-topper__image-caption {
97
105
  color: oColorsByName("black-70");
98
106
  position: relative;
99
107
  width: 100%;