EDSC-4322: Refactor CustomizableIcons.jsx and fix styling inconsist…

…encies (#1842) * EDSC-4322: Fix portal mock test * EDSC-4322: Fix Customizable Icons styling * EDSC-4322: Match colors of nearby similar buttons * EDSC-4322: Refactor customizable icons component and where its being called * EDSC-4322: Fixing customizable icon tooltips * EDSC-4322: Clean up styling remove unused classes * EDSC-4322: Fix naming convention, tweak background color to match other selected buttons when hovered
nasa · Dec 30, 2024 · 3f1a79a · 3f1a79a
1 parent fcae98f
commit 3f1a79a
Show file tree

Hide file tree

Showing 18 changed files with 522 additions and 359 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ To ensure that you're using the correct version of Node it is recommended that y
 
     nvm use
 
-##### Serverless Framework
+##### Running Serverless Framework locally
 
 Earthdata Search utilizes the [Serverless Framework](https://serverless.com/) for managing AWS resources. In order to fully run and manage the application you'll need to install it:
 

diff --git a/static/src/js/components/AccessMethod/AccessMethod.scss b/static/src/js/components/AccessMethod/AccessMethod.scss
@@ -55,7 +55,7 @@
   margin-left: $spacer;
 
   &:hover {
-    background-color: $color__carbon--10;
+    background-color: $color__carbon--5;
   }
 }
 
@@ -91,17 +91,19 @@
 }
 
 .harmony-select-item {
-  line-height: 1;
   display: flex;
   align-items: center;
   height: auto;
   position: relative;
   user-select: none;
-}
 
-.harmony-select-item[data-highlighted] {
-  outline: none;
-  background-color: $color__carbon--10;
+  &:hover {
+    background-color: $color__carbon--5;
+
+    .meta-icon__metadata {
+      background-color: $color__carbon--20;
+    }
+  }
 }
 
 .harmony-scroll-area-root {

diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FileGeneric, Filter } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+
+import {
+  FaClock,
+  FaCubes,
+  FaGlobe,
+  FaTags
+} from 'react-icons/fa'
+
+import EDSCIcon from '../EDSCIcon/EDSCIcon'
+
+import './AvailableCustomizationsIcons.scss'
+
+/**
+ * Renders icons indicating customization options for access methods.
+ * @param {boolean} hasSpatialSubsetting
+ * @param {boolean} hasVariables
+ * @param {boolean} hasTransforms
+ * @param {boolean} hasFormats
+ * @param {boolean} hasTemporalSubsetting
+ * @param {boolean} hasCombine
+ */
+export const AvailableCustomizationsIcons = ({
+  hasSpatialSubsetting,
+  hasVariables,
+  hasTransforms,
+  hasFormats,
+  hasTemporalSubsetting,
+  hasCombine
+}) => (
+  hasSpatialSubsetting
+      || hasVariables
+      || hasTransforms
+      || hasFormats
+      || hasTemporalSubsetting
+      || hasCombine
+) && (
+  <>
+    {
+      hasSpatialSubsetting && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white globe icon"
+          icon={FaGlobe}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasTemporalSubsetting && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white clock icon"
+          icon={FaClock}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasVariables && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white tags icon"
+          icon={FaTags}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasTransforms && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white horizontal sliders icon"
+          icon={Filter}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasFormats && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white file icon"
+          icon={FileGeneric}
+          size="0.675rem"
+        />
+      )
+    }
+    {
+      hasCombine && (
+        <EDSCIcon
+          className="available-customizations-icons__icon"
+          title="A white cubes icon"
+          icon={FaCubes}
+          size="0.675rem"
+        />
+      )
+    }
+  </>
+)
+
+AvailableCustomizationsIcons.defaultProps = {
+  hasSpatialSubsetting: false,
+  hasVariables: false,
+  hasTransforms: false,
+  hasFormats: false,
+  hasTemporalSubsetting: false,
+  hasCombine: false
+}
+
+AvailableCustomizationsIcons.propTypes = {
+  hasSpatialSubsetting: PropTypes.bool,
+  hasVariables: PropTypes.bool,
+  hasTransforms: PropTypes.bool,
+  hasFormats: PropTypes.bool,
+  hasTemporalSubsetting: PropTypes.bool,
+  hasCombine: PropTypes.bool
+}
+
+export default AvailableCustomizationsIcons
diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.scss
@@ -0,0 +1,13 @@
+.available-customizations-icons {
+  border-bottom: 1px solid $border-color;
+
+  &__icon {
+    margin-right: 0.25rem;
+    position: relative;
+    top: -0.05rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/...ic/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx b/...ic/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
@@ -0,0 +1,145 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FileGeneric, Filter } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'
+
+import {
+  FaClock,
+  FaCubes,
+  FaGlobe,
+  FaTags
+} from 'react-icons/fa'
+
+import EDSCIcon from '../EDSCIcon/EDSCIcon'
+import './AvailableCustomizationsTooltipIcons.scss'
+
+/**
+ * Renders tool-tip-icons indicating customization options for access methods.
+ * @param {boolean} hasSpatialSubsetting
+ * @param {boolean} hasVariables
+ * @param {boolean} hasTransforms
+ * @param {boolean} hasFormats
+ * @param {boolean} hasTemporalSubsetting
+ * @param {boolean} hasCombine
+ */
+export const AvailableCustomizationsTooltipIcons = ({
+  hasSpatialSubsetting,
+  hasVariables,
+  hasTransforms,
+  hasFormats,
+  hasTemporalSubsetting,
+  hasCombine
+}) => (
+  hasSpatialSubsetting
+      || hasVariables
+      || hasTransforms
+      || hasFormats
+      || hasTemporalSubsetting
+      || hasCombine
+) && (
+  <>
+    <div>
+      Supports customization:
+    </div>
+    <ul className="available-customizations-tooltip-icons__tooltip-feature-list">
+      {
+        hasSpatialSubsetting && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white globe icon"
+              size="0.725rem"
+              icon={FaGlobe}
+            />
+            Spatial subset
+          </li>
+        )
+      }
+      {
+        hasTemporalSubsetting && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white clock icon"
+              size="0.725rem"
+              icon={FaClock}
+            />
+            Temporal subset
+          </li>
+        )
+      }
+      {
+        hasVariables && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white tags icon"
+              size="0.725rem"
+              icon={FaTags}
+            />
+            Variable subset
+          </li>
+        )
+      }
+      {
+        hasTransforms && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white horizontal sliders icon"
+              size="0.725rem"
+              icon={Filter}
+            />
+            Transform
+          </li>
+        )
+      }
+      {
+        hasFormats && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white file icon"
+              size="0.725rem"
+              icon={FileGeneric}
+            />
+            Reformat
+          </li>
+        )
+      }
+      {
+        hasCombine && (
+          <li>
+            <EDSCIcon
+              className="available-customizations-tooltip-icons__tooltip-feature-icon"
+              title="A white cubes icon"
+              size="0.725rem"
+              icon={FaCubes}
+            />
+            Combine
+          </li>
+        )
+      }
+    </ul>
+  </>
+)
+
+AvailableCustomizationsTooltipIcons.defaultProps = {
+  hasSpatialSubsetting: false,
+  hasVariables: false,
+  hasTransforms: false,
+  hasFormats: false,
+  hasTemporalSubsetting: false,
+  hasCombine: false
+}
+
+AvailableCustomizationsTooltipIcons.propTypes = {
+  hasSpatialSubsetting: PropTypes.bool,
+  hasVariables: PropTypes.bool,
+  hasTransforms: PropTypes.bool,
+  hasFormats: PropTypes.bool,
+  hasTemporalSubsetting: PropTypes.bool,
+  hasCombine: PropTypes.bool
+}
+
+export default AvailableCustomizationsTooltipIcons
diff --git a/...c/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.scss b/...c/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.scss
@@ -0,0 +1,14 @@
+.available-customizations-tooltip-icons {
+  &__tooltip-feature-list {
+    width: auto;
+    margin: 0 auto;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+  }
+
+  &__tooltip-feature-icon {
+    margin-right: 0.325rem;
+    color: $color__carbon--30;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up @@
         nvm use
-    ##### Serverless Framework
+    ##### Running Serverless Framework locally
     Earthdata Search utilizes the [Serverless Framework](https://serverless.com/) for managing AWS resources. In order to fully run and manage the application you'll need to install it:
@@ Expand Down @@