Feature #54664. Expandable panel component scss refactoring.

(cherry picked from commit 9f9d10eb5b9f93c6c98e80b8a4bd2b36182264f2) Change-Id: Ic2c97418649163cf951be987e71f268da21b4790
exactpro · Apr 26, 2019 · e8bac1c · e8bac1c
1 parent 9fcbf60
commit e8bac1c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 29 deletions.
diff --git a/FrontEnd/Sailfish-JS-report/src/components/ExpandablePanel.tsx b/FrontEnd/Sailfish-JS-report/src/components/ExpandablePanel.tsx
@@ -15,7 +15,7 @@
  ******************************************************************************/
 
 import { h, Component } from "preact";
-import "../styles/panel.scss"
+import "../styles/expandablePanel.scss"
 import { createSelector } from '../helpers/styleCreators';
 
 interface PanelProps {
@@ -51,23 +51,23 @@ export default class ExpandablePanel extends Component<PanelProps, PanelState> {
 
     render({ header, body, children, expandedHeader }: PanelProps, { isExpanded }: PanelState) {
         const iconClass = createSelector(
-            "expandable-panel-header-icon", 
+            "expandable-panel__icon", 
             isExpanded ? "expanded" : "hidden"
         );
 
         return (
-            <div class="expandable-panel-root">
-                <div class="expandable-panel-header">
+            <div class="expandable-panel">
+                <div class="expandable-panel__header">
                     <div class={iconClass} 
                         onClick={e => this.expandPanel()}/>
-                    {(expandedHeader && isExpanded) || header || children[0]}
+                    { (expandedHeader && isExpanded) || header || children[0] }
                 </div>
-                {isExpanded ?
-                    <div className="expandable-panel-body">
-                            {body || children.slice(1)}
-                    </div>
-                    : null}
+                {
+                    isExpanded ? 
+                        body || children.slice(1)
+                        : null
+                }
             </div>
         )
     }
-}
+}
diff --git a/.../Sailfish-JS-report/src/styles/panel.scss → ...JS-report/src/styles/expandablePanel.scss b/.../Sailfish-JS-report/src/styles/panel.scss → ...JS-report/src/styles/expandablePanel.scss
@@ -14,22 +14,22 @@
  * limitations under the License.
  ******************************************************************************/
 
-.expandable-panel-root {
+.expandable-panel {
     display: block;
     box-sizing: border-box;
     width: 100%;
     height: auto;
     padding-left: 10px;
-}
 
-.expandable-panel-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    min-height: 40px;
+    &__header {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        min-height: 40px;
+    }
 
-    .expandable-panel-header-icon {
+    &__icon {
         height: 15px;
         width: 15px;
         cursor: pointer;
@@ -45,12 +45,3 @@
         }
     }
 }
-
-.expandable-panel-body {
-    display: block;
-}
-
-.expandable-panel-body-hidden {
-    @extend .expandable-panel-body;
-    display: none;
-}