@reuters-graphics/graphics-components 0.0.1-beta.1

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 (195) hide show
  1. package/README.md +7 -0
  2. package/dist/@types/actions/cssVariables/index.d.ts +4 -0
  3. package/dist/@types/actions/resizeObserver/index.d.ts +4 -0
  4. package/dist/@types/components/@types/global.d.ts +28 -0
  5. package/dist/@types/components/Article/Article.svelte.d.ts +32 -0
  6. package/dist/@types/components/BeforeAfter/BeforeAfter.svelte.d.ts +57 -0
  7. package/dist/@types/components/Block/Block.svelte.d.ts +24 -0
  8. package/dist/@types/components/BodyText/BodyText.svelte.d.ts +20 -0
  9. package/dist/@types/components/DatawrapperChart/DatawrapperChart.svelte.d.ts +52 -0
  10. package/dist/@types/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte.d.ts +16 -0
  11. package/dist/@types/components/FeaturePhoto/FeaturePhoto.svelte.d.ts +43 -0
  12. package/dist/@types/components/Framer/Framer.svelte.d.ts +29 -0
  13. package/dist/@types/components/Framer/Resizer/index.svelte.d.ts +27 -0
  14. package/dist/@types/components/Framer/stores.d.ts +1 -0
  15. package/dist/@types/components/Framer/uniqNames.d.ts +2 -0
  16. package/dist/@types/components/GraphicBlock/AriaHidden.svelte.d.ts +20 -0
  17. package/dist/@types/components/GraphicBlock/GraphicBlock.svelte.d.ts +64 -0
  18. package/dist/@types/components/GraphicBlock/TextBlock.svelte.d.ts +19 -0
  19. package/dist/@types/components/Headline/Headline.svelte.d.ts +29 -0
  20. package/dist/@types/components/Hero/Hero.svelte.d.ts +41 -0
  21. package/dist/@types/components/NoteText/NoteText.svelte.d.ts +20 -0
  22. package/dist/@types/components/PaddingReset/index.svelte.d.ts +27 -0
  23. package/dist/@types/components/PhotoPack/PhotoPack.svelte.d.ts +50 -0
  24. package/dist/@types/components/PhotoPack/docProps.d.ts +38 -0
  25. package/dist/@types/components/PymChild/PymChild.svelte.d.ts +16 -0
  26. package/dist/@types/components/ReutersLogo/ReutersLogo.svelte.d.ts +18 -0
  27. package/dist/@types/components/SEO/SEO.svelte.d.ts +66 -0
  28. package/dist/@types/components/SEO/analytics.d.ts +2 -0
  29. package/dist/@types/components/SEO/publisherTags.d.ts +2 -0
  30. package/dist/@types/components/Scroller/Background.svelte.d.ts +20 -0
  31. package/dist/@types/components/Scroller/Embedded/Background.svelte.d.ts +19 -0
  32. package/dist/@types/components/Scroller/Embedded/Foreground.svelte.d.ts +18 -0
  33. package/dist/@types/components/Scroller/Embedded/index.svelte.d.ts +19 -0
  34. package/dist/@types/components/Scroller/Foreground.svelte.d.ts +17 -0
  35. package/dist/@types/components/Scroller/Scroller.svelte.d.ts +76 -0
  36. package/dist/@types/components/Sharer/Sharer.svelte.d.ts +19 -0
  37. package/dist/@types/components/Sharer/utils/copyToClipboard.d.ts +2 -0
  38. package/dist/@types/components/Sharer/utils/facebook.d.ts +2 -0
  39. package/dist/@types/components/Sharer/utils/meta.d.ts +2 -0
  40. package/dist/@types/components/Sharer/utils/twitter.d.ts +2 -0
  41. package/dist/@types/components/SiteFooter/CompanyLinks.svelte.d.ts +23 -0
  42. package/dist/@types/components/SiteFooter/LegalLinks.svelte.d.ts +23 -0
  43. package/dist/@types/components/SiteFooter/QuickLinks.svelte.d.ts +23 -0
  44. package/dist/@types/components/SiteFooter/Referrals/IntersectionObserver.svelte.d.ts +39 -0
  45. package/dist/@types/components/SiteFooter/Referrals/Link.svelte.d.ts +29 -0
  46. package/dist/@types/components/SiteFooter/Referrals/Referrals.svelte.d.ts +23 -0
  47. package/dist/@types/components/SiteFooter/Referrals/index.svelte.d.ts +23 -0
  48. package/dist/@types/components/SiteFooter/SiteFooter.svelte.d.ts +23 -0
  49. package/dist/@types/components/SiteFooter/svgs/Facebook.svelte.d.ts +23 -0
  50. package/dist/@types/components/SiteFooter/svgs/Graphics.svelte.d.ts +19 -0
  51. package/dist/@types/components/SiteFooter/svgs/Instagram.svelte.d.ts +23 -0
  52. package/dist/@types/components/SiteFooter/svgs/LinkedIn.svelte.d.ts +23 -0
  53. package/dist/@types/components/SiteFooter/svgs/Pictures.svelte.d.ts +19 -0
  54. package/dist/@types/components/SiteFooter/svgs/Twitter.svelte.d.ts +23 -0
  55. package/dist/@types/components/SiteFooter/svgs/Videos.svelte.d.ts +19 -0
  56. package/dist/@types/components/SiteFooter/svgs/YouTube.svelte.d.ts +23 -0
  57. package/dist/@types/components/SiteHeader/MobileMenu/index.svelte.d.ts +27 -0
  58. package/dist/@types/components/SiteHeader/NavBar/DownArrow.svelte.d.ts +23 -0
  59. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte.d.ts +23 -0
  60. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte.d.ts +25 -0
  61. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte.d.ts +19 -0
  62. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte.d.ts +25 -0
  63. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.d.ts +1 -0
  64. package/dist/@types/components/SiteHeader/NavBar/NavDropdown/index.svelte.d.ts +27 -0
  65. package/dist/@types/components/SiteHeader/NavBar/index.svelte.d.ts +23 -0
  66. package/dist/@types/components/SiteHeader/NavBar/utils/index.d.ts +1 -0
  67. package/dist/@types/components/SiteHeader/SiteHeader.svelte.d.ts +14 -0
  68. package/dist/@types/components/SiteHeader/svgs/Close.svelte.d.ts +19 -0
  69. package/dist/@types/components/SiteHeader/svgs/Menu.svelte.d.ts +23 -0
  70. package/dist/@types/components/Spinner/Spinner.svelte.d.ts +28 -0
  71. package/dist/@types/components/Theme/@types/component.d.ts +28 -0
  72. package/dist/@types/components/Theme/Theme.svelte.d.ts +54 -0
  73. package/dist/@types/components/Theme/themes/dark.d.ts +2 -0
  74. package/dist/@types/components/Theme/themes/light.d.ts +22 -0
  75. package/dist/@types/components/Theme/utils/flatten.d.ts +1 -0
  76. package/dist/@types/components/Theme/utils/merge.d.ts +4 -0
  77. package/dist/@types/components/Video/Controls.svelte.d.ts +45 -0
  78. package/dist/@types/components/Video/Video.svelte.d.ts +46 -0
  79. package/dist/@types/components/Visible/Visible.svelte.d.ts +29 -0
  80. package/dist/@types/index.d.ts +24 -0
  81. package/dist/actions/cssVariables/index.js +20 -0
  82. package/dist/actions/resizeObserver/index.js +25 -0
  83. package/dist/components/@types/global.js +1 -0
  84. package/dist/components/Article/Article.svelte +47 -0
  85. package/dist/components/BeforeAfter/BeforeAfter.svelte +341 -0
  86. package/dist/components/Block/Block.svelte +177 -0
  87. package/dist/components/BodyText/BodyText.svelte +193 -0
  88. package/dist/components/DatawrapperChart/DatawrapperChart.svelte +105 -0
  89. package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte +26 -0
  90. package/dist/components/FeaturePhoto/FeaturePhoto.svelte +113 -0
  91. package/dist/components/Framer/Framer.svelte +136 -0
  92. package/dist/components/Framer/Resizer/index.svelte +223 -0
  93. package/dist/components/Framer/stores.js +3 -0
  94. package/dist/components/Framer/uniqNames.js +54 -0
  95. package/dist/components/GraphicBlock/AriaHidden.svelte +13 -0
  96. package/dist/components/GraphicBlock/GraphicBlock.svelte +269 -0
  97. package/dist/components/GraphicBlock/TextBlock.svelte +12 -0
  98. package/dist/components/Headline/Headline.svelte +109 -0
  99. package/dist/components/Hero/Hero.svelte +78 -0
  100. package/dist/components/NoteText/NoteText.svelte +124 -0
  101. package/dist/components/PaddingReset/index.svelte +17 -0
  102. package/dist/components/PhotoPack/PhotoPack.svelte +156 -0
  103. package/dist/components/PhotoPack/docProps.js +20 -0
  104. package/dist/components/PymChild/PymChild.svelte +10 -0
  105. package/dist/components/ReutersLogo/ReutersLogo.svelte +21 -0
  106. package/dist/components/SEO/SEO.svelte +179 -0
  107. package/dist/components/SEO/analytics.js +332 -0
  108. package/dist/components/SEO/publisherTags.js +26 -0
  109. package/dist/components/Scroller/Background.svelte +30 -0
  110. package/dist/components/Scroller/Embedded/Background.svelte +14 -0
  111. package/dist/components/Scroller/Embedded/Foreground.svelte +203 -0
  112. package/dist/components/Scroller/Embedded/index.svelte +18 -0
  113. package/dist/components/Scroller/Foreground.svelte +42 -0
  114. package/dist/components/Scroller/Scroller.svelte +210 -0
  115. package/dist/components/Sharer/Sharer.svelte +157 -0
  116. package/dist/components/Sharer/utils/copyToClipboard.js +10 -0
  117. package/dist/components/Sharer/utils/facebook.js +22 -0
  118. package/dist/components/Sharer/utils/meta.js +7 -0
  119. package/dist/components/Sharer/utils/twitter.js +22 -0
  120. package/dist/components/SiteFooter/CompanyLinks.svelte +173 -0
  121. package/dist/components/SiteFooter/LegalLinks.svelte +202 -0
  122. package/dist/components/SiteFooter/QuickLinks.svelte +259 -0
  123. package/dist/components/SiteFooter/Referrals/IntersectionObserver.svelte +45 -0
  124. package/dist/components/SiteFooter/Referrals/Link.svelte +73 -0
  125. package/dist/components/SiteFooter/Referrals/Referrals.svelte +56 -0
  126. package/dist/components/SiteFooter/Referrals/index.svelte +53 -0
  127. package/dist/components/SiteFooter/SiteFooter.svelte +41 -0
  128. package/dist/components/SiteFooter/data.json +210 -0
  129. package/dist/components/SiteFooter/svgs/Facebook.svelte +18 -0
  130. package/dist/components/SiteFooter/svgs/Graphics.svelte +18 -0
  131. package/dist/components/SiteFooter/svgs/Instagram.svelte +20 -0
  132. package/dist/components/SiteFooter/svgs/LinkedIn.svelte +18 -0
  133. package/dist/components/SiteFooter/svgs/Pictures.svelte +14 -0
  134. package/dist/components/SiteFooter/svgs/Twitter.svelte +18 -0
  135. package/dist/components/SiteFooter/svgs/Videos.svelte +14 -0
  136. package/dist/components/SiteFooter/svgs/YouTube.svelte +18 -0
  137. package/dist/components/SiteHeader/MobileMenu/index.svelte +199 -0
  138. package/dist/components/SiteHeader/NavBar/DownArrow.svelte +26 -0
  139. package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte +112 -0
  140. package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte +118 -0
  141. package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte +49 -0
  142. package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte +99 -0
  143. package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js +70 -0
  144. package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte +277 -0
  145. package/dist/components/SiteHeader/NavBar/index.svelte +234 -0
  146. package/dist/components/SiteHeader/NavBar/utils/index.js +2 -0
  147. package/dist/components/SiteHeader/SiteHeader.svelte +235 -0
  148. package/dist/components/SiteHeader/data.json +1 -0
  149. package/dist/components/SiteHeader/scss/_breakpoints.scss +59 -0
  150. package/dist/components/SiteHeader/scss/_colors.scss +25 -0
  151. package/dist/components/SiteHeader/scss/_eases.scss +9 -0
  152. package/dist/components/SiteHeader/scss/_grids.scss +126 -0
  153. package/dist/components/SiteHeader/scss/_z-indexes.scss +15 -0
  154. package/dist/components/SiteHeader/svgs/Close.svelte +14 -0
  155. package/dist/components/SiteHeader/svgs/Menu.svelte +19 -0
  156. package/dist/components/Spinner/Spinner.svelte +91 -0
  157. package/dist/components/Theme/@types/component.js +3 -0
  158. package/dist/components/Theme/Theme.svelte +37 -0
  159. package/dist/components/Theme/themes/dark.js +23 -0
  160. package/dist/components/Theme/themes/light.js +22 -0
  161. package/dist/components/Theme/utils/flatten.js +39 -0
  162. package/dist/components/Theme/utils/merge.js +23 -0
  163. package/dist/components/Video/Controls.svelte +68 -0
  164. package/dist/components/Video/Video.svelte +278 -0
  165. package/dist/components/Visible/Visible.svelte +54 -0
  166. package/dist/index.js +31 -0
  167. package/dist/scss/_mixins.scss +6 -0
  168. package/dist/scss/_variables.scss +2 -0
  169. package/dist/scss/bootstrap/_main.scss +34 -0
  170. package/dist/scss/bootstrap/_variables.scss +10 -0
  171. package/dist/scss/colours/thematic/_nord.scss +40 -0
  172. package/dist/scss/colours/thematic/_tr.scss +27 -0
  173. package/dist/scss/components/_hero-title.scss +118 -0
  174. package/dist/scss/fonts/_font-faces.scss +129 -0
  175. package/dist/scss/fonts/_mixins.scss +25 -0
  176. package/dist/scss/fonts/_rules.scss +19 -0
  177. package/dist/scss/fonts/_variables.scss +26 -0
  178. package/dist/scss/main.scss +16 -0
  179. package/dist/scss/mixins/_block.scss +62 -0
  180. package/dist/scss/mixins/_body-text.scss +113 -0
  181. package/dist/scss/mixins/_graphic.scss +66 -0
  182. package/dist/scss/mixins/_note-text.scss +34 -0
  183. package/dist/scss/mixins/_visually-hidden.scss +12 -0
  184. package/dist/scss/spacers/_rules.scss +65 -0
  185. package/dist/scss/spacers/_variables.scss +19 -0
  186. package/dist/scss/typography/_box-shadow.scss +11 -0
  187. package/dist/scss/typography/_font-size.scss +81 -0
  188. package/dist/scss/typography/_letter-spacing.scss +15 -0
  189. package/dist/scss/typography/_main.scss +5 -0
  190. package/dist/scss/typography/_mixins.scss +26 -0
  191. package/dist/scss/typography/_rules.scss +83 -0
  192. package/dist/scss/typography/_text-shadow.scss +13 -0
  193. package/dist/scss/typography/_transform.scss +7 -0
  194. package/dist/scss/typography/_variables.scss +39 -0
  195. package/package.json +210 -0
@@ -0,0 +1,19 @@
1
+ $margin-levels: (
2
+ '0': 0,
3
+ '1': 1rem,
4
+ '2': 2rem,
5
+ '3': 3rem,
6
+ '4': 4rem,
7
+ '5': 5rem,
8
+ '6': 6rem,
9
+ ) !default;
10
+
11
+ $padding-levels: (
12
+ '0': 0,
13
+ '1': 0.5rem,
14
+ '2': 1rem,
15
+ '3': 1.75rem,
16
+ '4': 2.25rem,
17
+ '5': 3rem,
18
+ '6': 4rem,
19
+ ) !default;
@@ -0,0 +1,11 @@
1
+ .box-shadow-low {
2
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important;
3
+ }
4
+
5
+ .box-shadow {
6
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important;
7
+ }
8
+
9
+ .box-shadow-high {
10
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important;
11
+ }
@@ -0,0 +1,81 @@
1
+ .paragraph-size {
2
+ font-size: 1.3rem;
3
+ line-height: 2.1rem;
4
+
5
+ // slightly smaller in sans...
6
+ &.font-sans {
7
+ font-size: 1.1rem;
8
+ line-height: 1.75rem;
9
+ }
10
+
11
+ @media(max-width: 540px) {
12
+ font-size: 1.1rem;
13
+ line-height: 1.8rem;
14
+
15
+ // slightly smaller in sans...
16
+ &.font-sans {
17
+ font-size: 1rem;
18
+ line-height: 1.6rem;
19
+ }
20
+ }
21
+
22
+ &.important {
23
+ font-size: 1.3rem !important;
24
+ line-height: 2.1rem !important;
25
+
26
+ &.font-sans {
27
+ font-size: 1.1rem !important;
28
+ line-height: 1.8rem !important;
29
+ }
30
+
31
+ @media(max-width: 540px) {
32
+ font-size: 1.1rem !important;
33
+ line-height: 1.8rem !important;
34
+
35
+ &.font-sans {
36
+ font-size: 1rem !important;
37
+ line-height: 1.6rem !important;
38
+ }
39
+ }
40
+ }
41
+ }
42
+
43
+ .small-size {
44
+ font-size: 0.9rem;
45
+ line-height: 1.2rem;
46
+
47
+ @media(max-width: 540px) {
48
+ font-size: 0.8rem;
49
+ line-height: 1.1rem;
50
+ }
51
+
52
+ &.important {
53
+ font-size: 0.9rem !important;
54
+ line-height: 1.2rem !important;
55
+
56
+ @media(max-width: 540px) {
57
+ font-size: 0.8rem !important;
58
+ line-height: 1.1rem !important;
59
+ }
60
+ }
61
+ }
62
+
63
+ .blockquote-size {
64
+ font-size: 1.6rem;
65
+ line-height: 2.1rem;
66
+
67
+ @media(max-width: 540px) {
68
+ font-size: 1.3rem;
69
+ line-height: 1.9rem;
70
+ }
71
+
72
+ &.important {
73
+ font-size: 1.6rem !important;
74
+ line-height: 2rem !important;
75
+
76
+ @media(max-width: 540px) {
77
+ font-size: 1.3rem !important;
78
+ line-height: 1.8rem !important;
79
+ }
80
+ }
81
+ }
@@ -0,0 +1,15 @@
1
+ .spaced-least {
2
+ letter-spacing: 0.1rem !important;
3
+ }
4
+ .spaced-less {
5
+ letter-spacing: 0.25rem !important;
6
+ }
7
+ .spaced {
8
+ letter-spacing: 0.5rem !important;
9
+ }
10
+ .spaced-more {
11
+ letter-spacing: 0.75rem !important;
12
+ }
13
+ .spaced-most {
14
+ letter-spacing: 1rem !important;
15
+ }
@@ -0,0 +1,5 @@
1
+ @import 'box-shadow';
2
+ @import 'font-size';
3
+ @import 'letter-spacing';
4
+ @import 'text-shadow';
5
+ @import 'transform';
@@ -0,0 +1,26 @@
1
+ @import "variables";
2
+
3
+ // Font sizes
4
+ @mixin font-size-xs { font-size: $font-size-xs; }
5
+
6
+ @mixin font-size-sm { font-size: $font-size-sm; }
7
+
8
+ @mixin font-size-base { font-size: $font-size-base; }
9
+
10
+ @mixin font-size-article { font-size: $font-size-article; }
11
+
12
+ @mixin font-size-lg { font-size: $font-size-lg; }
13
+
14
+ @mixin font-size-xl { font-size: $font-size-xl; }
15
+
16
+ @mixin font-size-2xl { font-size: $font-size-2xl; }
17
+
18
+ @mixin font-size-3xl { font-size: $font-size-3xl; }
19
+
20
+
21
+ // Font weights
22
+ @mixin font-weight-light { font-weight: $font-weight-light; }
23
+
24
+ @mixin font-weight-normal { font-weight: $font-weight-normal; }
25
+
26
+ @mixin font-weight-bold { font-weight: $font-weight-bold; }
@@ -0,0 +1,83 @@
1
+ @use "sass:math";
2
+ @import "variables";
3
+ @import "mixins";
4
+ @import "../mixins";
5
+
6
+
7
+ h1,
8
+ h2,
9
+ h3,
10
+ h4,
11
+ h5,
12
+ h6 {
13
+ @include font-display;
14
+
15
+ font-weight: $headings-font-weight;
16
+ line-height: $headings-line-height;
17
+ color: $headings-color;
18
+ }
19
+
20
+ h1 {
21
+ font-size: $h1-font-size;
22
+ margin-bottom: math.div($h1-font-size, 2);
23
+
24
+ &:not(:first-child) {
25
+ margin-top: $h1-font-size;
26
+ }
27
+ }
28
+
29
+ h2 {
30
+ font-size: $h2-font-size;
31
+ margin-bottom: math.div($h2-font-size, 2);
32
+
33
+ &:not(:first-child) {
34
+ margin-top: $h2-font-size;
35
+ }
36
+ }
37
+
38
+ h3 {
39
+ font-size: $h3-font-size;
40
+ margin-bottom: math.div($h3-font-size, 2);
41
+
42
+ &:not(:first-child) {
43
+ margin-top: $h3-font-size;
44
+ }
45
+ }
46
+
47
+ h4 {
48
+ font-size: $h4-font-size;
49
+ margin-bottom: math.div($h4-font-size, 2);
50
+
51
+ &:not(:first-child) {
52
+ margin-top: $h4-font-size;
53
+ }
54
+ }
55
+
56
+ h5 {
57
+ font-size: $h5-font-size;
58
+ margin-bottom: math.div($h5-font-size, 2);
59
+
60
+ &:not(:first-child) {
61
+ margin-top: $h5-font-size;
62
+ }
63
+ }
64
+
65
+ h6 {
66
+ font-size: $h6-font-size;
67
+ margin-bottom: math.div($h6-font-size, 2);
68
+
69
+ &:not(:first-child) {
70
+ margin-top: $h6-font-size;
71
+ }
72
+ }
73
+
74
+ p {
75
+ @include font-serif;
76
+
77
+ font-size: $font-size-article;
78
+ margin-bottom: $font-size-article;
79
+ }
80
+
81
+ small {
82
+ font-size: $font-size-sm;
83
+ }
@@ -0,0 +1,13 @@
1
+ @import '../colours/thematic/tr';
2
+
3
+ .text-shadow {
4
+ text-shadow: 2px 2px 4px $tr-light-grey !important;
5
+ }
6
+
7
+ .text-shadow-darker {
8
+ text-shadow: 2px 2px 4px $tr-medium-grey !important;
9
+ }
10
+
11
+ .text-shadow-darkest {
12
+ text-shadow: 2px 2px 4px $tr-dark-grey !important;
13
+ }
@@ -0,0 +1,7 @@
1
+ .uppercase {
2
+ text-transform: uppercase !important;
3
+ }
4
+
5
+ .lowercase {
6
+ text-transform: lowercase !important;
7
+ }
@@ -0,0 +1,39 @@
1
+ @import '../fonts/variables';
2
+ @import '../colours/thematic/tr';
3
+
4
+ // Font sizes
5
+ $font-size-xs: 0.8rem !default;
6
+ $font-size-sm: 0.875rem !default;
7
+ $font-size-base: 1rem !default;
8
+ $font-size-article: 1.2rem !default;
9
+ $font-size-lg: 1.3rem !default;
10
+ $font-size-xl: 1.5rem !default;
11
+ $font-size-2xl: 2.4rem !default;
12
+ $font-size-3xl: 2.8rem !default;
13
+
14
+ $lead-font-size: ($font-size-base * 1.25) !default;
15
+ $small-font-size: 80% !default;
16
+ $blockquote-font-size: ($font-size-base * 1.5) !default;
17
+
18
+ $line-height-base: 1.5 !default;
19
+
20
+ $text-muted: $tr-medium-grey;
21
+
22
+ $blockquote-small-color: $tr-medium-grey;
23
+
24
+ $blockquote-border-color: $tr-dark-grey !default;
25
+ $blockquote-border-width: 0.25rem !default;
26
+
27
+ $hr-border-color: rgba($black, 0.1) !default;
28
+
29
+ // Headings
30
+ $headings-font-family: $font-family-display;
31
+ $headings-font-weight: 700 !default;
32
+ $headings-color: $tr-dark-grey;
33
+
34
+ $h1-font-size: $font-size-base * 2.5 !default;
35
+ $h2-font-size: $font-size-base * 2 !default;
36
+ $h3-font-size: $font-size-base * 1.75 !default;
37
+ $h4-font-size: $font-size-base * 1.5 !default;
38
+ $h5-font-size: $font-size-base * 1.25 !default;
39
+ $h6-font-size: $font-size-base !default;
package/package.json ADDED
@@ -0,0 +1,210 @@
1
+ {
2
+ "name": "@reuters-graphics/graphics-components",
3
+ "version": "0.0.1-beta.1",
4
+ "type": "module",
5
+ "private": false,
6
+ "homepage": "https://reuters-graphics.github.io/graphics-components",
7
+ "repository": "https://github.com/reuters-graphics/graphics-components",
8
+ "scripts": {
9
+ "start": "start-storybook -p 3000",
10
+ "new": "node ./bin/newComponent/index.cjs",
11
+ "build:package": "node ./bin/buildPackage/index.js",
12
+ "build:docs": "build-storybook -o docs && touch ./docs/.nojekyll",
13
+ "build": "npm-run-all build:package build:docs",
14
+ "prepublishOnly": "npm run build:package"
15
+ },
16
+ "license": "MIT",
17
+ "types": "dist/@types/index.d.ts",
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "engines": {
22
+ "node": ">=16.7"
23
+ },
24
+ "devDependencies": {
25
+ "@babel/core": "^7.18.9",
26
+ "@babel/eslint-parser": "^7.15.4",
27
+ "@babel/eslint-plugin": "^7.14.5",
28
+ "@babel/preset-env": "^7.15.6",
29
+ "@evilmartians/lefthook": "^1.0.1",
30
+ "@reuters-graphics/eslint-config": "^0.0.2",
31
+ "@storybook/addon-actions": "6.5.9",
32
+ "@storybook/addon-essentials": "6.5.9",
33
+ "@storybook/addon-interactions": "6.5.9",
34
+ "@storybook/addon-links": "6.5.9",
35
+ "@storybook/addon-svelte-csf": "^2.0.6",
36
+ "@storybook/builder-vite": "^0.2.1",
37
+ "@storybook/mdx2-csf": "^0.0.3",
38
+ "@storybook/svelte": "6.5.9",
39
+ "@storybook/testing-library": "^0.0.13",
40
+ "@storybook/theming": "6.5.9",
41
+ "@sveltejs/vite-plugin-svelte": "^1.0.1",
42
+ "@tsconfig/svelte": "^3.0.0",
43
+ "@types/proper-url-join": "^2.1.1",
44
+ "@types/react-syntax-highlighter": "^15.5.4",
45
+ "@typescript-eslint/eslint-plugin": "^5.33.1",
46
+ "@typescript-eslint/parser": "^5.32.0",
47
+ "autoprefixer": "^10.2.5",
48
+ "babel-loader": "^8.2.5",
49
+ "change-case": "^4.1.2",
50
+ "esbuild-plugin-alias": "^0.2.1",
51
+ "esbuild-register": "^3.3.3",
52
+ "eslint": "^8.16.0",
53
+ "eslint-config-prettier": "^8.3.0",
54
+ "eslint-plugin-n": "^15.2.4",
55
+ "eslint-plugin-storybook": "^0.6.1",
56
+ "eslint-plugin-svelte3": "^4.0.0",
57
+ "fs-extra": "^10.1.0",
58
+ "kleur": "^4.1.5",
59
+ "npm-run-all": "^4.1.5",
60
+ "postcss": "^8.4.14",
61
+ "postcss-load-config": "^4.0.1",
62
+ "prettier": "^2.3.2",
63
+ "prettier-plugin-svelte": "^2.4.0",
64
+ "prompts": "^2.4.2",
65
+ "react-syntax-highlighter": "^15.5.0",
66
+ "rimraf": "^3.0.2",
67
+ "sass": "^1.54.0",
68
+ "svelte": "^3.49.0",
69
+ "svelte-loader": "^3.1.3",
70
+ "svelte-preprocess": "^4.10.7",
71
+ "svelte2tsx": "^0.5.13",
72
+ "tiny-glob": "^0.2.9",
73
+ "typescript": "^4.7.4",
74
+ "vite": "^3.0.4"
75
+ },
76
+ "dependencies": {
77
+ "@fortawesome/free-brands-svg-icons": "^5.15.4",
78
+ "@fortawesome/free-regular-svg-icons": "^5.15.3",
79
+ "@fortawesome/free-solid-svg-icons": "^5.15.3",
80
+ "@sveltejs/svelte-scroller": "^2.0.7",
81
+ "bootstrap": "^5.2.0",
82
+ "classnames": "^2.3.1",
83
+ "dayjs": "^1.11.3",
84
+ "lodash-es": "^4.17.21",
85
+ "lottie-web": "^5.7.13",
86
+ "marked": "^4.0.8",
87
+ "proper-url-join": "^2.1.1",
88
+ "pym.js": "^1.3.2",
89
+ "svelte-fa": "^2.4.0",
90
+ "svelte-intersection-observer": "^0.10.0",
91
+ "ua-parser-js": "^0.7.27"
92
+ },
93
+ "exports": {
94
+ "./package.json": "./package.json",
95
+ "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
96
+ "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
97
+ "./components/@types/global.ts": "./dist/components/@types/global.ts",
98
+ "./components/Article/Article.svelte": "./dist/components/Article/Article.svelte",
99
+ "./components/BeforeAfter/BeforeAfter.svelte": "./dist/components/BeforeAfter/BeforeAfter.svelte",
100
+ "./components/Block/Block.svelte": "./dist/components/Block/Block.svelte",
101
+ "./components/BodyText/BodyText.svelte": "./dist/components/BodyText/BodyText.svelte",
102
+ "./components/DatawrapperChart/DatawrapperChart.svelte": "./dist/components/DatawrapperChart/DatawrapperChart.svelte",
103
+ "./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte": "./dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte",
104
+ "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
105
+ "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
106
+ "./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
107
+ "./components/Framer/stores": "./dist/components/Framer/stores.js",
108
+ "./components/Framer/uniqNames": "./dist/components/Framer/uniqNames.js",
109
+ "./components/GraphicBlock/AriaHidden.svelte": "./dist/components/GraphicBlock/AriaHidden.svelte",
110
+ "./components/GraphicBlock/GraphicBlock.svelte": "./dist/components/GraphicBlock/GraphicBlock.svelte",
111
+ "./components/GraphicBlock/TextBlock.svelte": "./dist/components/GraphicBlock/TextBlock.svelte",
112
+ "./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
113
+ "./components/Hero/Hero.svelte": "./dist/components/Hero/Hero.svelte",
114
+ "./components/NoteText/NoteText.svelte": "./dist/components/NoteText/NoteText.svelte",
115
+ "./components/PaddingReset/index.svelte": "./dist/components/PaddingReset/index.svelte",
116
+ "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",
117
+ "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
118
+ "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
119
+ "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
120
+ "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
121
+ "./components/SEO/analytics": "./dist/components/SEO/analytics.js",
122
+ "./components/SEO/publisherTags": "./dist/components/SEO/publisherTags.js",
123
+ "./components/Scroller/Background.svelte": "./dist/components/Scroller/Background.svelte",
124
+ "./components/Scroller/Embedded/Background.svelte": "./dist/components/Scroller/Embedded/Background.svelte",
125
+ "./components/Scroller/Embedded/Foreground.svelte": "./dist/components/Scroller/Embedded/Foreground.svelte",
126
+ "./components/Scroller/Embedded/index.svelte": "./dist/components/Scroller/Embedded/index.svelte",
127
+ "./components/Scroller/Foreground.svelte": "./dist/components/Scroller/Foreground.svelte",
128
+ "./components/Scroller/Scroller.svelte": "./dist/components/Scroller/Scroller.svelte",
129
+ "./components/Sharer/Sharer.svelte": "./dist/components/Sharer/Sharer.svelte",
130
+ "./components/Sharer/utils/copyToClipboard": "./dist/components/Sharer/utils/copyToClipboard.js",
131
+ "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",
132
+ "./components/Sharer/utils/meta": "./dist/components/Sharer/utils/meta.js",
133
+ "./components/Sharer/utils/twitter": "./dist/components/Sharer/utils/twitter.js",
134
+ "./components/SiteFooter/CompanyLinks.svelte": "./dist/components/SiteFooter/CompanyLinks.svelte",
135
+ "./components/SiteFooter/LegalLinks.svelte": "./dist/components/SiteFooter/LegalLinks.svelte",
136
+ "./components/SiteFooter/QuickLinks.svelte": "./dist/components/SiteFooter/QuickLinks.svelte",
137
+ "./components/SiteFooter/Referrals/IntersectionObserver.svelte": "./dist/components/SiteFooter/Referrals/IntersectionObserver.svelte",
138
+ "./components/SiteFooter/Referrals/Link.svelte": "./dist/components/SiteFooter/Referrals/Link.svelte",
139
+ "./components/SiteFooter/Referrals/Referrals.svelte": "./dist/components/SiteFooter/Referrals/Referrals.svelte",
140
+ "./components/SiteFooter/Referrals/index.svelte": "./dist/components/SiteFooter/Referrals/index.svelte",
141
+ "./components/SiteFooter/SiteFooter.svelte": "./dist/components/SiteFooter/SiteFooter.svelte",
142
+ "./components/SiteFooter/data.json": "./dist/components/SiteFooter/data.json",
143
+ "./components/SiteFooter/svgs/Facebook.svelte": "./dist/components/SiteFooter/svgs/Facebook.svelte",
144
+ "./components/SiteFooter/svgs/Graphics.svelte": "./dist/components/SiteFooter/svgs/Graphics.svelte",
145
+ "./components/SiteFooter/svgs/Instagram.svelte": "./dist/components/SiteFooter/svgs/Instagram.svelte",
146
+ "./components/SiteFooter/svgs/LinkedIn.svelte": "./dist/components/SiteFooter/svgs/LinkedIn.svelte",
147
+ "./components/SiteFooter/svgs/Pictures.svelte": "./dist/components/SiteFooter/svgs/Pictures.svelte",
148
+ "./components/SiteFooter/svgs/Twitter.svelte": "./dist/components/SiteFooter/svgs/Twitter.svelte",
149
+ "./components/SiteFooter/svgs/Videos.svelte": "./dist/components/SiteFooter/svgs/Videos.svelte",
150
+ "./components/SiteFooter/svgs/YouTube.svelte": "./dist/components/SiteFooter/svgs/YouTube.svelte",
151
+ "./components/SiteHeader/MobileMenu/index.svelte": "./dist/components/SiteHeader/MobileMenu/index.svelte",
152
+ "./components/SiteHeader/NavBar/DownArrow.svelte": "./dist/components/SiteHeader/NavBar/DownArrow.svelte",
153
+ "./components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte",
154
+ "./components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte",
155
+ "./components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte",
156
+ "./components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte",
157
+ "./components/SiteHeader/NavBar/NavDropdown/StoryCard/time": "./dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js",
158
+ "./components/SiteHeader/NavBar/NavDropdown/index.svelte": "./dist/components/SiteHeader/NavBar/NavDropdown/index.svelte",
159
+ "./components/SiteHeader/NavBar/index.svelte": "./dist/components/SiteHeader/NavBar/index.svelte",
160
+ "./components/SiteHeader/NavBar/utils": "./dist/components/SiteHeader/NavBar/utils/index.js",
161
+ "./components/SiteHeader/SiteHeader.svelte": "./dist/components/SiteHeader/SiteHeader.svelte",
162
+ "./components/SiteHeader/data.json": "./dist/components/SiteHeader/data.json",
163
+ "./components/SiteHeader/scss/_breakpoints.scss": "./dist/components/SiteHeader/scss/_breakpoints.scss",
164
+ "./components/SiteHeader/scss/_colors.scss": "./dist/components/SiteHeader/scss/_colors.scss",
165
+ "./components/SiteHeader/scss/_eases.scss": "./dist/components/SiteHeader/scss/_eases.scss",
166
+ "./components/SiteHeader/scss/_grids.scss": "./dist/components/SiteHeader/scss/_grids.scss",
167
+ "./components/SiteHeader/scss/_z-indexes.scss": "./dist/components/SiteHeader/scss/_z-indexes.scss",
168
+ "./components/SiteHeader/svgs/Close.svelte": "./dist/components/SiteHeader/svgs/Close.svelte",
169
+ "./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
170
+ "./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
171
+ "./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
172
+ "./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
173
+ "./components/Theme/themes/dark": "./dist/components/Theme/themes/dark.js",
174
+ "./components/Theme/themes/light": "./dist/components/Theme/themes/light.js",
175
+ "./components/Theme/utils/flatten": "./dist/components/Theme/utils/flatten.js",
176
+ "./components/Theme/utils/merge": "./dist/components/Theme/utils/merge.js",
177
+ "./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
178
+ "./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
179
+ "./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
180
+ "./scss/_mixins.scss": "./dist/scss/_mixins.scss",
181
+ "./scss/_variables.scss": "./dist/scss/_variables.scss",
182
+ "./scss/bootstrap/_main.scss": "./dist/scss/bootstrap/_main.scss",
183
+ "./scss/bootstrap/_variables.scss": "./dist/scss/bootstrap/_variables.scss",
184
+ "./scss/colours/thematic/_nord.scss": "./dist/scss/colours/thematic/_nord.scss",
185
+ "./scss/colours/thematic/_tr.scss": "./dist/scss/colours/thematic/_tr.scss",
186
+ "./scss/components/_hero-title.scss": "./dist/scss/components/_hero-title.scss",
187
+ "./scss/fonts/_font-faces.scss": "./dist/scss/fonts/_font-faces.scss",
188
+ "./scss/fonts/_mixins.scss": "./dist/scss/fonts/_mixins.scss",
189
+ "./scss/fonts/_rules.scss": "./dist/scss/fonts/_rules.scss",
190
+ "./scss/fonts/_variables.scss": "./dist/scss/fonts/_variables.scss",
191
+ "./scss/main.scss": "./dist/scss/main.scss",
192
+ "./scss/mixins/_block.scss": "./dist/scss/mixins/_block.scss",
193
+ "./scss/mixins/_body-text.scss": "./dist/scss/mixins/_body-text.scss",
194
+ "./scss/mixins/_graphic.scss": "./dist/scss/mixins/_graphic.scss",
195
+ "./scss/mixins/_note-text.scss": "./dist/scss/mixins/_note-text.scss",
196
+ "./scss/mixins/_visually-hidden.scss": "./dist/scss/mixins/_visually-hidden.scss",
197
+ "./scss/spacers/_rules.scss": "./dist/scss/spacers/_rules.scss",
198
+ "./scss/spacers/_variables.scss": "./dist/scss/spacers/_variables.scss",
199
+ "./scss/typography/_box-shadow.scss": "./dist/scss/typography/_box-shadow.scss",
200
+ "./scss/typography/_font-size.scss": "./dist/scss/typography/_font-size.scss",
201
+ "./scss/typography/_letter-spacing.scss": "./dist/scss/typography/_letter-spacing.scss",
202
+ "./scss/typography/_main.scss": "./dist/scss/typography/_main.scss",
203
+ "./scss/typography/_mixins.scss": "./dist/scss/typography/_mixins.scss",
204
+ "./scss/typography/_rules.scss": "./dist/scss/typography/_rules.scss",
205
+ "./scss/typography/_text-shadow.scss": "./dist/scss/typography/_text-shadow.scss",
206
+ "./scss/typography/_transform.scss": "./dist/scss/typography/_transform.scss",
207
+ "./scss/typography/_variables.scss": "./dist/scss/typography/_variables.scss",
208
+ ".": "./dist/index.js"
209
+ }
210
+ }