luna-one 3.1.454 → 3.1.455

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 (4) hide show
  1. package/dist/luna/components/ComparisonTable/ComparisonTable.js +33 -25
  2. package/dist/luna/components/ComparisonTable/ComparisonTable.scss +1 -24
  3. package/dist/luna/components/ComparisonTable/ComparisonTableMethods.js +21 -7
  4. package/package.json +1 -1
package/dist/luna/components/ComparisonTable/ComparisonTable.js CHANGED
@@ -17,11 +17,13 @@ require("./ComparisonTable.scss");
17
17
 
18
18
  var _ComparisonTableMethods = require("./ComparisonTableMethods");
19
19
 
20
+ var _CtaWithHeader = _interopRequireDefault(require("../CtaWithHeader/CtaWithHeader"));
21
+
20
22
  var ComparisonTable = function ComparisonTable(_ref) {
21
23
  var _comparisonColumnGrou;
22
24
 
23
25
  var data = _ref.data;
24
- var title = data.title,
26
+ var headline = data.headline,
25
27
  subHeading = data.subHeading,
26
28
  eyebrow = data.eyebrow,
27
29
  description = data.description,
@@ -69,6 +71,35 @@ var ComparisonTable = function ComparisonTable(_ref) {
69
71
  (0, _react.useEffect)(function () {
70
72
  updateTableScroll();
71
73
  });
74
+
75
+ var renderIntro = function renderIntro() {
76
+ if (eyebrow || headline || subHeading || description) {
77
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("caption", {
78
+ className: "ter-comparison-table__caption"
79
+ }, /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
80
+ eyebrow: eyebrow && eyebrow,
81
+ headline: headline && headline,
82
+ subhead: subHeading && subHeading,
83
+ content: description && description
84
+ })), /*#__PURE__*/_react["default"].createElement("thead", {
85
+ className: "ter-comparison-table__divider-wrapper"
86
+ }, (productDetails === null || productDetails === void 0 ? void 0 : productDetails.length) && /*#__PURE__*/_react["default"].createElement("tr", {
87
+ className: "ter-comparison-table__divider-wrapper ter-comparison-table__skip"
88
+ }, /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("a", {
89
+ href: "#skip-link",
90
+ tabIndex: "0"
91
+ }, "Skip comparison of ", productDetails === null || productDetails === void 0 ? void 0 : productDetails.length, " items"))), /*#__PURE__*/_react["default"].createElement("tr", {
92
+ className: "ter-comparison-table__divider-wrapper"
93
+ }, /*#__PURE__*/_react["default"].createElement("td", {
94
+ className: "ter-comparison-table__divider-wrapper"
95
+ }, /*#__PURE__*/_react["default"].createElement("span", {
96
+ className: "ter-comparison-table__divider"
97
+ })))));
98
+ }
99
+
100
+ return;
101
+ };
102
+
72
103
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("table", {
73
104
  className: "ter-comparison-table",
74
105
  cellSpacing: "0",
@@ -78,30 +109,7 @@ var ComparisonTable = function ComparisonTable(_ref) {
78
109
  style: {
79
110
  height: shadowHeight
80
111
  }
81
- }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("caption", {
82
- className: "ter-comparison-table__caption"
83
- }, eyebrow && /*#__PURE__*/_react["default"].createElement("span", {
84
- className: "ter-comparison-table__eyebrow"
85
- }, eyebrow), title && /*#__PURE__*/_react["default"].createElement("h2", {
86
- className: "ter-comparison-table__title"
87
- }, title), subHeading && /*#__PURE__*/_react["default"].createElement("h3", {
88
- className: "ter-comparison-table__subhead"
89
- }, subHeading), description && /*#__PURE__*/_react["default"].createElement("p", {
90
- className: "ter-comparison-table__description"
91
- }, description)), /*#__PURE__*/_react["default"].createElement("thead", {
92
- className: "ter-comparison-table__divider-wrapper"
93
- }, (productDetails === null || productDetails === void 0 ? void 0 : productDetails.length) && /*#__PURE__*/_react["default"].createElement("tr", {
94
- className: "ter-comparison-table__divider-wrapper ter-comparison-table__skip"
95
- }, /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("a", {
96
- href: "#skip-link",
97
- tabIndex: "0"
98
- }, "Skip comparison of ", productDetails === null || productDetails === void 0 ? void 0 : productDetails.length, " items"))), /*#__PURE__*/_react["default"].createElement("tr", {
99
- className: "ter-comparison-table__divider-wrapper"
100
- }, /*#__PURE__*/_react["default"].createElement("td", {
101
- className: "ter-comparison-table__divider-wrapper"
102
- }, /*#__PURE__*/_react["default"].createElement("span", {
103
- className: "ter-comparison-table__divider"
104
- }))))), /*#__PURE__*/_react["default"].createElement("colgroup", {
112
+ }), renderIntro(), /*#__PURE__*/_react["default"].createElement("colgroup", {
105
113
  key: "column-" + 0,
106
114
  colSpan: "0"
107
115
  }, /*#__PURE__*/_react["default"].createElement("col", {
package/dist/luna/components/ComparisonTable/ComparisonTable.scss CHANGED
@@ -30,14 +30,6 @@
30
30
  width: 100%;
31
31
  }
32
32
  }
33
- &__eyebrow {
34
- font-size: $eyebrow-font-size;
35
- text-transform: uppercase;
36
- font-weight: 600;
37
- letter-spacing: 0.07em;
38
- display: inline-block;
39
- margin-bottom: 16px;
40
- }
41
33
  &__inner-shadow {
42
34
  box-shadow: 0 0 10px rgba(0,0,0,0.55);
43
35
  clip-path: inset(0px 0px 0px -10px);
@@ -56,21 +48,6 @@
56
48
  bottom: 17px;
57
49
  }
58
50
  }
59
- &__title {
60
- font-size: $heading-3-size;
61
- line-height: 1.2;
62
- margin-bottom: 10px;
63
- }
64
- &__subhead {
65
- font-size: $subheading-size;
66
- line-height: 1.35;
67
- font-weight: 400;
68
- display: inline-block;
69
- margin-bottom: 16px;
70
- }
71
- &__description {
72
- font-size: $body-font-size;
73
- }
74
51
  &__skip {
75
52
  a {
76
53
  color: transparent;
@@ -272,7 +249,7 @@
272
249
  left: 0;
273
250
  right: 0;
274
251
  }
275
- &::after {
252
+ &--link::after {
276
253
  position: absolute;
277
254
  content: "";
278
255
  bottom: 0px;
package/dist/luna/components/ComparisonTable/ComparisonTableMethods.js CHANGED
@@ -107,9 +107,26 @@ var ComparisonToolTip = function ComparisonToolTip(_ref) {
107
107
  })))));
108
108
  };
109
109
 
110
+ var renderProductNameLink = function renderProductNameLink(product) {
111
+ var _product$productLink;
112
+
113
+ if (product !== null && product !== void 0 && (_product$productLink = product.productLink) !== null && _product$productLink !== void 0 && _product$productLink.url) {
114
+ var _product$productLink2, _product$productLink3;
115
+
116
+ return /*#__PURE__*/_react["default"].createElement("a", {
117
+ href: (product === null || product === void 0 ? void 0 : (_product$productLink2 = product.productLink) === null || _product$productLink2 === void 0 ? void 0 : _product$productLink2.url) && (product === null || product === void 0 ? void 0 : (_product$productLink3 = product.productLink) === null || _product$productLink3 === void 0 ? void 0 : _product$productLink3.url),
118
+ className: "ter-comparison-table__product-title ter-comparison-table__product-title--link"
119
+ }, product === null || product === void 0 ? void 0 : product.productName);
120
+ } else {
121
+ return /*#__PURE__*/_react["default"].createElement("span", {
122
+ className: "ter-comparison-table__product-title"
123
+ }, product === null || product === void 0 ? void 0 : product.productName);
124
+ }
125
+ };
126
+
110
127
  var renderProductDetailsColumn = function renderProductDetailsColumn(productDetails, showImages, comparisonColumnGroups) {
111
128
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, productDetails && (productDetails === null || productDetails === void 0 ? void 0 : productDetails.map(function (product, index) {
112
- var _product$image, _product$image2, _product$productLink, _product$productLink2;
129
+ var _product$image, _product$image2;
113
130
 
114
131
  return /*#__PURE__*/_react["default"].createElement("tr", {
115
132
  key: "product-" + index,
@@ -127,10 +144,7 @@ var renderProductDetailsColumn = function renderProductDetailsColumn(productDeta
127
144
  }, product === null || product === void 0 ? void 0 : product.productTag), showImages === true && (product === null || product === void 0 ? void 0 : (_product$image = product.image) === null || _product$image === void 0 ? void 0 : _product$image.url) && /*#__PURE__*/_react["default"].createElement("img", {
128
145
  src: (product === null || product === void 0 ? void 0 : (_product$image2 = product.image) === null || _product$image2 === void 0 ? void 0 : _product$image2.url) + "?w=120",
129
146
  alt: product !== null && product !== void 0 && product.productName ? (product === null || product === void 0 ? void 0 : product.productName) + " image" : ""
130
- }), /*#__PURE__*/_react["default"].createElement("a", {
131
- href: (product === null || product === void 0 ? void 0 : (_product$productLink = product.productLink) === null || _product$productLink === void 0 ? void 0 : _product$productLink.url) && (product === null || product === void 0 ? void 0 : (_product$productLink2 = product.productLink) === null || _product$productLink2 === void 0 ? void 0 : _product$productLink2.url),
132
- className: "ter-comparison-table__product-title"
133
- }, product === null || product === void 0 ? void 0 : product.productName), (product === null || product === void 0 ? void 0 : product.subheading) && /*#__PURE__*/_react["default"].createElement("span", {
147
+ }), product && renderProductNameLink(product), (product === null || product === void 0 ? void 0 : product.subheading) && /*#__PURE__*/_react["default"].createElement("span", {
134
148
  className: "ter-comparison-table__product-subheading"
135
149
  }, product === null || product === void 0 ? void 0 : product.subheading), (product === null || product === void 0 ? void 0 : product.bodyText) && /*#__PURE__*/_react["default"].createElement("span", {
136
150
  className: "ter-comparison-table__product-text"
@@ -141,7 +155,7 @@ var renderProductDetailsColumn = function renderProductDetailsColumn(productDeta
141
155
  exports.renderProductDetailsColumn = renderProductDetailsColumn;
142
156
 
143
157
  var displayHiddenColumn = function displayHiddenColumn(product, showImages) {
144
- var _product$image3, _product$image4, _product$productLink3, _product$productLink4;
158
+ var _product$image3, _product$image4, _product$productLink4, _product$productLink5;
145
159
 
146
160
  // this function returns a copy of the data to the table, purely for sizing the <th> element wrapping it.
147
161
  // Without this, the height of the TR isn't calculated properly - the displayed <th> content is position: sticky.
@@ -153,7 +167,7 @@ var displayHiddenColumn = function displayHiddenColumn(product, showImages) {
153
167
  src: (product === null || product === void 0 ? void 0 : (_product$image4 = product.image) === null || _product$image4 === void 0 ? void 0 : _product$image4.url) + "?w=120",
154
168
  alt: product !== null && product !== void 0 && product.productName ? (product === null || product === void 0 ? void 0 : product.productName) + " image" : ""
155
169
  }), /*#__PURE__*/_react["default"].createElement("a", {
156
- href: (product === null || product === void 0 ? void 0 : (_product$productLink3 = product.productLink) === null || _product$productLink3 === void 0 ? void 0 : _product$productLink3.url) && (product === null || product === void 0 ? void 0 : (_product$productLink4 = product.productLink) === null || _product$productLink4 === void 0 ? void 0 : _product$productLink4.url),
170
+ href: (product === null || product === void 0 ? void 0 : (_product$productLink4 = product.productLink) === null || _product$productLink4 === void 0 ? void 0 : _product$productLink4.url) && (product === null || product === void 0 ? void 0 : (_product$productLink5 = product.productLink) === null || _product$productLink5 === void 0 ? void 0 : _product$productLink5.url),
157
171
  className: "ter-comparison-table__product-title"
158
172
  }, product === null || product === void 0 ? void 0 : product.productName), (product === null || product === void 0 ? void 0 : product.subheading) && /*#__PURE__*/_react["default"].createElement("span", {
159
173
  className: "ter-comparison-table__product-subheading"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luna-one",
3
- "version": "3.1.454",
3
+ "version": "3.1.455",
4
4
  "peerDependencies": {
5
5
  "react": "^17.0.2",
6
6
  "react-dom": "^17.0.2",