@royaloperahouse/chord 0.3.6 → 0.3.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 -0
- package/README.md +1 -1
- package/dist/chord.cjs.development.js +616 -330
- 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 +611 -330
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/TypeTags/TypeTags.style.d.ts +0 -1
- package/dist/components/atoms/Typography/Typography.d.ts +7 -0
- package/dist/components/atoms/Typography/Typography.style.d.ts +3 -0
- package/dist/components/atoms/Typography/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -2
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Accordion/Accordion.style.d.ts +2 -2
- package/dist/index.d.ts +3 -2
- package/dist/styles/themes.d.ts +168 -24
- package/dist/types/types.d.ts +3 -18
- package/dist/types/typography.d.ts +73 -0
- package/package.json +1 -1
- package/dist/components/atoms/Heading/Heading.d.ts +0 -3
- package/dist/components/atoms/Heading/Heading.style.d.ts +0 -3
- package/dist/components/atoms/Heading/index.d.ts +0 -2
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IAltHeaderProps, IBodyTextProps, IHeaderProps, IOverlineProps, IStyledTag, ISubtitleProps } from '../../../types/typography';
|
|
2
|
+
export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => JSX.Element;
|
|
3
|
+
export declare const AltHeader: ({ level, children }: IAltHeaderProps) => JSX.Element;
|
|
4
|
+
export declare const BodyText: ({ level, children, tag }: IBodyTextProps) => JSX.Element;
|
|
5
|
+
export declare const Header: ({ level, children }: IHeaderProps) => JSX.Element;
|
|
6
|
+
export declare const Overline: ({ level, children, tag }: IOverlineProps) => JSX.Element;
|
|
7
|
+
export declare const Subtitle: ({ level, children, tag }: ISubtitleProps) => JSX.Element;
|
|
@@ -3,7 +3,6 @@ import { Grid, GridItem } from './Grid';
|
|
|
3
3
|
import { Icon } from './Icons';
|
|
4
4
|
import { CinemaBadge, StreamBadge } from './Badge';
|
|
5
5
|
import SecondaryLogo from './SecondaryLogo';
|
|
6
|
-
import Heading from './Heading';
|
|
7
6
|
import SponsorLogo from './SponsorLogo';
|
|
8
7
|
import Sponsorship from './Sponsorship';
|
|
9
8
|
import SectionSplitter from './SectionSplitter';
|
|
@@ -12,4 +11,5 @@ import Tab from './Tab';
|
|
|
12
11
|
import TabLink from './TabLink';
|
|
13
12
|
import TypeTags from './TypeTags';
|
|
14
13
|
import RotatorButtons from './RotatorButtons';
|
|
15
|
-
|
|
14
|
+
import { AltHeader, BodyText, Header, Overline, Subtitle } from './Typography';
|
|
15
|
+
export { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TypeTags, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CinemaBadge, Grid, GridItem,
|
|
1
|
+
import { AltHeader, BodyText, CinemaBadge, Grid, GridItem, Header, Icon, Overline, PrimaryButton, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, StreamBadge, Subtitle, TabLink, TypeTags } from './atoms';
|
|
2
2
|
import { AnchorTapBar, Footer, Navigation } from './organisms';
|
|
3
3
|
import { Accordion, Accordions, Cards, Editorial, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PromoWithTitle, SectionTitle, Tabs, TextOnly } from './molecules';
|
|
4
4
|
import ThemeProvider from '../styles/ThemeProvider';
|
|
5
5
|
import GlobalStyles from '../styles/GlobalStyles';
|
|
6
|
-
export {
|
|
6
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Cards, CinemaBadge, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionTitle, Sponsorship, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, SectionSplitter, TabLink, Tabs, TypeTags, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const AccordionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export declare const LineContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Cards, CinemaBadge, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TabLink, Tabs, TypeTags } from './components';
|
|
2
|
+
import { devices } from './styles/viewports';
|
|
2
3
|
import { ThemeType } from './types/types';
|
|
3
|
-
export {
|
|
4
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Cards, CinemaBadge, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, Header, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags, };
|
package/dist/styles/themes.d.ts
CHANGED
|
@@ -66,6 +66,9 @@ export declare const core: {
|
|
|
66
66
|
6: string;
|
|
67
67
|
};
|
|
68
68
|
altHeaders: {
|
|
69
|
+
3: string;
|
|
70
|
+
4: string;
|
|
71
|
+
5: string;
|
|
69
72
|
6: string;
|
|
70
73
|
};
|
|
71
74
|
overline: {
|
|
@@ -141,6 +144,9 @@ export declare const core: {
|
|
|
141
144
|
6: string;
|
|
142
145
|
};
|
|
143
146
|
altHeaders: {
|
|
147
|
+
3: string;
|
|
148
|
+
4: string;
|
|
149
|
+
5: string;
|
|
144
150
|
6: string;
|
|
145
151
|
};
|
|
146
152
|
buttons: string;
|
|
@@ -171,11 +177,17 @@ export declare const core: {
|
|
|
171
177
|
headers: string;
|
|
172
178
|
altHeaders: string;
|
|
173
179
|
overline: string;
|
|
174
|
-
|
|
175
|
-
subtitles2: string;
|
|
180
|
+
subtitles: string;
|
|
176
181
|
body: string;
|
|
177
182
|
navigation: string;
|
|
178
183
|
};
|
|
184
|
+
wordBreak: {
|
|
185
|
+
headers: string;
|
|
186
|
+
altHeaders: string;
|
|
187
|
+
overline: string;
|
|
188
|
+
subtitles: string;
|
|
189
|
+
body: string;
|
|
190
|
+
};
|
|
179
191
|
};
|
|
180
192
|
mobile: {
|
|
181
193
|
sizes: {
|
|
@@ -222,6 +234,9 @@ export declare const core: {
|
|
|
222
234
|
6: string;
|
|
223
235
|
};
|
|
224
236
|
altHeaders: {
|
|
237
|
+
3: string;
|
|
238
|
+
4: string;
|
|
239
|
+
5: string;
|
|
225
240
|
6: string;
|
|
226
241
|
};
|
|
227
242
|
overline: {
|
|
@@ -295,6 +310,9 @@ export declare const core: {
|
|
|
295
310
|
6: string;
|
|
296
311
|
};
|
|
297
312
|
altHeaders: {
|
|
313
|
+
3: string;
|
|
314
|
+
4: string;
|
|
315
|
+
5: string;
|
|
298
316
|
6: string;
|
|
299
317
|
};
|
|
300
318
|
buttons: string;
|
|
@@ -325,11 +343,17 @@ export declare const core: {
|
|
|
325
343
|
headers: string;
|
|
326
344
|
altHeaders: string;
|
|
327
345
|
overline: string;
|
|
328
|
-
|
|
329
|
-
subtitles2: string;
|
|
346
|
+
subtitles: string;
|
|
330
347
|
body: string;
|
|
331
348
|
navigation: string;
|
|
332
349
|
};
|
|
350
|
+
wordBreak: {
|
|
351
|
+
headers: string;
|
|
352
|
+
altHeaders: string;
|
|
353
|
+
overline: string;
|
|
354
|
+
subtitles: string;
|
|
355
|
+
body: string;
|
|
356
|
+
};
|
|
333
357
|
};
|
|
334
358
|
};
|
|
335
359
|
spacing: {
|
|
@@ -471,6 +495,9 @@ export declare const stream: {
|
|
|
471
495
|
6: string;
|
|
472
496
|
};
|
|
473
497
|
altHeaders: {
|
|
498
|
+
3: string;
|
|
499
|
+
4: string;
|
|
500
|
+
5: string;
|
|
474
501
|
6: string;
|
|
475
502
|
};
|
|
476
503
|
overline: {
|
|
@@ -546,6 +573,9 @@ export declare const stream: {
|
|
|
546
573
|
6: string;
|
|
547
574
|
};
|
|
548
575
|
altHeaders: {
|
|
576
|
+
3: string;
|
|
577
|
+
4: string;
|
|
578
|
+
5: string;
|
|
549
579
|
6: string;
|
|
550
580
|
};
|
|
551
581
|
buttons: string;
|
|
@@ -576,11 +606,17 @@ export declare const stream: {
|
|
|
576
606
|
headers: string;
|
|
577
607
|
altHeaders: string;
|
|
578
608
|
overline: string;
|
|
579
|
-
|
|
580
|
-
subtitles2: string;
|
|
609
|
+
subtitles: string;
|
|
581
610
|
body: string;
|
|
582
611
|
navigation: string;
|
|
583
612
|
};
|
|
613
|
+
wordBreak: {
|
|
614
|
+
headers: string;
|
|
615
|
+
altHeaders: string;
|
|
616
|
+
overline: string;
|
|
617
|
+
subtitles: string;
|
|
618
|
+
body: string;
|
|
619
|
+
};
|
|
584
620
|
};
|
|
585
621
|
mobile: {
|
|
586
622
|
sizes: {
|
|
@@ -627,6 +663,9 @@ export declare const stream: {
|
|
|
627
663
|
6: string;
|
|
628
664
|
};
|
|
629
665
|
altHeaders: {
|
|
666
|
+
3: string;
|
|
667
|
+
4: string;
|
|
668
|
+
5: string;
|
|
630
669
|
6: string;
|
|
631
670
|
};
|
|
632
671
|
overline: {
|
|
@@ -700,6 +739,9 @@ export declare const stream: {
|
|
|
700
739
|
6: string;
|
|
701
740
|
};
|
|
702
741
|
altHeaders: {
|
|
742
|
+
3: string;
|
|
743
|
+
4: string;
|
|
744
|
+
5: string;
|
|
703
745
|
6: string;
|
|
704
746
|
};
|
|
705
747
|
buttons: string;
|
|
@@ -730,11 +772,17 @@ export declare const stream: {
|
|
|
730
772
|
headers: string;
|
|
731
773
|
altHeaders: string;
|
|
732
774
|
overline: string;
|
|
733
|
-
|
|
734
|
-
subtitles2: string;
|
|
775
|
+
subtitles: string;
|
|
735
776
|
body: string;
|
|
736
777
|
navigation: string;
|
|
737
778
|
};
|
|
779
|
+
wordBreak: {
|
|
780
|
+
headers: string;
|
|
781
|
+
altHeaders: string;
|
|
782
|
+
overline: string;
|
|
783
|
+
subtitles: string;
|
|
784
|
+
body: string;
|
|
785
|
+
};
|
|
738
786
|
};
|
|
739
787
|
};
|
|
740
788
|
spacing: {
|
|
@@ -876,6 +924,9 @@ export declare const cinema: {
|
|
|
876
924
|
6: string;
|
|
877
925
|
};
|
|
878
926
|
altHeaders: {
|
|
927
|
+
3: string;
|
|
928
|
+
4: string;
|
|
929
|
+
5: string;
|
|
879
930
|
6: string;
|
|
880
931
|
};
|
|
881
932
|
overline: {
|
|
@@ -951,6 +1002,9 @@ export declare const cinema: {
|
|
|
951
1002
|
6: string;
|
|
952
1003
|
};
|
|
953
1004
|
altHeaders: {
|
|
1005
|
+
3: string;
|
|
1006
|
+
4: string;
|
|
1007
|
+
5: string;
|
|
954
1008
|
6: string;
|
|
955
1009
|
};
|
|
956
1010
|
buttons: string;
|
|
@@ -981,11 +1035,17 @@ export declare const cinema: {
|
|
|
981
1035
|
headers: string;
|
|
982
1036
|
altHeaders: string;
|
|
983
1037
|
overline: string;
|
|
984
|
-
|
|
985
|
-
subtitles2: string;
|
|
1038
|
+
subtitles: string;
|
|
986
1039
|
body: string;
|
|
987
1040
|
navigation: string;
|
|
988
1041
|
};
|
|
1042
|
+
wordBreak: {
|
|
1043
|
+
headers: string;
|
|
1044
|
+
altHeaders: string;
|
|
1045
|
+
overline: string;
|
|
1046
|
+
subtitles: string;
|
|
1047
|
+
body: string;
|
|
1048
|
+
};
|
|
989
1049
|
};
|
|
990
1050
|
mobile: {
|
|
991
1051
|
sizes: {
|
|
@@ -1032,6 +1092,9 @@ export declare const cinema: {
|
|
|
1032
1092
|
6: string;
|
|
1033
1093
|
};
|
|
1034
1094
|
altHeaders: {
|
|
1095
|
+
3: string;
|
|
1096
|
+
4: string;
|
|
1097
|
+
5: string;
|
|
1035
1098
|
6: string;
|
|
1036
1099
|
};
|
|
1037
1100
|
overline: {
|
|
@@ -1105,6 +1168,9 @@ export declare const cinema: {
|
|
|
1105
1168
|
6: string;
|
|
1106
1169
|
};
|
|
1107
1170
|
altHeaders: {
|
|
1171
|
+
3: string;
|
|
1172
|
+
4: string;
|
|
1173
|
+
5: string;
|
|
1108
1174
|
6: string;
|
|
1109
1175
|
};
|
|
1110
1176
|
buttons: string;
|
|
@@ -1135,11 +1201,17 @@ export declare const cinema: {
|
|
|
1135
1201
|
headers: string;
|
|
1136
1202
|
altHeaders: string;
|
|
1137
1203
|
overline: string;
|
|
1138
|
-
|
|
1139
|
-
subtitles2: string;
|
|
1204
|
+
subtitles: string;
|
|
1140
1205
|
body: string;
|
|
1141
1206
|
navigation: string;
|
|
1142
1207
|
};
|
|
1208
|
+
wordBreak: {
|
|
1209
|
+
headers: string;
|
|
1210
|
+
altHeaders: string;
|
|
1211
|
+
overline: string;
|
|
1212
|
+
subtitles: string;
|
|
1213
|
+
body: string;
|
|
1214
|
+
};
|
|
1143
1215
|
};
|
|
1144
1216
|
};
|
|
1145
1217
|
spacing: {
|
|
@@ -1282,6 +1354,9 @@ export declare const themes: {
|
|
|
1282
1354
|
6: string;
|
|
1283
1355
|
};
|
|
1284
1356
|
altHeaders: {
|
|
1357
|
+
3: string;
|
|
1358
|
+
4: string;
|
|
1359
|
+
5: string;
|
|
1285
1360
|
6: string;
|
|
1286
1361
|
};
|
|
1287
1362
|
overline: {
|
|
@@ -1357,6 +1432,9 @@ export declare const themes: {
|
|
|
1357
1432
|
6: string;
|
|
1358
1433
|
};
|
|
1359
1434
|
altHeaders: {
|
|
1435
|
+
3: string;
|
|
1436
|
+
4: string;
|
|
1437
|
+
5: string;
|
|
1360
1438
|
6: string;
|
|
1361
1439
|
};
|
|
1362
1440
|
buttons: string;
|
|
@@ -1387,11 +1465,17 @@ export declare const themes: {
|
|
|
1387
1465
|
headers: string;
|
|
1388
1466
|
altHeaders: string;
|
|
1389
1467
|
overline: string;
|
|
1390
|
-
|
|
1391
|
-
subtitles2: string;
|
|
1468
|
+
subtitles: string;
|
|
1392
1469
|
body: string;
|
|
1393
1470
|
navigation: string;
|
|
1394
1471
|
};
|
|
1472
|
+
wordBreak: {
|
|
1473
|
+
headers: string;
|
|
1474
|
+
altHeaders: string;
|
|
1475
|
+
overline: string;
|
|
1476
|
+
subtitles: string;
|
|
1477
|
+
body: string;
|
|
1478
|
+
};
|
|
1395
1479
|
};
|
|
1396
1480
|
mobile: {
|
|
1397
1481
|
sizes: {
|
|
@@ -1438,6 +1522,9 @@ export declare const themes: {
|
|
|
1438
1522
|
6: string;
|
|
1439
1523
|
};
|
|
1440
1524
|
altHeaders: {
|
|
1525
|
+
3: string;
|
|
1526
|
+
4: string;
|
|
1527
|
+
5: string;
|
|
1441
1528
|
6: string;
|
|
1442
1529
|
};
|
|
1443
1530
|
overline: {
|
|
@@ -1511,6 +1598,9 @@ export declare const themes: {
|
|
|
1511
1598
|
6: string;
|
|
1512
1599
|
};
|
|
1513
1600
|
altHeaders: {
|
|
1601
|
+
3: string;
|
|
1602
|
+
4: string;
|
|
1603
|
+
5: string;
|
|
1514
1604
|
6: string;
|
|
1515
1605
|
};
|
|
1516
1606
|
buttons: string;
|
|
@@ -1541,11 +1631,17 @@ export declare const themes: {
|
|
|
1541
1631
|
headers: string;
|
|
1542
1632
|
altHeaders: string;
|
|
1543
1633
|
overline: string;
|
|
1544
|
-
|
|
1545
|
-
subtitles2: string;
|
|
1634
|
+
subtitles: string;
|
|
1546
1635
|
body: string;
|
|
1547
1636
|
navigation: string;
|
|
1548
1637
|
};
|
|
1638
|
+
wordBreak: {
|
|
1639
|
+
headers: string;
|
|
1640
|
+
altHeaders: string;
|
|
1641
|
+
overline: string;
|
|
1642
|
+
subtitles: string;
|
|
1643
|
+
body: string;
|
|
1644
|
+
};
|
|
1549
1645
|
};
|
|
1550
1646
|
};
|
|
1551
1647
|
spacing: {
|
|
@@ -1687,6 +1783,9 @@ export declare const themes: {
|
|
|
1687
1783
|
6: string;
|
|
1688
1784
|
};
|
|
1689
1785
|
altHeaders: {
|
|
1786
|
+
3: string;
|
|
1787
|
+
4: string;
|
|
1788
|
+
5: string;
|
|
1690
1789
|
6: string;
|
|
1691
1790
|
};
|
|
1692
1791
|
overline: {
|
|
@@ -1762,6 +1861,9 @@ export declare const themes: {
|
|
|
1762
1861
|
6: string;
|
|
1763
1862
|
};
|
|
1764
1863
|
altHeaders: {
|
|
1864
|
+
3: string;
|
|
1865
|
+
4: string;
|
|
1866
|
+
5: string;
|
|
1765
1867
|
6: string;
|
|
1766
1868
|
};
|
|
1767
1869
|
buttons: string;
|
|
@@ -1792,11 +1894,17 @@ export declare const themes: {
|
|
|
1792
1894
|
headers: string;
|
|
1793
1895
|
altHeaders: string;
|
|
1794
1896
|
overline: string;
|
|
1795
|
-
|
|
1796
|
-
subtitles2: string;
|
|
1897
|
+
subtitles: string;
|
|
1797
1898
|
body: string;
|
|
1798
1899
|
navigation: string;
|
|
1799
1900
|
};
|
|
1901
|
+
wordBreak: {
|
|
1902
|
+
headers: string;
|
|
1903
|
+
altHeaders: string;
|
|
1904
|
+
overline: string;
|
|
1905
|
+
subtitles: string;
|
|
1906
|
+
body: string;
|
|
1907
|
+
};
|
|
1800
1908
|
};
|
|
1801
1909
|
mobile: {
|
|
1802
1910
|
sizes: {
|
|
@@ -1843,6 +1951,9 @@ export declare const themes: {
|
|
|
1843
1951
|
6: string;
|
|
1844
1952
|
};
|
|
1845
1953
|
altHeaders: {
|
|
1954
|
+
3: string;
|
|
1955
|
+
4: string;
|
|
1956
|
+
5: string;
|
|
1846
1957
|
6: string;
|
|
1847
1958
|
};
|
|
1848
1959
|
overline: {
|
|
@@ -1916,6 +2027,9 @@ export declare const themes: {
|
|
|
1916
2027
|
6: string;
|
|
1917
2028
|
};
|
|
1918
2029
|
altHeaders: {
|
|
2030
|
+
3: string;
|
|
2031
|
+
4: string;
|
|
2032
|
+
5: string;
|
|
1919
2033
|
6: string;
|
|
1920
2034
|
};
|
|
1921
2035
|
buttons: string;
|
|
@@ -1946,11 +2060,17 @@ export declare const themes: {
|
|
|
1946
2060
|
headers: string;
|
|
1947
2061
|
altHeaders: string;
|
|
1948
2062
|
overline: string;
|
|
1949
|
-
|
|
1950
|
-
subtitles2: string;
|
|
2063
|
+
subtitles: string;
|
|
1951
2064
|
body: string;
|
|
1952
2065
|
navigation: string;
|
|
1953
2066
|
};
|
|
2067
|
+
wordBreak: {
|
|
2068
|
+
headers: string;
|
|
2069
|
+
altHeaders: string;
|
|
2070
|
+
overline: string;
|
|
2071
|
+
subtitles: string;
|
|
2072
|
+
body: string;
|
|
2073
|
+
};
|
|
1954
2074
|
};
|
|
1955
2075
|
};
|
|
1956
2076
|
spacing: {
|
|
@@ -2092,6 +2212,9 @@ export declare const themes: {
|
|
|
2092
2212
|
6: string;
|
|
2093
2213
|
};
|
|
2094
2214
|
altHeaders: {
|
|
2215
|
+
3: string;
|
|
2216
|
+
4: string;
|
|
2217
|
+
5: string;
|
|
2095
2218
|
6: string;
|
|
2096
2219
|
};
|
|
2097
2220
|
overline: {
|
|
@@ -2167,6 +2290,9 @@ export declare const themes: {
|
|
|
2167
2290
|
6: string;
|
|
2168
2291
|
};
|
|
2169
2292
|
altHeaders: {
|
|
2293
|
+
3: string;
|
|
2294
|
+
4: string;
|
|
2295
|
+
5: string;
|
|
2170
2296
|
6: string;
|
|
2171
2297
|
};
|
|
2172
2298
|
buttons: string;
|
|
@@ -2197,11 +2323,17 @@ export declare const themes: {
|
|
|
2197
2323
|
headers: string;
|
|
2198
2324
|
altHeaders: string;
|
|
2199
2325
|
overline: string;
|
|
2200
|
-
|
|
2201
|
-
subtitles2: string;
|
|
2326
|
+
subtitles: string;
|
|
2202
2327
|
body: string;
|
|
2203
2328
|
navigation: string;
|
|
2204
2329
|
};
|
|
2330
|
+
wordBreak: {
|
|
2331
|
+
headers: string;
|
|
2332
|
+
altHeaders: string;
|
|
2333
|
+
overline: string;
|
|
2334
|
+
subtitles: string;
|
|
2335
|
+
body: string;
|
|
2336
|
+
};
|
|
2205
2337
|
};
|
|
2206
2338
|
mobile: {
|
|
2207
2339
|
sizes: {
|
|
@@ -2248,6 +2380,9 @@ export declare const themes: {
|
|
|
2248
2380
|
6: string;
|
|
2249
2381
|
};
|
|
2250
2382
|
altHeaders: {
|
|
2383
|
+
3: string;
|
|
2384
|
+
4: string;
|
|
2385
|
+
5: string;
|
|
2251
2386
|
6: string;
|
|
2252
2387
|
};
|
|
2253
2388
|
overline: {
|
|
@@ -2321,6 +2456,9 @@ export declare const themes: {
|
|
|
2321
2456
|
6: string;
|
|
2322
2457
|
};
|
|
2323
2458
|
altHeaders: {
|
|
2459
|
+
3: string;
|
|
2460
|
+
4: string;
|
|
2461
|
+
5: string;
|
|
2324
2462
|
6: string;
|
|
2325
2463
|
};
|
|
2326
2464
|
buttons: string;
|
|
@@ -2351,11 +2489,17 @@ export declare const themes: {
|
|
|
2351
2489
|
headers: string;
|
|
2352
2490
|
altHeaders: string;
|
|
2353
2491
|
overline: string;
|
|
2354
|
-
|
|
2355
|
-
subtitles2: string;
|
|
2492
|
+
subtitles: string;
|
|
2356
2493
|
body: string;
|
|
2357
2494
|
navigation: string;
|
|
2358
2495
|
};
|
|
2496
|
+
wordBreak: {
|
|
2497
|
+
headers: string;
|
|
2498
|
+
altHeaders: string;
|
|
2499
|
+
overline: string;
|
|
2500
|
+
subtitles: string;
|
|
2501
|
+
body: string;
|
|
2502
|
+
};
|
|
2359
2503
|
};
|
|
2360
2504
|
};
|
|
2361
2505
|
spacing: {
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
|
|
2
2
|
import { StyledProps } from 'styled-components';
|
|
3
3
|
import { IconNameType, DirectionType } from './iconTypes';
|
|
4
|
-
export declare enum HeadingLevel {
|
|
5
|
-
H1 = 1,
|
|
6
|
-
H2 = 2,
|
|
7
|
-
H3 = 3,
|
|
8
|
-
H4 = 4,
|
|
9
|
-
H5 = 5,
|
|
10
|
-
H6 = 6
|
|
11
|
-
}
|
|
12
4
|
export declare enum Colors {
|
|
13
5
|
White = "white",
|
|
14
6
|
Black = "black",
|
|
@@ -24,13 +16,6 @@ export declare enum Colors {
|
|
|
24
16
|
Stream = "stream",
|
|
25
17
|
Cinema = "cinema"
|
|
26
18
|
}
|
|
27
|
-
export interface IHeadingProps {
|
|
28
|
-
level: HeadingLevel;
|
|
29
|
-
children: ReactNode;
|
|
30
|
-
}
|
|
31
|
-
export interface IHeadingWrapperProps extends StyledProps<any> {
|
|
32
|
-
level: HeadingLevel;
|
|
33
|
-
}
|
|
34
19
|
export declare enum ThemeType {
|
|
35
20
|
Core = "core",
|
|
36
21
|
Stream = "stream",
|
|
@@ -295,11 +280,11 @@ export interface IAccordionProps {
|
|
|
295
280
|
/**
|
|
296
281
|
* Title to display.
|
|
297
282
|
*/
|
|
298
|
-
title
|
|
283
|
+
title?: string;
|
|
299
284
|
/**
|
|
300
|
-
*
|
|
285
|
+
* The component to be wrapped into the accordion
|
|
301
286
|
*/
|
|
302
|
-
|
|
287
|
+
children?: ReactNode;
|
|
303
288
|
/**
|
|
304
289
|
* Set if accordions are stacked
|
|
305
290
|
*/
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyledProps } from 'styled-components';
|
|
3
|
+
export declare type TypographyLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
4
|
+
export declare type AltHeaderLevel = 3 | 4 | 5 | 6;
|
|
5
|
+
export declare type BodyLevel = 1 | 2 | 3;
|
|
6
|
+
export declare type SubtitleLevel = 1 | 2;
|
|
7
|
+
export declare type OverlineLevel = 1 | 2;
|
|
8
|
+
export declare type TypographyType = 'header' | 'altHeader' | 'body' | 'subtitle' | 'overline';
|
|
9
|
+
export interface ITypographyWrapperProps extends StyledProps<any> {
|
|
10
|
+
/**
|
|
11
|
+
* Typography level to use for generic Typography subcomponent.
|
|
12
|
+
*/
|
|
13
|
+
level: TypographyLevel;
|
|
14
|
+
/**
|
|
15
|
+
* Typography type to use for generic Typography subcomponent.
|
|
16
|
+
*/
|
|
17
|
+
typography: TypographyType;
|
|
18
|
+
}
|
|
19
|
+
interface IGenericTypography {
|
|
20
|
+
/**
|
|
21
|
+
* text or html block to wrap in styled tag.
|
|
22
|
+
*/
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
export interface IStyledTag extends ITypographyWrapperProps, IGenericTypography {
|
|
26
|
+
/**
|
|
27
|
+
* HTML tag to use to render component, by default div.
|
|
28
|
+
*/
|
|
29
|
+
tag?: React.ElementType;
|
|
30
|
+
}
|
|
31
|
+
export interface IHeaderProps extends IGenericTypography {
|
|
32
|
+
/**
|
|
33
|
+
* Header level, 1, 2, 3, 4, 5 or 6.
|
|
34
|
+
*/
|
|
35
|
+
level: TypographyLevel;
|
|
36
|
+
}
|
|
37
|
+
export interface IAltHeaderProps extends IGenericTypography {
|
|
38
|
+
/**
|
|
39
|
+
* AltHeader level, 3, 4, 5 or 6.
|
|
40
|
+
*/
|
|
41
|
+
level: AltHeaderLevel;
|
|
42
|
+
}
|
|
43
|
+
export interface IBodyTextProps extends IGenericTypography {
|
|
44
|
+
/**
|
|
45
|
+
* BodyText level, 1, 2 or 3.
|
|
46
|
+
*/
|
|
47
|
+
level: BodyLevel;
|
|
48
|
+
/**
|
|
49
|
+
* HTML tag to use to render BodyText, by default div.
|
|
50
|
+
*/
|
|
51
|
+
tag?: React.ElementType;
|
|
52
|
+
}
|
|
53
|
+
export interface ISubtitleProps extends IGenericTypography {
|
|
54
|
+
/**
|
|
55
|
+
* Subtitle level, 1 or 2.
|
|
56
|
+
*/
|
|
57
|
+
level: SubtitleLevel;
|
|
58
|
+
/**
|
|
59
|
+
* HTML tag to use to render Subtitle, by default div.
|
|
60
|
+
*/
|
|
61
|
+
tag?: React.ElementType;
|
|
62
|
+
}
|
|
63
|
+
export interface IOverlineProps extends IGenericTypography {
|
|
64
|
+
/**
|
|
65
|
+
* Overline level, 1 or 2.
|
|
66
|
+
*/
|
|
67
|
+
level: OverlineLevel;
|
|
68
|
+
/**
|
|
69
|
+
* HTML tag to use to render Overline, by default div.
|
|
70
|
+
*/
|
|
71
|
+
tag?: React.ElementType;
|
|
72
|
+
}
|
|
73
|
+
export {};
|
package/package.json
CHANGED