@royaloperahouse/harmonic 0.18.3-a → 0.18.3-experiment

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/README.md CHANGED
@@ -151,8 +151,7 @@ To publish a snapshot use:
151
151
  ```bash
152
152
  NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
153
153
  ```
154
-
155
- The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
154
+ Use the version name to install the package in a frontend repo.
156
155
 
157
156
  ### **2. To release a stable version**
158
157
 
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IDropdownProps } from '../../../types/types';
3
- declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, tabLinkId, trimTabText, }: IDropdownProps) => React.JSX.Element;
3
+ declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, trimTabText, }: IDropdownProps) => React.JSX.Element;
4
4
  export default Dropdown;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ITabProps } from '../../../types/types';
3
- declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
3
+ declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
4
4
  export default Tab;
@@ -1,8 +1,8 @@
1
1
  import { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText } from './Typography';
2
2
  import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
3
3
  import { AnchorTabBar, Footer, Navigation, StickyBar, TitleWithCTA, UpsellSection, Carousel, MinimalCarousel, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream } from './organisms';
4
- import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
4
+ import { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlight, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SignUpForm, Table, Tabs, UpsellCard, VideoWithControls, SkipToMain } from './molecules';
5
5
  import ThemeProvider from '../styles/ThemeProvider';
6
6
  import GlobalStyles from '../styles/GlobalStyles';
7
7
  export { DisplayHeader, HarmonicHeader, HarmonicSubtitle, BodyCopyHarmonic, HarmonicOverline, ButtonText, Caption, NavigationText, SkipToMain, };
8
- export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, CastFilter, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };
8
+ export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, Carousel, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HighlightsCarousel, HighlightsCarouselCinema, HighlightsCarouselCore, HighlightsCarouselStream, Header, HotFilters, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MinimalCarousel, Navigation, Overline, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingPanel, PageHeadingHighlight, PageHeadingPromo, PageHeadingHighlightCarousel, Pagination, PasswordStrength, Paywall, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, SponsorLogo, SignUpForm, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls, };
@@ -1,7 +1,5 @@
1
1
  export declare const CastFiltersComponentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export declare const CastFiltersWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const HeadingTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const RotatorButtonsWrapper: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
5
3
  export declare const CastWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
4
  export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
7
5
  export declare const PersonWrapper: 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, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
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 {};
@@ -3,7 +3,6 @@ import Accordions from './Accordions';
3
3
  import AnnouncementBanner from './AnnouncementBanner';
4
4
  import Card from './Card';
5
5
  import Cards from './Cards';
6
- import CastFilter from './CastFilter';
7
6
  import ContactCard from './ContactCard';
8
7
  import ContentSummary from './ContentSummary';
9
8
  import Editorial from './Editorial';
@@ -36,4 +35,4 @@ import SignUpForm from './SignUpForm';
36
35
  import AnchorBar from './AnchorBar';
37
36
  import SkipToMain from './SkipToMain';
38
37
  import Paywall from './Paywall';
39
- export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, CastFilter, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, VideoWithControls, SkipToMain, };
38
+ export { Accordion, Accordions, AnchorBar, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, HotFilters, ImageWithCaption, Information, MiniCard, PageHeading, PageHeadingCompact, PageHeadingImpact, PageHeadingHighlight, PageHeadingPanel, PageHeadingPromo, PageHeadingHighlightCarousel, PasswordStrength, Pagination, Paywall, PeopleListing, PolicyLinks, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, SignUpForm, Tabs, Table, UpsellCard, VideoWithControls, SkipToMain, };
@@ -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 */