diff --git a/packages/orbit-components/cypress/integration/index.tsx b/packages/orbit-components/cypress/integration/index.tsx
index 0953aaa4ce..9057de30c5 100644
--- a/packages/orbit-components/cypress/integration/index.tsx
+++ b/packages/orbit-components/cypress/integration/index.tsx
@@ -12,6 +12,7 @@ import StackMediaProps from "./pages/stack-mediaquery-props";
import TextStyles from "./pages/text-styles";
import TextLinkStyles from "./pages/text-link-styles";
import NavigationBar from "./pages/navigation-bar";
+import HeadingMediaProps from "./pages/heading-media-query-props";
const router = createRouter({
lockScrolling: "/lock-scrolling",
@@ -22,6 +23,7 @@ const router = createRouter({
textStyles: "/text-styles",
textLinkStyles: "/text-link-styles",
navigationBar: "/navigation-bar",
+ headingMediaProps: "/heading-media-props",
});
function PageNotFound() {
@@ -92,6 +94,12 @@ function App() {
);
+ case "headingMediaProps":
+ return (
+
+
+
+ );
default:
return ;
}
diff --git a/packages/orbit-components/cypress/integration/pages/heading-media-query-props.tsx b/packages/orbit-components/cypress/integration/pages/heading-media-query-props.tsx
new file mode 100644
index 0000000000..9e37f7a22d
--- /dev/null
+++ b/packages/orbit-components/cypress/integration/pages/heading-media-query-props.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Heading } from "@kiwicom/orbit-components";
+
+export default function HeadingMediaProps() {
+ return (
+
+ Heading
+
+ );
+}
diff --git a/packages/orbit-components/cypress/integration/pages/heading-media-query.test.ts b/packages/orbit-components/cypress/integration/pages/heading-media-query.test.ts
new file mode 100644
index 0000000000..e4d3ed3520
--- /dev/null
+++ b/packages/orbit-components/cypress/integration/pages/heading-media-query.test.ts
@@ -0,0 +1,81 @@
+import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+
+describe("Heading media query", () => {
+ it("should have correct styles for small mobile", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointMediumMobile - 10, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle1);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle1);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle1);
+
+ // Assertion of next media query style
+ element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingDisplay);
+ });
+ it("should have correct styles for medium mobile", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointMediumMobile, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingDisplay);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingDisplay);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingDisplay);
+
+ // Assertion of next media query style
+ element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle2);
+ element.should("not.have.css", "margin-bottom", defaultTokens.spaceSmall);
+ });
+
+ it("should have correct styles for large mobile", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointLargeMobile, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle2);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle2);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle2);
+ element.should("have.css", "margin", `0px 0px ${defaultTokens.spaceXSmall}`);
+
+ // Assertion of next media query style
+ element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle4);
+ element.should("not.have.css", "text-align", "center");
+ });
+
+ it("should have correct styles for tablet", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointTablet, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle4);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle4);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle4);
+ element.should("have.css", "text-align", "center");
+
+ // Assertion of next media query style
+ element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle5);
+ });
+
+ it("should have correct styles for desktop", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointDesktop, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle5);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle5);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle5);
+
+ // Assertion of next media query style
+ element.should("not.have.css", "font-size", defaultTokens.fontSizeHeadingTitle6);
+ });
+
+ it("should have correct styles for large desktop", () => {
+ cy.visit("/heading-media-props");
+ cy.viewport(defaultTokens.widthBreakpointLargeDesktop, 600);
+
+ const element = cy.findByRole("heading");
+ element.should("have.css", "font-size", defaultTokens.fontSizeHeadingTitle6);
+ element.should("have.css", "line-height", defaultTokens.lineHeightHeadingTitle6);
+ element.should("have.css", "font-weight", defaultTokens.fontWeightHeadingTitle6);
+ });
+});
diff --git a/packages/orbit-components/src/Alert/index.tsx b/packages/orbit-components/src/Alert/index.tsx
index 0d84507559..5b7b022d7a 100644
--- a/packages/orbit-components/src/Alert/index.tsx
+++ b/packages/orbit-components/src/Alert/index.tsx
@@ -19,7 +19,6 @@ import { getLinkStyle } from "../TextLink/deprecated";
import { TYPE_OPTIONS, TOKENS, CLOSE_BUTTON_DATA_TEST } from "./consts";
import { rtlSpacing, right, left } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
-import { StyledHeading } from "../Heading";
import media from "../utils/mediaQuery";
const getTypeToken =
@@ -218,7 +217,7 @@ const StyledContent = styled.div<{ inlineActions?: boolean; $type: Type; $noUnde
& .orbit-list-item,
.orbit-text,
- ${StyledHeading} {
+ .orbit-heading {
color: ${theme.orbit.paletteInkDark};
}
`}
diff --git a/packages/orbit-components/src/Heading/__tests__/index.test.tsx b/packages/orbit-components/src/Heading/__tests__/index.test.tsx
index 8f425dcca4..83a0743361 100644
--- a/packages/orbit-components/src/Heading/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/Heading/__tests__/index.test.tsx
@@ -1,21 +1,15 @@
import * as React from "react";
-import { render, screen } from "../../test-utils";
+import { render, screen, spaceAfterTokens } from "../../test-utils";
+import type { SpaceAfterSizes } from "../../common/types";
import theme from "../../defaultTheme";
import Heading from "..";
-import { ELEMENT_OPTIONS, TYPE_OPTIONS } from "../consts";
-import { getBreakpointWidth } from "../../utils/mediaQuery";
+import { ELEMENT_OPTIONS, TYPE_OPTIONS, ALIGN } from "../consts";
describe("Heading", () => {
it("should have expected DOM output", () => {
render(
-
+
My lovely heading
,
);
@@ -25,64 +19,39 @@ describe("Heading", () => {
expect(heading).toHaveAttribute("id", "id");
});
- it("should ignore unsupported props", () => {
+ it.each(Object.values(TYPE_OPTIONS))("should have expected styles from type %s", type => {
render(
- // className has to be undefined to reproduce the error
- // @ts-expect-error className is not defined
-
- My lovely heading
+
+ Title
,
);
- expect(screen.getByRole("heading", { name: "My lovely heading" }));
+ const element = screen.getByTestId(type);
+ const typeToken = type.charAt(0).toUpperCase() + type.slice(1);
+ expect(element).toHaveStyle({
+ "font-size": theme.orbit[`fontSizeHeading${typeToken}`],
+ "font-weight": theme.orbit[`fontWeightHeading${typeToken}`],
+ "line-height": theme.orbit[`lineHeightHeading${typeToken}`],
+ });
});
-});
-
-describe("Heading with every media query", () => {
- it("should have desktop styles", () => {
- const dataTest = `test`;
+ it.each(Object.values(ALIGN))("should have expected styles from align %s", align => {
render(
-
- Heading
+
+ Title
,
);
-
- expect(screen.getByTestId(dataTest)).toHaveStyleRule(
- "font-size",
- theme.orbit.fontSizeHeadingTitle4,
- { media: getBreakpointWidth("mediumMobile", theme) },
- );
-
- expect(screen.getByTestId(dataTest)).toHaveStyleRule(
- "font-size",
- theme.orbit.fontSizeHeadingTitle3,
- { media: getBreakpointWidth("largeMobile", theme) },
- );
-
- expect(screen.getByTestId(dataTest)).toHaveStyleRule(
- "font-size",
- theme.orbit.fontSizeHeadingTitle2,
- { media: getBreakpointWidth("tablet", theme) },
- );
-
- expect(screen.getByTestId(dataTest)).toHaveStyleRule(
- "font-size",
- theme.orbit.fontSizeHeadingTitle1,
- { media: getBreakpointWidth("desktop", theme) },
- );
-
- expect(screen.getByTestId(dataTest)).toHaveStyleRule(
- "font-size",
- theme.orbit.fontSizeHeadingDisplay,
- { media: getBreakpointWidth("largeDesktop", theme) },
- );
+ expect(screen.getByTestId(align)).toHaveStyle(`text-align: ${align}`);
});
+
+ it.each(Object.keys(spaceAfterTokens))(
+ "should have expected styles from spaceAfter %s",
+ space => {
+ render(
+
+ Title
+ ,
+ );
+ expect(screen.getByTestId(space)).toHaveStyle(`margin-bottom: ${spaceAfterTokens[space]}`);
+ },
+ );
});
diff --git a/packages/orbit-components/src/Heading/index.js.flow b/packages/orbit-components/src/Heading/index.js.flow
index 91a8012b68..8b173533d8 100644
--- a/packages/orbit-components/src/Heading/index.js.flow
+++ b/packages/orbit-components/src/Heading/index.js.flow
@@ -3,11 +3,9 @@
DOCUMENTATION: https://orbit.kiwi/components/heading/
*/
import * as React from "react";
-import type { StyledComponent } from "styled-components";
import type { Globals } from "../common/common.js.flow";
import type { spaceAfter } from "../common/getSpacingToken/index.js.flow";
-import type { ThemeProps } from "../defaultTheme.js.flow";
export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
@@ -44,10 +42,4 @@ export type Props = {|
+largeDesktop?: MediaQuery,
|};
-export type GetHeadingToken = (name: string, type: Type) => ({| ...ThemeProps |}) => string;
-
declare export default React.ComponentType;
-
-declare export var StyledHeading: StyledComponent;
-
-declare export var getHeadingToken: GetHeadingToken;
diff --git a/packages/orbit-components/src/Heading/index.tsx b/packages/orbit-components/src/Heading/index.tsx
index 91d345ab8e..776b1165e1 100644
--- a/packages/orbit-components/src/Heading/index.tsx
+++ b/packages/orbit-components/src/Heading/index.tsx
@@ -1,103 +1,20 @@
"use client";
import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
-import { textAlign } from "../utils/rtl";
-import type { Theme } from "../defaultTheme";
-import defaultTheme from "../defaultTheme";
-import { ELEMENT_OPTIONS, TYPE_OPTIONS, TOKENS, ALIGN } from "./consts";
-import getSpacingToken from "../common/getSpacingToken";
-import mediaQueries from "../utils/mediaQuery";
-import { DEVICES } from "../utils/mediaQuery/consts";
-import type { Props, Type } from "./types";
-
-export const getHeadingToken =
- (name: string, type: Type) =>
- ({ theme }: { theme: Theme }) => {
- const tokens = {
- [TOKENS.weightHeading]: {
- [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontWeightHeadingDisplay,
- [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontWeightHeadingDisplaySubtitle,
- [TYPE_OPTIONS.TITLE1]: theme.orbit.fontWeightHeadingTitle1,
- [TYPE_OPTIONS.TITLE2]: theme.orbit.fontWeightHeadingTitle2,
- [TYPE_OPTIONS.TITLE3]: theme.orbit.fontWeightHeadingTitle3,
- [TYPE_OPTIONS.TITLE4]: theme.orbit.fontWeightHeadingTitle4,
- [TYPE_OPTIONS.TITLE5]: theme.orbit.fontWeightHeadingTitle5,
- [TYPE_OPTIONS.TITLE6]: theme.orbit.fontWeightHeadingTitle6,
- },
- [TOKENS.sizeHeading]: {
- [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontSizeHeadingDisplay,
- [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontSizeHeadingDisplaySubtitle,
- [TYPE_OPTIONS.TITLE1]: theme.orbit.fontSizeHeadingTitle1,
- [TYPE_OPTIONS.TITLE2]: theme.orbit.fontSizeHeadingTitle2,
- [TYPE_OPTIONS.TITLE3]: theme.orbit.fontSizeHeadingTitle3,
- [TYPE_OPTIONS.TITLE4]: theme.orbit.fontSizeHeadingTitle4,
- [TYPE_OPTIONS.TITLE5]: theme.orbit.fontSizeHeadingTitle5,
- [TYPE_OPTIONS.TITLE6]: theme.orbit.fontSizeHeadingTitle6,
- },
- [TOKENS.lineHeight]: {
- [TYPE_OPTIONS.DISPLAY]: theme.orbit.lineHeightHeadingDisplay,
- [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.lineHeightHeadingDisplaySubtitle,
- [TYPE_OPTIONS.TITLE1]: theme.orbit.lineHeightHeadingTitle1,
- [TYPE_OPTIONS.TITLE2]: theme.orbit.lineHeightHeadingTitle2,
- [TYPE_OPTIONS.TITLE3]: theme.orbit.lineHeightHeadingTitle3,
- [TYPE_OPTIONS.TITLE4]: theme.orbit.lineHeightHeadingTitle4,
- [TYPE_OPTIONS.TITLE5]: theme.orbit.lineHeightHeadingTitle5,
- [TYPE_OPTIONS.TITLE6]: theme.orbit.lineHeightHeadingTitle6,
- },
- };
-
- return tokens[name][type];
- };
-
-export const StyledHeading = styled(
- ({ element: Component, className, children, dataTest, dataA11ySection, id }) => (
-
- {children}
-
- ),
-)`
- ${({ theme, inverted, viewports, type, align }) => css`
- font-family: ${theme.orbit.fontFamily};
- text-transform: ${type === TYPE_OPTIONS.TITLE5 && "uppercase"};
- color: ${inverted ? theme.orbit.colorHeadingInverted : theme.orbit.colorHeading};
- margin: 0;
- font-size: ${getHeadingToken(TOKENS.sizeHeading, type)};
- font-weight: ${getHeadingToken(TOKENS.weightHeading, type)};
- text-align: ${textAlign(align)};
- line-height: ${getHeadingToken(TOKENS.lineHeight, type)};
- margin-bottom: ${getSpacingToken};
- ${Object.values(DEVICES)
- .filter(viewport => viewports && viewports[viewport])
- .map(viewport => {
- const { type: value, spaceAfter, align: txtAlign } = viewports[viewport];
- return mediaQueries[viewport](css`
- font-size: ${getHeadingToken(TOKENS.sizeHeading, value)};
- font-weight: ${getHeadingToken(TOKENS.weightHeading, value)};
- text-align: ${textAlign(txtAlign)};
- line-height: ${getHeadingToken(TOKENS.lineHeight, value)};
- margin-bottom: ${getSpacingToken({ spaceAfter, theme })};
- `);
- })}
- `}
-`;
-
-StyledHeading.defaultProps = {
- theme: defaultTheme,
-};
+import { ELEMENT_OPTIONS, TYPE_OPTIONS, ALIGN } from "./consts";
+import { textAlignClasses } from "../common/tailwind/textAlign";
+import { spaceAfterClasses } from "../common/tailwind/spaceAfter";
+import { QUERIES } from "../utils/mediaQuery/consts";
+import type { Props } from "./types";
+import { typeClasses } from "./twClasses";
const Heading = ({
children,
type = TYPE_OPTIONS.TITLE1,
align = ALIGN.START,
- as = ELEMENT_OPTIONS.DIV,
+ as: Component = ELEMENT_OPTIONS.DIV,
dataTest,
inverted = false,
spaceAfter,
@@ -109,21 +26,39 @@ const Heading = ({
desktop,
largeDesktop,
}: Props) => {
- const viewports = { mediumMobile, largeMobile, tablet, desktop, largeDesktop };
+ const viewportSpecs = { mediumMobile, largeMobile, tablet, desktop, largeDesktop };
+ const viewportClasses = Object.values(QUERIES).map(viewport => {
+ const viewportProps = viewportSpecs[viewport];
+
+ if (viewportProps == null) {
+ return null;
+ }
+
+ const { type: vpType, align: vpAlign, spaceAfter: vpSpaceAfter } = viewportProps;
+ return [
+ vpType && typeClasses[viewport][vpType],
+ vpAlign && textAlignClasses[viewport][vpAlign],
+ vpSpaceAfter && spaceAfterClasses[viewport][vpSpaceAfter],
+ ];
+ });
+
return (
-
{children}
-
+
);
};
diff --git a/packages/orbit-components/src/Heading/twClasses.ts b/packages/orbit-components/src/Heading/twClasses.ts
new file mode 100644
index 0000000000..3676334121
--- /dev/null
+++ b/packages/orbit-components/src/Heading/twClasses.ts
@@ -0,0 +1,106 @@
+import { TYPE_OPTIONS } from "./consts";
+import { QUERIES } from "../utils/mediaQuery/consts";
+
+export const typeClasses: {
+ [K in QUERIES | TYPE_OPTIONS]: K extends QUERIES ? Record : string;
+} = {
+ [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.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",
+ [TYPE_OPTIONS.TITLE4]: "text-heading-title4 leading-heading-title4 font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]: "text-heading-title5 leading-heading-title5 font-heading-title5 uppercase",
+ [TYPE_OPTIONS.TITLE6]: "text-heading-title6 leading-heading-title6 font-heading-title6",
+ [QUERIES.MEDIUMMOBILE]: {
+ [TYPE_OPTIONS.DISPLAY]:
+ "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.TITLE1]:
+ "mm:text-heading-title1 mm:leading-heading-title1 mm:font-heading-title1",
+ [TYPE_OPTIONS.TITLE2]:
+ "mm:text-heading-title2 mm:leading-heading-title2 mm:font-heading-title2",
+ [TYPE_OPTIONS.TITLE3]:
+ "mm:text-heading-title3 mm:leading-heading-title3 mm:font-heading-title3",
+ [TYPE_OPTIONS.TITLE4]:
+ "mm:text-heading-title4 mm:leading-heading-title4 mm:font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]:
+ "mm:text-heading-title5 mm:leading-heading-title5 mm:font-heading-title5 mm:uppercase",
+ [TYPE_OPTIONS.TITLE6]:
+ "mm:text-heading-title6 mm:leading-heading-title6 mm:font-heading-title6",
+ },
+ [QUERIES.LARGEMOBILE]: {
+ [TYPE_OPTIONS.DISPLAY]:
+ "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.TITLE1]:
+ "lm:text-heading-title1 lm:leading-heading-title1 lm:font-heading-title1",
+ [TYPE_OPTIONS.TITLE2]:
+ "lm:text-heading-title2 lm:leading-heading-title2 lm:font-heading-title2",
+ [TYPE_OPTIONS.TITLE3]:
+ "lm:text-heading-title3 lm:leading-heading-title3 lm:font-heading-title3",
+ [TYPE_OPTIONS.TITLE4]:
+ "lm:text-heading-title4 lm:leading-heading-title4 lm:font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]:
+ "lm:text-heading-title5 lm:leading-heading-title5 lm:font-heading-title5 lm:uppercase",
+ [TYPE_OPTIONS.TITLE6]:
+ "lm:text-heading-title6 lm:leading-heading-title6 lm:font-heading-title6",
+ },
+ [QUERIES.TABLET]: {
+ [TYPE_OPTIONS.DISPLAY]:
+ "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.TITLE1]:
+ "tb:text-heading-title1 tb:leading-heading-title1 tb:font-heading-title1",
+ [TYPE_OPTIONS.TITLE2]:
+ "tb:text-heading-title2 tb:leading-heading-title2 tb:font-heading-title2",
+ [TYPE_OPTIONS.TITLE3]:
+ "tb:text-heading-title3 tb:leading-heading-title3 tb:font-heading-title3",
+ [TYPE_OPTIONS.TITLE4]:
+ "tb:text-heading-title4 tb:leading-heading-title4 tb:font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]:
+ "tb:text-heading-title5 tb:leading-heading-title5 tb:font-heading-title5 tb:uppercase",
+ [TYPE_OPTIONS.TITLE6]:
+ "tb:text-heading-title6 tb:leading-heading-title6 tb:font-heading-title6",
+ },
+ [QUERIES.DESKTOP]: {
+ [TYPE_OPTIONS.DISPLAY]:
+ "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.TITLE1]:
+ "de:text-heading-title1 de:leading-heading-title1 de:font-heading-title1",
+ [TYPE_OPTIONS.TITLE2]:
+ "de:text-heading-title2 de:leading-heading-title2 de:font-heading-title2",
+ [TYPE_OPTIONS.TITLE3]:
+ "de:text-heading-title3 de:leading-heading-title3 de:font-heading-title3",
+ [TYPE_OPTIONS.TITLE4]:
+ "de:text-heading-title4 de:leading-heading-title4 de:font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]:
+ "de:text-heading-title5 de:leading-heading-title5 de:font-heading-title5 de:uppercase",
+ [TYPE_OPTIONS.TITLE6]:
+ "de:text-heading-title6 de:leading-heading-title6 de:font-heading-title6",
+ },
+ [QUERIES.LARGEDESKTOP]: {
+ [TYPE_OPTIONS.DISPLAY]:
+ "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.TITLE1]:
+ "ld:text-heading-title1 ld:leading-heading-title1 ld:font-heading-title1",
+ [TYPE_OPTIONS.TITLE2]:
+ "ld:text-heading-title2 ld:leading-heading-title2 ld:font-heading-title2",
+ [TYPE_OPTIONS.TITLE3]:
+ "ld:text-heading-title3 ld:leading-heading-title3 ld:font-heading-title3",
+ [TYPE_OPTIONS.TITLE4]:
+ "ld:text-heading-title4 ld:leading-heading-title4 ld:font-heading-title4",
+ [TYPE_OPTIONS.TITLE5]:
+ "ld:text-heading-title5 ld:leading-heading-title5 ld:font-heading-title5 ld:uppercase",
+ [TYPE_OPTIONS.TITLE6]:
+ "ld:text-heading-title6 ld:leading-heading-title6 ld:font-heading-title6",
+ },
+};
diff --git a/packages/orbit-components/src/Modal/ModalHeader/index.tsx b/packages/orbit-components/src/Modal/ModalHeader/index.tsx
index ce02c37ce3..7f939ff894 100644
--- a/packages/orbit-components/src/Modal/ModalHeader/index.tsx
+++ b/packages/orbit-components/src/Modal/ModalHeader/index.tsx
@@ -5,8 +5,6 @@ import styled, { css } from "styled-components";
import transition from "../../utils/transition";
import Text from "../../Text";
-import { getHeadingToken } from "../../Heading";
-import { TOKENS, TYPE_OPTIONS } from "../../Heading/consts";
import defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import { StyledModalSection } from "../ModalSection";
@@ -14,25 +12,18 @@ import { left, right, rtlSpacing } from "../../utils/rtl";
import { ModalContext } from "../ModalContext";
import useModalContextFunctions from "../helpers/useModalContextFunctions";
import type { Props } from "./types";
-import type { Type } from "../../Heading/types";
-
-const getModalHeading =
- (type: Type, token: string) =>
- ({ theme }: { theme: typeof defaultTheme }) => {
- return getHeadingToken(token, type)({ theme });
- };
export const ModalHeading = styled.h2`
${({ theme }) => css`
margin: 0;
- font-size: ${getModalHeading(TYPE_OPTIONS.TITLE2, TOKENS.sizeHeading)};
- font-weight: ${getModalHeading(TYPE_OPTIONS.TITLE2, TOKENS.weightHeading)};
- line-height: ${getModalHeading(TYPE_OPTIONS.TITLE2, TOKENS.lineHeight)};
+ font-size: ${theme.orbit.fontSizeHeadingTitle2};
+ font-weight: ${theme.orbit.fontWeightHeadingTitle2};
+ line-height: ${theme.orbit.lineHeightHeadingTitle2};
color: ${theme.orbit.colorHeading};
${media.largeMobile(css`
- font-size: ${getModalHeading(TYPE_OPTIONS.TITLE1, TOKENS.sizeHeading)};
- font-weight: ${getModalHeading(TYPE_OPTIONS.TITLE1, TOKENS.weightHeading)};
- line-height: ${getModalHeading(TYPE_OPTIONS.TITLE1, TOKENS.lineHeight)};
+ font-size: ${theme.orbit.fontSizeHeadingTitle1};
+ font-weight: ${theme.orbit.fontWeightHeadingTitle1};
+ line-height: ${theme.orbit.lineHeightHeadingTitle1};
`)};
`}
`;
diff --git a/packages/orbit-components/src/Truncate/index.tsx b/packages/orbit-components/src/Truncate/index.tsx
index 0dd197d732..2f2b4ad4f1 100644
--- a/packages/orbit-components/src/Truncate/index.tsx
+++ b/packages/orbit-components/src/Truncate/index.tsx
@@ -3,7 +3,6 @@
import * as React from "react";
import styled from "styled-components";
-import { StyledHeading } from "../Heading";
import type { Props } from "./types";
const StyledTruncate = styled.div<{ maxWidth?: string }>`
@@ -17,7 +16,7 @@ const StyledTruncate = styled.div<{ maxWidth?: string }>`
const StyledTruncateContent = styled.div`
&,
.orbit-text,
- ${StyledHeading} {
+ .orbit-heading {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;