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
63
packages/design-system/lib/components/Title/index.tsx
Normal file
63
packages/design-system/lib/components/Title/index.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
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
|
||||
}
|
||||
143
packages/design-system/lib/components/Title/title.module.css
Normal file
143
packages/design-system/lib/components/Title/title.module.css
Normal file
@@ -0,0 +1,143 @@
|
||||
.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);
|
||||
}
|
||||
47
packages/design-system/lib/components/Title/variants.ts
Normal file
47
packages/design-system/lib/components/Title/variants.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
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