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

22
components/TempDesignSystem/Card/CardImage/cardImage.module.css Normal file
View File

@@ -0,0 +1,22 @@
.image {
object-fit: cover;
overflow: hidden;
width: 100%;
min-height: 180px; /* Fixed height from Figma */
border-radius: var(--Corner-radius-Medium);
}
.imageContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--Spacing-x-quarter);
}
.card {
height: 254px; /* Fixed height from Figma */
}
.container {
display: grid;
gap: var(--Spacing-x-quarter);
}

34
components/TempDesignSystem/Card/CardImage/index.tsx Normal file
View File

@@ -0,0 +1,34 @@
import Image from "@/components/Image"
import Card from ".."
import styles from "./cardImage.module.css"
import type { CardImageProps } from "@/types/components/cardImage"
export default function CardImage({
card,
imageCards,
className,
}: CardImageProps) {
return (
<article className={`${styles.container} ${className}`}>
<div className={styles.imageContainer}>
{imageCards.map(
({ backgroundImage }) =>
backgroundImage && (
<Image
key={backgroundImage.id}
src={backgroundImage.url}
className={styles.image}
alt={backgroundImage.title}
width={180}
height={180}
/>
)
)}
</div>
<Card {...card} className={styles.card} />
</article>
)
}

59
components/TempDesignSystem/Card/card.module.css
View File

@@ -1,15 +1,29 @@
.container {
align-items: center;
display: flex;
border-radius: var(--Corner-radius-xLarge);
border-radius: var(--Corner-radius-Medium);
flex-direction: column;
gap: var(--Spacing-x2);
height: 480px;
height: 320px; /* Fixed height from Figma */
justify-content: center;
margin-right: var(--Spacing-x2);
padding: var(--Spacing-x0) var(--Spacing-x4);
text-align: center;
width: 100%;
text-wrap: balance;
overflow: hidden;
}
.image {
object-fit: cover;
overflow: hidden;
width: 100%;
height: auto;
min-height: 320px; /* Fixed height from Figma */
}
.content {
margin: var(--Spacing-x0) var(--Spacing-x4);
display: grid;
gap: var(--Spacing-x2);
}
.themeOne {
@@ -33,6 +47,42 @@
background: var(--Tertiary-Light-Surface-Normal);
}
.themePrimaryDark {
--font-color: var(--Primary-Dark-On-Surface-Text);
--script-color: var(--Primary-Dark-On-Surface-Accent);
background: var(--Primary-Dark-Surface-Normal);
}
.themePrimaryDim {
--font-color: var(--Primary-Light-On-Surface-Text);
--script-color: var(--Primary-Dim-On-Surface-Accent);
background: var(--Primary-Dim-Surface-Normal);
}
.themePrimaryInverted {
--font-color: var(--Primary-Light-On-Surface-Text);
--script-color: var(--Primary-Light-On-Surface-Accent);
background: var(--Base-Surface-Primary-light-Normal);
}
.themePrimaryStrong {
--font-color: var(--Primary-Strong-On-Surface-Text);
--script-color: var(--Primary-Strong-On-Surface-Accent);
background: var(--Primary-Strong-Surface-Normal);
}
.themeImage {
--font-color: var(--Base-Text-Inverted);
--script-color: var(--Base-Text-Inverted);
border: 1px; /* px from Figma */
border-color: var(--Base-Border-Subtle);
}
.scriptContainer {
display: grid;
gap: var(--Spacing-x1);
@@ -42,7 +92,6 @@ span.scriptedTitle {
color: var(--script-color);
padding: var(--Spacing-x1);
margin: 0;
transform: rotate(-3deg);
}
.heading {

4
components/TempDesignSystem/Card/card.ts
View File

@@ -2,6 +2,8 @@ import { cardVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
import type { ImageVaultAsset } from "@/types/components/imageVault"
export interface CardProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof cardVariants> {
@@ -20,5 +22,5 @@ export interface CardProps
scriptedTopTitle?: string | null
heading?: string | null
bodyText?: string | null
backgroundImage?: { url: string }
backgroundImage?: ImageVaultAsset
}

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

7
components/TempDesignSystem/Card/variants.ts
View File

@@ -8,6 +8,13 @@ export const cardVariants = cva(styles.container, {
one: styles.themeOne,
two: styles.themeTwo,
three: styles.themeThree,
primaryDark: styles.themePrimaryDark,
primaryDim: styles.themePrimaryDim,
primaryInverted: styles.themePrimaryInverted,
primaryStrong: styles.themePrimaryStrong,
image: styles.themeImage,
},
},
defaultVariants: {

4
components/TempDesignSystem/Link/link.module.css
View File

@@ -130,6 +130,10 @@
color: var(--Primary-Light-On-Surface-Accent);
}
.red {
color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}
.peach80:hover,
.peach80:active {
color: var(--Primary-Light-On-Surface-Hover);

1
components/TempDesignSystem/Link/variants.ts
View File

@@ -14,6 +14,7 @@ export const linkVariants = cva(styles.link, {
pale: styles.pale,
peach80: styles.peach80,
white: styles.white,
red: styles.red,
},
size: {
small: styles.small,

12
components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

@@ -26,10 +26,14 @@
line-height: var(--typography-Script-2-lineHeight);
}
.tiltedSmall {
.tiltedExtraSmall {
transform: rotate(-2deg);
}
.tiltedSmall {
transform: rotate(-3deg);
}
.tiltedMedium {
transform: rotate(-4deg) translate(0px, -15px);
}
@@ -59,7 +63,7 @@
}
.peach80 {
color: var(--Scandic-Peach-80);
color: var(--Base-Text-Medium-contrast);
}
.plosa {
@@ -69,3 +73,7 @@
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.pink {
color: var(--Primary-Dark-On-Surface-Accent);
}

2
components/TempDesignSystem/Text/BiroScript/variants.ts
View File

@@ -11,6 +11,7 @@ const config = {
peach80: styles.peach80,
primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red,
pink: styles.pink,
},
textAlign: {
center: styles.center,
@@ -21,6 +22,7 @@ const config = {
two: styles.two,
},
tilted: {
extraSmall: styles.tiltedExtraSmall,
small: styles.tiltedSmall,
medium: styles.tiltedMedium,
large: styles.tiltedLarge,