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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/MyProfile/Card/card.module.css
View File

@@ -1,6 +1,6 @@
.card {
background-color: var(--some-grey-color, #F2F2F2);
border-radius: 0.4rem;
min-height: 15.6rem;
padding: 3.8rem;
}
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-Small);
min-height: 156px;
padding: var(--Spacing-x5);
}

47
components/MyProfile/Field/field.module.css
View File

@@ -1,47 +0,0 @@
.container {
align-content: flex-start;
align-items: center;
display: grid;
gap: 0.4rem 1.7rem;
grid-template-areas:
"icon label"
"icon content";
grid-template-columns: auto 1fr;
justify-content: flex-start;
}
.icon {
align-items: center;
background-color: var(--some-white-color, #fff);
border-radius: 50%;
display: flex;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
grid-area: icon;
height: 3rem;
justify-content: center;
line-height: 1.9rem;
width: 3rem;
}
.label,
.content {
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 400;
letter-spacing: -1.5%;
line-height: 2.4rem;
}
.label {
color: var(--some-black-color, #404040);
grid-area: label;
font-size: 1.6rem;
}
.content {
color: var(--some-black-color, #000);
grid-area: content;
font-size: 1.8rem;
justify-self: stretch;
}

26
components/MyProfile/Field/index.tsx
View File

@@ -1,26 +0,0 @@
import styles from "./field.module.css"
export default function Field(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
return <div {...props} className={styles.container} />
}
function Icon({ children }: React.PropsWithChildren) {
return <span className={styles.icon}>{children}</span>
}
function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
return <label {...props} className={styles.label} />
}
function TextLabel({ children }: React.PropsWithChildren) {
return <span className={styles.label}>{children}</span>
}
function Content({ children }: React.PropsWithChildren) {
return <div className={styles.content}>{children}</div>
}
Field.Content = Content
Field.Icon = Icon
Field.Label = Label
Field.TextLabel = TextLabel

9
components/MyProfile/Profile/Container.tsx
View File

@@ -1,6 +1,6 @@
import { cva } from "class-variance-authority"
import Image from "@/components/Image"
import { AccountCircleIcon } from "@/components/Icons"
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
@@ -19,12 +19,7 @@ export default function Container({
return (
<Card className={profileStyles({ className })} {...props}>
<header className={styles.header}>
<Image
alt="Account Icon"
height={40}
src="/_static/icons/account_circle.svg"
width={40}
/>
<AccountCircleIcon />
<Title as="h4" level="h2">
{user.name}
</Title>

137
components/MyProfile/Profile/Edit/Form/Content.tsx
View File

@@ -1,146 +1,27 @@
"use client"
import { useEffect } from "react"
import { useFormStatus } from "react-dom"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
// import { useWatch } from "react-hook-form"
// import { useIntl } from "react-intl"
import { useProfileStore } from "@/stores/edit-profile"
import {
CalendarIcon,
EmailIcon,
HouseIcon,
PhoneIcon,
} from "@/components/Icons"
import Field from "@/components/MyProfile/Field"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
export default function FormContent({ control }: EditFormContentProps) {
const { formatMessage } = useIntl()
// const { formatMessage } = useIntl()
const { pending } = useFormStatus()
const setIsPending = useProfileStore((store) => store.setIsPending)
const country = useWatch({ name: "address.country" })
// const country = useWatch({ name: "address.country" })
useEffect(() => {
setIsPending(pending)
}, [pending, setIsPending])
const city = formatMessage({ id: "City" })
const email = formatMessage({ id: "Email" })
const street = formatMessage({ id: "Street" })
const zipCode = formatMessage({ id: "Zip code" })
// const city = formatMessage({ id: "City" })
// const email = formatMessage({ id: "Email" })
// const street = formatMessage({ id: "Street" })
// const zipCode = formatMessage({ id: "Zip code" })
return (
<>
<Field>
<Field.Icon>{country}</Field.Icon>
<Field.Label htmlFor="address.country">
*{formatMessage({ id: "Country" })}
</Field.Label>
<Field.Content>
<CountrySelect name="address.country" />
</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.Label htmlFor="dateOfBirth">
*{formatMessage({ id: "Date of Birth" })}
</Field.Label>
<Field.Content>
<DateSelect
control={control}
name="dateOfBirth"
registerOptions={{ required: true }}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.Label htmlFor="email">*{email}</Field.Label>
<Field.Content>
<Input
aria-label={email}
control={control}
name="email"
placeholder={email}
registerOptions={{ required: true }}
type="email"
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.Label htmlFor="phoneNumber">
*{formatMessage({ id: "Phone" })}
</Field.Label>
<Field.Content>
<Phone countrySelectName="address.country" name="phoneNumber" />
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.streetAddress">
{formatMessage({ id: "Address" })}
</Field.Label>
<Field.Content>
<Input
aria-label={street}
control={control}
name="address.streetAddress"
placeholder={street}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.city">
{formatMessage({ id: "City/State" })}
</Field.Label>
<Field.Content>
<Input
aria-label={city}
control={control}
name="address.city"
placeholder={city}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
<Field.Content>
<Input
aria-label={zipCode}
control={control}
name="address.zipCode"
placeholder={zipCode}
registerOptions={{ required: true }}
/>
</Field.Content>
</Field>
</>
)
return <></>
}

2
components/MyProfile/Profile/Edit/Form/form.module.css
View File

@@ -1,5 +1,5 @@
.form {
display: grid;
gap: 1.8rem;
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
}

74
components/MyProfile/Profile/index.tsx
View File

@@ -1,4 +1,4 @@
import { dt } from "@/lib/dt"
// import { dt } from "@/lib/dt"
import { serverClient } from "@/lib/trpc/server"
import {
@@ -7,77 +7,27 @@ import {
HouseIcon,
PhoneIcon,
} from "@/components/Icons"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
import { getIntl } from "@/i18n"
import Field from "../Field"
// import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
// import { getIntl } from "@/i18n"
import Container from "./Container"
import styles from "./profile.module.css"
export default async function Profile() {
const { formatMessage } = await getIntl()
// const { formatMessage } = await getIntl()
const user = await serverClient().user.get()
const countryName = countries.find(
(country) => country.code === user.address.country
)
const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
// const countryName = countries.find(
// (country) => country.code === user.address.country
// )
// const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
return (
<Container user={user}>
<section className={styles.info}>
<Field>
<Field.Icon>{user.address.country}</Field.Icon>
<Field.TextLabel>{formatMessage({ id: "Country" })}</Field.TextLabel>
<Field.Content>{countryName?.name}</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.TextLabel>
{formatMessage({ id: "Date of Birth" })}
</Field.TextLabel>
<Field.Content>{dob}</Field.Content>
</Field>
<Field>
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.TextLabel>{formatMessage({ id: "Email" })}</Field.TextLabel>
<Field.Content>{user.email}</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.TextLabel>
{formatMessage({ id: "Phone number" })}
</Field.TextLabel>
<Field.Content>{user.phoneNumber}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{formatMessage({ id: "Address" })}</Field.TextLabel>
<Field.Content>{user.address.streetAddress || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>
{formatMessage({ id: "City/State" })}
</Field.TextLabel>
<Field.Content>{user.address.city || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{formatMessage({ id: "Zip code" })}</Field.TextLabel>
<Field.Content>{user.address.zipCode}</Field.Content>
</Field>
<CalendarIcon />
<EmailIcon />
<HouseIcon />
<PhoneIcon />
</section>
</Container>
)

10
components/MyProfile/Profile/profile.module.css
View File

@@ -1,19 +1,19 @@
.profile {
display: grid;
gap: 3.4rem;
gap: var(--Spacing-x4);
grid-template-rows: auto 1fr;
min-height: 46rem;
min-height: 460px;
}
.header {
align-items: center;
display: grid;
gap: 1.4rem;
gap: var(--Spacing-x2);
grid-template-columns: auto 1fr;
}
.info {
display: grid;
gap: 1.8rem;
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
}
}