feat: update heading classnames

kiwicom · Jul 26, 2024 · b4bd39f · b4bd39f
1 parent 63db9a3
commit b4bd39f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Heading/Heading.stories.tsx b/packages/orbit-components/src/Heading/Heading.stories.tsx
@@ -56,6 +56,22 @@ TitleDisplaySubtitle.story = {
   },
 };
 
+export const Title0 = () => {
+  const customTitle = text("Title", "Orbit design system");
+  const as = select("as", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H0);
+  return (
+    <Heading type="title0" as={as}>
+      {customTitle}
+    </Heading>
+  );
+};
+
+Title0.story = {
+  parameters: {
+    info: "Headings are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
+  },
+};
+
 export const Title1 = () => {
   const customTitle = text("Title", "Orbit design system");
   const as = select("as", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H1);

diff --git a/packages/orbit-components/src/Heading/consts.ts b/packages/orbit-components/src/Heading/consts.ts
@@ -1,4 +1,5 @@
 export enum ELEMENT_OPTIONS {
+  H0 = "h0",
   H1 = "h1",
   H2 = "h2",
   H3 = "h3",
@@ -11,6 +12,7 @@ export enum ELEMENT_OPTIONS {
 export enum TYPE_OPTIONS {
   DISPLAY = "display",
   DISPLAYSUBTITLE = "displaySubtitle",
+  TITLE0 = "title0",
   TITLE1 = "title1",
   TITLE2 = "title2",
   TITLE3 = "title3",

diff --git a/packages/orbit-components/src/Heading/twClasses.ts b/packages/orbit-components/src/Heading/twClasses.ts
@@ -7,6 +7,7 @@ export const typeClasses: {
   [TYPE_OPTIONS.DISPLAY]: "text-heading-display leading-heading-display font-heading-display",
   [TYPE_OPTIONS.DISPLAYSUBTITLE]:
     "text-heading-display-subtitle leading-heading-display-subtitle font-heading-display-subtitle",
+  [TYPE_OPTIONS.TITLE0]: "text-heading-title0 leading-heading-title0 font-heading-title0",
   [TYPE_OPTIONS.TITLE1]: "text-heading-title1 leading-heading-title1 font-heading-title1",
   [TYPE_OPTIONS.TITLE2]: "text-heading-title2 leading-heading-title2 font-heading-title2",
   [TYPE_OPTIONS.TITLE3]: "text-heading-title3 leading-heading-title3 font-heading-title3",
@@ -18,6 +19,8 @@ export const typeClasses: {
       "mm:text-heading-display mm:leading-heading-display mm:font-heading-display",
     [TYPE_OPTIONS.DISPLAYSUBTITLE]:
       "mm:text-heading-display-subtitle mm:leading-heading-display-subtitle mm:font-heading-display-subtitle",
+    [TYPE_OPTIONS.TITLE0]:
+      "mm:text-heading-title0 mm:leading-heading-title0 mm:font-heading-title0",
     [TYPE_OPTIONS.TITLE1]:
       "mm:text-heading-title1 mm:leading-heading-title1 mm:font-heading-title1",
     [TYPE_OPTIONS.TITLE2]:
@@ -36,6 +39,8 @@ export const typeClasses: {
       "lm:text-heading-display lm:leading-heading-display lm:font-heading-display",
     [TYPE_OPTIONS.DISPLAYSUBTITLE]:
       "lm:text-heading-display-subtitle lm:leading-heading-display-subtitle lm:font-heading-display-subtitle",
+    [TYPE_OPTIONS.TITLE0]:
+      "lm:text-heading-title0 lm:leading-heading-title0 lm:font-heading-title0",
     [TYPE_OPTIONS.TITLE1]:
       "lm:text-heading-title1 lm:leading-heading-title1 lm:font-heading-title1",
     [TYPE_OPTIONS.TITLE2]:
@@ -54,6 +59,8 @@ export const typeClasses: {
       "tb:text-heading-display tb:leading-heading-display tb:font-heading-display",
     [TYPE_OPTIONS.DISPLAYSUBTITLE]:
       "tb:text-heading-display-subtitle tb:leading-heading-display-subtitle tb:font-heading-display-subtitle",
+    [TYPE_OPTIONS.TITLE0]:
+      "tb:text-heading-title0 tb:leading-heading-title0 tb:font-heading-title0",
     [TYPE_OPTIONS.TITLE1]:
       "tb:text-heading-title1 tb:leading-heading-title1 tb:font-heading-title1",
     [TYPE_OPTIONS.TITLE2]:
@@ -72,6 +79,8 @@ export const typeClasses: {
       "de:text-heading-display de:leading-heading-display de:font-heading-display",
     [TYPE_OPTIONS.DISPLAYSUBTITLE]:
       "de:text-heading-display-subtitle de:leading-heading-display-subtitle de:font-heading-display-subtitle",
+    [TYPE_OPTIONS.TITLE0]:
+      "de:text-heading-title0 de:leading-heading-title0 de:font-heading-title0",
     [TYPE_OPTIONS.TITLE1]:
       "de:text-heading-title1 de:leading-heading-title1 de:font-heading-title1",
     [TYPE_OPTIONS.TITLE2]:
@@ -90,6 +99,8 @@ export const typeClasses: {
       "ld:text-heading-display ld:leading-heading-display ld:font-heading-display",
     [TYPE_OPTIONS.DISPLAYSUBTITLE]:
       "ld:text-heading-display-subtitle ld:leading-heading-display-subtitle ld:font-heading-display-subtitle",
+    [TYPE_OPTIONS.TITLE0]:
+      "ld:text-heading-title0 ld:leading-heading-title0 ld:font-heading-title0",
     [TYPE_OPTIONS.TITLE1]:
       "ld:text-heading-title1 ld:leading-heading-title1 ld:font-heading-title1",
     [TYPE_OPTIONS.TITLE2]:

diff --git a/packages/orbit-components/src/Heading/types.d.ts b/packages/orbit-components/src/Heading/types.d.ts
@@ -8,6 +8,7 @@ import type * as Common from "../common/types";
 export type Type =
   | "display"
   | "displaySubtitle"
+  | "title0"
   | "title1"
   | "title2"
   | "title3"

diff --git a/packages/orbit-tailwind-preset/src/index.ts b/packages/orbit-tailwind-preset/src/index.ts
@@ -102,7 +102,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
         fontSize: {
           "heading-display": tokens.headingDisplayFontSize,
           "heading-display-subtitle": tokens.headingDisplaySubtitleFontSize,
-          "heading-title0": tokens.headingTitle0FontSize,
+          // "heading-title0": tokens.headingTitle0FontSize,
           "heading-title1": tokens.headingTitle1FontSize,
           "heading-title2": tokens.headingTitle2FontSize,
           "heading-title3": tokens.headingTitle3FontSize,
@@ -117,7 +117,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
         fontWeight: {
           "heading-display": tokens.headingDisplayFontWeight,
           "heading-display-subtitle": tokens.headingDisplaySubtitleFontWeight,
-          "heading-title0": tokens.headingTitle0FontWeight,
+          // "heading-title0": tokens.headingTitle0FontWeight,
           "heading-title1": tokens.headingTitle1FontWeight,
           "heading-title2": tokens.headingTitle2FontWeight,
           "heading-title3": tokens.headingTitle3FontWeight,
@@ -131,7 +131,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
           heading: tokens.lineHeightHeading,
           "heading-display": tokens.headingDisplayLineHeight,
           "heading-display-subtitle": tokens.headingDisplaySubtitleLineHeight,
-          "heading-title0": tokens.headingTitle0LineHeight,
+          // "heading-title0": tokens.headingTitle0LineHeight,
           "heading-title1": tokens.headingTitle1LineHeight,
           "heading-title2": tokens.headingTitle2LineHeight,
           "heading-title3": tokens.headingTitle3LineHeight,