luna-one 3.1.594 → 3.1.596

Sign up to get free protection for your applications and to get access to all the features.
Files changed (212) 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/AdminCategoryData/CategoryTranslationData.js +4 -4
  28. package/dist/luna/components/AdminProductData/AdminProductData.js +4 -4
  29. package/dist/luna/components/AdminProductData/AdminProductData.scss +75 -75
  30. package/dist/luna/components/BlockListItems/BlockListItems.scss +285 -285
  31. package/dist/luna/components/BlockListItems/BlockListItemsDocumentation.mdx +339 -339
  32. package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
  33. package/dist/luna/components/CTAButtons/CTAButtons.scss +19 -19
  34. package/dist/luna/components/CTAButtons/CTAButtonsDocumentation.mdx +33 -33
  35. package/dist/luna/components/Carousel/Carousel.scss +155 -155
  36. package/dist/luna/components/Carousel/CarouselDocumentation.mdx +161 -161
  37. package/dist/luna/components/ComparisonTable/ComparisonTable.scss +331 -331
  38. package/dist/luna/components/ComparisonTable/ComparisonTableDocumentation.mdx +159 -159
  39. package/dist/luna/components/CtaWithHeader/CTAHeaderTextDocumentation.mdx +45 -45
  40. package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +324 -324
  41. package/dist/luna/components/DataPoint/DataPoint.scss +170 -170
  42. package/dist/luna/components/DataPoint/DataPointDocumentation.mdx +40 -40
  43. package/dist/luna/components/EventCard/EventCard.js +3 -3
  44. package/dist/luna/components/EventCard/EventCard.scss +134 -134
  45. package/dist/luna/components/EventCard/EventCardDocumentation.mdx +46 -46
  46. package/dist/luna/components/FilterHero/FilterHero.scss +80 -80
  47. package/dist/luna/components/FilterSection/FilterSection.scss +175 -175
  48. package/dist/luna/components/Flyout/Flyout.js +4 -5
  49. package/dist/luna/components/Flyout/Flyout.scss +367 -367
  50. package/dist/luna/components/Flyout/FlyoutDocumentation.mdx +60 -60
  51. package/dist/luna/components/Footer/Footer.scss +484 -484
  52. package/dist/luna/components/Footer/FooterDocumentation.mdx +133 -133
  53. package/dist/luna/components/FullBackgroundHero/FullBackgroundHero.scss +722 -722
  54. package/dist/luna/components/FullBackgroundHero/FullBackgroundHeroDocumentation.mdx +93 -93
  55. package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss +51 -51
  56. package/dist/luna/components/HTMLEmbed/HTMLEmbedDocumentation.mdx +31 -31
  57. package/dist/luna/components/Header/Header.scss +36 -36
  58. package/dist/luna/components/Header/HeaderDocumentation.mdx +24 -24
  59. package/dist/luna/components/IconTextList/IconTextList.scss +124 -124
  60. package/dist/luna/components/IconTextList/IconTextListDocumentation.mdx +45 -45
  61. package/dist/luna/components/ImageGallery/ImageGallery.scss +442 -442
  62. package/dist/luna/components/ImageGallery/ImageGalleryDocumentation.mdx +90 -90
  63. package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss +122 -122
  64. package/dist/luna/components/InPageJumpNav/InPageJumpNavDocumentation.mdx +22 -22
  65. package/dist/luna/components/JobPosting/JobPosting.scss +171 -171
  66. package/dist/luna/components/JobPosting/JobPostingDocumentation.mdx +69 -69
  67. package/dist/luna/components/LanguageSelector/LanguageSelector.js +2 -3
  68. package/dist/luna/components/LanguageSelector/LanguageSelector.scss +318 -318
  69. package/dist/luna/components/LanguageSelector/LanguageSelectorDocumentation.mdx +119 -119
  70. package/dist/luna/components/LinkList/LinkList.scss +59 -59
  71. package/dist/luna/components/LinkList/LinkListDocumentation.mdx +54 -54
  72. package/dist/luna/components/LoadingSpinner/LoadingSpinner.scss +34 -34
  73. package/dist/luna/components/Login/Login.js +3 -4
  74. package/dist/luna/components/Login/Login.scss +180 -180
  75. package/dist/luna/components/MarketoForm/MarketoForm.scss +56 -56
  76. package/dist/luna/components/MarketoForm/MarketoFormDocumentation.mdx +1 -1
  77. package/dist/luna/components/MegaMenu/MegaMenu.js +5 -6
  78. package/dist/luna/components/MegaMenu/MegaMenu.scss +570 -570
  79. package/dist/luna/components/MegaMenu/menu-generators/PartialSubMenu.js +3 -4
  80. package/dist/luna/components/MegaMenu/menu-generators/SubMenu.js +15 -13
  81. package/dist/luna/components/MegaMenu/menu-generators/TertiaryMenu.js +12 -10
  82. package/dist/luna/components/MegaMenu/menu-generators/UncollapsedLinks.js +3 -4
  83. package/dist/luna/components/MobileLogin/MobileLogin.js +3 -4
  84. package/dist/luna/components/MobileLogin/MobileLogin.scss +38 -38
  85. package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.js +6 -6
  86. package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +289 -289
  87. package/dist/luna/components/MobileMegaMenu/MobileMegaMenuCategory.js +9 -9
  88. package/dist/luna/components/MobileMegaMenu/MobileMegaMenuPartialCategory.js +3 -3
  89. package/dist/luna/components/MobileMegaMenu/MobileMegaMenuSubCategory.js +8 -9
  90. package/dist/luna/components/MobileMenu/MobileMenu.scss +70 -70
  91. package/dist/luna/components/MobileNav/MobileNav.js +1 -2
  92. package/dist/luna/components/MobileNav/MobileNav.scss +286 -286
  93. package/dist/luna/components/NavBar/NavBar.scss +628 -628
  94. package/dist/luna/components/NavBar/NavMiniMenu.js +3 -4
  95. package/dist/luna/components/NavBar/NavigationBarDocumentation.mdx +245 -245
  96. package/dist/luna/components/NavBar/UtilityNav.js +5 -5
  97. package/dist/luna/components/NavBarTop/NavBarTop.js +7 -8
  98. package/dist/luna/components/NavBarTop/NavBarTop.scss +403 -403
  99. package/dist/luna/components/NavSearch/NavSearch.scss +130 -130
  100. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntries.scss +339 -339
  101. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntriesDocumentation.mdx +89 -89
  102. package/dist/luna/components/OverlayNotice/OverlayNotice.scss +247 -247
  103. package/dist/luna/components/OverlayNotice/OverlayNoticeDocumentation.mdx +45 -45
  104. package/dist/luna/components/Pagination/Pagination.scss +27 -27
  105. package/dist/luna/components/ProductSummary/ProductSummary.scss +273 -273
  106. package/dist/luna/components/ProductsPackage/ProductsPackage.scss +194 -194
  107. package/dist/luna/components/ProseLayout/ProseLayout.scss +384 -384
  108. package/dist/luna/components/ProseLayout/ProseLayoutDocumentation.mdx +93 -93
  109. package/dist/luna/components/PullQuote/PullQuote.scss +400 -400
  110. package/dist/luna/components/PullQuote/PullQuoteDocumentation.mdx +60 -60
  111. package/dist/luna/components/PullQuote/ico-quote-white.svg +3 -3
  112. package/dist/luna/components/PullQuote/ico-quote.svg +3 -3
  113. package/dist/luna/components/RegionCard/RegionCard.js +4 -4
  114. package/dist/luna/components/RegionCard/RegionCard.scss +86 -86
  115. package/dist/luna/components/ResourceGrid/ResourceGrid.scss +34 -34
  116. package/dist/luna/components/ResourceGrid/ResourceGridDocumentation.mdx +102 -102
  117. package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +219 -219
  118. package/dist/luna/components/ScrollInPlace/ScrollInPlaceDocumentation.mdx +123 -123
  119. package/dist/luna/components/SketchUpPricingCard/SketchUpPricingCard.scss +142 -142
  120. package/dist/luna/components/SlideOutFeat/SlideOutFeat.scss +124 -124
  121. package/dist/luna/components/StoreFrontCard/StoreFrontCard.js +1 -2
  122. package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
  123. package/dist/luna/components/SubNav/SubNav.js +4 -5
  124. package/dist/luna/components/SubNav/SubNav.scss +274 -274
  125. package/dist/luna/components/SuperHero/SuperHero.scss +804 -804
  126. package/dist/luna/components/SuperHero/SuperHeroDocumentation.mdx +57 -57
  127. package/dist/luna/components/SupportCard/SupportCard.scss +134 -134
  128. package/dist/luna/components/Tabs/Tabs.js +1 -2
  129. package/dist/luna/components/Tabs/Tabs.scss +871 -871
  130. package/dist/luna/components/Tabs/TabsDocumentation.mdx +94 -94
  131. package/dist/luna/components/TimeBasedList/TimeBasedList.scss +394 -394
  132. package/dist/luna/components/TimeBasedList/TimeBasedListDocumentation.mdx +123 -123
  133. package/dist/luna/components/TrainerCard/TrainerCard.scss +51 -51
  134. package/dist/luna/components/TrialForm/TrialComponents/TrialSpecifics.scss +44 -44
  135. package/dist/luna/components/TrialForm/TrialComponents/TrialSummary.scss +57 -57
  136. package/dist/luna/components/TrialForm/TrialFormStart/TrialFormStart.scss +28 -28
  137. package/dist/luna/components/TrialForm/images/check.svg +3 -3
  138. package/dist/luna/components/TrialForm/images/form-border-bottom-dark.svg +4 -4
  139. package/dist/luna/components/TrialForm/images/form-border-bottom-light.svg +4 -4
  140. package/dist/luna/components/TrialForm/images/form-border-top-dark.svg +4 -4
  141. package/dist/luna/components/TrialForm/images/form-border-top-light.svg +4 -4
  142. package/dist/luna/components/UnboundedCard/UnboundedCard.scss +108 -108
  143. package/dist/luna/components/UnboundedCard/playIcon.svg +17 -17
  144. package/dist/luna/components/VariableContentCard/VariableContentCard.js +4 -4
  145. package/dist/luna/components/VariableContentCard/VariableContentCard.scss +253 -253
  146. package/dist/luna/components/Video/Video.scss +209 -209
  147. package/dist/luna/components/Video/VideoDocumentation.mdx +56 -56
  148. package/dist/luna/components/VidyardModal/VidyardModal.scss +34 -34
  149. package/dist/luna/components/WaffleMenu/WaffleMenu.scss +73 -73
  150. package/dist/luna/images/arrow-diagonal-black.svg +13 -13
  151. package/dist/luna/images/arrow-diagonal-blue.svg +13 -13
  152. package/dist/luna/images/arrow-diagonal-white.svg +13 -13
  153. package/dist/luna/images/bulletpoint.svg +3 -3
  154. package/dist/luna/images/callout-icon.svg +3 -3
  155. package/dist/luna/images/carat-down.svg +3 -3
  156. package/dist/luna/images/carat-up.svg +3 -3
  157. package/dist/luna/images/check-blue.svg +4 -4
  158. package/dist/luna/images/circle-arrow-right-black.svg +3 -3
  159. package/dist/luna/images/circle-arrow-right-white.svg +3 -3
  160. package/dist/luna/images/circle-arrow.svg +3 -3
  161. package/dist/luna/images/close-blue.svg +4 -4
  162. package/dist/luna/images/close-button.svg +42 -42
  163. package/dist/luna/images/close-dark-navy.svg +3 -3
  164. package/dist/luna/images/close-icon.svg +3 -3
  165. package/dist/luna/images/close.svg +3 -3
  166. package/dist/luna/images/collapse-close-blue.svg +5 -5
  167. package/dist/luna/images/collapse-close-gold.svg +5 -5
  168. package/dist/luna/images/collapse-open-blue.svg +4 -4
  169. package/dist/luna/images/collapse-open-gold.svg +4 -4
  170. package/dist/luna/images/cross-medium-blue.svg +4 -4
  171. package/dist/luna/images/cross-medium-white.svg +5 -5
  172. package/dist/luna/images/down-caret-dark-blue.svg +4 -4
  173. package/dist/luna/images/down-caret-dark-gray.svg +4 -4
  174. package/dist/luna/images/down-caret-light-gray.svg +4 -4
  175. package/dist/luna/images/downArrow.svg +36 -36
  176. package/dist/luna/images/ellipses.svg +6 -6
  177. package/dist/luna/images/external-arrow-blue.svg +11 -11
  178. package/dist/luna/images/external-arrow-white-theme.svg +12 -12
  179. package/dist/luna/images/external-arrow.svg +12 -12
  180. package/dist/luna/images/facebook.svg +13 -13
  181. package/dist/luna/images/form-border-top-light.svg +4 -4
  182. package/dist/luna/images/frame-intersection.svg +3 -3
  183. package/dist/luna/images/gallery-image-corner-border.svg +3 -3
  184. package/dist/luna/images/green-tick.svg +3 -3
  185. package/dist/luna/images/instagram.svg +19 -19
  186. package/dist/luna/images/internal-arrow-blue.svg +15 -15
  187. package/dist/luna/images/internal-arrow-white-theme.svg +15 -15
  188. package/dist/luna/images/internal-arrow.svg +15 -15
  189. package/dist/luna/images/linkedin.svg +15 -15
  190. package/dist/luna/images/logo-icon.svg +17 -17
  191. package/dist/luna/images/pdf-doc.svg +9 -9
  192. package/dist/luna/images/play.svg +17 -17
  193. package/dist/luna/images/right-caret-dark-blue.svg +3 -3
  194. package/dist/luna/images/right-caret-light-gray.svg +4 -4
  195. package/dist/luna/images/right-caret-light-yellow-stroke.svg +9 -9
  196. package/dist/luna/images/right-caret-light-yellow.svg +4 -4
  197. package/dist/luna/images/right-caret-medium-gray.svg +4 -4
  198. package/dist/luna/images/search.svg +9 -9
  199. package/dist/luna/images/skipicon.svg +154 -154
  200. package/dist/luna/images/text-doc.svg +9 -9
  201. package/dist/luna/images/text-lines.svg +22 -22
  202. package/dist/luna/images/tooltip-close-icon.svg +3 -3
  203. package/dist/luna/images/tooltip-icon.svg +3 -3
  204. package/dist/luna/images/twitter.svg +17 -17
  205. package/dist/luna/images/up-arrow.svg +36 -36
  206. package/dist/luna/images/up-right-arrow.svg +9 -9
  207. package/dist/luna/images/user-profile.svg +37 -37
  208. package/dist/luna/images/user.svg +4 -4
  209. package/dist/luna/images/waffle.svg +11 -11
  210. package/dist/luna/images/worldwide.svg +19 -19
  211. package/dist/luna/images/youtube.svg +14 -14
  212. package/package.json +91 -91
@@ -1,159 +1,159 @@
1
- #### Comparison Table
2
-
3
- ###### Props -
4
- - `data` **(required)** - object containing comparison table data, with following props
5
- - `showImages` - (boolean) for display of images, defaults to
6
- - `comparisonColumnGroups` - fields for comparison in the table, including any tooltip text. Product fields must match these in order to function properly.
7
- - `columnName` - (text) field for column name in table
8
- - `tooltipText` (optional) - (text) text to display in tooltip for this field
9
- - `productDetails` - (object) product data object for fields in the table
10
- - `productName` - (text) name of product for comparison
11
- - `image` (optional) - (object) product image for display
12
- - `url` - (text) product image URL
13
- - `subheading` - (text) product subheading
14
- - `productLink` - (text) link to product page
15
- - `productAttributes` - product attributes for comparison in table - these must match the comparison columns in the `comparisonColumnGroups` data.
16
- - `name` - (text) name of the attribute
17
- - `value` - (text) value of the attribute
18
-
19
- ###### Example -
20
-
21
- ```
22
- const content = {
23
- comparisonColumnGroups: [
24
- {
25
- categoryName: "ISO",
26
- comparisonColumns: [
27
- {
28
- columnName: "Universal Terminal",
29
- tooltipText: "Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet.",
30
- },
31
- {
32
- columnName: "Task Controller",
33
- },
34
- {
35
- columnName: "ISO TC Section Control",
36
- },
37
- ]
38
- },
39
- {
40
- categoryName: "Field IQ",
41
- comparisonColumns: [
42
- {
43
- columnName: "Controlled Channels",
44
- },
45
- {
46
- columnName: "Field IQ Section Control",
47
- tooltipText: "Universal terminal is a lorem ipsum dolor sit amet.",
48
- },
49
- {
50
- columnName: "FIQ Controlled Product Drives",
51
- },
52
- ]
53
- },
54
- {
55
- categoryName: "Serial Rate/TUVR",
56
- comparisonColumns: [
57
- {
58
- columnName: "Population/Blockage Monitoring",
59
- },
60
- {
61
- columnName: "Controlled Channels",
62
- },
63
- ]
64
- }
65
- ],
66
- productDetails: [
67
- {
68
- productName: "Product Name",
69
- image: {
70
- url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
71
- },
72
- subheading: "Subheading Lorem Ipsum",
73
- productLink: {
74
- url: "/products/product-name"
75
- },
76
- productAttributes: [
77
- { value: true },
78
- { value: "Up to 96 Sections", columnWidth: "medium" },
79
- { value: "Attribute 3" },
80
- { value: "Columns can get wider if the content within them needs more room Lorem ipsum dolor sit amet.", columnWidth: "long" },
81
- { value: "Attribute 1" },
82
- { value: "" },
83
- { value: "Attribute 3" },
84
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet.", columnWidth: "long" },
85
- ]
86
- },
87
- {
88
- productName: "Product Name",
89
- productTag: "Best Performance",
90
- image: {
91
- url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
92
- },
93
- subheading: "Subheading Lorem Ipsum",
94
- productLink: {
95
- url: "/products/product-name"
96
- },
97
- bodyText: "Body text if necessary",
98
- productAttributes: [
99
- { value: false },
100
- { value: "Up to 96 Sections" },
101
- { value: "Attribute 3" },
102
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
103
- { value: "Attribute 1" },
104
- { value: "" },
105
- { value: "Attribute 3" },
106
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
107
- ]
108
- },
109
- {
110
- productName: "Product Name",
111
- image: {
112
- url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
113
- },
114
- subheading: "Subheading Lorem Ipsum",
115
- productLink: {
116
- url: "/products/product-name"
117
- },
118
- bodyText: "Body text if necessary",
119
- productAttributes: [
120
- { value: true },
121
- { value: "Up to 96 Sections" },
122
- { value: "Attribute 3" },
123
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
124
- { value: "Attribute 1" },
125
- { value: "Up to 96 Sections" },
126
- { value: "Attribute 3" },
127
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
128
- ]
129
- },
130
- {
131
- productName: "Product Name",
132
- image: {
133
- url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
134
- },
135
- subheading: "Subheading Lorem Ipsum",
136
- productLink: {
137
- url: "/products/product-name"
138
- },
139
- bodyText: "Body text if necessary",
140
- productAttributes: [
141
- { value: false },
142
- { value: "Up to 96 Sections" },
143
- { value: "Attribute 3" },
144
- { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
145
- { value: "Attribute 1" },
146
- { value: "" },
147
- { value: "Attribute 3" },
148
- { value: "" },
149
- ]
150
- },
151
- ],
152
- };
153
-
154
- export const Default = () => (
155
- <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
156
- <ComparisonTable data={content} />
157
- </div>
158
- );
159
- ```
1
+ #### Comparison Table
2
+
3
+ ###### Props -
4
+ - `data` **(required)** - object containing comparison table data, with following props
5
+ - `showImages` - (boolean) for display of images, defaults to
6
+ - `comparisonColumnGroups` - fields for comparison in the table, including any tooltip text. Product fields must match these in order to function properly.
7
+ - `columnName` - (text) field for column name in table
8
+ - `tooltipText` (optional) - (text) text to display in tooltip for this field
9
+ - `productDetails` - (object) product data object for fields in the table
10
+ - `productName` - (text) name of product for comparison
11
+ - `image` (optional) - (object) product image for display
12
+ - `url` - (text) product image URL
13
+ - `subheading` - (text) product subheading
14
+ - `productLink` - (text) link to product page
15
+ - `productAttributes` - product attributes for comparison in table - these must match the comparison columns in the `comparisonColumnGroups` data.
16
+ - `name` - (text) name of the attribute
17
+ - `value` - (text) value of the attribute
18
+
19
+ ###### Example -
20
+
21
+ ```
22
+ const content = {
23
+ comparisonColumnGroups: [
24
+ {
25
+ categoryName: "ISO",
26
+ comparisonColumns: [
27
+ {
28
+ columnName: "Universal Terminal",
29
+ tooltipText: "Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet.",
30
+ },
31
+ {
32
+ columnName: "Task Controller",
33
+ },
34
+ {
35
+ columnName: "ISO TC Section Control",
36
+ },
37
+ ]
38
+ },
39
+ {
40
+ categoryName: "Field IQ",
41
+ comparisonColumns: [
42
+ {
43
+ columnName: "Controlled Channels",
44
+ },
45
+ {
46
+ columnName: "Field IQ Section Control",
47
+ tooltipText: "Universal terminal is a lorem ipsum dolor sit amet.",
48
+ },
49
+ {
50
+ columnName: "FIQ Controlled Product Drives",
51
+ },
52
+ ]
53
+ },
54
+ {
55
+ categoryName: "Serial Rate/TUVR",
56
+ comparisonColumns: [
57
+ {
58
+ columnName: "Population/Blockage Monitoring",
59
+ },
60
+ {
61
+ columnName: "Controlled Channels",
62
+ },
63
+ ]
64
+ }
65
+ ],
66
+ productDetails: [
67
+ {
68
+ productName: "Product Name",
69
+ image: {
70
+ url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
71
+ },
72
+ subheading: "Subheading Lorem Ipsum",
73
+ productLink: {
74
+ url: "/products/product-name"
75
+ },
76
+ productAttributes: [
77
+ { value: true },
78
+ { value: "Up to 96 Sections", columnWidth: "medium" },
79
+ { value: "Attribute 3" },
80
+ { value: "Columns can get wider if the content within them needs more room Lorem ipsum dolor sit amet.", columnWidth: "long" },
81
+ { value: "Attribute 1" },
82
+ { value: "" },
83
+ { value: "Attribute 3" },
84
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet.", columnWidth: "long" },
85
+ ]
86
+ },
87
+ {
88
+ productName: "Product Name",
89
+ productTag: "Best Performance",
90
+ image: {
91
+ url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
92
+ },
93
+ subheading: "Subheading Lorem Ipsum",
94
+ productLink: {
95
+ url: "/products/product-name"
96
+ },
97
+ bodyText: "Body text if necessary",
98
+ productAttributes: [
99
+ { value: false },
100
+ { value: "Up to 96 Sections" },
101
+ { value: "Attribute 3" },
102
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
103
+ { value: "Attribute 1" },
104
+ { value: "" },
105
+ { value: "Attribute 3" },
106
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
107
+ ]
108
+ },
109
+ {
110
+ productName: "Product Name",
111
+ image: {
112
+ url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
113
+ },
114
+ subheading: "Subheading Lorem Ipsum",
115
+ productLink: {
116
+ url: "/products/product-name"
117
+ },
118
+ bodyText: "Body text if necessary",
119
+ productAttributes: [
120
+ { value: true },
121
+ { value: "Up to 96 Sections" },
122
+ { value: "Attribute 3" },
123
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
124
+ { value: "Attribute 1" },
125
+ { value: "Up to 96 Sections" },
126
+ { value: "Attribute 3" },
127
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
128
+ ]
129
+ },
130
+ {
131
+ productName: "Product Name",
132
+ image: {
133
+ url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
134
+ },
135
+ subheading: "Subheading Lorem Ipsum",
136
+ productLink: {
137
+ url: "/products/product-name"
138
+ },
139
+ bodyText: "Body text if necessary",
140
+ productAttributes: [
141
+ { value: false },
142
+ { value: "Up to 96 Sections" },
143
+ { value: "Attribute 3" },
144
+ { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
145
+ { value: "Attribute 1" },
146
+ { value: "" },
147
+ { value: "Attribute 3" },
148
+ { value: "" },
149
+ ]
150
+ },
151
+ ],
152
+ };
153
+
154
+ export const Default = () => (
155
+ <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
156
+ <ComparisonTable data={content} />
157
+ </div>
158
+ );
159
+ ```
@@ -1,45 +1,45 @@
1
- #### CTA with Text and Header
2
-
3
- ###### Props -
4
-
5
- - `variant` - string that determines the CTA appearance (either light or dark)
6
- - `alignment` - string that sets the CTA text alignment (either left or center)
7
- - `eyebrow` - string that sets the eyebrow (small text above the headline)
8
- - `headline` - string that sets the headline
9
- - `subhead` - string that sets the subhead (secondary text below the headline)
10
- - `content` - HTML DOM string containing the main CTA content text (example: "<p>This is the CTA content.</p>")
11
- - `buttons` - object array containing information for the buttons displayed below the CTA content
12
- - `text` - string that sets the button text
13
- - `url` - string that sets the button url
14
- - `textLinks` - boolean that determines if the links will be displayed as text instead of buttons
15
- - `paddingClass` - string containing the container padding class name
16
-
17
- ###### Example -
18
-
19
- ```
20
- const content = "<p>Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat.</p>\n<ul>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n</ul>"
21
-
22
- const buttons = [
23
- {
24
- "text": "Button 1",
25
- "url": "/"
26
- },
27
- {
28
- "text": "Button 2",
29
- "url": "/"
30
- }
31
- ]
32
-
33
- return (
34
- <CTA
35
- variant="dark"
36
- alignment="center"
37
- eyebrow="Eyebrow option"
38
- headline="Header title"
39
- subhead="Subhead can go here."
40
- content={content}
41
- buttons={buttons}
42
- textLinks={true}
43
- />
44
- );
45
- ```
1
+ #### CTA with Text and Header
2
+
3
+ ###### Props -
4
+
5
+ - `variant` - string that determines the CTA appearance (either light or dark)
6
+ - `alignment` - string that sets the CTA text alignment (either left or center)
7
+ - `eyebrow` - string that sets the eyebrow (small text above the headline)
8
+ - `headline` - string that sets the headline
9
+ - `subhead` - string that sets the subhead (secondary text below the headline)
10
+ - `content` - HTML DOM string containing the main CTA content text (example: "<p>This is the CTA content.</p>")
11
+ - `buttons` - object array containing information for the buttons displayed below the CTA content
12
+ - `text` - string that sets the button text
13
+ - `url` - string that sets the button url
14
+ - `textLinks` - boolean that determines if the links will be displayed as text instead of buttons
15
+ - `paddingClass` - string containing the container padding class name
16
+
17
+ ###### Example -
18
+
19
+ ```
20
+ const content = "<p>Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat.</p>\n<ul>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n</ul>"
21
+
22
+ const buttons = [
23
+ {
24
+ "text": "Button 1",
25
+ "url": "/"
26
+ },
27
+ {
28
+ "text": "Button 2",
29
+ "url": "/"
30
+ }
31
+ ]
32
+
33
+ return (
34
+ <CTA
35
+ variant="dark"
36
+ alignment="center"
37
+ eyebrow="Eyebrow option"
38
+ headline="Header title"
39
+ subhead="Subhead can go here."
40
+ content={content}
41
+ buttons={buttons}
42
+ textLinks={true}
43
+ />
44
+ );
45
+ ```