@royaloperahouse/chord 0.3.3 → 0.3.4
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 +6 -0
- package/dist/chord.cjs.development.js +364 -236
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +364 -237
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts +3 -0
- package/dist/components/atoms/RotatorButtons/RotatorButtons.style.d.ts +3 -0
- package/dist/components/atoms/RotatorButtons/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/styles/themes.d.ts +132 -0
- package/dist/types/buttonTypes.d.ts +18 -0
- package/package.json +1 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const IconUnavailableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -9,4 +9,5 @@ import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
|
|
|
9
9
|
import Tab from './Tab';
|
|
10
10
|
import TabLink from './TabLink';
|
|
11
11
|
import TypeTags from './TypeTags';
|
|
12
|
-
|
|
12
|
+
import RotatorButtons from './RotatorButtons';
|
|
13
|
+
export { Grid, GridItem, Heading, Icon, ImageAspectRatioWrapper, PrimaryButton, RotatorButtons, SecondaryButton, SectionSplitter, SponsorLogo, Sponsorship, Tab, TabLink, TertiaryButton, TypeTags, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Grid, GridItem, Heading, Icon, Sponsorship, PrimaryButton, SecondaryButton, TertiaryButton, SectionSplitter, TabLink, TypeTags } from './atoms';
|
|
1
|
+
import { Grid, GridItem, Heading, Icon, Sponsorship, PrimaryButton, RotatorButtons, SecondaryButton, TertiaryButton, SectionSplitter, TabLink, TypeTags } from './atoms';
|
|
2
2
|
import { AnchorTapBar, Footer, Navigation } from './organisms';
|
|
3
3
|
import { Accordion, Accordions, Cards, Editorial, PeopleListing, PromoWithTitle, SectionTitle, Tabs, TextOnly } from './molecules';
|
|
4
4
|
import ThemeProvider from '../styles/ThemeProvider';
|
|
5
5
|
import GlobalStyles from '../styles/GlobalStyles';
|
|
6
|
-
export { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, SectionSplitter, TabLink, Tabs, TypeTags, };
|
|
6
|
+
export { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, SectionSplitter, TabLink, Tabs, TypeTags, };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, TabLink, Tabs, TypeTags } from './components';
|
|
1
|
+
import { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, TabLink, Tabs, TypeTags } from './components';
|
|
2
2
|
import { ThemeType } from './types/types';
|
|
3
|
-
export { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, Heading, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TabLink, Tabs, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags, };
|
|
3
|
+
export { Accordion, Accordions, AnchorTapBar, Cards, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, Heading, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TabLink, Tabs, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags, };
|
package/dist/styles/themes.d.ts
CHANGED
|
@@ -71,6 +71,7 @@ export declare const core: {
|
|
|
71
71
|
};
|
|
72
72
|
subtitles: {
|
|
73
73
|
1: string;
|
|
74
|
+
2: string;
|
|
74
75
|
};
|
|
75
76
|
body: {
|
|
76
77
|
1: string;
|
|
@@ -139,6 +140,7 @@ export declare const core: {
|
|
|
139
140
|
buttons: string;
|
|
140
141
|
overline: {
|
|
141
142
|
1: string;
|
|
143
|
+
2: string;
|
|
142
144
|
};
|
|
143
145
|
body: {
|
|
144
146
|
1: string;
|
|
@@ -158,6 +160,15 @@ export declare const core: {
|
|
|
158
160
|
body: string;
|
|
159
161
|
navigation: string;
|
|
160
162
|
};
|
|
163
|
+
fontFeatureSettings: {
|
|
164
|
+
headers: string;
|
|
165
|
+
altHeaders: string;
|
|
166
|
+
overline: string;
|
|
167
|
+
subtitles1: string;
|
|
168
|
+
subtitles2: string;
|
|
169
|
+
body: string;
|
|
170
|
+
navigation: string;
|
|
171
|
+
};
|
|
161
172
|
};
|
|
162
173
|
mobile: {
|
|
163
174
|
sizes: {
|
|
@@ -209,6 +220,7 @@ export declare const core: {
|
|
|
209
220
|
};
|
|
210
221
|
subtitles: {
|
|
211
222
|
1: string;
|
|
223
|
+
2: string;
|
|
212
224
|
};
|
|
213
225
|
body: {
|
|
214
226
|
1: string;
|
|
@@ -275,6 +287,7 @@ export declare const core: {
|
|
|
275
287
|
buttons: string;
|
|
276
288
|
overline: {
|
|
277
289
|
1: string;
|
|
290
|
+
2: string;
|
|
278
291
|
};
|
|
279
292
|
body: {
|
|
280
293
|
1: string;
|
|
@@ -294,6 +307,15 @@ export declare const core: {
|
|
|
294
307
|
body: string;
|
|
295
308
|
navigation: string;
|
|
296
309
|
};
|
|
310
|
+
fontFeatureSettings: {
|
|
311
|
+
headers: string;
|
|
312
|
+
altHeaders: string;
|
|
313
|
+
overline: string;
|
|
314
|
+
subtitles1: string;
|
|
315
|
+
subtitles2: string;
|
|
316
|
+
body: string;
|
|
317
|
+
navigation: string;
|
|
318
|
+
};
|
|
297
319
|
};
|
|
298
320
|
};
|
|
299
321
|
spacing: {
|
|
@@ -440,6 +462,7 @@ export declare const stream: {
|
|
|
440
462
|
};
|
|
441
463
|
subtitles: {
|
|
442
464
|
1: string;
|
|
465
|
+
2: string;
|
|
443
466
|
};
|
|
444
467
|
body: {
|
|
445
468
|
1: string;
|
|
@@ -508,6 +531,7 @@ export declare const stream: {
|
|
|
508
531
|
buttons: string;
|
|
509
532
|
overline: {
|
|
510
533
|
1: string;
|
|
534
|
+
2: string;
|
|
511
535
|
};
|
|
512
536
|
body: {
|
|
513
537
|
1: string;
|
|
@@ -527,6 +551,15 @@ export declare const stream: {
|
|
|
527
551
|
body: string;
|
|
528
552
|
navigation: string;
|
|
529
553
|
};
|
|
554
|
+
fontFeatureSettings: {
|
|
555
|
+
headers: string;
|
|
556
|
+
altHeaders: string;
|
|
557
|
+
overline: string;
|
|
558
|
+
subtitles1: string;
|
|
559
|
+
subtitles2: string;
|
|
560
|
+
body: string;
|
|
561
|
+
navigation: string;
|
|
562
|
+
};
|
|
530
563
|
};
|
|
531
564
|
mobile: {
|
|
532
565
|
sizes: {
|
|
@@ -578,6 +611,7 @@ export declare const stream: {
|
|
|
578
611
|
};
|
|
579
612
|
subtitles: {
|
|
580
613
|
1: string;
|
|
614
|
+
2: string;
|
|
581
615
|
};
|
|
582
616
|
body: {
|
|
583
617
|
1: string;
|
|
@@ -644,6 +678,7 @@ export declare const stream: {
|
|
|
644
678
|
buttons: string;
|
|
645
679
|
overline: {
|
|
646
680
|
1: string;
|
|
681
|
+
2: string;
|
|
647
682
|
};
|
|
648
683
|
body: {
|
|
649
684
|
1: string;
|
|
@@ -663,6 +698,15 @@ export declare const stream: {
|
|
|
663
698
|
body: string;
|
|
664
699
|
navigation: string;
|
|
665
700
|
};
|
|
701
|
+
fontFeatureSettings: {
|
|
702
|
+
headers: string;
|
|
703
|
+
altHeaders: string;
|
|
704
|
+
overline: string;
|
|
705
|
+
subtitles1: string;
|
|
706
|
+
subtitles2: string;
|
|
707
|
+
body: string;
|
|
708
|
+
navigation: string;
|
|
709
|
+
};
|
|
666
710
|
};
|
|
667
711
|
};
|
|
668
712
|
spacing: {
|
|
@@ -809,6 +853,7 @@ export declare const cinema: {
|
|
|
809
853
|
};
|
|
810
854
|
subtitles: {
|
|
811
855
|
1: string;
|
|
856
|
+
2: string;
|
|
812
857
|
};
|
|
813
858
|
body: {
|
|
814
859
|
1: string;
|
|
@@ -877,6 +922,7 @@ export declare const cinema: {
|
|
|
877
922
|
buttons: string;
|
|
878
923
|
overline: {
|
|
879
924
|
1: string;
|
|
925
|
+
2: string;
|
|
880
926
|
};
|
|
881
927
|
body: {
|
|
882
928
|
1: string;
|
|
@@ -896,6 +942,15 @@ export declare const cinema: {
|
|
|
896
942
|
body: string;
|
|
897
943
|
navigation: string;
|
|
898
944
|
};
|
|
945
|
+
fontFeatureSettings: {
|
|
946
|
+
headers: string;
|
|
947
|
+
altHeaders: string;
|
|
948
|
+
overline: string;
|
|
949
|
+
subtitles1: string;
|
|
950
|
+
subtitles2: string;
|
|
951
|
+
body: string;
|
|
952
|
+
navigation: string;
|
|
953
|
+
};
|
|
899
954
|
};
|
|
900
955
|
mobile: {
|
|
901
956
|
sizes: {
|
|
@@ -947,6 +1002,7 @@ export declare const cinema: {
|
|
|
947
1002
|
};
|
|
948
1003
|
subtitles: {
|
|
949
1004
|
1: string;
|
|
1005
|
+
2: string;
|
|
950
1006
|
};
|
|
951
1007
|
body: {
|
|
952
1008
|
1: string;
|
|
@@ -1013,6 +1069,7 @@ export declare const cinema: {
|
|
|
1013
1069
|
buttons: string;
|
|
1014
1070
|
overline: {
|
|
1015
1071
|
1: string;
|
|
1072
|
+
2: string;
|
|
1016
1073
|
};
|
|
1017
1074
|
body: {
|
|
1018
1075
|
1: string;
|
|
@@ -1032,6 +1089,15 @@ export declare const cinema: {
|
|
|
1032
1089
|
body: string;
|
|
1033
1090
|
navigation: string;
|
|
1034
1091
|
};
|
|
1092
|
+
fontFeatureSettings: {
|
|
1093
|
+
headers: string;
|
|
1094
|
+
altHeaders: string;
|
|
1095
|
+
overline: string;
|
|
1096
|
+
subtitles1: string;
|
|
1097
|
+
subtitles2: string;
|
|
1098
|
+
body: string;
|
|
1099
|
+
navigation: string;
|
|
1100
|
+
};
|
|
1035
1101
|
};
|
|
1036
1102
|
};
|
|
1037
1103
|
spacing: {
|
|
@@ -1179,6 +1245,7 @@ export declare const themes: {
|
|
|
1179
1245
|
};
|
|
1180
1246
|
subtitles: {
|
|
1181
1247
|
1: string;
|
|
1248
|
+
2: string;
|
|
1182
1249
|
};
|
|
1183
1250
|
body: {
|
|
1184
1251
|
1: string;
|
|
@@ -1247,6 +1314,7 @@ export declare const themes: {
|
|
|
1247
1314
|
buttons: string;
|
|
1248
1315
|
overline: {
|
|
1249
1316
|
1: string;
|
|
1317
|
+
2: string;
|
|
1250
1318
|
};
|
|
1251
1319
|
body: {
|
|
1252
1320
|
1: string;
|
|
@@ -1266,6 +1334,15 @@ export declare const themes: {
|
|
|
1266
1334
|
body: string;
|
|
1267
1335
|
navigation: string;
|
|
1268
1336
|
};
|
|
1337
|
+
fontFeatureSettings: {
|
|
1338
|
+
headers: string;
|
|
1339
|
+
altHeaders: string;
|
|
1340
|
+
overline: string;
|
|
1341
|
+
subtitles1: string;
|
|
1342
|
+
subtitles2: string;
|
|
1343
|
+
body: string;
|
|
1344
|
+
navigation: string;
|
|
1345
|
+
};
|
|
1269
1346
|
};
|
|
1270
1347
|
mobile: {
|
|
1271
1348
|
sizes: {
|
|
@@ -1317,6 +1394,7 @@ export declare const themes: {
|
|
|
1317
1394
|
};
|
|
1318
1395
|
subtitles: {
|
|
1319
1396
|
1: string;
|
|
1397
|
+
2: string;
|
|
1320
1398
|
};
|
|
1321
1399
|
body: {
|
|
1322
1400
|
1: string;
|
|
@@ -1383,6 +1461,7 @@ export declare const themes: {
|
|
|
1383
1461
|
buttons: string;
|
|
1384
1462
|
overline: {
|
|
1385
1463
|
1: string;
|
|
1464
|
+
2: string;
|
|
1386
1465
|
};
|
|
1387
1466
|
body: {
|
|
1388
1467
|
1: string;
|
|
@@ -1402,6 +1481,15 @@ export declare const themes: {
|
|
|
1402
1481
|
body: string;
|
|
1403
1482
|
navigation: string;
|
|
1404
1483
|
};
|
|
1484
|
+
fontFeatureSettings: {
|
|
1485
|
+
headers: string;
|
|
1486
|
+
altHeaders: string;
|
|
1487
|
+
overline: string;
|
|
1488
|
+
subtitles1: string;
|
|
1489
|
+
subtitles2: string;
|
|
1490
|
+
body: string;
|
|
1491
|
+
navigation: string;
|
|
1492
|
+
};
|
|
1405
1493
|
};
|
|
1406
1494
|
};
|
|
1407
1495
|
spacing: {
|
|
@@ -1548,6 +1636,7 @@ export declare const themes: {
|
|
|
1548
1636
|
};
|
|
1549
1637
|
subtitles: {
|
|
1550
1638
|
1: string;
|
|
1639
|
+
2: string;
|
|
1551
1640
|
};
|
|
1552
1641
|
body: {
|
|
1553
1642
|
1: string;
|
|
@@ -1616,6 +1705,7 @@ export declare const themes: {
|
|
|
1616
1705
|
buttons: string;
|
|
1617
1706
|
overline: {
|
|
1618
1707
|
1: string;
|
|
1708
|
+
2: string;
|
|
1619
1709
|
};
|
|
1620
1710
|
body: {
|
|
1621
1711
|
1: string;
|
|
@@ -1635,6 +1725,15 @@ export declare const themes: {
|
|
|
1635
1725
|
body: string;
|
|
1636
1726
|
navigation: string;
|
|
1637
1727
|
};
|
|
1728
|
+
fontFeatureSettings: {
|
|
1729
|
+
headers: string;
|
|
1730
|
+
altHeaders: string;
|
|
1731
|
+
overline: string;
|
|
1732
|
+
subtitles1: string;
|
|
1733
|
+
subtitles2: string;
|
|
1734
|
+
body: string;
|
|
1735
|
+
navigation: string;
|
|
1736
|
+
};
|
|
1638
1737
|
};
|
|
1639
1738
|
mobile: {
|
|
1640
1739
|
sizes: {
|
|
@@ -1686,6 +1785,7 @@ export declare const themes: {
|
|
|
1686
1785
|
};
|
|
1687
1786
|
subtitles: {
|
|
1688
1787
|
1: string;
|
|
1788
|
+
2: string;
|
|
1689
1789
|
};
|
|
1690
1790
|
body: {
|
|
1691
1791
|
1: string;
|
|
@@ -1752,6 +1852,7 @@ export declare const themes: {
|
|
|
1752
1852
|
buttons: string;
|
|
1753
1853
|
overline: {
|
|
1754
1854
|
1: string;
|
|
1855
|
+
2: string;
|
|
1755
1856
|
};
|
|
1756
1857
|
body: {
|
|
1757
1858
|
1: string;
|
|
@@ -1771,6 +1872,15 @@ export declare const themes: {
|
|
|
1771
1872
|
body: string;
|
|
1772
1873
|
navigation: string;
|
|
1773
1874
|
};
|
|
1875
|
+
fontFeatureSettings: {
|
|
1876
|
+
headers: string;
|
|
1877
|
+
altHeaders: string;
|
|
1878
|
+
overline: string;
|
|
1879
|
+
subtitles1: string;
|
|
1880
|
+
subtitles2: string;
|
|
1881
|
+
body: string;
|
|
1882
|
+
navigation: string;
|
|
1883
|
+
};
|
|
1774
1884
|
};
|
|
1775
1885
|
};
|
|
1776
1886
|
spacing: {
|
|
@@ -1917,6 +2027,7 @@ export declare const themes: {
|
|
|
1917
2027
|
};
|
|
1918
2028
|
subtitles: {
|
|
1919
2029
|
1: string;
|
|
2030
|
+
2: string;
|
|
1920
2031
|
};
|
|
1921
2032
|
body: {
|
|
1922
2033
|
1: string;
|
|
@@ -1985,6 +2096,7 @@ export declare const themes: {
|
|
|
1985
2096
|
buttons: string;
|
|
1986
2097
|
overline: {
|
|
1987
2098
|
1: string;
|
|
2099
|
+
2: string;
|
|
1988
2100
|
};
|
|
1989
2101
|
body: {
|
|
1990
2102
|
1: string;
|
|
@@ -2004,6 +2116,15 @@ export declare const themes: {
|
|
|
2004
2116
|
body: string;
|
|
2005
2117
|
navigation: string;
|
|
2006
2118
|
};
|
|
2119
|
+
fontFeatureSettings: {
|
|
2120
|
+
headers: string;
|
|
2121
|
+
altHeaders: string;
|
|
2122
|
+
overline: string;
|
|
2123
|
+
subtitles1: string;
|
|
2124
|
+
subtitles2: string;
|
|
2125
|
+
body: string;
|
|
2126
|
+
navigation: string;
|
|
2127
|
+
};
|
|
2007
2128
|
};
|
|
2008
2129
|
mobile: {
|
|
2009
2130
|
sizes: {
|
|
@@ -2055,6 +2176,7 @@ export declare const themes: {
|
|
|
2055
2176
|
};
|
|
2056
2177
|
subtitles: {
|
|
2057
2178
|
1: string;
|
|
2179
|
+
2: string;
|
|
2058
2180
|
};
|
|
2059
2181
|
body: {
|
|
2060
2182
|
1: string;
|
|
@@ -2121,6 +2243,7 @@ export declare const themes: {
|
|
|
2121
2243
|
buttons: string;
|
|
2122
2244
|
overline: {
|
|
2123
2245
|
1: string;
|
|
2246
|
+
2: string;
|
|
2124
2247
|
};
|
|
2125
2248
|
body: {
|
|
2126
2249
|
1: string;
|
|
@@ -2140,6 +2263,15 @@ export declare const themes: {
|
|
|
2140
2263
|
body: string;
|
|
2141
2264
|
navigation: string;
|
|
2142
2265
|
};
|
|
2266
|
+
fontFeatureSettings: {
|
|
2267
|
+
headers: string;
|
|
2268
|
+
altHeaders: string;
|
|
2269
|
+
overline: string;
|
|
2270
|
+
subtitles1: string;
|
|
2271
|
+
subtitles2: string;
|
|
2272
|
+
body: string;
|
|
2273
|
+
navigation: string;
|
|
2274
|
+
};
|
|
2143
2275
|
};
|
|
2144
2276
|
};
|
|
2145
2277
|
spacing: {
|
|
@@ -37,3 +37,21 @@ export interface ITertiaryButtonProps extends AnchorHTMLAttributes<HTMLAnchorEle
|
|
|
37
37
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
38
38
|
children: ReactNode;
|
|
39
39
|
}
|
|
40
|
+
export interface IRotatorButtonsProps {
|
|
41
|
+
/**
|
|
42
|
+
* Set available Prev button
|
|
43
|
+
*/
|
|
44
|
+
availablePrev?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Set available Next button
|
|
47
|
+
*/
|
|
48
|
+
availableNext?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Function to be called when a button is clicked
|
|
51
|
+
*/
|
|
52
|
+
onClickPrev?: Function;
|
|
53
|
+
/**
|
|
54
|
+
* Function to be called when a button is clicked
|
|
55
|
+
*/
|
|
56
|
+
onClickNext?: Function;
|
|
57
|
+
}
|