luna-one 3.1.597 → 3.1.599

Sign up to get free protection for your applications and to get access to all the features.
Files changed (189) hide show
  1. package/README.md +2315 -2315
  2. package/dist/global-styles/content/typography.scss +140 -140
  3. package/dist/global-styles/fonts/benton.scss +113 -113
  4. package/dist/global-styles/global-terra.scss +10 -10
  5. package/dist/global-styles/global-vars.scss +599 -599
  6. package/dist/global-styles/layout/_css-grid.scss +20 -20
  7. package/dist/global-styles/layout/_media-queries.scss +35 -35
  8. package/dist/global-styles/layout/_normalize.scss +340 -340
  9. package/dist/global-styles/layout/_reset.scss +13 -13
  10. package/dist/global-styles/mixins/_box-shadow.scss +6 -6
  11. package/dist/global-styles/mixins/_mixins.scss +5 -5
  12. package/dist/global-styles/mixins/_organism-padding-hack.scss +7 -7
  13. package/dist/global-styles/mixins/_typography.scss +102 -102
  14. package/dist/global-styles/mixins/_yiq.scss +50 -50
  15. package/dist/global-styles/mixins/_z-index.scss +3 -3
  16. package/dist/global-styles/terra.scss +15 -15
  17. package/dist/global-styles/utilities/_box-shadow.scss +8 -8
  18. package/dist/global-styles/utilities/_display.scss +48 -48
  19. package/dist/global-styles/utilities/_font-family.scss +15 -15
  20. package/dist/global-styles/utilities/_parallax.scss +23 -23
  21. package/dist/global-styles/utilities/_text-align.scss +24 -24
  22. package/dist/luna/components/2x2/2x2.scss +915 -915
  23. package/dist/luna/components/2x2/2x2Documentation.mdx +77 -77
  24. package/dist/luna/components/Accordion/Accordion.scss +154 -154
  25. package/dist/luna/components/Accordion/AccordionDocumentation.mdx +45 -45
  26. package/dist/luna/components/AdminCategoryData/AdminCategoryData.scss +81 -81
  27. package/dist/luna/components/AdminProductData/AdminProductData.scss +75 -75
  28. package/dist/luna/components/BlockListItems/BlockListItems.scss +285 -285
  29. package/dist/luna/components/BlockListItems/BlockListItemsDocumentation.mdx +339 -339
  30. package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
  31. package/dist/luna/components/CTAButtons/CTAButtons.scss +19 -19
  32. package/dist/luna/components/CTAButtons/CTAButtonsDocumentation.mdx +33 -33
  33. package/dist/luna/components/Carousel/Carousel.scss +155 -155
  34. package/dist/luna/components/Carousel/CarouselDocumentation.mdx +161 -161
  35. package/dist/luna/components/ComparisonTable/ComparisonTable.scss +331 -331
  36. package/dist/luna/components/ComparisonTable/ComparisonTableDocumentation.mdx +159 -159
  37. package/dist/luna/components/CtaWithHeader/CTAHeaderTextDocumentation.mdx +45 -45
  38. package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +324 -324
  39. package/dist/luna/components/DataPoint/DataPoint.scss +170 -170
  40. package/dist/luna/components/DataPoint/DataPointDocumentation.mdx +40 -40
  41. package/dist/luna/components/EventCard/EventCard.scss +134 -134
  42. package/dist/luna/components/EventCard/EventCardDocumentation.mdx +46 -46
  43. package/dist/luna/components/FilterHero/FilterHero.scss +80 -80
  44. package/dist/luna/components/FilterSection/FilterSection.scss +175 -175
  45. package/dist/luna/components/Flyout/Flyout.scss +367 -367
  46. package/dist/luna/components/Flyout/FlyoutDocumentation.mdx +60 -60
  47. package/dist/luna/components/Footer/Footer.scss +484 -484
  48. package/dist/luna/components/Footer/FooterDocumentation.mdx +133 -133
  49. package/dist/luna/components/FullBackgroundHero/FullBackgroundHero.scss +722 -722
  50. package/dist/luna/components/FullBackgroundHero/FullBackgroundHeroDocumentation.mdx +93 -93
  51. package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss +51 -51
  52. package/dist/luna/components/HTMLEmbed/HTMLEmbedDocumentation.mdx +31 -31
  53. package/dist/luna/components/Header/Header.scss +36 -36
  54. package/dist/luna/components/Header/HeaderDocumentation.mdx +24 -24
  55. package/dist/luna/components/IconTextList/IconTextList.scss +124 -124
  56. package/dist/luna/components/IconTextList/IconTextListDocumentation.mdx +45 -45
  57. package/dist/luna/components/ImageGallery/ImageGallery.scss +442 -442
  58. package/dist/luna/components/ImageGallery/ImageGalleryDocumentation.mdx +90 -90
  59. package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss +122 -122
  60. package/dist/luna/components/InPageJumpNav/InPageJumpNavDocumentation.mdx +22 -22
  61. package/dist/luna/components/JobPosting/JobPosting.scss +171 -171
  62. package/dist/luna/components/JobPosting/JobPostingDocumentation.mdx +69 -69
  63. package/dist/luna/components/LanguageSelector/LanguageSelector.js +4 -4
  64. package/dist/luna/components/LanguageSelector/LanguageSelector.scss +318 -318
  65. package/dist/luna/components/LanguageSelector/LanguageSelectorDocumentation.mdx +119 -119
  66. package/dist/luna/components/LinkList/LinkList.scss +59 -59
  67. package/dist/luna/components/LinkList/LinkListDocumentation.mdx +54 -54
  68. package/dist/luna/components/LoadingSpinner/LoadingSpinner.scss +34 -34
  69. package/dist/luna/components/Login/Login.scss +180 -180
  70. package/dist/luna/components/MarketoForm/MarketoForm.scss +56 -56
  71. package/dist/luna/components/MarketoForm/MarketoFormDocumentation.mdx +1 -1
  72. package/dist/luna/components/MegaMenu/MegaMenu.scss +570 -570
  73. package/dist/luna/components/MobileLogin/MobileLogin.scss +38 -38
  74. package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +289 -289
  75. package/dist/luna/components/MobileMenu/MobileMenu.scss +70 -70
  76. package/dist/luna/components/MobileNav/MobileNav.scss +286 -286
  77. package/dist/luna/components/NavBar/NavBar.scss +628 -628
  78. package/dist/luna/components/NavBar/NavigationBarDocumentation.mdx +245 -245
  79. package/dist/luna/components/NavBarTop/NavBarTop.scss +403 -403
  80. package/dist/luna/components/NavSearch/NavSearch.scss +130 -130
  81. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntries.scss +339 -339
  82. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntriesDocumentation.mdx +89 -89
  83. package/dist/luna/components/OverlayNotice/OverlayNotice.scss +247 -247
  84. package/dist/luna/components/OverlayNotice/OverlayNoticeDocumentation.mdx +45 -45
  85. package/dist/luna/components/Pagination/Pagination.scss +27 -27
  86. package/dist/luna/components/ProductSummary/ProductSummary.scss +273 -273
  87. package/dist/luna/components/ProductsPackage/ProductsPackage.scss +194 -194
  88. package/dist/luna/components/ProseLayout/ProseLayout.js +7 -5
  89. package/dist/luna/components/ProseLayout/ProseLayout.scss +394 -384
  90. package/dist/luna/components/ProseLayout/ProseLayoutDocumentation.mdx +93 -93
  91. package/dist/luna/components/PullQuote/PullQuote.scss +400 -400
  92. package/dist/luna/components/PullQuote/PullQuoteDocumentation.mdx +60 -60
  93. package/dist/luna/components/PullQuote/ico-quote-white.svg +3 -3
  94. package/dist/luna/components/PullQuote/ico-quote.svg +3 -3
  95. package/dist/luna/components/RegionCard/RegionCard.scss +86 -86
  96. package/dist/luna/components/ResourceGrid/ResourceGrid.scss +34 -34
  97. package/dist/luna/components/ResourceGrid/ResourceGridDocumentation.mdx +102 -102
  98. package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +219 -219
  99. package/dist/luna/components/ScrollInPlace/ScrollInPlaceDocumentation.mdx +123 -123
  100. package/dist/luna/components/SketchUpPricingCard/SketchUpPricingCard.scss +142 -142
  101. package/dist/luna/components/SlideOutFeat/SlideOutFeat.scss +124 -124
  102. package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
  103. package/dist/luna/components/SubNav/SubNav.scss +274 -274
  104. package/dist/luna/components/SuperHero/SuperHero.scss +804 -804
  105. package/dist/luna/components/SuperHero/SuperHeroDocumentation.mdx +57 -57
  106. package/dist/luna/components/SupportCard/SupportCard.scss +134 -134
  107. package/dist/luna/components/Tabs/Tabs.scss +871 -871
  108. package/dist/luna/components/Tabs/TabsDocumentation.mdx +94 -94
  109. package/dist/luna/components/TimeBasedList/TimeBasedList.scss +394 -394
  110. package/dist/luna/components/TimeBasedList/TimeBasedListDocumentation.mdx +123 -123
  111. package/dist/luna/components/TrainerCard/TrainerCard.scss +51 -51
  112. package/dist/luna/components/TrialForm/TrialComponents/TrialSpecifics.scss +44 -44
  113. package/dist/luna/components/TrialForm/TrialComponents/TrialSummary.scss +57 -57
  114. package/dist/luna/components/TrialForm/TrialFormStart/TrialFormStart.scss +28 -28
  115. package/dist/luna/components/TrialForm/images/check.svg +3 -3
  116. package/dist/luna/components/TrialForm/images/form-border-bottom-dark.svg +4 -4
  117. package/dist/luna/components/TrialForm/images/form-border-bottom-light.svg +4 -4
  118. package/dist/luna/components/TrialForm/images/form-border-top-dark.svg +4 -4
  119. package/dist/luna/components/TrialForm/images/form-border-top-light.svg +4 -4
  120. package/dist/luna/components/UnboundedCard/UnboundedCard.scss +108 -108
  121. package/dist/luna/components/UnboundedCard/playIcon.svg +17 -17
  122. package/dist/luna/components/VariableContentCard/VariableContentCard.scss +253 -253
  123. package/dist/luna/components/Video/Video.scss +209 -209
  124. package/dist/luna/components/Video/VideoDocumentation.mdx +56 -56
  125. package/dist/luna/components/VidyardModal/VidyardModal.scss +34 -34
  126. package/dist/luna/components/WaffleMenu/WaffleMenu.scss +73 -73
  127. package/dist/luna/images/arrow-diagonal-black.svg +13 -13
  128. package/dist/luna/images/arrow-diagonal-blue.svg +13 -13
  129. package/dist/luna/images/arrow-diagonal-white.svg +13 -13
  130. package/dist/luna/images/bulletpoint.svg +3 -3
  131. package/dist/luna/images/callout-icon.svg +3 -3
  132. package/dist/luna/images/carat-down.svg +3 -3
  133. package/dist/luna/images/carat-up.svg +3 -3
  134. package/dist/luna/images/check-blue.svg +4 -4
  135. package/dist/luna/images/circle-arrow-right-black.svg +3 -3
  136. package/dist/luna/images/circle-arrow-right-white.svg +3 -3
  137. package/dist/luna/images/circle-arrow.svg +3 -3
  138. package/dist/luna/images/close-blue.svg +4 -4
  139. package/dist/luna/images/close-button.svg +42 -42
  140. package/dist/luna/images/close-dark-navy.svg +3 -3
  141. package/dist/luna/images/close-icon.svg +3 -3
  142. package/dist/luna/images/close.svg +3 -3
  143. package/dist/luna/images/collapse-close-blue.svg +5 -5
  144. package/dist/luna/images/collapse-close-gold.svg +5 -5
  145. package/dist/luna/images/collapse-open-blue.svg +4 -4
  146. package/dist/luna/images/collapse-open-gold.svg +4 -4
  147. package/dist/luna/images/cross-medium-blue.svg +4 -4
  148. package/dist/luna/images/cross-medium-white.svg +5 -5
  149. package/dist/luna/images/down-caret-dark-blue.svg +4 -4
  150. package/dist/luna/images/down-caret-dark-gray.svg +4 -4
  151. package/dist/luna/images/down-caret-light-gray.svg +4 -4
  152. package/dist/luna/images/downArrow.svg +36 -36
  153. package/dist/luna/images/ellipses.svg +6 -6
  154. package/dist/luna/images/external-arrow-blue.svg +11 -11
  155. package/dist/luna/images/external-arrow-white-theme.svg +12 -12
  156. package/dist/luna/images/external-arrow.svg +12 -12
  157. package/dist/luna/images/facebook.svg +13 -13
  158. package/dist/luna/images/form-border-top-light.svg +4 -4
  159. package/dist/luna/images/frame-intersection.svg +3 -3
  160. package/dist/luna/images/gallery-image-corner-border.svg +3 -3
  161. package/dist/luna/images/green-tick.svg +3 -3
  162. package/dist/luna/images/instagram.svg +19 -19
  163. package/dist/luna/images/internal-arrow-blue.svg +15 -15
  164. package/dist/luna/images/internal-arrow-white-theme.svg +15 -15
  165. package/dist/luna/images/internal-arrow.svg +15 -15
  166. package/dist/luna/images/linkedin.svg +15 -15
  167. package/dist/luna/images/logo-icon.svg +17 -17
  168. package/dist/luna/images/pdf-doc.svg +9 -9
  169. package/dist/luna/images/play.svg +17 -17
  170. package/dist/luna/images/right-caret-dark-blue.svg +3 -3
  171. package/dist/luna/images/right-caret-light-gray.svg +4 -4
  172. package/dist/luna/images/right-caret-light-yellow-stroke.svg +9 -9
  173. package/dist/luna/images/right-caret-light-yellow.svg +4 -4
  174. package/dist/luna/images/right-caret-medium-gray.svg +4 -4
  175. package/dist/luna/images/search.svg +9 -9
  176. package/dist/luna/images/skipicon.svg +154 -154
  177. package/dist/luna/images/text-doc.svg +9 -9
  178. package/dist/luna/images/text-lines.svg +22 -22
  179. package/dist/luna/images/tooltip-close-icon.svg +3 -3
  180. package/dist/luna/images/tooltip-icon.svg +3 -3
  181. package/dist/luna/images/twitter.svg +17 -17
  182. package/dist/luna/images/up-arrow.svg +36 -36
  183. package/dist/luna/images/up-right-arrow.svg +9 -9
  184. package/dist/luna/images/user-profile.svg +37 -37
  185. package/dist/luna/images/user.svg +4 -4
  186. package/dist/luna/images/waffle.svg +11 -11
  187. package/dist/luna/images/worldwide.svg +19 -19
  188. package/dist/luna/images/youtube.svg +14 -14
  189. package/package.json +91 -91
@@ -1,123 +1,123 @@
1
- #### Scroll In Place
2
-
3
- ###### Props -
4
-
5
- - `titleBackground` - object containing the background image or video url for the title slide
6
- - `image` - object containing the background image information
7
- - `src` - string containing the background image source
8
- - `alt` - string containing the background image alt text
9
- - `video` - string containing the background video URL (note: if this is specified, it overrides all slide background images)
10
- - `TitleContent` - a react component containing the content to be displayed on the title slide
11
- - `slides` - array of objects containing information on all regular slides
12
- - `backgroundImage` - object containing slide background image information
13
- - `src` - string containing the background image source
14
- - `alt` - string containing the background image alt text
15
- - `content` - a react component containing the content to be displayed on the slide
16
-
17
- ###### Example -
18
-
19
- ```
20
- const TitleContent = () => (
21
- <h1 className="title-text">Scroll In Place</h1>
22
- )
23
-
24
- const Slide1Content = () => (
25
- <div className="content-sections">
26
- <div className="left-section">
27
- <h2>Left Slide 1</h2>
28
- </div>
29
-
30
- <div className="center-section">
31
- <h2>Center Slide 1</h2>
32
-
33
- <p>
34
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
35
- </p>
36
-
37
- <p>
38
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
39
- </p>
40
-
41
- <p>
42
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
43
- </p>
44
-
45
- <p>
46
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
47
- </p>
48
-
49
- <p>
50
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
51
- </p>
52
-
53
- <p>
54
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
55
- </p>
56
- </div>
57
-
58
- <div className="right-section">
59
- <h2>Right Slide 1</h2>
60
- </div>
61
- </div>
62
- )
63
-
64
- const Slide2Content = () => (
65
- <div className="content-sections">
66
- <div className="left-section">
67
- <h2>Left Slide 2</h2>
68
- </div>
69
-
70
- <div className="center-section">
71
- <h2>Center Slide 2</h2>
72
- </div>
73
-
74
- <div className="right-section">
75
- <h2>Right Slide 2</h2>
76
- </div>
77
- </div>
78
- )
79
-
80
- const slide1 = {
81
- backgroundImage: {
82
- src: "https://picsum.photos/id/152/1280/752",
83
- alt: "background image",
84
- },
85
- content: Slide1Content,
86
- }
87
-
88
- const slide2 = {
89
- backgroundImage: {
90
- src: "https://picsum.photos/id/1023/1280/752",
91
- alt: "background image",
92
- },
93
- content: Slide2Content,
94
- }
95
-
96
- const titleBackgroundImage = {
97
- image: {
98
- src: "https://picsum.photos/id/1025/1280/752/",
99
- alt: "background-image",
100
- }
101
- }
102
-
103
- const titleBackgroundVideo = {
104
- video: "https://videos.ctfassets.net/citn2sn5tdjr/ItsVtlZqvkpLmrgyfLKdp/dc627782ba926439c285b65a2f579d1f/video_preview_h264.mp4",
105
- }
106
-
107
- const slides = [slide1, slide2]
108
-
109
- return (
110
- <>
111
- <ScrollInPlace
112
- titleBackground={titleBackgroundVideo}
113
- TitleContent={TitleContent}
114
- slides={slides}
115
- />
116
- <ScrollInPlace
117
- titleBackground={titleBackgroundImage}
118
- TitleContent={TitleContent}
119
- slides={slides}
120
- />
121
- </>
122
- );
123
- ```
1
+ #### Scroll In Place
2
+
3
+ ###### Props -
4
+
5
+ - `titleBackground` - object containing the background image or video url for the title slide
6
+ - `image` - object containing the background image information
7
+ - `src` - string containing the background image source
8
+ - `alt` - string containing the background image alt text
9
+ - `video` - string containing the background video URL (note: if this is specified, it overrides all slide background images)
10
+ - `TitleContent` - a react component containing the content to be displayed on the title slide
11
+ - `slides` - array of objects containing information on all regular slides
12
+ - `backgroundImage` - object containing slide background image information
13
+ - `src` - string containing the background image source
14
+ - `alt` - string containing the background image alt text
15
+ - `content` - a react component containing the content to be displayed on the slide
16
+
17
+ ###### Example -
18
+
19
+ ```
20
+ const TitleContent = () => (
21
+ <h1 className="title-text">Scroll In Place</h1>
22
+ )
23
+
24
+ const Slide1Content = () => (
25
+ <div className="content-sections">
26
+ <div className="left-section">
27
+ <h2>Left Slide 1</h2>
28
+ </div>
29
+
30
+ <div className="center-section">
31
+ <h2>Center Slide 1</h2>
32
+
33
+ <p>
34
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
35
+ </p>
36
+
37
+ <p>
38
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
39
+ </p>
40
+
41
+ <p>
42
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
43
+ </p>
44
+
45
+ <p>
46
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
47
+ </p>
48
+
49
+ <p>
50
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
51
+ </p>
52
+
53
+ <p>
54
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
55
+ </p>
56
+ </div>
57
+
58
+ <div className="right-section">
59
+ <h2>Right Slide 1</h2>
60
+ </div>
61
+ </div>
62
+ )
63
+
64
+ const Slide2Content = () => (
65
+ <div className="content-sections">
66
+ <div className="left-section">
67
+ <h2>Left Slide 2</h2>
68
+ </div>
69
+
70
+ <div className="center-section">
71
+ <h2>Center Slide 2</h2>
72
+ </div>
73
+
74
+ <div className="right-section">
75
+ <h2>Right Slide 2</h2>
76
+ </div>
77
+ </div>
78
+ )
79
+
80
+ const slide1 = {
81
+ backgroundImage: {
82
+ src: "https://picsum.photos/id/152/1280/752",
83
+ alt: "background image",
84
+ },
85
+ content: Slide1Content,
86
+ }
87
+
88
+ const slide2 = {
89
+ backgroundImage: {
90
+ src: "https://picsum.photos/id/1023/1280/752",
91
+ alt: "background image",
92
+ },
93
+ content: Slide2Content,
94
+ }
95
+
96
+ const titleBackgroundImage = {
97
+ image: {
98
+ src: "https://picsum.photos/id/1025/1280/752/",
99
+ alt: "background-image",
100
+ }
101
+ }
102
+
103
+ const titleBackgroundVideo = {
104
+ video: "https://videos.ctfassets.net/citn2sn5tdjr/ItsVtlZqvkpLmrgyfLKdp/dc627782ba926439c285b65a2f579d1f/video_preview_h264.mp4",
105
+ }
106
+
107
+ const slides = [slide1, slide2]
108
+
109
+ return (
110
+ <>
111
+ <ScrollInPlace
112
+ titleBackground={titleBackgroundVideo}
113
+ TitleContent={TitleContent}
114
+ slides={slides}
115
+ />
116
+ <ScrollInPlace
117
+ titleBackground={titleBackgroundImage}
118
+ TitleContent={TitleContent}
119
+ slides={slides}
120
+ />
121
+ </>
122
+ );
123
+ ```
@@ -1,142 +1,142 @@
1
- @import "../../../global-styles/global-vars.scss";
2
- @import "../../../global-styles/terra.scss";
3
-
4
- .sketchup-pricing-card {
5
- width: 328px;
6
- display: flex;
7
- flex-direction: column;
8
-
9
- &__content {
10
- box-shadow: box-shadow(2);
11
- padding: 24px;
12
- height: 100%;
13
- display: flex;
14
- flex-direction: column;
15
- }
16
-
17
- &__top {
18
- height: 350px;
19
- display: flex;
20
- flex-direction: column;
21
- }
22
-
23
- &__header {
24
- font-size: $subheading-size;
25
- font-weight: 400;
26
- margin-bottom: 0;
27
- }
28
-
29
- &__bold-header {
30
- font-size: $heading-4-size;
31
- font-weight: 800;
32
- margin-bottom: 0;
33
- margin-top: 0;
34
- padding-top: 0;
35
- }
36
-
37
- &__text.featured {
38
- margin: 0px;
39
- }
40
-
41
- &__icon-container {
42
- padding-top: 22px;
43
- display: flex;
44
- flex-direction: row;
45
- flex-shrink: 1;
46
- transform: translateX(-4px);
47
-
48
- .ter-icon {
49
- transform: scale(0.8) translateY(-6px);
50
- }
51
- }
52
-
53
- &__subscript {
54
- padding-left: 2px;
55
- font-size: $large-body-font-size;
56
- }
57
-
58
- &__price {
59
- font-size: $heading-4-size;
60
- margin-bottom: 0;
61
- }
62
-
63
- &__sub {
64
- font-size: 50%;
65
- bottom: 1px;
66
- }
67
-
68
- &__text {
69
- font-size: $subheading-size;
70
- font-weight: 400;
71
- margin: 0 0 35px 0;
72
- flex: 1 1 auto;
73
- padding-bottom: 16px;
74
- }
75
-
76
- &__list-items {
77
- height: auto;
78
- list-style: none;
79
- margin: 0;
80
- padding: 16px 0 16px 8px;
81
- }
82
-
83
- li {
84
- list-style-image: url(../../images/check.png);
85
- margin-left: 10px;
86
- padding-left: 4px;
87
- }
88
-
89
- &__list-item {
90
- font-size: $large-body-font-size;
91
- padding-top: 8px;
92
-
93
- &--featured-content {
94
- display: flex;
95
- color: $trimble-dark-gray;
96
- font-size: $large-body-font-size;
97
- line-height: 22.4px;
98
- }
99
-
100
- &-featured-span {
101
- background-color: $trimble-gold;
102
- padding: 2px 4px;
103
- align-self: center;
104
- font-weight: 600;
105
- }
106
- }
107
-
108
- &__bottom {
109
- padding-bottom: 8px;
110
- }
111
-
112
- &__bottom-link {
113
- margin-top: auto;
114
- text-decoration: none;
115
- font-weight: 600;
116
- font-size: $large-body-font-size;
117
- }
118
-
119
- a.ter-button.ter-button--primary--1,
120
- a.ter-button.ter-button--secondary--1 {
121
- justify-content: center;
122
- max-height: 48px;
123
- width: 100%;
124
- margin: auto;
125
- display: block;
126
- }
127
-
128
- &__prev-price {
129
- margin-bottom: 0;
130
- text-decoration: line-through;
131
- }
132
-
133
- &__featured-card,
134
- &__featured-placeholder {
135
- height: 32px;
136
- width: 328px;
137
- right: 24px;
138
- color: $white;
139
- text-align: center;
140
- padding: 2px;
141
- }
142
- }
1
+ @import "../../../global-styles/global-vars.scss";
2
+ @import "../../../global-styles/terra.scss";
3
+
4
+ .sketchup-pricing-card {
5
+ width: 328px;
6
+ display: flex;
7
+ flex-direction: column;
8
+
9
+ &__content {
10
+ box-shadow: box-shadow(2);
11
+ padding: 24px;
12
+ height: 100%;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+
17
+ &__top {
18
+ height: 350px;
19
+ display: flex;
20
+ flex-direction: column;
21
+ }
22
+
23
+ &__header {
24
+ font-size: $subheading-size;
25
+ font-weight: 400;
26
+ margin-bottom: 0;
27
+ }
28
+
29
+ &__bold-header {
30
+ font-size: $heading-4-size;
31
+ font-weight: 800;
32
+ margin-bottom: 0;
33
+ margin-top: 0;
34
+ padding-top: 0;
35
+ }
36
+
37
+ &__text.featured {
38
+ margin: 0px;
39
+ }
40
+
41
+ &__icon-container {
42
+ padding-top: 22px;
43
+ display: flex;
44
+ flex-direction: row;
45
+ flex-shrink: 1;
46
+ transform: translateX(-4px);
47
+
48
+ .ter-icon {
49
+ transform: scale(0.8) translateY(-6px);
50
+ }
51
+ }
52
+
53
+ &__subscript {
54
+ padding-left: 2px;
55
+ font-size: $large-body-font-size;
56
+ }
57
+
58
+ &__price {
59
+ font-size: $heading-4-size;
60
+ margin-bottom: 0;
61
+ }
62
+
63
+ &__sub {
64
+ font-size: 50%;
65
+ bottom: 1px;
66
+ }
67
+
68
+ &__text {
69
+ font-size: $subheading-size;
70
+ font-weight: 400;
71
+ margin: 0 0 35px 0;
72
+ flex: 1 1 auto;
73
+ padding-bottom: 16px;
74
+ }
75
+
76
+ &__list-items {
77
+ height: auto;
78
+ list-style: none;
79
+ margin: 0;
80
+ padding: 16px 0 16px 8px;
81
+ }
82
+
83
+ li {
84
+ list-style-image: url(../../images/check.png);
85
+ margin-left: 10px;
86
+ padding-left: 4px;
87
+ }
88
+
89
+ &__list-item {
90
+ font-size: $large-body-font-size;
91
+ padding-top: 8px;
92
+
93
+ &--featured-content {
94
+ display: flex;
95
+ color: $trimble-dark-gray;
96
+ font-size: $large-body-font-size;
97
+ line-height: 22.4px;
98
+ }
99
+
100
+ &-featured-span {
101
+ background-color: $trimble-gold;
102
+ padding: 2px 4px;
103
+ align-self: center;
104
+ font-weight: 600;
105
+ }
106
+ }
107
+
108
+ &__bottom {
109
+ padding-bottom: 8px;
110
+ }
111
+
112
+ &__bottom-link {
113
+ margin-top: auto;
114
+ text-decoration: none;
115
+ font-weight: 600;
116
+ font-size: $large-body-font-size;
117
+ }
118
+
119
+ a.ter-button.ter-button--primary--1,
120
+ a.ter-button.ter-button--secondary--1 {
121
+ justify-content: center;
122
+ max-height: 48px;
123
+ width: 100%;
124
+ margin: auto;
125
+ display: block;
126
+ }
127
+
128
+ &__prev-price {
129
+ margin-bottom: 0;
130
+ text-decoration: line-through;
131
+ }
132
+
133
+ &__featured-card,
134
+ &__featured-placeholder {
135
+ height: 32px;
136
+ width: 328px;
137
+ right: 24px;
138
+ color: $white;
139
+ text-align: center;
140
+ padding: 2px;
141
+ }
142
+ }