Merged in chore/BOOK-708-replace-title-component (pull request #3414)
Chore/BOOK-708 replace title component * chore(BOOK-708): replace title with typography * chore(BOOK-708): replace title with typography * chore(BOOK-708): remove Title from package.json Approved-by: Linus Flood Approved-by: Anton Gunnarsson
This commit is contained in:
Bianca Widstam
@@ -1,64 +0,0 @@
|
||||
import { Children, ReactNode } from "react"
|
||||
import { headingVariants } from "./variants"
|
||||
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
|
||||
|
||||
export interface HeadingProps
|
||||
extends
|
||||
Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
||||
VariantProps<typeof headingVariants> {
|
||||
as?: HeadingLevel
|
||||
level?: HeadingLevel
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use `Typography` instead.
|
||||
*/
|
||||
export default function Title({
|
||||
/**
|
||||
* What styling to use, based on heading level. If not provided `level`
|
||||
* will determine the styling.
|
||||
*/
|
||||
as,
|
||||
children,
|
||||
className = "",
|
||||
color,
|
||||
/**
|
||||
* What HTML tag to use. Defaults to h1.
|
||||
*/
|
||||
level = "h1",
|
||||
textAlign,
|
||||
textTransform,
|
||||
...rest
|
||||
}: HeadingProps) {
|
||||
if (checkForEmptyChildren(children) === 0) {
|
||||
return null
|
||||
}
|
||||
const Hx = level
|
||||
const classNames = headingVariants({
|
||||
className,
|
||||
color,
|
||||
textAlign,
|
||||
textTransform,
|
||||
type: as ?? level,
|
||||
})
|
||||
return (
|
||||
<Hx {...rest} className={classNames}>
|
||||
{children}
|
||||
</Hx>
|
||||
)
|
||||
}
|
||||
|
||||
function checkForEmptyChildren(children: ReactNode) {
|
||||
return Children.toArray(children).filter((child) => {
|
||||
if (child === "") {
|
||||
return false
|
||||
} else if (child == null) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}).length
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
.heading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Temporarily remove h1 styling until design tokens är updated */
|
||||
|
||||
/* .h1 {
|
||||
font-family: var(--typography-Title-1-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Title-1-Mobile-fontSize),
|
||||
2.6vw + 27px,
|
||||
var(--typography-Title-1-Desktop-fontSize)
|
||||
);
|
||||
letter-spacing: var(--typography-Title-1-letterSpacing);
|
||||
line-height: var(--typography-Title-1-lineHeight);
|
||||
text-decoration: var(--typography-Title-1-textDecoration);
|
||||
} */
|
||||
|
||||
.h1 {
|
||||
font-family: var(--typography-Title-2-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Title-2-Mobile-fontSize),
|
||||
2vw + 20px,
|
||||
var(--typography-Title-2-Desktop-fontSize)
|
||||
);
|
||||
letter-spacing: var(--typography-Title-2-letterSpacing);
|
||||
line-height: var(--typography-Title-2-lineHeight);
|
||||
text-decoration: var(--typography-Title-2-textDecoration);
|
||||
font-weight: var(--typography-Title-2-fontWeight);
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-family: var(--typography-Title-3-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Title-3-Mobile-fontSize),
|
||||
0.6vw + 27px,
|
||||
var(--typography-Title-3-Desktop-fontSize)
|
||||
);
|
||||
letter-spacing: var(--typography-Title-3-letterSpacing);
|
||||
line-height: var(--typography-Title-3-lineHeight);
|
||||
text-decoration: var(--typography-Title-3-textDecoration);
|
||||
font-weight: var(--typography-Title-3-fontWeight);
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-family: var(--typography-Title-4-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Title-4-Mobile-fontSize),
|
||||
0.6vw + 19px,
|
||||
var(--typography-Title-4-Desktop-fontSize)
|
||||
);
|
||||
letter-spacing: var(--typography-Title-4-letterSpacing);
|
||||
line-height: var(--typography-Title-4-lineHeight);
|
||||
text-decoration: var(--typography-Title-4-textDecoration);
|
||||
font-weight: var(--typography-Title-4-fontWeight);
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-family: var(--typography-Title-5-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Title-5-Mobile-fontSize),
|
||||
0.3vw + 17px,
|
||||
var(--typography-Title-5-Desktop-fontSize)
|
||||
);
|
||||
letter-spacing: var(--typography-Title-5-letterSpacing);
|
||||
line-height: var(--typography-Title-5-lineHeight);
|
||||
text-decoration: var(--typography-Title-5-textDecoration);
|
||||
font-weight: var(--typography-Title-5-fontWeight);
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.regular {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: var(--Main-Grey-100);
|
||||
}
|
||||
|
||||
.burgundy {
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.pale {
|
||||
color: var(--Scandic-Brand-Pale-Peach);
|
||||
}
|
||||
|
||||
.peach80 {
|
||||
color: var(--Scandic-Peach-80);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: var(--Scandic-Brand-Scandic-Red);
|
||||
}
|
||||
|
||||
.white {
|
||||
color: var(--UI-Opacity-White-100);
|
||||
}
|
||||
|
||||
.primaryLight {
|
||||
color: var(--Primary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.secondaryLight {
|
||||
color: var(--Secondary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.tertiaryLight {
|
||||
color: var(--Tertiary-Light-On-Surface-Text);
|
||||
}
|
||||
|
||||
.primaryDark {
|
||||
color: var(--Primary-Dark-On-Surface-Text);
|
||||
}
|
||||
|
||||
.primaryDim {
|
||||
color: var(--Primary-Dim-On-Surface-Text);
|
||||
}
|
||||
|
||||
.primaryStrong {
|
||||
color: var(--Primary-Strong-On-Surface-Text);
|
||||
}
|
||||
|
||||
.baseText {
|
||||
color: var(--Base-Text-Inverted);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./title.module.css"
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
color: {
|
||||
black: styles.black,
|
||||
burgundy: styles.burgundy,
|
||||
pale: styles.pale,
|
||||
peach80: styles.peach80,
|
||||
red: styles.red,
|
||||
white: styles.white,
|
||||
primaryLight: styles.primaryLight,
|
||||
secondaryLight: styles.secondaryLight,
|
||||
tertiaryLight: styles.tertiaryLight,
|
||||
primaryDark: styles.primaryDark,
|
||||
primaryDim: styles.primaryDim,
|
||||
primaryStrong: styles.primaryStrong,
|
||||
baseText: styles.baseText,
|
||||
},
|
||||
textAlign: {
|
||||
center: styles.center,
|
||||
left: styles.left,
|
||||
},
|
||||
textTransform: {
|
||||
capitalize: styles.capitalize,
|
||||
regular: styles.regular,
|
||||
uppercase: styles.uppercase,
|
||||
},
|
||||
type: {
|
||||
h1: styles.h1,
|
||||
h2: styles.h2,
|
||||
h3: styles.h3,
|
||||
h4: styles.h4,
|
||||
h5: styles.h4,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "burgundy",
|
||||
textAlign: "left",
|
||||
textTransform: "uppercase",
|
||||
type: "h1",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const headingVariants = cva(styles.heading, config)
|
||||
@@ -180,7 +180,6 @@
|
||||
"./TextArea": "./lib/components/TextArea/index.tsx",
|
||||
"./TextLink": "./lib/components/TextLink/index.tsx",
|
||||
"./TextLinkButton": "./lib/components/TextLinkButton/index.tsx",
|
||||
"./Title": "./lib/components/Title/index.tsx",
|
||||
"./Toast": "./lib/components/Toasts/index.tsx",
|
||||
"./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
|
||||
"./Tooltip": "./lib/components/Tooltip/index.tsx",
|
||||
|
||||
Reference in New Issue
Block a user