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

feat(SW-93): add mocked facility cards

Browse Source
This commit is contained in:
Matilda Landström
2024-08-29 16:51:19 +02:00
parent 7742fc1259
commit 93e54b4ca1
22 changed files with 632 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
components/TempDesignSystem/Card/index.tsx
View File

@@ -1,14 +1,15 @@
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getTheme } from "@/utils/cardTheme"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
import type { CardProps } from "./card"
export default function Card({
@@ -19,20 +20,9 @@ export default function Card({
bodyText,
className,
theme,
backgroundImage,
}: CardProps) {
let buttonTheme: ButtonProps["theme"] = "primaryLight"
switch (theme) {
case "one":
buttonTheme = "primaryLight"
break
case "two":
buttonTheme = "secondaryLight"
break
case "three":
buttonTheme = "tertiaryLight"
break
}
const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
return (
<article
@@ -41,48 +31,71 @@ export default function Card({
theme,
})}
>
{scriptedTopTitle ? (
<section className={styles.scriptContainer}>
<BiroScript className={styles.scriptedTitle} type="two">
{scriptedTopTitle}
</BiroScript>
</section>
) : null}
<Title as="h5" className={styles.heading} level="h3">
{heading}
</Title>
{bodyText ? (
<Body className={styles.bodyText} textAlign="center">
{bodyText}
</Body>
) : null}
<div className={styles.buttonContainer}>
{primaryButton ? (
<Button asChild theme={buttonTheme} size="small">
<Link
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
{backgroundImage && (
<Image
src={backgroundImage.url}
className={styles.image}
alt={backgroundImage.meta.alt || backgroundImage.title}
width={420}
height={320}
/>
)}
<div className={styles.content}>
{scriptedTopTitle ? (
<section className={styles.scriptContainer}>
<BiroScript
className={styles.scriptedTitle}
type="two"
tilted="small"
>
{primaryButton.title}
</Link>
</Button>
{scriptedTopTitle}
</BiroScript>
</section>
) : null}
{secondaryButton ? (
<Button
asChild
theme={buttonTheme}
size="small"
intent="secondary"
disabled
>
<Link
href={secondaryButton.href}
target={secondaryButton.openInNewTab ? "_blank" : undefined}
<Title
as="h4"
className={styles.heading}
level="h3"
textAlign="center"
textTransform="regular"
>
{heading}
</Title>
{bodyText ? (
<Body className={styles.bodyText} textAlign="center">
{bodyText}
</Body>
) : null}
<div className={styles.buttonContainer}>
{primaryButton ? (
<Button asChild theme={buttonTheme} size="small">
<Link
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
color={primaryLinkColor}
>
{primaryButton.title}
</Link>
</Button>
) : null}
{secondaryButton ? (
<Button
asChild
theme={buttonTheme}
size="small"
intent="secondary"
disabled
>
{secondaryButton.title}
</Link>
</Button>
) : null}
<Link
href={secondaryButton.href}
target={secondaryButton.openInNewTab ? "_blank" : undefined}
color={secondaryLinkColor}
>
{secondaryButton.title}
</Link>
</Button>
) : null}
</div>
</div>
</article>
)