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

feat(WEB-154): my profile view

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-04-05 08:28:20 +02:00
parent 3b05b9f205
commit 82e4d40203
95 changed files with 1239 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MyProfile/Card/Title/index.tsx
+21
View File
@@ -0,0 +1,21 @@
import { headingVariants } from "./variants"
import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
export default function Title({
as,
children,
className = "",
level = "h1",
uppercase = false,
weight,
}: HeadingProps) {
const Hx = level
const classNames = headingVariants({
className,
text: uppercase ? "uppercase" : undefined,
type: as ?? level,
weight,
})
return <Hx className={classNames}>{children}</Hx>
}
components/MyProfile/Card/Title/title.module.css
+68
View File
@@ -0,0 +1,68 @@
.heading {
color: var(--some-black-color, #2E2E2E);
/* font-family: var(--ff-brandon-text); */
letter-spacing: 6%;
margin: 0;
padding: 0;
}
.uppercase {
text-transform: uppercase;
}
.h1 {
font-size: 2.5rem;
line-height: 3.5rem;
}
.h2 {
font-size: 1.3rem;
line-height: 1.6rem;
}
.h3 {
font-size: 1.8rem;
}
.h4 {
font-size: 1.6rem;
}
.h5 {
font-size: 1.3rem;
}
.h6 {
font-size: 1rem;
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.semiBold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.black {
font-weight: 900;
}
/* @media screen and (min-width: 950px) {
.h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
} */
components/MyProfile/Card/Title/variants.ts
+33
View File
@@ -0,0 +1,33 @@
import { cva } from "class-variance-authority"
import styles from "./title.module.css"
const config = {
variants: {
text: {
uppercase: styles.uppercase,
},
type: {
h1: styles.h1,
h2: styles.h2,
h3: styles.h3,
h4: styles.h4,
h5: styles.h5,
h6: styles.h6,
},
weight: {
light: styles.light,
regular: styles.regular,
medium: styles.medium,
semiBold: styles.semiBold,
bold: styles.bold,
black: styles.black,
},
},
defaultVariants: {
type: "h1",
weight: "medium",
},
} as const
export const headingVariants = cva(styles.heading, config)
components/MyProfile/Card/card.module.css
+6
View File
@@ -0,0 +1,6 @@
.card {
background-color: var(--some-grey-color, #F2F2F2);
border-radius: 0.4rem;
min-height: 15.6rem;
padding: 3.8rem;
}
components/MyProfile/Card/index.tsx
+16
View File
@@ -0,0 +1,16 @@
import { cva } from "class-variance-authority"
import Title from "./Title"
import styles from "./card.module.css"
import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
const cardStyles = cva(styles.card)
export default function Card({ className, tag = "section", ...props }: CardProps) {
const Cmp = tag
return <Cmp className={cardStyles({ className })} {...props} />
}
Card.Title = Title
components/MyProfile/CommunicationPreferences/com.module.css
+5
View File
@@ -0,0 +1,5 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/CommunicationPreferences/index.tsx
+11
View File
@@ -0,0 +1,11 @@
import Card from "@/components/MyProfile/Card"
import styles from "./com.module.css"
export default function CommunicationPreferences() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My communication preferences</Card.Title>
</Card>
)
}
components/MyProfile/CreditCards/creditCards.module.css
+5
View File
@@ -0,0 +1,5 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/CreditCards/index.tsx
+11
View File
@@ -0,0 +1,11 @@
import Card from "@/components/MyProfile/Card"
import styles from "./creditCards.module.css"
export default function CreditCards() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My credit cards</Card.Title>
</Card>
)
}
components/MyProfile/LabelAndIcon/index.tsx
+25
View File
@@ -0,0 +1,25 @@
import styles from "./lai.module.css"
export default function LabelAndIcon({ children }: React.PropsWithChildren) {
return (
<div className={styles.container}>
{children}
</div>
)
}
function Icon({ children }: React.PropsWithChildren) {
return <span className={styles.icon}>{children}</span>
}
function Label({ children }: React.PropsWithChildren) {
return <span className={styles.label}>{children}</span>
}
function Content({ children }: React.PropsWithChildren) {
return <span className={styles.content}>{children}</span>
}
LabelAndIcon.Icon = Icon
LabelAndIcon.Label = Label
LabelAndIcon.Content = Content
components/MyProfile/LabelAndIcon/lai.module.css
+45
View File
@@ -0,0 +1,45 @@
.container {
align-content: flex-start;
align-items: center;
display: grid;
gap: 0.4rem 1.7rem;
grid-template-areas:
"icon label"
"icon content";
justify-content: flex-start;
}
.icon {
align-items: center;
background-color: var(--some-white-color, #FFF);
border-radius: 50%;
display: flex;
font-family: var(--ff-fira-sans);
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(--ff-fira-sans);
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;
}
components/MyProfile/MembershipCard/index.tsx
+11
View File
@@ -0,0 +1,11 @@
import Card from "@/components/MyProfile/Card"
import styles from "./membershipCard.module.css"
export default function MembershipCard() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Membership cards</Card.Title>
</Card>
)
}
components/MyProfile/MembershipCard/membershipCard.module.css
+5
View File
@@ -0,0 +1,5 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/Password/index.tsx
+11
View File
@@ -0,0 +1,11 @@
import Card from "@/components/MyProfile/Card"
import styles from "./password.module.css"
export default function Password() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Password</Card.Title>
</Card>
)
}
components/MyProfile/Password/password.module.css
+5
View File
@@ -0,0 +1,5 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}
components/MyProfile/Profile/index.tsx
+108
View File
@@ -0,0 +1,108 @@
import { cva } from "class-variance-authority"
import Card from "@/components/MyProfile/Card"
import Image from "@/components/Image"
import LabelAndIcon from "../LabelAndIcon"
import styles from "./profile.module.css"
import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
const profileStyles = cva(styles.profile)
export default function Profile({ className, user, ...props }: ProfileProps) {
return (
<Card className={profileStyles({ className })} {...props}>
<header className={styles.header}>
<Image
alt="Account Icon"
height={40}
src="/account_circle.svg"
width={40}
/>
<Card.Title uppercase>
{user.name}
</Card.Title>
</header>
<section className={styles.info}>
<LabelAndIcon>
<LabelAndIcon.Icon>SE</LabelAndIcon.Icon>
<LabelAndIcon.Label>Country</LabelAndIcon.Label>
<LabelAndIcon.Content>Sweden</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="Calendar Icon"
height={20}
src="/calendar_month.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>Date of Birth</LabelAndIcon.Label>
<LabelAndIcon.Content>27/05/1977</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="Email Icon"
height={20}
src="/alternate_email.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>Email</LabelAndIcon.Label>
<LabelAndIcon.Content>f*********@g****.com</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="Cellphone Icon"
height={20}
src="/phone.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>Phone number</LabelAndIcon.Label>
<LabelAndIcon.Content>+46 ******00</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="House Icon"
height={20}
src="/home.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>Address</LabelAndIcon.Label>
<LabelAndIcon.Content>T***************</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="House Icon"
height={20}
src="/home.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>City/State</LabelAndIcon.Label>
<LabelAndIcon.Content>S*******</LabelAndIcon.Content>
</LabelAndIcon>
<LabelAndIcon>
<LabelAndIcon.Icon>
<Image
alt="House Icon"
height={20}
src="/home.svg"
width={20}
/>
</LabelAndIcon.Icon>
<LabelAndIcon.Label>Zip code</LabelAndIcon.Label>
<LabelAndIcon.Content>1****</LabelAndIcon.Content>
</LabelAndIcon>
</section>
</Card>
)
}
components/MyProfile/Profile/profile.module.css
+19
View File
@@ -0,0 +1,19 @@
.profile {
display: grid;
gap: 3.4rem;
grid-template-rows: auto 1fr;
min-height: 46rem;
}
.header {
align-items: center;
display: grid;
gap: 1.4rem;
grid-template-columns: auto 1fr;
}
.info {
display: grid;
gap: 1.8rem;
grid-template-columns: 1fr 1fr;
}
components/MyProfile/Wishes/index.tsx
+11
View File
@@ -0,0 +1,11 @@
import Card from "@/components/MyProfile/Card"
import styles from "./wishes.module.css"
export default function Wishes() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My wishes</Card.Title>
</Card>
)
}
components/MyProfile/Wishes/wishes.module.css
+5
View File
@@ -0,0 +1,5 @@
.container {
align-items: center;
display: flex;
justify-content: center;
}