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;