fix: add h1 on homePage and categoryPage, add fetchPriority high on c…

…over
eleven-labs · Apr 11, 2024 · df99bab · df99bab
1 parent 8d4a868
commit df99bab
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

diff --git a/src/components/Atoms/Picture/Picture.tsx b/src/components/Atoms/Picture/Picture.tsx
@@ -4,7 +4,7 @@ import { Box } from '@/components';
 import type { SpacingSystemProps } from '@/types';
 
 export interface PictureProps extends SpacingSystemProps {
-  img: React.ComponentPropsWithoutRef<'img'>;
+  img: React.ComponentPropsWithoutRef<'img'> & { fetchPriority?: 'high' | 'low' | 'auto' };
   sources?: React.ComponentPropsWithoutRef<'source'>[];
 }
 

diff --git a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
@@ -22,7 +22,9 @@ export const CategoryIntroBlock: React.FC<CategoryIntroBlockProps> = ({ title, d
     >
       <Box pt="m" pb="xxl" className="container-content">
         <Breadcrumb {...breadcrumb} />
-        <Heading size="xl">{title}</Heading>
+        <Heading as="h1" size="xl">
+          {title}
+        </Heading>
         <Text mt="l">{description}</Text>
       </Box>
     </Flex>

diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -32,7 +32,7 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
       <Heading size="s" color="info" textTransform="uppercase">
         {intro}
       </Heading>
-      <Heading size="xl" mt="m" color="primary">
+      <Heading as="h1" size="xl" mt="m" color="primary">
         {title}
       </Heading>
       <Text mt="l">{description}</Text>

diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx
@@ -49,7 +49,7 @@ export const PostCard: React.FC<PostCardProps> = ({
     })}
   >
     <Skeleton isLoading={isLoading}>
-      <Picture {...cover} img={{ ...cover?.img, className: 'post-card__cover' }} />
+      <Picture {...cover} img={{ ...cover?.img, className: 'post-card__cover', fetchPriority: 'high' }} />
     </Skeleton>
     <Box my={{ xs: 's', md: 'm' }} pl={{ xs: 's', md: 'm' }} pr={{ xs: 'xs', md: 'm' }} flex="1">
       <Skeleton isLoading={isLoading}>