fix: heading size mobile (#65)

eleven-labs · Jan 30, 2024 · 8902320 · 8902320
1 parent 43851a3
commit 8902320
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 20 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.26.2",
+  "version": "0.27.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
+import type { BoxProps } from '@/components';
 import { Box, Button, Flex, Heading, Text } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
 import './HomeIntroBlock.scss';
 
-export interface HomeIntroBlockProps {
+export interface HomeIntroBlockProps extends BoxProps {
   intro: React.ReactNode;
   title: React.ReactNode;
   description: React.ReactNode;
@@ -17,8 +18,9 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
   title,
   description,
   elevenLabsLink: { label: elevelLabsLinkLabel, ...elevenLabsLink },
+  ...props
 }) => (
-  <Box py="xl" className="home-intro-block">
+  <Box className="home-intro-block" {...props}>
     <Flex
       alignItems="baseline"
       flexDirection="column"

diff --git a/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx b/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx
@@ -20,13 +20,19 @@ export const AuthorCard: React.FC<AuthorCardProps> = ({
   link: { label: linkLabel, ...link },
   ...props
 }) => (
-  <Flex {...props} alignItems="center" justifyContent="between" px="s" py="m" bg="white" className="author-card">
-    <Flex gap="s" flex="1" alignItems="center">
-      {avatarImageUrl ? (
-        <img src={avatarImageUrl} alt={name} className="author-card__avatar-img" />
-      ) : (
-        <div className="author-card__avatar-img author-card__avatar-img--empty" />
-      )}
+  <Flex {...props} alignItems="center" gap="s" px="s" py="m" bg="white" className="author-card">
+    {avatarImageUrl ? (
+      <img src={avatarImageUrl} alt={name} className="author-card__avatar-img" />
+    ) : (
+      <div className="author-card__avatar-img author-card__avatar-img--empty" />
+    )}
+    <Flex
+      flexDirection={{ xs: 'column', md: 'row' }}
+      flex="1"
+      justifyContent="between"
+      alignItems={{ xs: 'start', md: 'center' }}
+      gap="s"
+    >
       <Box>
         <Text color="primary" size="m" fontWeight="semi-bold">
           {name}
@@ -35,9 +41,15 @@ export const AuthorCard: React.FC<AuthorCardProps> = ({
           {description}
         </Text>
       </Box>
+      <Link
+        {...link}
+        px={{ xs: '0', md: 'm' }}
+        textTransform="uppercase"
+        data-internal-link="author"
+        className="author-card__link"
+      >
+        {linkLabel}
+      </Link>
     </Flex>
-    <Link {...link} px="m" textTransform="uppercase" data-internal-link="author" className="author-card__link">
-      {linkLabel}
-    </Link>
   </Flex>
 );
diff --git a/src/components/Molecules/Cards/ContactCard/ContactCard.tsx b/src/components/Molecules/Cards/ContactCard/ContactCard.tsx
@@ -26,6 +26,7 @@ export const ContactCard: React.FC<ContactCardProps> = ({
       gap="m"
       textAlign="center"
       className="contact-card__container"
+      px="m"
     >
       <Heading size="l" color="primary">
         {title}

diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json
@@ -9,12 +9,12 @@
           "value": "{line-height.base.value}"
         },
         "letter-spacing": {
-          "value": "2px"
+          "value": "1px"
         }
       },
       "s": {
         "font-size": {
-          "value": "20px"
+          "value": "16px"
         },
         "font-weight": {
           "value": "{font-weight.bold.value}"
@@ -38,7 +38,7 @@
       },
       "xl": {
         "font-size": {
-          "value": "{typography.heading.m.font-size.value} * 2"
+          "value": "{typography.heading.m.font-size.value} + 8"
         },
         "font-weight": {
           "value": "{font-weight.regular.value}"
@@ -47,12 +47,17 @@
           "value": "uppercase"
         },
         "letter-spacing": {
-          "value": "3px"
+          "value": "2px"
         }
       }
     }
   },
   "desktop": {
+    "base": {
+      "letter-spacing": {
+        "value": "2px"
+      }
+    },
     "typography": {
       "heading": {
         "s": {
@@ -73,6 +78,9 @@
         "xl": {
           "font-size": {
             "value": "{desktop.typography.heading.m.font-size.value} * 2"
+          },
+          "letter-spacing": {
+            "value": "3px"
           }
         }
       }

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -23,7 +23,7 @@ export const HomePage: React.FC<HomePageProps> = ({
   newsletterCard,
 }) => (
   <>
-    <HomeIntroBlock {...homeIntroBlock} />
+    <HomeIntroBlock py={{ xs: '0', md: 'xl' }} {...homeIntroBlock} />
     <LastArticlesBlock {...lastArticlesBlock} />
     {lastTutorialsBlock && <LastTutorialsBlock {...lastTutorialsBlock} />}
     <Box my="xl" mx={{ xs: 's', md: 'auto' }} width={{ md: 'content-container' }}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ export const ContactCard: React.FC<ContactCardProps> = ({ @@
           gap="m"
           textAlign="center"
           className="contact-card__container"
+          px="m"
         >
           <Heading size="l" color="primary">
             {title}
@@ Expand Down @@