@royaloperahouse/harmonic 1.0.7-b → 1.0.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.
- package/CHANGELOG.md +7 -11
- package/README.GIT +293 -0
- package/README.md +43 -267
- package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/molecules/Accordion/Accordion.style.d.ts +1 -3
- package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts +25 -27
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.css +0 -319
- package/dist/harmonic.cjs.development.js +197 -271
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +206 -282
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
- package/dist/types/creditListing.d.ts +6 -7
- package/dist/types/types.d.ts +3 -23
- package/package.json +1 -1
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.d.ts +0 -4
- package/dist/components/molecules/ReadMore/ReadMoreTextLink.style.d.ts +0 -3
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
export declare const AccordionContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
|
|
3
|
-
showBottomLine?: boolean | undefined;
|
|
2
|
+
showLine?: boolean | undefined;
|
|
4
3
|
}, never>;
|
|
5
4
|
export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
5
|
isVisible: boolean;
|
|
7
6
|
}, never>;
|
|
8
7
|
export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
8
|
hasChildren?: boolean | undefined;
|
|
10
|
-
titleMargin?: string | undefined;
|
|
11
9
|
}, never>;
|
|
12
10
|
export declare const TitleText: import("styled-components").StyledComponent<({ children, size, color, className, tag: Tag, }: import("../../../types/typography").ITaggedTypographyProps) => import("react").JSX.Element, any, {}, never>;
|
|
13
11
|
export declare const ContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {
|
|
@@ -37,34 +37,32 @@ import { TCustomStrategyTabsFilterProps } from '../../../types';
|
|
|
37
37
|
*
|
|
38
38
|
* @returns { React.JSX.Element}
|
|
39
39
|
*
|
|
40
|
-
* @example
|
|
40
|
+
* @example Controlled selection with custom rules
|
|
41
|
+
* The component does not manage selection itself. The parent owns `items` (including
|
|
42
|
+
* `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
|
|
43
|
+
* item to describe which other tab IDs may stay selected when that tab is chosen.
|
|
44
|
+
*
|
|
41
45
|
* ```tsx
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* * return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
63
|
-
* * })
|
|
64
|
-
* * );
|
|
65
|
-
* * };
|
|
66
|
-
* *
|
|
67
|
-
* * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
46
|
+
* const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
|
|
47
|
+
* { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
|
|
48
|
+
* { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
|
|
49
|
+
* { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
|
|
50
|
+
* ]);
|
|
51
|
+
*
|
|
52
|
+
* const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
|
|
53
|
+
* setItems((current) =>
|
|
54
|
+
* current.map((item) => {
|
|
55
|
+
* if (item.id === clickedItem.id) {
|
|
56
|
+
* return { ...item, isSelected: !item.isSelected };
|
|
57
|
+
* }
|
|
58
|
+
*
|
|
59
|
+
* const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
|
|
60
|
+
* return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
|
|
61
|
+
* })
|
|
62
|
+
* );
|
|
63
|
+
* };
|
|
64
|
+
*
|
|
65
|
+
* return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
|
|
68
66
|
*/
|
|
69
67
|
declare const CustomStrategyTabsFilter: ({ items, className, onClick, customViewConfig, }: TCustomStrategyTabsFilterProps) => React.JSX.Element;
|
|
70
68
|
export default CustomStrategyTabsFilter;
|
|
@@ -3,5 +3,5 @@ import { ICreditListing } from '../../../../types';
|
|
|
3
3
|
export declare const DEFAULT_COLUMN_COUNT = 4;
|
|
4
4
|
export declare const DEFAULT_LARGE_COLUMN_SPAN = 2;
|
|
5
5
|
export declare const DEFAULT_CHARACTER_THRESHOLD = 180;
|
|
6
|
-
declare const CreditListing: ({ roles, columnCount, expandLargeEntries, largeColumnSpan, characterThreshold,
|
|
6
|
+
declare const CreditListing: ({ roles, columnCount, expandLargeEntries, largeColumnSpan, characterThreshold, }: ICreditListing) => React.JSX.Element;
|
|
7
7
|
export default CreditListing;
|
|
@@ -4,5 +4,6 @@ export declare const CreditListingWrapper: import("styled-components").StyledCom
|
|
|
4
4
|
} & {
|
|
5
5
|
columnCount: number;
|
|
6
6
|
}, never>;
|
|
7
|
+
export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
8
|
export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
9
|
export declare const CreditWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
interface FocusableTabProps {
|
|
2
2
|
hide?: boolean;
|
|
3
3
|
}
|
|
4
|
-
export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel,
|
|
4
|
+
export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
|
|
5
5
|
export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
6
|
export {};
|
|
@@ -350,325 +350,6 @@
|
|
|
350
350
|
font-display: swap;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
|
-
/* ~~~~~ General Styling Classes ~~~~~ */
|
|
354
|
-
.typography_color-primary__LOfDi {
|
|
355
|
-
color: var(--color-primary);
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.typography_color-black__6MHRL {
|
|
359
|
-
color: var(--color-base-black);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.typography_color-white__PfW5s {
|
|
363
|
-
color: var(--color-base-white);
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
.typography_color-red__iPlbG {
|
|
367
|
-
color: var(--color-primary-red);
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
.typography_color-grey__GA1c2 {
|
|
371
|
-
color: var(--color-base-dark-grey);
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
.typography_color-inherit__RDd0Y {
|
|
375
|
-
color: inherit;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
.typography_em__E6tX- {
|
|
379
|
-
font-style: italic;
|
|
380
|
-
}
|
|
381
|
-
/* ~~~ */
|
|
382
|
-
|
|
383
|
-
/* Display Headers */
|
|
384
|
-
.typography_display__-F3p4 {
|
|
385
|
-
margin: 0;
|
|
386
|
-
font-family: var(--font-family-sans);
|
|
387
|
-
line-height: 100%;
|
|
388
|
-
|
|
389
|
-
&.typography_large__uq0zC {
|
|
390
|
-
font-size: 96px;
|
|
391
|
-
font-weight: 700;
|
|
392
|
-
letter-spacing: -5px;
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
&.typography_small__wfQ0K {
|
|
396
|
-
font-size: 68px;
|
|
397
|
-
font-weight: 500;
|
|
398
|
-
letter-spacing: -3px;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
/* Serif and Italic styles */
|
|
402
|
-
&.typography_serif__VSO38,
|
|
403
|
-
&.typography_em__E6tX- {
|
|
404
|
-
font-family: var(--font-family-serif);
|
|
405
|
-
font-weight: 500;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
/* Serif and Italic adjustments */
|
|
409
|
-
&.typography_large__uq0zC.typography_serif__VSO38,
|
|
410
|
-
&.typography_large__uq0zC.typography_em__E6tX- {
|
|
411
|
-
letter-spacing: -3px;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
&.typography_small__wfQ0K.typography_serif__VSO38,
|
|
415
|
-
&.typography_small__wfQ0K.typography_em__E6tX- {
|
|
416
|
-
letter-spacing: -2px;
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
@media (max-width: 699px) {
|
|
420
|
-
&.typography_large__uq0zC {
|
|
421
|
-
font-size: 38px;
|
|
422
|
-
letter-spacing: -1.5px;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
&.typography_small__wfQ0K {
|
|
426
|
-
font-size: 32px;
|
|
427
|
-
letter-spacing: -1.5px;
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
&.typography_large__uq0zC.typography_serif__VSO38,
|
|
431
|
-
&.typography_large__uq0zC.typography_em__E6tX-,
|
|
432
|
-
&.typography_small__wfQ0K.typography_serif__VSO38,
|
|
433
|
-
&.typography_small__wfQ0K.typography_em__E6tX- {
|
|
434
|
-
letter-spacing: -0.5px;
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/* Headers */
|
|
440
|
-
.typography_header__BexiD {
|
|
441
|
-
margin: 0;
|
|
442
|
-
font-family: var(--font-family-sans);
|
|
443
|
-
font-weight: 500;
|
|
444
|
-
|
|
445
|
-
&.typography_large__uq0zC {
|
|
446
|
-
font-size: 44px;
|
|
447
|
-
line-height: 48px;
|
|
448
|
-
letter-spacing: -1.5px;
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
&.typography_medium__K0uZD {
|
|
452
|
-
font-size: 34px;
|
|
453
|
-
line-height: 40px;
|
|
454
|
-
letter-spacing: -1px;
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
&.typography_small__wfQ0K {
|
|
458
|
-
font-size: 26px;
|
|
459
|
-
line-height: 32px;
|
|
460
|
-
letter-spacing: -0.5px;
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
/* Serif and Italic styles */
|
|
464
|
-
&.typography_serif__VSO38,
|
|
465
|
-
&.typography_em__E6tX- {
|
|
466
|
-
font-family: var(--font-family-serif);
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
/* Serif and Italic letter-spacing overrides */
|
|
470
|
-
&.typography_large__uq0zC.typography_serif__VSO38,
|
|
471
|
-
&.typography_large__uq0zC.typography_em__E6tX- {
|
|
472
|
-
letter-spacing: -0.5px;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
&.typography_medium__K0uZD.typography_serif__VSO38,
|
|
476
|
-
&.typography_medium__K0uZD.typography_em__E6tX- {
|
|
477
|
-
letter-spacing: -0.5px;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
&.typography_small__wfQ0K.typography_serif__VSO38,
|
|
481
|
-
&.typography_small__wfQ0K.typography_em__E6tX- {
|
|
482
|
-
letter-spacing: -0.5px;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
@media (max-width: 699px) {
|
|
486
|
-
&.typography_large__uq0zC {
|
|
487
|
-
font-size: 28px;
|
|
488
|
-
line-height: 34px;
|
|
489
|
-
letter-spacing: -1.5px;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
&.typography_medium__K0uZD {
|
|
493
|
-
font-size: 24px;
|
|
494
|
-
line-height: 28px;
|
|
495
|
-
letter-spacing: -1px;
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
&.typography_small__wfQ0K {
|
|
499
|
-
font-size: 20px;
|
|
500
|
-
line-height: 26px;
|
|
501
|
-
letter-spacing: -0.75px;
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
/* Mobile overrides for serif/italic letter-spacing */
|
|
505
|
-
&.typography_large__uq0zC.typography_serif__VSO38,
|
|
506
|
-
&.typography_large__uq0zC.typography_em__E6tX-,
|
|
507
|
-
&.typography_medium__K0uZD.typography_serif__VSO38,
|
|
508
|
-
&.typography_medium__K0uZD.typography_em__E6tX-,
|
|
509
|
-
&.typography_small__wfQ0K.typography_serif__VSO38,
|
|
510
|
-
&.typography_small__wfQ0K.typography_em__E6tX- {
|
|
511
|
-
letter-spacing: -0.5px;
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
/* Subtitle */
|
|
517
|
-
.typography_subtitle__aoFTV {
|
|
518
|
-
margin: 0;
|
|
519
|
-
font-family: var(--font-family-sans);
|
|
520
|
-
font-weight: 500;
|
|
521
|
-
|
|
522
|
-
&.typography_large__uq0zC {
|
|
523
|
-
font-size: 19px;
|
|
524
|
-
line-height: 26px;
|
|
525
|
-
letter-spacing: -0.5px;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
&.typography_small__wfQ0K {
|
|
529
|
-
font-size: 17px;
|
|
530
|
-
line-height: 24px;
|
|
531
|
-
letter-spacing: -0.5px;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
@media (max-width: 699px) {
|
|
535
|
-
&.typography_large__uq0zC {
|
|
536
|
-
font-size: 17px;
|
|
537
|
-
line-height: 24px;
|
|
538
|
-
letter-spacing: -0.5px;
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
&.typography_small__wfQ0K {
|
|
542
|
-
font-size: 14px;
|
|
543
|
-
line-height: 20px;
|
|
544
|
-
letter-spacing: -0.2px;
|
|
545
|
-
}
|
|
546
|
-
}
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
/* Body Copy */
|
|
550
|
-
.typography_bodycopy__vYtQ8 {
|
|
551
|
-
margin: 0;
|
|
552
|
-
font-family: var(--font-family-sans);
|
|
553
|
-
font-weight: 400;
|
|
554
|
-
|
|
555
|
-
&.typography_large__uq0zC {
|
|
556
|
-
font-size: 19px;
|
|
557
|
-
line-height: 26px;
|
|
558
|
-
letter-spacing: -0.5px;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
&.typography_medium__K0uZD {
|
|
562
|
-
font-size: 17px;
|
|
563
|
-
line-height: 24px;
|
|
564
|
-
letter-spacing: -0.5px;
|
|
565
|
-
}
|
|
566
|
-
|
|
567
|
-
&.typography_small__wfQ0K {
|
|
568
|
-
font-size: 14px;
|
|
569
|
-
line-height: 20px;
|
|
570
|
-
letter-spacing: -0.5px;
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
@media (max-width: 699px) {
|
|
574
|
-
&.typography_large__uq0zC {
|
|
575
|
-
font-size: 17px;
|
|
576
|
-
line-height: 24px;
|
|
577
|
-
letter-spacing: -0.5px;
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
&.typography_medium__K0uZD {
|
|
581
|
-
font-size: 14px;
|
|
582
|
-
line-height: 20px;
|
|
583
|
-
letter-spacing: -0.2px;
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
&.typography_small__wfQ0K {
|
|
587
|
-
font-size: 11px;
|
|
588
|
-
line-height: 16px;
|
|
589
|
-
letter-spacing: -0.2px;
|
|
590
|
-
}
|
|
591
|
-
}
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
/* Overline */
|
|
595
|
-
.typography_overline__EnUK3 {
|
|
596
|
-
margin: 0;
|
|
597
|
-
font-family: var(--font-family-sans);
|
|
598
|
-
font-weight: 500;
|
|
599
|
-
text-transform: uppercase;
|
|
600
|
-
|
|
601
|
-
&.typography_large__uq0zC {
|
|
602
|
-
font-size: 14px;
|
|
603
|
-
line-height: 18px;
|
|
604
|
-
letter-spacing: 0.3px;
|
|
605
|
-
}
|
|
606
|
-
|
|
607
|
-
&.typography_small__wfQ0K {
|
|
608
|
-
font-size: 12px;
|
|
609
|
-
line-height: 14px;
|
|
610
|
-
letter-spacing: 0.2px;
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
@media (max-width: 699px) {
|
|
614
|
-
&.typography_large__uq0zC {
|
|
615
|
-
line-height: 17px;
|
|
616
|
-
letter-spacing: 0.3px; /* Added to ensure it stays */
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
&.typography_small__wfQ0K {
|
|
620
|
-
line-height: 14px;
|
|
621
|
-
letter-spacing: 0.3px;
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
/* Button Text */
|
|
627
|
-
.typography_buttontext__vcxNi {
|
|
628
|
-
margin: 0;
|
|
629
|
-
font-family: var(--font-family-sans);
|
|
630
|
-
font-size: 17px;
|
|
631
|
-
line-height: 20px;
|
|
632
|
-
letter-spacing: -0.5px;
|
|
633
|
-
font-weight: 400;
|
|
634
|
-
|
|
635
|
-
@media (max-width: 699px) {
|
|
636
|
-
font-weight: 500;
|
|
637
|
-
line-height: 17px;
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
/* Caption Text */
|
|
642
|
-
.typography_captiontext__91UFb {
|
|
643
|
-
margin: 0;
|
|
644
|
-
font-family: var(--font-family-sans);
|
|
645
|
-
font-weight: 400;
|
|
646
|
-
font-size: 17px;
|
|
647
|
-
line-height: 24px;
|
|
648
|
-
letter-spacing: -0.5px;
|
|
649
|
-
|
|
650
|
-
@media (max-width: 699px) {
|
|
651
|
-
font-size: 14px;
|
|
652
|
-
line-height: 20px;
|
|
653
|
-
letter-spacing: -0.2px;
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
/* Navigation Text */
|
|
658
|
-
.typography_navigationtext__YfGf7 {
|
|
659
|
-
margin: 0;
|
|
660
|
-
font-family: var(--font-family-sans);
|
|
661
|
-
font-size: 19px;
|
|
662
|
-
line-height: 19px;
|
|
663
|
-
letter-spacing: 0.4px;
|
|
664
|
-
font-weight: 500;
|
|
665
|
-
|
|
666
|
-
@media (max-width: 699px) {
|
|
667
|
-
font-size: 17px;
|
|
668
|
-
line-height: 17px;
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
|
|
672
353
|
.core-theme-module_coreTheme__pWxYB {
|
|
673
354
|
/* RBO Red */
|
|
674
355
|
/* Primary Palette */
|