@financial-times/o-topper 5.6.0 → 5.6.2

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 (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/demos/src/{split-text-portrait-left.mustache → deep-portrait.mustache} +9 -5
  3. package/main.scss +1 -1
  4. package/origami.json +3 -3
  5. package/package.json +2 -1
  6. package/src/scss/_mixins.scss +4 -4
  7. package/src/scss/_variables.scss +1 -1
  8. package/src/scss/themes/_portrait.scss +44 -34
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ### [5.6.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.1...o-topper-v5.6.2) (2022-12-14)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * Rename `o-topper--split-text-portrait-left` to `o-topper--deep-portrait` – this is [technically a breaking change but is being treated as a minor release](https://github.com/Financial-Times/origami/pull/923#pullrequestreview-1217595762) in this case ([78e5da8](https://www.github.com/Financial-Times/origami/commit/78e5da879465029caa11dd2f3d256f7f89b34857))
9
+
10
+ ## [5.6.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.0...o-topper-v5.6.1) (2022-12-14)
11
+
12
+
13
+ ### Features
14
+
15
+ * Improve the design of the split-text-portrait-left topper (also known as deep portrait). ([https://github.com/Financial-Times/origami/pull/920](https://github.com/Financial-Times/origami/pull/920))
16
+
3
17
  ## [5.6.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.5.1...o-topper-v5.6.0) (2022-12-02)
4
18
 
5
19
 
package/demos/src/{split-text-portrait-left.mustache → deep-portrait.mustache} RENAMED
@@ -1,4 +1,4 @@
1
- <div class="o-topper o-topper--split-text-portrait-left o-topper--color-claret">
1
+ <div class="o-topper o-topper--deep-portrait o-topper--color-claret">
2
2
  <div class="o-topper__content">
3
3
  <div class="o-topper__tags">
4
4
  <a href="/uk-general-election" class="o-topper__topic">
@@ -15,12 +15,16 @@
15
15
 
16
16
  <figure class="o-topper__visual">
17
17
  <picture class="o-topper__picture">
18
- <source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/33a24e65-005e-4494-af1a-3a0523396e90.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
18
+ <source media="(max-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
19
19
 
20
- <source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/33a24e65-005e-4494-af1a-3a0523396e90.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
20
+ <source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
21
21
 
22
- <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/33a24e65-005e-4494-af1a-3a0523396e90.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
22
+ <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
23
23
  </picture>
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>
24
+ <figcaption class="o-topper__image-caption">
25
+ 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
26
+ 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
27
+ 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
28
+ </figcaption>
25
29
  </figure>
26
30
  </div>
package/main.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  // Output chosen elements, colours, and themes.
48
48
  @include _oTopperElements($elements);
49
49
  @include _oTopperColors($colors);
50
- @include _oTopperThemes($themes);
50
+ @include _oTopperThemes($themes,$colors);
51
51
  }
52
52
 
53
53
  @if ($o-topper-is-silent == false) {
package/origami.json CHANGED
@@ -140,9 +140,9 @@
140
140
  "hidden": true
141
141
  },
142
142
  {
143
- "name": "Split Text Portrait Left",
144
- "title": "Split Text Portrait Left",
145
- "template": "demos/src/split-text-portrait-left.mustache",
143
+ "name": "Deep Portrait",
144
+ "title": "Deep Portrait",
145
+ "template": "demos/src/deep-portrait.mustache",
146
146
  "description": "This is a theme that editorial can choose, which comes through the API"
147
147
  }
148
148
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-topper",
3
- "version": "5.6.0",
3
+ "version": "5.6.2",
4
4
  "description": "Article header styling",
5
5
  "keywords": [
6
6
  "topper",
@@ -18,6 +18,7 @@
18
18
  "start": "npx serve ./demos/local",
19
19
  "build": "bash ../../scripts/component/build.bash",
20
20
  "test": "bash ../../scripts/component/test.bash",
21
+ "debug:js": "bash ../../scripts/component/debug-js.bash",
21
22
  "lint": "bash ../../scripts/component/lint.bash",
22
23
  "watch": "bash ../../scripts/component/watch.bash"
23
24
  },
package/src/scss/_mixins.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
  }
20
20
 
21
- @mixin _oTopperThemes($themes) {
21
+ @mixin _oTopperThemes($themes,$colors) {
22
22
  @include _oTopperThemeElements($themes);
23
23
 
24
24
  @if index($themes, 'basic') {
@@ -122,9 +122,9 @@
122
122
  }
123
123
  }
124
124
 
125
- @if index($themes, 'split-text-portrait-left') {
126
- .o-topper--split-text-portrait-left {
127
- @include _oTopperThemeSplitTextPortraitLeft;
125
+ @if index($themes, 'deep-portrait') {
126
+ .o-topper--deep-portrait {
127
+ @include _oTopperThemeSplitTextPortraitLeft($colors);
128
128
  }
129
129
  }
130
130
  }
package/src/scss/_variables.scss CHANGED
@@ -42,7 +42,7 @@ $_o-topper-themes: (
42
42
  'news-package', // @deprecated
43
43
  'right-rail',
44
44
  'centered',
45
- 'split-text-portrait-left'
45
+ 'deep-portrait'
46
46
  );
47
47
 
48
48
  /// When adding a new element update the README
package/src/scss/themes/_portrait.scss CHANGED
@@ -1,41 +1,63 @@
1
1
  // sass-lint:disable mixins-before-declarations
2
2
 
3
- @mixin _oTopperThemeSplitTextPortraitLeft {
3
+ @mixin _oTopperThemeSplitTextPortraitLeft($colors) {
4
4
  .o-topper__read-next {
5
5
  display: none;
6
6
  }
7
7
 
8
8
  @include oGridRespondTo($until: M) {
9
+ display:flex;
10
+ flex-direction: column;
9
11
  padding: 0;
10
-
12
+
11
13
  .o-topper__content {
14
+ order: 3;
12
15
  display: flex;
13
16
  flex-direction: column;
14
17
  justify-content: center;
15
18
  padding: 20px 10px;
16
19
  }
17
20
 
21
+ .o-topper__background {
22
+ order: 2;
23
+ }
24
+
18
25
  .o-topper__visual {
26
+ order: 1;
19
27
  min-height: 350px;
20
28
  }
21
29
 
30
+ @each $color-name in $colors {
31
+ &.o-topper--color-#{$color-name} {
32
+ .o-topper__image-caption {
33
+ $background: oColorsByName($color-name);
34
+ $foreground: oColorsGetTextColor($background, $opacity: 100);
35
+ color: oColorsMix($foreground, $color-name, 73);
36
+ background-color: $background;
37
+ }
38
+ }
39
+ }
40
+
22
41
  .o-topper__picture {
23
- position: relative;
24
- width: 100%;
25
- height: 350px;
26
- float: right;
42
+ img {
43
+ position : relative;
44
+ }
45
+ }
46
+
47
+ .o-topper__image-caption {
48
+ padding-bottom: 10px;
27
49
  }
28
50
  }
29
51
 
30
52
  @include oGridRespondTo(M) {
31
53
  display: grid;
32
- grid-template-columns: 1fr 1fr;
33
- grid-template-rows: minmax(0, 480px) 1fr;
54
+ grid-template-columns: 1fr 1fr;
55
+ grid-template-rows: 66vw 1fr;
34
56
 
35
57
  .o-topper__content {
36
58
  grid-column: 1 / span 2;
37
59
  grid-row: 1;
38
- width: 60%;
60
+ width: 55%;
39
61
  box-sizing: border-box;
40
62
  align-self: center;
41
63
  padding-right: 20px;
@@ -50,9 +72,9 @@
50
72
  }
51
73
 
52
74
  .o-topper__picture {
53
- width: 40%;
75
+ width: 45%;
54
76
  float: right;
55
- height: auto;
77
+ height: 100%;
56
78
  position: relative;
57
79
  }
58
80
 
@@ -61,48 +83,36 @@
61
83
  max-height: 480px;
62
84
  }
63
85
  }
64
- }
65
86
 
66
- @include oGridRespondTo(L) {
67
- grid-template-rows: minmax(0, 600px) 1fr;
87
+ .o-topper__image-caption {
88
+ margin-bottom: 0;
89
+ margin-top: 10px;
90
+ border-top: solid 1px oColorsGetTextColor($background: black, $opacity: 50);
91
+ color: oColorsByName("black-70");
92
+ }
68
93
  }
69
94
 
70
95
  @supports (object-fit: cover) {
71
- .o-topper__image {
72
- position: absolute;
73
- }
96
+
74
97
 
75
- .o-topper__visual {
76
- @include oGridRespondTo(M) {
77
- .o-topper__picture {
78
- height: 480px;
79
- }
80
- }
98
+ @include oGridRespondTo(M) {
81
99
 
82
- @include oGridRespondTo(L) {
100
+ .o-topper__visual {
83
101
  .o-topper__picture {
84
- height: 600px;
102
+ height: 66vw;
85
103
  }
86
104
  }
87
105
  }
88
106
  }
89
107
 
90
108
  .o-topper__image-credit {
91
- top: 350px;
92
- @include oGridRespondTo(M) {
93
- top: 480px;
94
- }
95
- @include oGridRespondTo(L) {
96
- top: 600px;
97
- }
109
+ top: 100%;
98
110
  }
99
111
 
100
112
  .o-topper__image-caption {
101
- color: oColorsByName("black-70");
102
113
  position: relative;
103
114
  width: 100%;
104
115
  float: right;
105
116
  box-sizing: border-box;
106
- margin-bottom: -20px;
107
117
  }
108
118
  }