Merge pull request #1193 from grafana/staging

feat: add extensions checkbox and link (#1190)

Author: javaducky

src/components/shared/checkbox-field/checkbox-field.module.scss

@@ -15,7 +15,8 @@
 
   &:before {
     content: '';
-    display: block;
+    display: inline-flex;
+    justify-content: center;
     width: 24px;
     height: 24px;
     border: 1px solid $color-additional-1;

src/components/shared/extension-card/extension-card.module.scss

@@ -1,20 +1,14 @@
 .wrapper {
   position: relative;
-  display: flex;
-  align-items: flex-start;
-  padding: 20px;
+  padding: 16px 19px;
   text-decoration: none;
   color: $color-primary;
   width: 100%;
+  flex-grow: 1;
   background: $color-tertiary;
+  cursor: pointer;
 
   &.withCheckbox {
-    cursor: pointer;
-
-    & .name {
-      padding-right: 25px;
-    }
-
     &.checked .name {
       color: $color-accent-primary;
     }
@@ -25,17 +19,21 @@
       color: $color-accent-primary;
     }
   }
+
+  @include xs-down {
+    padding: 12px;
+  }
 }
 
 .checkbox {
   position: absolute;
-  top: 20px;
-  right: 20px;
-}
+  top: 18px;
+  right: 16px;
 
-.checked {
-  outline: 1px solid #7d64ff;
-  box-shadow: 0px 1px 5px rgba(60, 60, 100, 0.05);
+  @include xs-down {
+    top: 12px;
+    right: 12px;
+  }
 }
 
 .imageWrapper {
@@ -81,16 +79,13 @@
 
 .tiers-wrapper {
   display: flex;
-  flex-wrap: wrap;
-  width: 100%;
   align-items: center;
   list-style-type: none;
   padding: 0;
-  margin-top: 0;
-  margin-bottom: 0px;
+  margin: 0;
 
   li + li {
-    margin-left: 8px;
+    margin-left: 6px;
 
     &::before {
       content: '';
@@ -115,23 +110,6 @@
   margin-right: 8px;
 }
 
-.logo-wrapper {
-  margin-left: auto !important;
-  max-height: 28px;
-  //position: absolute;
-  //top: 20px;
-  //right: 20px;
-
-  &:before {
-    content: none;
-  }
-}
-
-.logo {
-  position: relative;
-  max-height: inherit;
-}
-
 .tier {
   position: relative;
   display: flex;
@@ -172,15 +150,23 @@
 }
 
 .name-wrapper {
-  margin-top: 10px;
+  padding-right: 30px;
   text-align: left;
 }
 
 .name {
+  position: relative;
   font-size: $font-size-lg;
   line-height: $line-height-lg;
   font-weight: 700;
+  text-decoration: none;
   transition: color 0.3s;
+  color: $color-primary;
+  cursor: pointer;
+
+  &:hover {
+    color: #7d64ff;
+  }
 }
 
 .type {
@@ -202,7 +188,7 @@
 }
 
 .description {
-  margin-bottom: 15px;
+  margin-bottom: 21px;
   font-size: $font-size-sm;
   line-height: $line-height-sm;
   margin-top: 10px;
@@ -212,23 +198,32 @@
 .external {
   margin-top: auto;
   display: flex;
-  gap: 16px;
+  align-items: center;
+  column-gap: 10px;
+  width: 100%;
   font-weight: 400;
   font-size: 13px;
   line-height: 20px;
-  color: #9691af;
+  color: #8b85ad;
+  letter-spacing: -0.05em;
+  pointer-events: none;
+
+  @media (min-width: 1200px) and (max-width: 1320px) {
+    column-gap: 5px;
+  }
 }
 
 .stars,
 .cloud {
   display: flex;
   align-items: center;
+  white-space: nowrap;
 
   &:before {
     content: '';
     display: inline-block;
     vertical-align: middle;
-    margin-right: 8px;
+    margin-right: 4px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -239,7 +234,6 @@
   &:before {
     width: 14px;
     height: 14px;
-    margin: 0 4px;
     background-image: url(./svg/star.inline.svg);
   }
 }

src/components/shared/extension-card/extension-card.view.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { CheckboxField } from 'components/shared/checkbox-field';
 import {
   ItemCard,
   styles as itemCardStyles,
@@ -7,15 +8,32 @@ import React from 'react';
 
 import styles from './extension-card.module.scss';
 
+const parseString = (str) => {
+  let string = str.replace(/-/gi, '<wbr />-');
+
+  // Find the last occurrence of '<wbr />'
+  const lastIndex = string.lastIndexOf('<wbr />');
+
+  if (lastIndex !== -1) {
+    // Wrap the part of the string after the last '<wbr />' with 'span' tags
+    const prefix = string.slice(0, lastIndex);
+    const suffix = string.slice(lastIndex + 8); // Length of '<wbr />'
+
+    // eslint-disable-next-line max-len
+    string = `${prefix}<wbr />-<span class="no-wrap">${suffix}<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" style="margin-left: 8px"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M4.429 1H2.714C1 1 1 1 1 2.714v9.352C1 13 1 13 2.714 13h8.572C13 13 13 13 13 11.286V9.57M7.857 1H13m0 0v5.143M13 1 6.143 7.857"/></svg></span>`;
+  }
+
+  return string;
+};
+
 export const ExtensionCard = ({
   extension,
   searchTerm = '',
   hasCheckbox = false,
   isChecked = false,
   onCheckboxClick = () => {},
 }) => {
-  const { name, description, tiers, stars, cloudEnabled, url, logo } =
-    extension;
+  const { name, description, tiers, stars, cloudEnabled, url } = extension;
   const extensionName = searchTerm
     ? name.replace(
         new RegExp(searchTerm, 'gi'),
@@ -48,9 +66,9 @@ export const ExtensionCard = ({
         </ItemCard>
       );
     }
+
     return (
-      // eslint-disable-next-line react/jsx-indent
-      <ItemCard as="a" href={url}>
+      <ItemCard as="div">
         <div className={className}>{children}</div>
       </ItemCard>
     );
@@ -63,44 +81,47 @@ export const ExtensionCard = ({
       }`}
     >
       <div className={styles.content}>
-        <ul className={styles.tiersWrapper}>
-          {tiers.map((tier, index) => (
-            <li
-              className={classNames(
-                styles.tier,
-                tier === 'Official' && styles.tierOfficial,
-                tier === 'Verified' && styles.tierVerified,
-                tier === 'Community' && styles.tierCommunity,
-              )}
-              key={index}
-            >
-              <span>{tier}</span>
-            </li>
-          ))}
-          {logo && (
-            <li className={styles.logoWrapper}>
-              <img
-                className={styles.logo}
-                src={logo}
-                width="auto"
-                height="24"
-                alt={name}
-                loading="lazy"
-              />
-            </li>
-          )}
-        </ul>
+        {hasCheckbox && (
+          <div className={styles.checkbox}>
+            <CheckboxField
+              id={name}
+              checked={isChecked}
+              onChange={onCheckboxClick}
+              accessible={false}
+            />
+          </div>
+        )}
         <div className={styles.nameWrapper}>
-          <span
+          <a
             className={styles.name}
-            dangerouslySetInnerHTML={{ __html: extensionName }}
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            dangerouslySetInnerHTML={{
+              __html: parseString(extensionName),
+            }}
           />
         </div>
         <span
           className={styles.description}
           dangerouslySetInnerHTML={{ __html: extensionDescription }}
         />
         <div className={styles.external}>
+          <ul className={styles.tiersWrapper}>
+            {tiers.map((tier, index) => (
+              <li
+                className={classNames(
+                  styles.tier,
+                  tier === 'Official' && styles.tierOfficial,
+                  tier === 'Verified' && styles.tierVerified,
+                  tier === 'Community' && styles.tierCommunity,
+                )}
+                key={index}
+              >
+                <span>{tier}</span>
+              </li>
+            ))}
+          </ul>
           {stars && <span className={styles.stars}>{stars}</span>}
           {cloudEnabled && (
             <span className={styles.cloud}>Available in cloud</span>

src/styles/parts/global.scss

@@ -82,6 +82,10 @@ video {
   }
 }
 
+.no-wrap {
+  white-space: nowrap;
+}
+
 body .show-md-down {
   @include md-down {
     display: initial;