From b4bd39f0b6de8cc2ce1c5aa42ba82fe5e6a1f04e Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Wed, 24 Jul 2024 16:36:21 +0200 Subject: [PATCH] feat: update heading classnames --- .../src/Heading/Heading.stories.tsx | 16 ++++++++++++++++ packages/orbit-components/src/Heading/consts.ts | 2 ++ .../orbit-components/src/Heading/twClasses.ts | 11 +++++++++++ packages/orbit-components/src/Heading/types.d.ts | 1 + packages/orbit-tailwind-preset/src/index.ts | 6 +++--- 5 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/orbit-components/src/Heading/Heading.stories.tsx b/packages/orbit-components/src/Heading/Heading.stories.tsx index 16a405d24e..5dcddc2f63 100644 --- 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 ( + + {customTitle} + + ); +}; + +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 index f7882c6c45..4e391608da 100644 --- 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 index b97a1a58d5..0cd5a098ce 100644 --- 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 index a121dc5c3e..5663e8bf80 100644 --- 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 index 86c63a16ff..a81adb5006 100644 --- 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,