[WIP] Added max-lines-per-function linting rule to project

base-eslintrc.json

@@ -110,6 +110,15 @@
         " *",
         " "
       ]
-    ]
-  }
+    ],
+    "max-lines-per-function": ["error"]
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "max-lines-per-function": ["warn", 120]
+      }
+    }
+  ]
 }

src/components/src/ProductAttributesContainer/productAttributesContainer.less

@@ -0,0 +1,37 @@
+@import './../../../theme/common.less';
+
+.itemdetail-tabs {
+  &-wrap {
+    margin-top: 30px;
+  }
+  .nav-item {
+    margin-bottom: 0;
+  }
+  .nav-item {
+    .nav-link {
+      padding: 5px 15px;
+      font-size: 14px;
+      color: @secondComplimentTextColor;
+      &:hover {
+        border-color: transparent;
+        color: @mainTextColor;
+      }
+      &.active {
+        color: @mainTextColor;
+        font-weight: bold;
+        border-color: transparent;
+        border-bottom-color: @mainTextColor;
+      }
+      &.disabled {
+        cursor: default;
+        color: @secondComplimentTextColor;
+      }
+    }
+  }
+}
+
+@media (max-width: @mobileWidth) {
+  .itemdetail-tabs .nav-item .nav-link {
+    padding: 5px;
+  }
+}

src/components/src/ProductAttributesContainer/productAttributesContainer.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright © 2019 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+import React, { useState } from 'react';
+import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+
+import './productAttributesContainer.less';
+
+let Config: IEpConfig | any = {};
+
+function ProductAttributesContainer(props: { detailsProductData: any }) {
+  Config = getConfig().config;
+  const { intl } = Config;
+  const { detailsProductData } = props;
+  const [productDetailsState, setProductDetailsState] = useState(detailsProductData);
+
+  const handleDetailAttribute = (index) => {
+    const updatedProductDetailsState = productDetailsState
+      .map((detail, i) => (
+        i === index
+          ? { ...detail, isOpen: !detail.isOpen }
+          : detail
+      ));
+    setProductDetailsState(updatedProductDetailsState);
+  };
+
+  return (
+    <div className="itemdetail-tabs-wrap">
+      {(Config.PowerReviews.enable) ? (
+        <ul className="nav nav-tabs itemdetail-tabs" role="tablist">
+          <li className="nav-item">
+            <a
+              className="nav-link active"
+              id="summary-tab"
+              data-toggle="tab"
+              href="#summary"
+              role="tab"
+              aria-selected="true"
+            >
+              {intl.get('summary')}
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-selected="false">
+              {intl.get('reviews')}
+            </a>
+          </li>
+          <li className="nav-item">
+            <a
+              className="nav-link"
+              id="questions-tab"
+              data-toggle="tab"
+              href="#questions"
+              role="tab"
+              aria-selected="false"
+            >
+              {intl.get('questions')}
+            </a>
+          </li>
+        </ul>
+      ) : ('')
+      }
+      <div className="tab-content">
+        <div className="tab-pane fade show active" id="summary" role="tabpanel" aria-labelledby="summary-tab">
+          <ul className="item-detail-attributes" data-region="itemDetailAttributeRegion">
+            { productDetailsState
+              ? productDetailsState.map((attribute, index) => (
+                <li key={attribute.name} className="detail-list-item">
+                  <div className="item-detail-attribute-label-col">
+                    {attribute['display-name']}
+                    <span className={`item-arrow-btn ${attribute.isOpen ? 'up' : ''}`} role="presentation" onClick={() => handleDetailAttribute(index)} />
+                  </div>
+                  <div className={`item-detail-attribute-value-col ${attribute.isOpen ? '' : 'hide'}`}>
+                    {attribute['display-value']}
+                  </div>
+                </li>
+              ))
+              : ''
+            }
+          </ul>
+        </div>
+        <div className="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
+          <div id="pr-reviewdisplay" />
+        </div>
+        <div className="tab-pane fade" id="questions" role="tabpanel" aria-labelledby="questions-tab">
+          <div id="pr-questiondisplay" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProductAttributesContainer;

src/components/src/ProductDisplayItem/productdisplayitem.main.less

@@ -26,16 +26,6 @@
   padding-top: 30px;
   text-align: center;
 
-  .social-network-sharing {
-    margin-top: 15px;
-    .st-btn {
-      min-width: 50px !important;
-      >span {
-        display: none !important;
-      }
-    }
-  }
-
   .itemdetail-assets {
     margin-top: 30px;
     width: 50%;
@@ -132,8 +122,7 @@
       margin-top: 10px;
     }
 
-    .itemdetail-title,
-    .itemdetail-price-container {
+    .itemdetail-title {
       font-weight: 600;
       line-height: 1.25;
       display: flex;
@@ -157,25 +146,7 @@
         }
       }
 
-      .itemdetail-purchase-price-value{
-        font-weight: bold;
-        display: inline-block;
-        vertical-align: middle;
-        margin-bottom: 0;
-        color: @firstComplimentTextColor;
-      }
-
-      .price-sale {
-        color: @firstComplimentTextColor;
-      }
 
-      .itemdetail-list-price-value{
-        color: gray;
-        text-decoration: line-through;
-        vertical-align: middle;
-        margin-left: 10px;
-        font-weight: normal;
-      }
     }
 
     .itemdetail-addtocart {
@@ -323,35 +294,6 @@
   }
 }
 
-.itemdetail-tabs {
-  &-wrap {
-    margin-top: 30px;
-  }
-  .nav-item {
-    margin-bottom: 0;
-  }
-  .nav-item {
-    .nav-link {
-      padding: 5px 15px;
-      font-size: 14px;
-      color: @secondComplimentTextColor;
-      &:hover {
-        border-color: transparent;
-        color: @mainTextColor;
-      }
-      &.active {
-        color: @mainTextColor;
-        font-weight: bold;
-        border-color: transparent;
-        border-bottom-color: @mainTextColor;
-      }
-      &.disabled {
-        cursor: default;
-        color: @secondComplimentTextColor;
-      }
-    }
-  }
-}
 
 .anchor-ar-container {
   position: absolute;
@@ -656,9 +598,3 @@
 .item-detail-attributes {
   border-top: 1px solid @mainBorderColor;
 }
-
-@media (max-width: @mobileWidth) {
-  .itemdetail-tabs .nav-item .nav-link {
-    padding: 5px;
-  }
-}