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

Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg

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",
+  },
+})