@royaloperahouse/harmonic 0.2.3-b → 0.2.3-c

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 (11) hide show
  1. package/dist/components/Typography/Typography.d.ts +1 -0
  2. package/dist/harmonic.cjs.development.css +105 -105
  3. package/dist/harmonic.cjs.development.js +11 -4
  4. package/dist/harmonic.cjs.development.js.map +1 -1
  5. package/dist/harmonic.cjs.production.min.js +1 -1
  6. package/dist/harmonic.cjs.production.min.js.map +1 -1
  7. package/dist/harmonic.esm.js +42 -35
  8. package/dist/harmonic.esm.js.map +1 -1
  9. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  10. package/dist/types/editorial.d.ts +1 -1
  11. package/package.json +1 -1
package/dist/components/Typography/Typography.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
3
+ import './styles.css';
3
4
  export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
4
5
  export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
5
6
  export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
package/dist/harmonic.cjs.development.css CHANGED
@@ -1,234 +1,192 @@
1
- @font-face {
2
- font-family: 'GreyLLTT';
3
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
4
- font-weight: 400;
5
- font-style: normal;
6
- font-display: swap;
7
- }
8
-
9
- @font-face {
10
- font-family: 'GreyLLTT';
11
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
12
- font-weight: 500;
13
- font-style: normal;
14
- font-display: swap;
15
- }
16
-
17
- @font-face {
18
- font-family: 'GreyLLTT';
19
- src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
20
- font-weight: 700;
21
- font-style: normal;
22
- font-display: swap;
23
- }
24
-
25
- @font-face {
26
- font-family: 'VictorSerif';
27
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
28
- format('woff2');
29
- font-weight: 500;
30
- font-style: normal;
31
- font-display: swap;
32
- }
33
-
34
- @font-face {
35
- font-family: 'VictorSerif';
36
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
37
- format('woff2');
38
- font-weight: 500;
39
- font-style: italic;
40
- font-display: swap;
41
- }
42
-
43
1
  /* ~~~~~ General Styling Classes ~~~~~ */
44
- .typography_color-primary__LOfDi {
2
+ .styles_color-primary__UYod1 {
45
3
  color: var(--color-primary);
46
4
  }
47
5
 
48
- .typography_color-black__6MHRL {
6
+ .styles_color-black__a05Fo {
49
7
  color: var(--color-base-black);
50
8
  }
51
9
 
52
- .typography_color-white__PfW5s {
10
+ .styles_color-white__HiYDT {
53
11
  color: var(--color-base-white);
54
12
  }
55
13
 
56
- .typography_color-red__iPlbG {
14
+ .styles_color-red__zwTZW {
57
15
  color: var(--color-primary-red);
58
16
  }
59
17
 
60
- .typography_color-grey__GA1c2 {
18
+ .styles_color-grey__Gc0wv {
61
19
  color: var(--color-base-dark-grey);
62
20
  }
63
21
 
64
- .typography_color-inherit__RDd0Y {
22
+ .styles_color-inherit__Y12df {
65
23
  color: inherit;
66
24
  }
67
25
 
68
- .typography_em__E6tX- {
26
+ .styles_em__v4FoO {
69
27
  font-style: italic;
70
28
  }
71
29
  /* ~~~ */
72
30
 
73
31
  /* Display Headers */
74
- .typography_display__-F3p4 {
32
+ .styles_display__VgnTB {
75
33
  margin: 0;
76
34
  font-family: var(--font-family-sans);
77
35
  line-height: 100%;
78
36
 
79
- &.typography_large__uq0zC {
37
+ &.styles_large__vqVxY {
80
38
  font-size: 96px;
81
39
  font-weight: 700;
82
40
  letter-spacing: -5px;
83
41
  }
84
42
 
85
- &.typography_small__wfQ0K {
43
+ &.styles_small__e7YDe {
86
44
  font-size: 68px;
87
45
  font-weight: 500;
88
46
  letter-spacing: -3px;
89
47
  }
90
48
 
91
49
  /* Serif and Italic styles */
92
- &.typography_serif__VSO38,
93
- &.typography_em__E6tX- {
50
+ &.styles_serif__b-ZjM,
51
+ &.styles_em__v4FoO {
94
52
  font-family: var(--font-family-serif);
95
53
  font-weight: 500;
96
54
  }
97
55
 
98
56
  /* Serif and Italic adjustments */
99
- &.typography_large__uq0zC.typography_serif__VSO38,
100
- &.typography_large__uq0zC.typography_em__E6tX- {
57
+ &.styles_large__vqVxY.styles_serif__b-ZjM,
58
+ &.styles_large__vqVxY.styles_em__v4FoO {
101
59
  letter-spacing: -3px;
102
60
  }
103
61
 
104
- &.typography_small__wfQ0K.typography_serif__VSO38,
105
- &.typography_small__wfQ0K.typography_em__E6tX- {
62
+ &.styles_small__e7YDe.styles_serif__b-ZjM,
63
+ &.styles_small__e7YDe.styles_em__v4FoO {
106
64
  letter-spacing: -2px;
107
65
  }
108
66
 
109
67
  @media (max-width: 699px) {
110
- &.typography_large__uq0zC {
68
+ &.styles_large__vqVxY {
111
69
  font-size: 38px;
112
70
  letter-spacing: -1.5px;
113
71
  }
114
72
 
115
- &.typography_small__wfQ0K {
73
+ &.styles_small__e7YDe {
116
74
  font-size: 32px;
117
75
  letter-spacing: -1.5px;
118
76
  }
119
77
 
120
- &.typography_large__uq0zC.typography_serif__VSO38,
121
- &.typography_large__uq0zC.typography_em__E6tX-,
122
- &.typography_small__wfQ0K.typography_serif__VSO38,
123
- &.typography_small__wfQ0K.typography_em__E6tX- {
78
+ &.styles_large__vqVxY.styles_serif__b-ZjM,
79
+ &.styles_large__vqVxY.styles_em__v4FoO,
80
+ &.styles_small__e7YDe.styles_serif__b-ZjM,
81
+ &.styles_small__e7YDe.styles_em__v4FoO {
124
82
  letter-spacing: -0.5px;
125
83
  }
126
84
  }
127
85
  }
128
86
 
129
87
  /* Headers */
130
- .typography_header__BexiD {
88
+ .styles_header__UDH-H {
131
89
  margin: 0;
132
90
  font-family: var(--font-family-sans);
133
91
  font-weight: 500;
134
92
 
135
- &.typography_large__uq0zC {
93
+ &.styles_large__vqVxY {
136
94
  font-size: 44px;
137
95
  line-height: 48px;
138
96
  letter-spacing: -1.5px;
139
97
  }
140
98
 
141
- &.typography_medium__K0uZD {
99
+ &.styles_medium__WQPZj {
142
100
  font-size: 34px;
143
101
  line-height: 40px;
144
102
  letter-spacing: -1px;
145
103
  }
146
104
 
147
- &.typography_small__wfQ0K {
105
+ &.styles_small__e7YDe {
148
106
  font-size: 26px;
149
107
  line-height: 32px;
150
108
  letter-spacing: -0.5px;
151
109
  }
152
110
 
153
111
  /* Serif and Italic styles */
154
- &.typography_serif__VSO38,
155
- &.typography_em__E6tX- {
112
+ &.styles_serif__b-ZjM,
113
+ &.styles_em__v4FoO {
156
114
  font-family: var(--font-family-serif);
157
115
  }
158
116
 
159
117
  /* Serif and Italic letter-spacing overrides */
160
- &.typography_large__uq0zC.typography_serif__VSO38,
161
- &.typography_large__uq0zC.typography_em__E6tX- {
118
+ &.styles_large__vqVxY.styles_serif__b-ZjM,
119
+ &.styles_large__vqVxY.styles_em__v4FoO {
162
120
  letter-spacing: -0.5px;
163
121
  }
164
122
 
165
- &.typography_medium__K0uZD.typography_serif__VSO38,
166
- &.typography_medium__K0uZD.typography_em__E6tX- {
123
+ &.styles_medium__WQPZj.styles_serif__b-ZjM,
124
+ &.styles_medium__WQPZj.styles_em__v4FoO {
167
125
  letter-spacing: -0.5px;
168
126
  }
169
127
 
170
- &.typography_small__wfQ0K.typography_serif__VSO38,
171
- &.typography_small__wfQ0K.typography_em__E6tX- {
128
+ &.styles_small__e7YDe.styles_serif__b-ZjM,
129
+ &.styles_small__e7YDe.styles_em__v4FoO {
172
130
  letter-spacing: -0.5px;
173
131
  }
174
132
 
175
133
  @media (max-width: 699px) {
176
- &.typography_large__uq0zC {
134
+ &.styles_large__vqVxY {
177
135
  font-size: 28px;
178
136
  line-height: 34px;
179
137
  letter-spacing: -1.5px;
180
138
  }
181
139
 
182
- &.typography_medium__K0uZD {
140
+ &.styles_medium__WQPZj {
183
141
  font-size: 24px;
184
142
  line-height: 28px;
185
143
  letter-spacing: -1px;
186
144
  }
187
145
 
188
- &.typography_small__wfQ0K {
146
+ &.styles_small__e7YDe {
189
147
  font-size: 20px;
190
148
  line-height: 26px;
191
149
  letter-spacing: -0.75px;
192
150
  }
193
151
 
194
152
  /* Mobile overrides for serif/italic letter-spacing */
195
- &.typography_large__uq0zC.typography_serif__VSO38,
196
- &.typography_large__uq0zC.typography_em__E6tX-,
197
- &.typography_medium__K0uZD.typography_serif__VSO38,
198
- &.typography_medium__K0uZD.typography_em__E6tX-,
199
- &.typography_small__wfQ0K.typography_serif__VSO38,
200
- &.typography_small__wfQ0K.typography_em__E6tX- {
153
+ &.styles_large__vqVxY.styles_serif__b-ZjM,
154
+ &.styles_large__vqVxY.styles_em__v4FoO,
155
+ &.styles_medium__WQPZj.styles_serif__b-ZjM,
156
+ &.styles_medium__WQPZj.styles_em__v4FoO,
157
+ &.styles_small__e7YDe.styles_serif__b-ZjM,
158
+ &.styles_small__e7YDe.styles_em__v4FoO {
201
159
  letter-spacing: -0.5px;
202
160
  }
203
161
  }
204
162
  }
205
163
 
206
164
  /* Subtitle */
207
- .typography_subtitle__aoFTV {
165
+ .styles_subtitle__os3DH {
208
166
  margin: 0;
209
167
  font-family: var(--font-family-sans);
210
168
  font-weight: 500;
211
169
 
212
- &.typography_large__uq0zC {
170
+ &.styles_large__vqVxY {
213
171
  font-size: 19px;
214
172
  line-height: 26px;
215
173
  letter-spacing: -0.5px;
216
174
  }
217
175
 
218
- &.typography_small__wfQ0K {
176
+ &.styles_small__e7YDe {
219
177
  font-size: 17px;
220
178
  line-height: 24px;
221
179
  letter-spacing: -0.5px;
222
180
  }
223
181
 
224
182
  @media (max-width: 699px) {
225
- &.typography_large__uq0zC {
183
+ &.styles_large__vqVxY {
226
184
  font-size: 17px;
227
185
  line-height: 24px;
228
186
  letter-spacing: -0.5px;
229
187
  }
230
188
 
231
- &.typography_small__wfQ0K {
189
+ &.styles_small__e7YDe {
232
190
  font-size: 14px;
233
191
  line-height: 20px;
234
192
  letter-spacing: -0.2px;
@@ -237,43 +195,43 @@
237
195
  }
238
196
 
239
197
  /* Body Copy */
240
- .typography_bodycopy__vYtQ8 {
198
+ .styles_bodycopy__uEx9r {
241
199
  margin: 0;
242
200
  font-family: var(--font-family-sans);
243
201
  font-weight: 400;
244
202
 
245
- &.typography_large__uq0zC {
203
+ &.styles_large__vqVxY {
246
204
  font-size: 19px;
247
205
  line-height: 26px;
248
206
  letter-spacing: -0.5px;
249
207
  }
250
208
 
251
- &.typography_medium__K0uZD {
209
+ &.styles_medium__WQPZj {
252
210
  font-size: 17px;
253
211
  line-height: 24px;
254
212
  letter-spacing: -0.5px;
255
213
  }
256
214
 
257
- &.typography_small__wfQ0K {
215
+ &.styles_small__e7YDe {
258
216
  font-size: 14px;
259
217
  line-height: 20px;
260
218
  letter-spacing: -0.5px;
261
219
  }
262
220
 
263
221
  @media (max-width: 699px) {
264
- &.typography_large__uq0zC {
222
+ &.styles_large__vqVxY {
265
223
  font-size: 17px;
266
224
  line-height: 24px;
267
225
  letter-spacing: -0.5px;
268
226
  }
269
227
 
270
- &.typography_medium__K0uZD {
228
+ &.styles_medium__WQPZj {
271
229
  font-size: 14px;
272
230
  line-height: 20px;
273
231
  letter-spacing: -0.2px;
274
232
  }
275
233
 
276
- &.typography_small__wfQ0K {
234
+ &.styles_small__e7YDe {
277
235
  font-size: 11px;
278
236
  line-height: 16px;
279
237
  letter-spacing: -0.2px;
@@ -282,31 +240,31 @@
282
240
  }
283
241
 
284
242
  /* Overline */
285
- .typography_overline__EnUK3 {
243
+ .styles_overline__5xGDa {
286
244
  margin: 0;
287
245
  font-family: var(--font-family-sans);
288
246
  font-weight: 500;
289
247
  text-transform: uppercase;
290
248
 
291
- &.typography_large__uq0zC {
249
+ &.styles_large__vqVxY {
292
250
  font-size: 14px;
293
251
  line-height: 18px;
294
252
  letter-spacing: 0.3px;
295
253
  }
296
254
 
297
- &.typography_small__wfQ0K {
255
+ &.styles_small__e7YDe {
298
256
  font-size: 12px;
299
257
  line-height: 14px;
300
258
  letter-spacing: 0.2px;
301
259
  }
302
260
 
303
261
  @media (max-width: 699px) {
304
- &.typography_large__uq0zC {
262
+ &.styles_large__vqVxY {
305
263
  line-height: 17px;
306
264
  letter-spacing: 0.3px; /* Added to ensure it stays */
307
265
  }
308
266
 
309
- &.typography_small__wfQ0K {
267
+ &.styles_small__e7YDe {
310
268
  line-height: 14px;
311
269
  letter-spacing: 0.3px;
312
270
  }
@@ -314,7 +272,7 @@
314
272
  }
315
273
 
316
274
  /* Button Text */
317
- .typography_buttontext__vcxNi {
275
+ .styles_buttontext__UPumF {
318
276
  margin: 0;
319
277
  font-family: var(--font-family-sans);
320
278
  font-size: 17px;
@@ -329,7 +287,7 @@
329
287
  }
330
288
 
331
289
  /* Caption Text */
332
- .typography_captiontext__91UFb {
290
+ .styles_captiontext__-TA6x {
333
291
  margin: 0;
334
292
  font-family: var(--font-family-sans);
335
293
  font-weight: 400;
@@ -345,7 +303,7 @@
345
303
  }
346
304
 
347
305
  /* Navigation Text */
348
- .typography_navigationtext__YfGf7 {
306
+ .styles_navigationtext__qnnIo {
349
307
  margin: 0;
350
308
  font-family: var(--font-family-sans);
351
309
  font-size: 19px;
@@ -359,6 +317,48 @@
359
317
  }
360
318
  }
361
319
 
320
+ @font-face {
321
+ font-family: 'GreyLLTT';
322
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
323
+ font-weight: 400;
324
+ font-style: normal;
325
+ font-display: swap;
326
+ }
327
+
328
+ @font-face {
329
+ font-family: 'GreyLLTT';
330
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
331
+ font-weight: 500;
332
+ font-style: normal;
333
+ font-display: swap;
334
+ }
335
+
336
+ @font-face {
337
+ font-family: 'GreyLLTT';
338
+ src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
339
+ font-weight: 700;
340
+ font-style: normal;
341
+ font-display: swap;
342
+ }
343
+
344
+ @font-face {
345
+ font-family: 'VictorSerif';
346
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
347
+ format('woff2');
348
+ font-weight: 500;
349
+ font-style: normal;
350
+ font-display: swap;
351
+ }
352
+
353
+ @font-face {
354
+ font-family: 'VictorSerif';
355
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
356
+ format('woff2');
357
+ font-weight: 500;
358
+ font-style: italic;
359
+ font-display: swap;
360
+ }
361
+
362
362
  .core-theme-module_coreTheme__pWxYB {
363
363
  /* RBO Red */
364
364
  /* Primary Palette */
package/dist/harmonic.cjs.development.js CHANGED
@@ -9194,7 +9194,7 @@ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_t
9194
9194
  var isButtonPresent = _ref6.isButtonPresent;
9195
9195
  return isButtonPresent ? '20px' : '0';
9196
9196
  });
9197
- var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
9197
+ var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
9198
9198
 
9199
9199
  var PageHeadingPromoBadge;
9200
9200
  (function (PageHeadingPromoBadge) {
@@ -10323,6 +10323,9 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10323
10323
  var truncate = function truncate(str, n) {
10324
10324
  return str.length >= n ? str.substr(0, n) : str;
10325
10325
  };
10326
+ var correctTitleSize = function correctTitleSize(size) {
10327
+ return size === 'small' ? 'medium' : 'large';
10328
+ };
10326
10329
  var imageToLeft = imagePosition === 'left';
10327
10330
  var primaryButton = links == null ? void 0 : links[0];
10328
10331
  var _ref2 = primaryButton || {},
@@ -10354,12 +10357,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10354
10357
  "data-testid": "content-wrapper",
10355
10358
  imageToLeft: imageToLeft
10356
10359
  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
10357
- size: titleSize,
10360
+ size: correctTitleSize(titleSize),
10358
10361
  hierarchy: titleHierarchy
10359
10362
  }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
10360
10363
  size: "medium"
10361
10364
  }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
10362
- size: "medium",
10365
+ size: "large",
10363
10366
  dangerouslySetInnerHTML: {
10364
10367
  __html: text
10365
10368
  }
@@ -10367,7 +10370,11 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10367
10370
  "data-testid": "buttons-wrapper",
10368
10371
  primaryButtonTextLength: primaryButtonText.length,
10369
10372
  tertiaryButtonTextLength: tertiaryButtonText.length
10370
- }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10373
+ }, primaryButton ? (/*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
10374
+ target: "_blank"
10375
+ }, restPrimaryButton), primaryButtonTextTruncate)) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({
10376
+ target: "_blank"
10377
+ }, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10371
10378
  };
10372
10379
 
10373
10380
  var _templateObject$1a;