Merged in chore/sw-3145-move-subtitle (pull request #2516)
chore(SW-3145): Move Title and Subtitle to design-system * Move Title and Subtitle to design-system * Fix export Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
@@ -1,29 +0,0 @@
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
|
||||
import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
|
||||
import { subtitleVariants } from "./variants"
|
||||
|
||||
import type { SubtitleProps } from "./subtitle"
|
||||
|
||||
export default function Subtitle({
|
||||
asChild = false,
|
||||
className = "",
|
||||
color,
|
||||
textAlign,
|
||||
textTransform,
|
||||
type,
|
||||
...props
|
||||
}: SubtitleProps) {
|
||||
if (checkForEmptyChildren(props.children) === 0) {
|
||||
return null
|
||||
}
|
||||
const Comp = asChild ? Slot : "p"
|
||||
const classNames = subtitleVariants({
|
||||
className,
|
||||
color,
|
||||
textAlign,
|
||||
textTransform,
|
||||
type,
|
||||
})
|
||||
return <Comp className={classNames} {...props} />
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
.subtitle {
|
||||
margin: var(--Spacing-x0);
|
||||
padding: var(--Spacing-x0);
|
||||
}
|
||||
|
||||
.one {
|
||||
font-family: var(--typography-Subtitle-1-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Subtitle-1-Mobile-fontSize),
|
||||
0.3vw + 15px,
|
||||
var(--typography-Subtitle-1-Desktop-fontSize)
|
||||
);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--typography-Subtitle-1-letterSpacing);
|
||||
line-height: var(--typography-Subtitle-1-lineHeight);
|
||||
}
|
||||
|
||||
.two {
|
||||
font-family: var(--typography-Subtitle-2-fontFamily);
|
||||
font-size: clamp(
|
||||
var(--typography-Subtitle-2-Mobile-fontSize),
|
||||
0.3vw + 15px,
|
||||
var(--typography-Subtitle-2-Desktop-fontSize)
|
||||
);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--typography-Subtitle-2-letterSpacing);
|
||||
line-height: var(--typography-Subtitle-2-lineHeight);
|
||||
}
|
||||
|
||||
.regular {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: var(--Main-Grey-100);
|
||||
}
|
||||
|
||||
.burgundy {
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.pale {
|
||||
color: var(--Scandic-Brand-Pale-Peach);
|
||||
}
|
||||
|
||||
.baseTextHighContrast {
|
||||
color: var(--Base-Text-High-contrast);
|
||||
}
|
||||
|
||||
.uiTextHighContrast {
|
||||
color: var(--UI-Text-High-contrast);
|
||||
}
|
||||
|
||||
.uiTextMediumContrast {
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.uiTextPlaceholder {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: var(--Scandic-Brand-Scandic-Red);
|
||||
}
|
||||
|
||||
.baseTextDisabled {
|
||||
color: var(--Base-Text-Disabled);
|
||||
}
|
||||
|
||||
.mainGrey60 {
|
||||
color: var(--Main-Grey-60);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { subtitleVariants } from "./variants"
|
||||
|
||||
export interface SubtitleProps
|
||||
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
||||
VariantProps<typeof subtitleVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./subtitle.module.css"
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
color: {
|
||||
black: styles.black,
|
||||
burgundy: styles.burgundy,
|
||||
baseTextDisabled: styles.baseTextDisabled,
|
||||
pale: styles.pale,
|
||||
baseTextHighContrast: styles.baseTextHighContrast,
|
||||
uiTextHighContrast: styles.uiTextHighContrast,
|
||||
uiTextMediumContrast: styles.uiTextMediumContrast,
|
||||
uiTextPlaceholder: styles.uiTextPlaceholder,
|
||||
red: styles.red,
|
||||
mainGrey60: styles.mainGrey60,
|
||||
},
|
||||
textAlign: {
|
||||
center: styles.center,
|
||||
left: styles.left,
|
||||
right: styles.right,
|
||||
},
|
||||
textTransform: {
|
||||
regular: styles.regular,
|
||||
uppercase: styles.uppercase,
|
||||
capitalize: styles.capitalize,
|
||||
},
|
||||
type: {
|
||||
one: styles.one,
|
||||
two: styles.two,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "black",
|
||||
textAlign: "left",
|
||||
textTransform: "regular",
|
||||
type: "one",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const subtitleVariants = cva(styles.subtitle, config)
|
||||
@@ -1,39 +0,0 @@
|
||||
import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
|
||||
import { headingVariants } from "./variants"
|
||||
|
||||
import type { HeadingProps } from "./title"
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -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,12 +0,0 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { headingVariants } from "./variants"
|
||||
|
||||
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
|
||||
|
||||
export interface HeadingProps
|
||||
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
||||
VariantProps<typeof headingVariants> {
|
||||
as?: HeadingLevel
|
||||
level?: HeadingLevel
|
||||
}
|
||||
@@ -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)
|
||||
Reference in New Issue
Block a user