fix(SW-556): removed old caption label component, fixed outline on button
This commit is contained in:
Christian Andolf
@@ -14,7 +14,6 @@ import Button from "@/components/TempDesignSystem/Button"
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
import { toast } from "@/components/TempDesignSystem/Toasts"
|
||||
import useLang from "@/hooks/useLang"
|
||||
@@ -39,13 +38,15 @@ export default function Surprises({
|
||||
return null
|
||||
}
|
||||
|
||||
const surprise = surprises[selectedSurprise]
|
||||
|
||||
function showSurprise(n: number) {
|
||||
setSelectedSurprise((surprise) => surprise + n)
|
||||
}
|
||||
|
||||
function viewRewards(id?: string) {
|
||||
if (id) {
|
||||
update.mutate({ id })
|
||||
function viewRewards() {
|
||||
if (surprise.id) {
|
||||
update.mutate({ id: surprise.id })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,13 +70,12 @@ export default function Surprises({
|
||||
}
|
||||
}
|
||||
|
||||
const surprise = surprises[selectedSurprise]
|
||||
|
||||
return (
|
||||
<ModalOverlay
|
||||
className={styles.overlay}
|
||||
isOpen={open}
|
||||
onOpenChange={setOpen}
|
||||
isKeyboardDismissDisabled
|
||||
>
|
||||
<Modal className={styles.modal}>
|
||||
<Dialog aria-label="Surprises" className={styles.dialog}>
|
||||
@@ -84,7 +84,7 @@ export default function Surprises({
|
||||
<>
|
||||
<div className={styles.top}>
|
||||
{surprises.length > 1 && showSurprises && (
|
||||
<CaptionLabel uppercase>
|
||||
<Caption type="label" uppercase>
|
||||
{intl.formatMessage(
|
||||
{ id: "{amount} out of {total}" },
|
||||
{
|
||||
@@ -92,7 +92,7 @@ export default function Surprises({
|
||||
total: surprises.length,
|
||||
}
|
||||
)}
|
||||
</CaptionLabel>
|
||||
</Caption>
|
||||
)}
|
||||
<button
|
||||
onClick={() => closeModal(close)}
|
||||
@@ -123,7 +123,6 @@ export default function Surprises({
|
||||
<>
|
||||
<nav className={styles.nav}>
|
||||
<Button
|
||||
wrapping
|
||||
variant="icon"
|
||||
intent="tertiary"
|
||||
disabled={selectedSurprise === 0}
|
||||
@@ -138,7 +137,6 @@ export default function Surprises({
|
||||
{intl.formatMessage({ id: "Previous" })}
|
||||
</Button>
|
||||
<Button
|
||||
wrapping
|
||||
variant="icon"
|
||||
intent="tertiary"
|
||||
disabled={selectedSurprise === surprises.length - 1}
|
||||
@@ -178,7 +176,7 @@ export default function Surprises({
|
||||
</Caption>
|
||||
</Surprise>
|
||||
) : (
|
||||
<Surprise title={surprise.title}>
|
||||
<Surprise title={intl.formatMessage({ id: "Surprise!" })}>
|
||||
<Body textAlign="center">
|
||||
{intl.formatMessage({
|
||||
id: "We have a special gift waiting for you!",
|
||||
@@ -195,12 +193,13 @@ export default function Surprises({
|
||||
<Button
|
||||
intent="primary"
|
||||
onPress={() => {
|
||||
viewRewards(surprise.id)
|
||||
viewRewards()
|
||||
setShowSurprises(true)
|
||||
}}
|
||||
size="medium"
|
||||
theme="base"
|
||||
fullWidth
|
||||
autoFocus
|
||||
>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
|
||||
@@ -103,6 +103,14 @@
|
||||
}
|
||||
|
||||
.nav button {
|
||||
&:nth-child(1) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
p.caption {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.captionFontOnly {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
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-transform: uppercase;
|
||||
}
|
||||
|
||||
.regular {
|
||||
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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--Base-Text-Disabled);
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { captionVariants } from "./variants"
|
||||
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
export interface CaptionLabelProps
|
||||
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
|
||||
VariantProps<typeof captionVariants> {
|
||||
asChild?: boolean
|
||||
fontOnly?: boolean
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
|
||||
import { captionVariants, fontOnlycaptionVariants } from "./variants"
|
||||
|
||||
import type { CaptionLabelProps } from "./captionLabel"
|
||||
|
||||
export default function CaptionLabel({
|
||||
asChild = false,
|
||||
className = "",
|
||||
color,
|
||||
fontOnly = false,
|
||||
textAlign,
|
||||
textTransform,
|
||||
uppercase,
|
||||
...props
|
||||
}: CaptionLabelProps) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
const classNames = fontOnly
|
||||
? fontOnlycaptionVariants({
|
||||
className,
|
||||
textTransform,
|
||||
uppercase,
|
||||
})
|
||||
: captionVariants({
|
||||
className,
|
||||
color,
|
||||
textTransform,
|
||||
textAlign,
|
||||
uppercase,
|
||||
})
|
||||
return <Comp className={classNames} {...props} />
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./captionLabel.module.css"
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
color: {
|
||||
baseTextAccent: styles.baseTextAccent,
|
||||
black: styles.black,
|
||||
burgundy: styles.burgundy,
|
||||
pale: styles.pale,
|
||||
textMediumContrast: styles.textMediumContrast,
|
||||
red: styles.red,
|
||||
white: styles.white,
|
||||
uiTextHighContrast: styles.uiTextHighContrast,
|
||||
uiTextActive: styles.uiTextActive,
|
||||
uiTextMediumContrast: styles.uiTextMediumContrast,
|
||||
disabled: styles.disabled,
|
||||
},
|
||||
textTransform: {
|
||||
regular: styles.regular,
|
||||
uppercase: styles.uppercase,
|
||||
},
|
||||
textAlign: {
|
||||
center: styles.center,
|
||||
left: styles.left,
|
||||
},
|
||||
uppercase: {
|
||||
true: styles.uppercase,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "black",
|
||||
textTransform: "regular",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const captionVariants = cva(styles.caption, config)
|
||||
|
||||
const fontOnlyConfig = {
|
||||
variants: {
|
||||
textTransform: {
|
||||
regular: styles.regular,
|
||||
uppercase: styles.uppercase,
|
||||
},
|
||||
uppercase: {
|
||||
true: styles.uppercase,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
textTransform: "regular",
|
||||
},
|
||||
} as const
|
||||
|
||||
export const fontOnlycaptionVariants = cva(
|
||||
styles.captionFontOnly,
|
||||
fontOnlyConfig
|
||||
)
|
||||
Reference in New Issue
Block a user