scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-556): removed old caption label component, fixed outline on button

Browse Source
This commit is contained in:
Christian Andolf
2024-10-21 10:03:48 +02:00
parent fde233dac4
commit 3508253afe
6 changed files with 19 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
View File

@@ -14,7 +14,6 @@ import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts" import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -39,13 +38,15 @@ export default function Surprises({
return null return null
} }
const surprise = surprises[selectedSurprise]
function showSurprise(n: number) { function showSurprise(n: number) {
setSelectedSurprise((surprise) => surprise + n) setSelectedSurprise((surprise) => surprise + n)
} }
function viewRewards(id?: string) { function viewRewards() {
if (id) { if (surprise.id) {
update.mutate({ id }) update.mutate({ id: surprise.id })
} }
} }
@@ -69,13 +70,12 @@ export default function Surprises({
} }
} }
const surprise = surprises[selectedSurprise]
return ( return (
<ModalOverlay <ModalOverlay
className={styles.overlay} className={styles.overlay}
isOpen={open} isOpen={open}
onOpenChange={setOpen} onOpenChange={setOpen}
isKeyboardDismissDisabled
> >
<Modal className={styles.modal}> <Modal className={styles.modal}>
<Dialog aria-label="Surprises" className={styles.dialog}> <Dialog aria-label="Surprises" className={styles.dialog}>
@@ -84,7 +84,7 @@ export default function Surprises({
<> <>
<div className={styles.top}> <div className={styles.top}>
{surprises.length > 1 && showSurprises && ( {surprises.length > 1 && showSurprises && (
<CaptionLabel uppercase> <Caption type="label" uppercase>
{intl.formatMessage( {intl.formatMessage(
{ id: "{amount} out of {total}" }, { id: "{amount} out of {total}" },
{ {
@@ -92,7 +92,7 @@ export default function Surprises({
total: surprises.length, total: surprises.length,
} }
)} )}
</CaptionLabel> </Caption>
)} )}
<button <button
onClick={() => closeModal(close)} onClick={() => closeModal(close)}
@@ -123,7 +123,6 @@ export default function Surprises({
<> <>
<nav className={styles.nav}> <nav className={styles.nav}>
<Button <Button
wrapping
variant="icon" variant="icon"
intent="tertiary" intent="tertiary"
disabled={selectedSurprise === 0} disabled={selectedSurprise === 0}
@@ -138,7 +137,6 @@ export default function Surprises({
{intl.formatMessage({ id: "Previous" })} {intl.formatMessage({ id: "Previous" })}
</Button> </Button>
<Button <Button
wrapping
variant="icon" variant="icon"
intent="tertiary" intent="tertiary"
disabled={selectedSurprise === surprises.length - 1} disabled={selectedSurprise === surprises.length - 1}
@@ -178,7 +176,7 @@ export default function Surprises({
</Caption> </Caption>
</Surprise> </Surprise>
) : ( ) : (
<Surprise title={surprise.title}> <Surprise title={intl.formatMessage({ id: "Surprise!" })}>
<Body textAlign="center"> <Body textAlign="center">
{intl.formatMessage({ {intl.formatMessage({
id: "We have a special gift waiting for you!", id: "We have a special gift waiting for you!",
@@ -195,12 +193,13 @@ export default function Surprises({
<Button <Button
intent="primary" intent="primary"
onPress={() => { onPress={() => {
viewRewards(surprise.id) viewRewards()
setShowSurprises(true) setShowSurprises(true)
}} }}
size="medium" size="medium"
theme="base" theme="base"
fullWidth fullWidth
autoFocus
> >
{intl.formatMessage( {intl.formatMessage(
{ {

8
components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css
View File

@@ -103,6 +103,14 @@
} }
.nav button { .nav button {
&:nth-child(1) {
padding-left: 0;
}
&:nth-child(2) {
padding-right: 0;
}
&[disabled] { &[disabled] {
visibility: hidden; visibility: hidden;
} }

77
components/TempDesignSystem/Text/CaptionLabel/captionLabel.module.css
View File

@@ -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;
}

10
components/TempDesignSystem/Text/CaptionLabel/captionLabel.ts
View File

@@ -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
}

32
components/TempDesignSystem/Text/CaptionLabel/index.tsx
View File

@@ -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} />
}

58
components/TempDesignSystem/Text/CaptionLabel/variants.ts
View File

@@ -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
)