refactor(DocsCard): iconset shows icons side by side with a plus in between

Author: brandyscarney

src/components/global/DocsCard/index.tsx

@@ -34,14 +34,16 @@ function DocsCard(props: Props): JSX.Element {
         )}
         {props.ionicon && <ion-icon name={props.ionicon} className="Card-ionicon"></ion-icon>}
         {props.iconset && (
-          <div className="Card-iconset__container">
-            {props.iconset.split(',').map((icon, index) => (
-              <img
-                src={useBaseUrl(icon)}
-                className={`Card-icon ${index === props.activeIndex ? 'Card-icon-active' : ''}`}
-                data-index={index}
-                key={index}
-              />
+          <div className="Card-icon-row">
+            {props.iconset.split(',').map((icon, index, array) => (
+              <React.Fragment key={index}>
+                <img src={useBaseUrl(icon)} className="Card-icon Card-icon-default" />
+                {index < array.length - 1 && (
+                  <div className="Card-plus-icon">
+                    <span>+</span>
+                  </div>
+                )}
+              </React.Fragment>
             ))}
           </div>
         )}

src/components/global/DocsCard/styles.module.scss

@@ -116,20 +116,19 @@ docs-card[disabled]::after {
 
   .Card-icon-row {
     position: relative;
+    display: flex;
+    gap: 8px;
   }
 
-  .Card-iconset__container {
-    position: relative;
-  }
-
-  .Card-iconset__container .Card-icon {
-    position: absolute;
-    opacity: 0;
-    transition: 0.8s opacity;
-  }
-
-  .Card-iconset__container .Card-icon--active {
-    opacity: 1;
+  .Card-plus-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 48px;
+    color: var(--docs-card-border-c);
+    font-size: 22px;
+    font-weight: 600;
   }
 
   .Card-ionicon {

src/components/global/DocsCards/cards.css

@@ -2,7 +2,11 @@ docs-cards {
   display: grid;
   font-size: 12px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-gap: 1.35rem;
+  gap: 1.35rem;
+}
+
+docs-cards:has(docs-card:only-child) {
+  grid-template-columns: 1fr 1fr;
 }
 
 docs-cards > docs-card {