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

feat(WEB-249): first iteration design system primitives (typography, grid)

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-05-29 13:57:03 +02:00
parent 08e7eb2fca
commit 00f99912fc
83 changed files with 1110 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MyProfile/Card/Title/index.tsx
-21
View File
@@ -1,21 +0,0 @@
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
@@ -1,68 +0,0 @@
.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: 1367px) {
.h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
} */
components/MyProfile/Card/Title/variants.ts
-33
View File
@@ -1,33 +0,0 @@
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/index.tsx
+5 -5
View File
@@ -1,16 +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) {
export default function Card({
className,
tag = "section",
...props
}: CardProps) {
const Cmp = tag
return <Cmp className={cardStyles({ className })} {...props} />
}
Card.Title = Title
components/MyProfile/CommunicationPreferences/index.tsx
+2 -1
View File
@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
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>
<Title level="h2">My communication preferences</Title>
</Card>
)
}
components/MyProfile/CreditCards/index.tsx
+2 -1
View File
@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
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>
<Title level="h2">My credit cards</Title>
</Card>
)
}
components/MyProfile/Field/field.module.css
+2 -2
View File
@@ -15,7 +15,7 @@
background-color: var(--some-white-color, #fff);
border-radius: 50%;
display: flex;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
grid-area: icon;
@@ -27,7 +27,7 @@
.label,
.content {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 400;
letter-spacing: -1.5%;
line-height: 2.4rem;
components/MyProfile/MembershipCard/index.tsx
+2 -1
View File
@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./membershipCard.module.css"
export default function MembershipCard() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Membership cards</Card.Title>
<Title level="h2">Membership cards</Title>
</Card>
)
}
components/MyProfile/Password/index.tsx
+2 -1
View File
@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./password.module.css"
export default function Password() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Password</Card.Title>
<Title level="h2">Password</Title>
</Card>
)
}
components/MyProfile/Profile/Container.tsx
+4 -1
View File
@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority"
import Image from "@/components/Image"
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./profile.module.css"
@@ -24,7 +25,9 @@ export default function Container({
src="/_static/icons/account_circle.svg"
width={40}
/>
<Card.Title uppercase>{user.name}</Card.Title>
<Title as="h4" level="h2">
{user.name}
</Title>
</header>
{children}
</Card>
components/MyProfile/Wishes/index.tsx
+2 -1
View File
@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./wishes.module.css"
export default function Wishes() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My wishes</Card.Title>
<Title level="h2">My wishes</Title>
</Card>
)
}