Merged in chore/sw-3145-move-caption (pull request #2503)
chore(SW-3145): Move Caption to design-system * Move Caption to design-system * Mark Caption as deprecated Approved-by: Linus Flood Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
@@ -1,127 +0,0 @@
|
||||
p.caption {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.captionFontOnly {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: var(--typography-Caption-Bold-fontFamily);
|
||||
font-size: var(--typography-Caption-Bold-fontSize);
|
||||
font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
|
||||
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
|
||||
line-height: var(--typography-Caption-Bold-lineHeight);
|
||||
text-decoration: var(--typography-Caption-Bold-textDecoration);
|
||||
}
|
||||
|
||||
.labels {
|
||||
font-family: var(--typography-Caption-Labels-fontFamily);
|
||||
font-size: var(--typography-Caption-Labels-fontSize);
|
||||
font-weight: var(--typography-Caption-Labels-fontWeight);
|
||||
letter-spacing: var(--typography-Caption-Labels-letterSpacing);
|
||||
line-height: var(--typography-Caption-Labels-lineHeight);
|
||||
text-decoration: var(--typography-Caption-Labels-textDecoration);
|
||||
}
|
||||
|
||||
.underline {
|
||||
font-family: var(--typography-Caption-Underline-fontFamily);
|
||||
font-size: var(--typography-Caption-Underline-fontSize);
|
||||
font-weight: var(--typography-Caption-Underline-fontWeight);
|
||||
letter-spacing: var(--typography-Caption-Underline-letterSpacing);
|
||||
line-height: var(--typography-Caption-Underline-lineHeight);
|
||||
text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
|
||||
}
|
||||
|
||||
.regular {
|
||||
font-family: var(--typography-Caption-Regular-fontFamily);
|
||||
font-size: var(--typography-Caption-Regular-fontSize);
|
||||
font-weight: var(--typography-Caption-Regular-fontWeight);
|
||||
letter-spacing: var(--typography-Caption-Regular-letterSpacing);
|
||||
line-height: var(--typography-Caption-Regular-lineHeight);
|
||||
text-decoration: var(--typography-Caption-Regular-textDecoration);
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.striked {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.baseTextAccent {
|
||||
color: var(--Base-Text-Accent);
|
||||
}
|
||||
|
||||
.black {
|
||||
color: var(--Main-Grey-100);
|
||||
}
|
||||
|
||||
.burgundy {
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.pale {
|
||||
color: var(--Scandic-Brand-Pale-Peach);
|
||||
}
|
||||
|
||||
.textMediumContrast {
|
||||
color: var(--Base-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.baseTextHighContrast {
|
||||
color: var(--Base-Text-High-contrast);
|
||||
}
|
||||
|
||||
.baseTextMediumContrast {
|
||||
color: var(--Base-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: var(--Scandic-Brand-Scandic-Red);
|
||||
}
|
||||
|
||||
.white {
|
||||
color: var(--UI-Opacity-White-100);
|
||||
}
|
||||
|
||||
.uiTextActive {
|
||||
color: var(--UI-Text-Active);
|
||||
}
|
||||
|
||||
.uiTextMediumContrast {
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.uiTextHighContrast {
|
||||
color: var(--UI-Text-High-contrast);
|
||||
}
|
||||
|
||||
.uiTextPlaceholder {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--Base-Text-Disabled);
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: var(--UI-Semantic-Success);
|
||||
}
|
||||
.blue {
|
||||
color: var(--UI-Semantic-Information);
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { captionVariants } from "./variants"
|
||||
|
||||
export interface CaptionProps
|
||||
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
||||
VariantProps<typeof captionVariants> {
|
||||
asChild?: boolean
|
||||
fontOnly?: boolean
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
|
||||
import { captionVariants, fontOnlycaptionVariants } from "./variants"
|
||||
|
||||
import type { CaptionProps } from "./caption"
|
||||
|
||||
export default function Caption({
|
||||
asChild = false,
|
||||
className = "",
|
||||
color,
|
||||
fontOnly = false,
|
||||
textAlign,
|
||||
textTransform,
|
||||
uppercase,
|
||||
striked,
|
||||
type,
|
||||
...props
|
||||
}: CaptionProps) {
|
||||
const Comp = asChild ? Slot : "p"
|
||||
const classNames = fontOnly
|
||||
? fontOnlycaptionVariants({
|
||||
className,
|
||||
textTransform,
|
||||
uppercase,
|
||||
striked,
|
||||
type,
|
||||
})
|
||||
: captionVariants({
|
||||
className,
|
||||
color,
|
||||
textTransform,
|
||||
textAlign,
|
||||
uppercase,
|
||||
striked,
|
||||
type,
|
||||
})
|
||||
return <Comp className={classNames} {...props} />
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./caption.module.css"
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
type: {
|
||||
regular: styles.regular,
|
||||
bold: styles.bold,
|
||||
label: styles.labels,
|
||||
underline: styles.underline,
|
||||
},
|
||||
color: {
|
||||
baseTextAccent: styles.baseTextAccent,
|
||||
black: styles.black,
|
||||
burgundy: styles.burgundy,
|
||||
pale: styles.pale,
|
||||
textMediumContrast: styles.textMediumContrast,
|
||||
red: styles.red,
|
||||
white: styles.white,
|
||||
green: styles.green,
|
||||
blue: styles.blue,
|
||||
uiTextHighContrast: styles.uiTextHighContrast,
|
||||
uiTextActive: styles.uiTextActive,
|
||||
uiTextMediumContrast: styles.uiTextMediumContrast,
|
||||
uiTextPlaceholder: styles.uiTextPlaceholder,
|
||||
disabled: styles.disabled,
|
||||
baseTextHighContrast: styles.baseTextHighContrast,
|
||||
baseTextMediumContrast: styles.baseTextMediumContrast,
|
||||
},
|
||||
textTransform: {
|
||||
uppercase: styles.uppercase,
|
||||
},
|
||||
textAlign: {
|
||||
center: styles.center,
|
||||
left: styles.left,
|
||||
right: styles.right,
|
||||
},
|
||||
uppercase: {
|
||||
true: styles.uppercase,
|
||||
},
|
||||
striked: {
|
||||
true: styles.striked,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "black",
|
||||
type: "regular",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const captionVariants = cva(styles.caption, config)
|
||||
|
||||
const fontOnlyConfig = {
|
||||
variants: {
|
||||
type: {
|
||||
regular: styles.regular,
|
||||
bold: styles.bold,
|
||||
label: styles.labels,
|
||||
underline: styles.underline,
|
||||
},
|
||||
textTransform: {
|
||||
uppercase: styles.uppercase,
|
||||
},
|
||||
uppercase: {
|
||||
true: styles.uppercase,
|
||||
},
|
||||
striked: {
|
||||
true: styles.striked,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
type: "regular",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const fontOnlycaptionVariants = cva(
|
||||
styles.captionFontOnly,
|
||||
fontOnlyConfig
|
||||
)
|
||||
Reference in New Issue
Block a user