style: fix text wrapping in tags

style: fix spatiotemporal coverage empty state style: update sources anchor tag
NIAID-Data-Ecosystem · Jun 6, 2024 · ff71a8c · ff71a8c
1 parent 2c7e8f5
commit ff71a8c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/src/components/resource-sections/components/overview/index.tsx b/src/components/resource-sections/components/overview/index.tsx
@@ -60,7 +60,8 @@ const Overview: React.FC<OverviewProps> = ({
           spatialCoverage ||
           temporalCoverage?.some(coverage => coverage.temporalInterval) ===
             true ||
-          inLanguage
+          inLanguage?.name ||
+          inLanguage?.alternateName
         ),
       },
     ],

diff --git a/src/components/sources/components/main.tsx b/src/components/sources/components/main.tsx
@@ -137,11 +137,12 @@ const Main: React.FC<Main> = ({ data, isLoading, metadata }) => {
             </Flex>
           </Flex>
           {sources.map((sourceObj: SourceResponse, i: number) => {
+            const id = `${sourceObj.name.replace(/\s+/g, '-')}`;
             return (
               <Box
-                id={`${sourceObj.name}`}
+                key={id}
+                id={id}
                 as='section'
-                key={i}
                 boxShadow='low'
                 borderRadius='semi'
                 borderColor='gray.200'

diff --git a/src/components/sources/components/sidebar.tsx b/src/components/sources/components/sidebar.tsx
@@ -21,7 +21,13 @@ const Sidebar: React.FC<Sidebar> = ({ data }) => {
       {sourceNames.map(([name, id], index) => {
         return (
           <ListItem key={index} _hover={{ bg: 'gray.50' }} cursor='pointer'>
-            <Box as='a' display='block' href={`#${name}`} px={[2, 4, 6]} py={4}>
+            <Box
+              as='a'
+              display='block'
+              href={`#${name.replace(/\s+/g, '-')}`}
+              px={[2, 4, 6]}
+              py={4}
+            >
               <HStack alignItems='center'>
                 <Heading size='h6' alignItems='center'>
                   {name}{' '}

diff --git a/src/components/tag-with-url/index.tsx b/src/components/tag-with-url/index.tsx
@@ -32,6 +32,7 @@ export const TagWithUrl = ({
   children,
   label,
   href,
+  isExternal,
   leftIcon,
   ...props
 }: TagWithUrlProps) => {
@@ -55,35 +56,41 @@ export const TagWithUrl = ({
   // See issue: https://github.com/NIAID-Data-Ecosystem/nde-portal/issues/245
   if (!href)
     return (
-      <Text fontSize={props.fontSize || 'xs'} {...props}>
+      <Text fontSize={props.fontSize || 'xs'} whiteSpace='nowrap' {...props}>
         <Label />
         {children}
       </Text>
     );
   return (
-    <NextLink href={href} target={props.isExternal ? '_blank' : '_self'}>
+    <NextLink href={href} target={isExternal ? '_blank' : '_self'}>
       <Tag
         size='sm'
         variant='subtle'
         alignItems='center'
         _hover={{
-          '>*': {
+          '.tag-text': {
             textDecoration: 'none',
           },
         }}
         lineHeight='shorter'
         {...props}
       >
         {leftIcon && <TagLeftIcon as={leftIcon} />}
-        <Label />
-        <TagLabel
-          textDecoration='underline'
-          fontSize='inherit'
-          lineHeight='inherit'
-        >
-          {children}
+
+        <TagLabel fontSize='inherit' lineHeight='inherit'>
+          <Label />
+          <Text
+            as='span'
+            className='tag-text'
+            textDecoration='underline'
+            fontSize='inherit'
+            lineHeight='inherit'
+            color='inherit'
+          >
+            {children}
+          </Text>
         </TagLabel>
-        {props.isExternal && <TagRightIcon as={FaSquareArrowUpRight} ml={1} />}
+        {isExternal && <TagRightIcon as={FaSquareArrowUpRight} ml={1} />}
       </Tag>
     </NextLink>
   );