chore: make icon optional in metadata block

NIAID-Data-Ecosystem · May 15, 2024 · 8d89e32 · 8d89e32
1 parent c9892e3
commit 8d89e32
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/src/components/metadata/components/block.tsx b/src/components/metadata/components/block.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Box, Button, Flex, Icon, Text, TooltipProps } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Icon,
+  Text,
+  TooltipProps,
+} from '@chakra-ui/react';
 import { MetadataIcon } from 'src/components/icon';
 import { getMetadataTheme } from 'src/components/icon/helpers';
 import Tooltip from 'src/components/tooltip';
@@ -9,6 +17,7 @@ interface MetadataBlockProps {
   id: string;
   label: string;
   property: string;
+  glyph?: string;
   isDisabled?: boolean;
   children?: React.ReactNode;
   bg?: string;
@@ -25,28 +34,30 @@ export const MetadataBlock = ({
   property,
   children,
   bg,
+  glyph,
   colorScheme,
   tooltipLabel,
 }: MetadataBlockProps) => {
   return (
     <Box flexDirection='column' color={isDisabled ? 'gray.700' : 'text.body'}>
       <Flex alignItems='center'>
-        <Flex alignItems='center' px={1} mb={0.5} flex={1}>
-          <MetadataIcon
-            id={id}
-            title={property}
-            glyph={property}
-            fill={
-              isDisabled
-                ? 'gray.500'
-                : bg || `${getMetadataTheme(property) || colorScheme}.500`
-            }
-            isDisabled={isDisabled}
-            boxSize={4}
-            mr={1}
-          />
+        <HStack alignItems='center' px={1} mb={0.5} flex={1} spacing={1}>
+          {glyph && (
+            <MetadataIcon
+              id={id}
+              title={property}
+              glyph={glyph}
+              fill={
+                isDisabled
+                  ? 'gray.500'
+                  : bg || `${getMetadataTheme(property) || colorScheme}.500`
+              }
+              isDisabled={isDisabled}
+              boxSize={4}
+            />
+          )}
           <MetadataLabel label={label}></MetadataLabel>
-        </Flex>
+        </HStack>
 
         {tooltipLabel && (
           <MetadataTooltip

diff --git a/src/components/resource-sections/components/overview/index.tsx b/src/components/resource-sections/components/overview/index.tsx
@@ -104,6 +104,7 @@ const Overview: React.FC<OverviewProps> = ({
                     props.property,
                     data['@type'],
                   )}
+                  glyph={props.property}
                   {...props}
                 >
                   {name && (
@@ -181,6 +182,7 @@ const SpatiotemporalCoverage: React.FC<SpatiotemporalCoverageProps> = ({
         id={`${id}-spatialCoverage`}
         label='Spatiotemporal Coverage'
         property='spatialCoverage'
+        glyph='spatialCoverage'
         isDisabled={isDisabled}
         bg='gray.900'
         tooltipLabel={
@@ -199,7 +201,6 @@ const SpatiotemporalCoverage: React.FC<SpatiotemporalCoverageProps> = ({
       >
         <VStack alignItems='flex-start' divider={<Divider />}>
           {/* Geographic information of dataset */}
-
           {spatialInformation && (
             <>
               <Text fontWeight='medium' color='gray.800'>

diff --git a/src/components/search-results-page/components/card/metadata-accordion/index.tsx b/src/components/search-results-page/components/card/metadata-accordion/index.tsx
@@ -178,6 +178,7 @@ const MetadataAccordion: React.FC<MetadataAccordionProps> = ({ data }) => {
                         return (
                           <MetadataBlock
                             key={`property-${props.id}`}
+                            glyph={props.property}
                             {...props}
                           >
                             {name && (