Merged in feat/best-friend-hero (pull request #338)

Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg

components/MyPages/Blocks/Overview/Friend/Hero/hero.module.css

@@ -0,0 +1,21 @@
+.hero {
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+  padding: var(--Spacing-x7) var(--Spacing-x6);
+}
+
+.burgundy {
+  background-color: var(--Scandic-Brand-Burgundy);
+}
+
+.red {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    grid-template-columns: 1fr 1fr;
+  }
+}

components/MyPages/Blocks/Overview/Friend/Hero/hero.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from "class-variance-authority"
+
+import { heroVariants } from "./heroVariants"
+
+export interface HeroProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof heroVariants> {}

components/MyPages/Blocks/Overview/Friend/Hero/heroVariants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hero.module.css"
+
+export const heroVariants = cva(styles.hero, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "red",
+  },
+})

components/MyPages/Blocks/Overview/Friend/Hero/index.tsx

@@ -0,0 +1,7 @@
+import { HeroProps } from "./hero"
+import { heroVariants } from "./heroVariants"
+
+export default function Hero({ className, color, children }: HeroProps) {
+  const classNames = heroVariants({ className, color })
+  return <section className={classNames}>{children}</section>
+}

components/MyPages/Blocks/Overview/Friend/MembershipLevel/index.tsx

@@ -12,7 +12,7 @@ import {
 
 import styles from "./membershipLevel.module.css"
 
-import type { MembershipLevelProps } from "@/types/components/myPages/membershipLevel"
+import type { MembershipLevelProps } from "@/types/components/myPages/membership"
 
 export default function MembershipLevel({ level }: MembershipLevelProps) {
   switch (level) {

components/MyPages/Blocks/Overview/Friend/MemershipNumber/index.tsx

@@ -0,0 +1,34 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+
+import CopyButton from "../../Buttons/CopyButton"
+import { MembershipNumberProps } from "./membershipNumber"
+import { membershipNumberVariants } from "./membershipNumberVariants"
+
+import styles from "./membershipNumber.module.css"
+
+export default async function MembershipNumber({
+  className,
+  color,
+  membership,
+}: MembershipNumberProps) {
+  const { formatMessage } = await getIntl()
+  const classNames = membershipNumberVariants({ className, color })
+
+  return (
+    <div className={classNames}>
+      <Caption color="pale">
+        {formatMessage({ id: "Membership ID" })}
+        {": "}
+      </Caption>
+      <span className={styles.icon}>
+        <Caption className={styles.icon} color="pale">
+          {membership.membershipNumber ?? "N/A"}
+        </Caption>
+        {membership && (
+          <CopyButton membershipNumber={membership.membershipNumber} />
+        )}
+      </span>
+    </div>
+  )
+}

components/MyPages/Blocks/Overview/Friend/MemershipNumber/membershipNumber.module.css

@@ -0,0 +1,37 @@
+.membershipContainer {
+  align-items: center;
+  background: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x7) 0 var(--Spacing-x7);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding-left: var(--Spacing-x2);
+}
+
+.burgundy {
+  background-color: var(--Main-Brand-Burgundy);
+}
+
+.red {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+}
+
+@media screen and (min-width: 768px) {
+  .membershipContainer {
+    grid-template-columns: auto auto;
+    padding: 0 0 0 var(--Spacing-x2);
+    gap: var(--Spacing-x-half);
+  }
+
+  .icon {
+    padding-left: 0;
+  }
+}

components/MyPages/Blocks/Overview/Friend/MemershipNumber/membershipNumber.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from "class-variance-authority"
+
+import { membershipNumberVariants } from "./membershipNumberVariants"
+
+import { User } from "@/types/user"
+
+export interface MembershipNumberProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof membershipNumberVariants> {
+  membership: User["memberships"][number]
+}

components/MyPages/Blocks/Overview/Friend/MemershipNumber/membershipNumberVariants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./membershipNumber.module.css"
+
+export const membershipNumberVariants = cva(styles.membershipContainer, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "burgundy",
+  },
+})

components/MyPages/Blocks/Overview/Friend/friend.module.css

@@ -9,7 +9,7 @@
 .header {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x2);
 }
 
 .levelLabel {
@@ -35,14 +35,7 @@
   background: var(--Scandic-Brand-Burgundy);
   border-radius: var(--Corner-radius-Small);
   display: grid;
-  gap: var(--Spacing-x1);
   grid-template-columns: 1fr;
   justify-items: center;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-}
-
-@media screen and (min-width: 768px) {
-  .membershipContainer {
-    grid-template-columns: auto auto;
-  }
+  padding: var(--Spacing-x1) var(--Spacing-x7) 0 var(--Spacing-x7);
 }

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -1,30 +1,39 @@
 import { membershipLevels } from "@/constants/membershipLevels"
 
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getMembership } from "@/utils/user"
+import { getMembership, isHighestMembership } from "@/utils/user"
 
-import MembershipLevel from "./MemberShipLevel"
+import { MembershipNumberProps } from "./MemershipNumber/membershipNumber"
+import MembershipLevel from "./MembershipLevel"
+import MembershipNumber from "./MemershipNumber"
 
 import styles from "./friend.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
 
-export default async function Friend({ user }: UserProps) {
+export default async function Friend({
+  user,
+  color,
+}: UserProps & Pick<MembershipNumberProps, "color">) {
   const { formatMessage } = await getIntl()
   const membership = getMembership(user.memberships)
   if (!membership?.membershipLevel) {
     return null
   }
+  const isHighestLevel = isHighestMembership(membership.membershipLevel)
 
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
-        <BiroScript className={styles.levelLabel} color="pale">
-          {formatMessage({ id: "Current level" })}:
-        </BiroScript>
+        <Body color="white" textTransform="bold" textAlign="center">
+          {formatMessage(
+            isHighestLevel
+              ? { id: "Highest level" }
+              : { id: "Your current level" }
+          )}
+        </Body>
         {membership ? (
           <MembershipLevel
             level={membershipLevels[membership.membershipLevel]}
@@ -35,12 +44,7 @@ export default async function Friend({ user }: UserProps) {
         <Title className={styles.name} color="pale" level="h3">
           {user.name}
         </Title>
-        <div className={styles.membershipContainer}>
-          <Caption color="pale">
-            {formatMessage({ id: "Membership ID" })}:{" "}
-            {membership ? membership.membershipNumber : "N/A"}
-          </Caption>
-        </div>
+        <MembershipNumber membership={membership} color={color} />
       </div>
     </section>
   )