feat(Heading): add composable-header-title variant (#66)

* feat(Heading): add composable-header-title variant * feat(fonts): add Tiempos 500 font face
cultureamp · Jul 5, 2024 · edbf278 · edbf278
1 parent 4b50ecc
commit edbf278
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/fuzzy-ways-fail.md b/.changeset/fuzzy-ways-fail.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/typography": minor
+---
+
+Add `composable-header-title` variant to `Heading`.
diff --git a/packages/typography/docs/Heading.stories.tsx b/packages/typography/docs/Heading.stories.tsx
@@ -97,6 +97,11 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({
             Let&apos;s create a better world of work
           </Heading>
         </StoryWrapper.Row>
+        <StoryWrapper.Row rowTitle="Composable header title">
+          <Heading variant="composable-header-title" color={fontColour}>
+            Use me in the composable header!
+          </Heading>
+        </StoryWrapper.Row>
         <StoryWrapper.Row rowTitle="Heading 1">
           <div>
             <Heading variant="heading-1" color={fontColour}>

diff --git a/packages/typography/src/Heading/Heading.module.scss b/packages/typography/src/Heading/Heading.module.scss
@@ -14,6 +14,14 @@
   letter-spacing: $typography-display-0-letter-spacing;
 }
 
+.composable-header-title {
+  font-family: $typography-display-0-font-family; // Tiempos
+  font-weight: 500; // Medium
+  font-size: $typography-heading-1-font-size;
+  line-height: $typography-heading-1-line-height;
+  letter-spacing: $typography-heading-1-letter-spacing;
+}
+
 .heading-1 {
   font-family: $typography-heading-1-font-family;
   font-weight: $typography-heading-1-font-weight;

diff --git a/packages/typography/src/Heading/Heading.tsx b/packages/typography/src/Heading/Heading.tsx
@@ -7,6 +7,7 @@ const VARIANTS_24PX_OR_GREATER = ["display-0", "heading-1", "heading-2"]
 
 export type HeadingVariants =
   | "display-0"
+  | "composable-header-title"
   | "heading-1"
   | "heading-2"
   | "heading-3"
@@ -84,6 +85,7 @@ Heading.displayName = "Heading"
 const translateHeadingLevelToTag = (headingLevel: HeadingVariants): string => {
   switch (headingLevel) {
     case "display-0":
+    case "composable-header-title":
     case "heading-1":
       return "h1"
     case "heading-2":

diff --git a/packages/typography/src/fonts.scss b/packages/typography/src/fonts.scss
@@ -9,6 +9,13 @@
   font-weight: 800;
 }
 
+@font-face {
+  font-family: "Tiempos Headline";
+  src: url(asset-url("fonts/tiempos/tiempos-headline-medium.woff2")),
+    url(asset-url("fonts/tiempos/tiempos-headline-medium.woff"));
+  font-weight: 500;
+}
+
 // =============== GREYCLIFF ===============
 
 @font-face {