fix: heading markup post content (#66)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

src/components/Atoms/Button/Button.scss

@@ -6,6 +6,7 @@
   background: var(--background-color-button, map-get-strict($token-variables, 'color', 'info'));
   color: var(--color-button, white);
   font-family: map-get-strict($token-variables, 'font-family', 'heading');
+  font-size: map-get-strict($token-variables, 'typography', 'text', 's', 'font-size');
   letter-spacing: 1px;
   border-width: var(--border-width-button, 0);
   border-style: solid;

src/components/Molecules/Cards/NewsletterCard/webmecanik.scss

@@ -4,6 +4,8 @@
 .mauticform_wrapper {
   --color-error: red;
 
+  font-size: map-get-strict($token-variables, 'typography', 'text', 's', 'font-size');
+
   .mauticform-row {
     display: flex;
     flex-direction: column;

src/designTokens/typography/heading-markup.tokens.json

@@ -0,0 +1,81 @@
+{
+  "typography": {
+    "heading-markup": {
+      "base": {
+        "line-height": {
+          "value": "{line-height.base.value}"
+        },
+        "font-weight": {
+          "value": "{font-weight.regular.value}"
+        },
+        "margin-top": {
+          "value": "{spacing.l}"
+        }
+      },
+      "s": {
+        "font-size": {
+          "value": "16px"
+        },
+        "margin-bottom": {
+          "value": "{spacing.xxs}"
+        }
+      },
+      "m": {
+        "font-size": {
+          "value": "{typography.heading-markup.s.font-size.value} + 2"
+        },
+        "margin-bottom": {
+          "value": "{spacing.xs}"
+        }
+      },
+      "l": {
+        "font-size": {
+          "value": "{typography.heading-markup.m.font-size.value} + 2"
+        },
+        "font-weight": {
+          "value": "{font-weight.medium.value}"
+        },
+        "margin-bottom": {
+          "value": "{spacing.s}"
+        }
+      },
+      "xl": {
+        "font-size": {
+          "value": "{typography.heading-markup.l.font-size.value} + 2"
+        },
+        "font-weight": {
+          "value": "{font-weight.semi-bold.value}"
+        },
+        "margin-bottom": {
+          "value": "{spacing.m}"
+        }
+      }
+    }
+  },
+  "desktop": {
+    "typography": {
+      "heading-markup": {
+        "s": {
+          "font-size": {
+            "value": "24px"
+          }
+        },
+        "m": {
+          "font-size": {
+            "value": "{desktop.typography.heading-markup.s.font-size.value} + 2"
+          }
+        },
+        "l": {
+          "font-size": {
+            "value": "{desktop.typography.heading-markup.m.font-size.value} + 2"
+          }
+        },
+        "xl": {
+          "font-size": {
+            "value": "{desktop.typography.heading-markup.m.font-size.value} + 2"
+          }
+        }
+      }
+    }
+  }
+}

src/designTokens/typography/heading.tokens.json

@@ -38,7 +38,7 @@
       },
       "xl": {
         "font-size": {
-          "value": "{typography.heading.m.font-size.value} + 8"
+          "value": "{typography.heading.l.font-size.value} + 8"
         },
         "font-weight": {
           "value": "{font-weight.regular.value}"

src/pages/PostPage/PostPage.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import BreadcrumbStories from '@/components/Atoms/Breadcrumb/Breadcrumb.stories';
 import ContactCardStories from '@/components/Molecules/Cards/ContactCard/ContactCard.stories';
@@ -22,7 +23,35 @@ const meta: Meta<typeof PostPage> = {
       alt: 'cover',
     },
     header: PostHeaderStories.args as PostPageProps['header'],
-    children: 'content',
+    children: (
+      <>
+        <h2>Heading 1</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+          ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+        </p>
+        <p>
+          Vivamus gravida feugiat lorem, quis pharetra tellus dignissim vel. Fusce dapibus sodales efficitur. Curabitur
+          nec semper dolor. Integer dignissim leo magna, sit amet mollis arcu auctor id. Fusce sapien dolor, porta a
+          dictum eget, posuere et arcu. Nam mattis facilisis est id dignissim
+        </p>
+        <h3>Sub-heading 1.1</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+          ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+        </p>
+        <h4>Sub-heading 1.1.1</h4>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+          ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+        </p>
+        <h5>Sub-heading 1.1.1.1</h5>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+          ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+        </p>
+      </>
+    ),
     footer: PostFooterStories.args as PostPageProps['footer'],
     contactCard: ContactCardStories.args as PostPageProps['contactCard'],
     relatedPostList: RelatedPostListStories.args as PostPageProps['relatedPostList'],

src/pages/PostPage/PostPage.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { SummaryCard } from '@/components';
 import { LayoutContentWithSidebar } from '@/templates/LayoutContentWithSidebar';
 
-import './PostPage.scss';
 import { PostPageContent } from './PostPageContent';
 
 import type { PostPageContentProps } from './PostPageContent';

src/pages/PostPage/PostPageContent.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '@/styles/abstracts' as *;
+
+$heading-markup-config: map-get-strict($token-variables, 'typography', 'heading-markup');
+$heading-markup-desktop-config: map-get-strict($token-variables, 'desktop', 'typography', 'heading-markup');
+$headings-by-compoent-variant-name: (
+    's': 'h5',
+    'm': 'h4',
+    'l': 'h3',
+    'xl': 'h2',
+);
+
+@mixin heading($config) {
+  $base-properties: ();
+
+  @if map.get($config, 'base') {
+    $base-properties: map.get($config, 'base');
+  }
+
+  @each $component-variant-name, $properties in $config {
+    @if $component-variant-name != 'base' {
+      #{map-get-strict($headings-by-compoent-variant-name, $component-variant-name)} {
+        @each $property-name, $property-value in map.merge($base-properties, $properties) {
+          #{$property-name}: #{$property-value};
+        }
+      }
+    }
+  }
+}
+
+.post-page-content {
+  --height-cover-post-page: 160px;
+
+  &__cover {
+    margin-top: #{map-get-strict($token-variables, 'spacing', 's')};
+    object-fit: cover;
+    width: 100%;
+    height: var(--height-cover-post-page);
+    border-radius: #{map-get-strict($token-variables, 'radius', 'xs')};
+
+    @include create-media-queries('md') {
+      --height-cover-post-page: 335px;
+    }
+  }
+
+  @include heading($heading-markup-config);
+
+  @include create-media-queries('md') {
+    @include heading($heading-markup-desktop-config);
+  }
+
+  p {
+    margin-bottom: #{map-get-strict($token-variables, 'spacing', 'xs')};
+  }
+}

src/pages/PostPage/PostPageContent.tsx

@@ -10,6 +10,7 @@ import type { ComponentPropsWithoutRef } from '@/types';
 
 import { PostFooter } from './PostFooter';
 import { PostHeader } from './PostHeader';
+import './PostPageContent.scss';
 import { RelatedPostList } from './RelatedPostList';
 
 import type { PostFooterProps } from './PostFooter';
@@ -47,9 +48,9 @@ export const PostPageContent: React.FC<PostPageContentProps> = ({
   nextLink: { label: nextLinkLabel, ...nextLink } = {},
 }) => (
   <>
-    <Box>
+    <Box className="post-page-content">
       <Breadcrumb {...breadcrumb} />
-      <img className="post-page__cover" {...cover} alt={cover.alt} />
+      <img className="post-page-content__cover" {...cover} alt={cover.alt} />
       <PostHeader mt="m" {...header} />
       <Divider mt="m" />
       <SummaryCard mt="l" hiddenAbove="md" variant={variant === 'tutorial' ? 'secondary' : 'primary'} {...summary} />

src/pages/SearchPage/SearchPageContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, NotFoundBlock, Skeleton, Text } from '@/components';
+import { Box, Heading, NotFoundBlock, Skeleton } from '@/components';
 import type { NotFoundBlockProps } from '@/components';
 
 export type SearchPageContentProps = {
@@ -23,14 +23,14 @@ export const SearchPageContent: React.FC<SearchPageContentProps> = ({
   ) : (
     <Box>
       <Skeleton isLoading={isLoading}>
-        <Text size="m" fontWeight="medium">
+        <Heading size="m" fontWeight="medium" color="primary">
           {title}
-        </Text>
+        </Heading>
       </Skeleton>
       <Skeleton isLoading={isLoading}>
-        <Text size="s" mb="l">
+        <Heading size="s" mb="l">
           {description}
-        </Text>
+        </Heading>
       </Skeleton>
       {postCardList}
     </Box>

src/styles/abstracts/mixins/_component.scss

@@ -2,10 +2,16 @@
 @use '../variables' as *;
 
 @mixin component($component-name, $config) {
+  $base-properties: ();
+
+  @if map.get($config, 'base') {
+    $base-properties: map.get($config, 'base');
+  }
+
   @each $component-variant-name, $properties in $config {
     @if $component-variant-name != 'base' {
       .#{$component-name}-#{$component-variant-name} {
-        @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
+        @each $property-name, $property-value in map.merge($base-properties, $properties) {
           #{$property-name}: #{$property-value};
         }
       }

src/styles/utilities/_typography.scss

@@ -26,11 +26,17 @@ $typography-prop-list-with-breakpoints: (
 
 
 @mixin text-component($config) {
+  $base-properties: ();
+
+  @if map.get($config, 'base') {
+    $base-properties: map.get($config, 'base');
+  }
+
   @each $component-variant-name, $properties in $config {
     @if $component-variant-name != 'base' {
       $icon-size: map.get($properties, 'icon-size');
       .text-#{$component-variant-name} {
-        @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
+        @each $property-name, $property-value in map.merge($base-properties, $properties) {
           @if $property-name != 'icon-size' {
             #{$property-name}: #{$property-value};
           }