refactor(view): apply BEM naming in Summary component

githru · Sep 10, 2024 · bde92f4 · bde92f4
1 parent 6aa3a91
commit bde92f4
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 142 deletions.
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
@@ -1,5 +1,9 @@
 @import "styles/app";
 
+.cluster-graph {
+  display: block;
+}
+
 .cluster-graph__container {
   cursor: pointer;
   min-width: 84px;

diff --git a/packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx b/packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx
@@ -24,6 +24,7 @@ const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
           <a
             href={linkIssues}
             key={`issues-${matchedStr}`}
+            className="summary__commit-link"
           >
             {matchedStr}
           </a>
@@ -40,18 +41,14 @@ const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
 
   return (
     <>
-      <div className="cluster-summary__contents">
-        <div className="commit-message__wrapper">
-          <div className="commit-message">{linkedStr}</div>
-        </div>
-        {content.count > 0 && <span className="more-commit-count">+ {content.count} more</span>}
+      <div className="summary__content">
+        <div className="summary__commit-message">{linkedStr}</div>
+        {content.count > 0 && <span className="summary__more-commit">+ {content.count} more</span>}
       </div>
-      <div className="collapsible-icon">
-        {selectedClusterId.includes(clusterId) ? (
-          <ArrowDropDownCircleRoundedIcon className="show" />
-        ) : (
-          <ArrowDropDownCircleRoundedIcon />
-        )}
+      <div className="summary__toggle">
+        <ArrowDropDownCircleRoundedIcon
+          className={selectedClusterId.includes(clusterId) ? "summary__toggle--visible" : ""}
+        />
       </div>
     </>
   );

diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
@@ -1,6 +1,6 @@
 @import "styles/app";
 
-.cluster-summary__container {
+.vertical-cluster-list__body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -9,127 +9,112 @@
   height: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
+}
 
-  .cluster-summary__cluster {
+.cluster-summary {
+  &__item {
     display: flex;
     align-items: center;
     column-gap: 10px;
+  }
 
-    .toggle-contents-button {
-      padding: 10px 15px;
-      border: none;
-      background-color: transparent;
-      cursor: pointer;
-      color: var(--color-text-white);
-      width: 100%;
-
-      &:hover {
-        border-radius: 40px;
-        background-color: lighten($gray-800, 5);
-      }
-    }
-    .cluster-summary__info-wrapper {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      &.selected {
-        border-radius: 25px;
-        background-color: lighten($gray-900, 5);
-      }
-    }
+  &__info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 
-    .toggle-contents-container {
-      display: flex;
-      align-items: center;
+    &--is-expanded {
+      border-radius: 25px;
+      background-color: lighten($gray-900, 5);
     }
+  }
+}
 
-    :hover .collapsible-icon {
+.summary {
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--color-text-white);
+  width: 100%;
+
+  &:hover {
+    border-radius: 40px;
+    background-color: lighten($gray-800, 5);
+
+    .summary__toggle {
       visibility: visible;
     }
+  }
 
-    .collapsible-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: 8px;
-      background-color: transparent;
-      border: none;
-      font-size: 24px;
-      color: var(--color-primary);
-      visibility: hidden;
-      cursor: pointer;
+  &__author {
+    display: flex;
+    justify-content: center;
+  }
 
-      & .show {
-        visibility: visible;
-        transform: rotate(180deg);
-      }
-    }
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: $font-size-body;
+    gap: 10px;
+  }
+
+  &__commit-message {
+    flex-grow: 1;
+    padding-left: 15px;
+    text-align: left;
+    cursor: pointer;
+    // "width: 0" makes the "commit-message" ellipsis reponsive
+    width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__commit-link {
+    text-decoration: none;
+    color: var(--color-light-gray);
 
-    .name-box {
-      display: flex;
-      justify-content: center;
+    &:visited {
+      color: var(--color-light-gray);
     }
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  &__more-commit {
+    text-align: right;
+    font-size: $font-size-caption;
+  }
 
-    .cluster-summary__contents {
-      flex-grow: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: $font-size-body;
-      gap: 10px;
-
-      .commit-message__wrapper {
-        flex-grow: 1;
-        padding-left: 15px;
-        text-align: left;
-        cursor: pointer;
-        // "width: 0" makes the "commit-message" ellipsis reponsive
-        width: 0;
-
-        .commit-message {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-
-          a {
-            text-decoration: none;
-            color: var(--color-light-gray);
-            &:visited {
-              color: var(--color-light-gray);
-            }
-            &:hover {
-              color: var(--color-primary);
-            }
-          }
-        }
-      }
-
-      .more-commit-count {
-        text-align: right;
-        font-size: $font-size-caption;
-      }
+  &__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    color: var(--color-primary);
+    visibility: hidden;
+    cursor: pointer;
+
+    &--visible {
+      visibility: visible;
+      transform: rotate(180deg);
     }
   }
 }
-.cluster-graph {
-  display: block;
-}
 
-.detail__container {
+.detail {
   overflow: auto;
   height: 220px;
   max-height: 280px;
   padding: 10px 30px;
 }
-
-.sort-button {
-  color: var(--color-primary);
-  cursor: pointer;
-  position: absolute;
-  right: 26%;
-  top: 34%;
-  &:hover {
-    color: white;
-  }
-}
diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.tsx b/packages/view/src/components/VerticalClusterList/Summary/Summary.tsx
@@ -59,48 +59,41 @@ const Summary = () => {
       <div
         key={key}
         style={style}
-        className={`cluster-summary__cluster ${isExpanded ? "expanded" : ""}`}
+        className={`cluster-summary__item${isExpanded ? " cluster-summary__item--is-expanded" : ""}`}
       >
-        <div className="cluster-summary__graph-wrapper">
+        <div className="cluster-summary__graph">
           <ClusterGraph
             data={[data[index]]}
             clusterSizes={[clusterSizes[index]]}
           />
-          <div
-            className={`cluster-summary__info-wrapper ${
-              selectedClusterId.includes(cluster.clusterId) ? "selected" : ""
-            }`}
-          />
         </div>
-        <div className="cluster-summary__info-wrapper">
+        <div className={`cluster-summary__info${isExpanded ? " cluster-summary__info--is-expanded" : ""}`}>
           <button
             type="button"
-            className="toggle-contents-button"
+            className="summary"
             onClick={onClickClusterSummary(cluster.clusterId)}
           >
-            <div className="toggle-contents-container">
-              <div className="name-box">
-                {authSrcMap &&
-                  cluster.summary.authorNames.map((authorArray: string[]) => {
-                    return authorArray.map((authorName: string) => (
-                      <Author
-                        key={authorName}
-                        name={authorName}
-                        src={authSrcMap[authorName]}
-                      />
-                    ));
-                  })}
-              </div>
-              <Content
-                content={cluster.summary.content}
-                clusterId={cluster.clusterId}
-                selectedClusterId={selectedClusterId}
-              />
+            <div className="summary__author">
+              {authSrcMap &&
+                cluster.summary.authorNames.map((authorArray: string[]) => {
+                  return authorArray.map((authorName: string) => (
+                    <Author
+                      key={authorName}
+                      name={authorName}
+                      src={authSrcMap[authorName]}
+                    />
+                  ));
+                })}
             </div>
+            <Content
+              content={cluster.summary.content}
+              clusterId={cluster.clusterId}
+              selectedClusterId={selectedClusterId}
+            />
           </button>
           {isExpanded && (
             <div
-              className="detail__container"
+              className="detail"
               ref={detailRef}
             >
               <Detail
@@ -116,7 +109,7 @@ const Summary = () => {
   };
 
   return (
-    <div className="cluster-summary__container">
+    <div className="vertical-cluster-list__body">
       <AutoSizer>
         {({ width, height }) => (
           <List
@@ -127,6 +120,7 @@ const Summary = () => {
             rowHeight={getRowHeight}
             rowRenderer={rowRenderer}
             overscanRowCount={15}
+            className="cluster-summary"
           />
         )}
       </AutoSizer>

diff --git a/packages/view/tests/home.spec.ts b/packages/view/tests/home.spec.ts
@@ -24,7 +24,7 @@ test.describe("home", () => {
     // waiting for changing
     await page.waitForTimeout(10000);
 
-    const detailContainer = await page.waitForSelector(".detail__container");
+    const detailContainer = await page.waitForSelector(".detail");
     expect(detailContainer).toBeTruthy();
   });
 });