feat: loosen up the zod validations and return null instead of throwing

2024-06-07 10:36:23 +02:00
parent 5c50ac060d
commit aca9221ea6
89 changed files with 1117 additions and 821 deletions
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -2,6 +2,7 @@
  background: none;
  border: none;
  cursor: pointer;
+  /* TODO: Waiting for variables for buttons from Design team */
  font-family: var(--typography-Body-Regular-fontFamily);
  font-weight: 600;
  line-height: 150%;
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/components/TempDesignSystem/Card/card.module.css
@@ -41,13 +41,8 @@
  gap: var(--Spacing-x1);
 }

-.scriptedTitle {
+span.scriptedTitle {
  color: var(--script-color);
-  font-family: var(--typography-Script-2-fontFamily);
-  font-size: var(--typography-Script-2-fontSize);
-  font-weight: var(--typography-Script-2-fontWeight);
-  line-height: var(--typography-Script-2-lineHeight);
-  letter-spacing: 0.48px;
  padding: var(--Spacing-x1);
  margin: 0;
  transform: rotate(-3deg);
@@ -57,13 +52,8 @@
  color: var(--font-color);
 }

-.bodyText {
+p.bodyText {
  color: var(--font-color);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: 0.096px;
-  text-align: center;
 }

 .buttonContainer {
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -1,6 +1,8 @@
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import { cardVariants } from "./variants"
@@ -42,13 +44,20 @@ export default function Card({
    >
      {scriptedTopTitle ? (
        <section className={styles.scriptContainer}>
-          <h3 className={styles.scriptedTitle}>{scriptedTopTitle}</h3>
+          <BiroScript className={styles.scriptedTitle} type="two">
+            {scriptedTopTitle}
+          </BiroScript>
+          <Divider />
        </section>
      ) : null}
      <Title as="h5" className={styles.heading} level="h3">
        {heading}
      </Title>
-      {bodyText ? <p className={styles.bodyText}>{bodyText}</p> : null}
+      {bodyText ? (
+        <Body className={styles.bodyText} textAlign="center">
+          {bodyText}
+        </Body>
+      ) : null}
      <div className={styles.buttonContainer}>
        {primaryButton ? (
          <Button asChild theme={buttonTheme} size="small">
--- a/components/TempDesignSystem/Form/Country/country.module.css
+++ b/components/TempDesignSystem/Form/Country/country.module.css
@@ -23,12 +23,6 @@
 .input,
 .listBoxItem {
  color: var(--UI-Grey-60);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  letter-spacing: var--typography-Body-Regular-letterSpacing;
-  line-height: var(--typography-Body-Regular-lineHeight);
 }

 .button {
--- a/components/TempDesignSystem/Form/Country/index.tsx
+++ b/components/TempDesignSystem/Form/Country/index.tsx
@@ -14,6 +14,8 @@ import {
 import { useController, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

+import Body from "@/components/TempDesignSystem/Text/Body"
+
 import SelectChevron from "../SelectChevron"
 import { countries } from "./countries"

@@ -53,11 +55,13 @@ export default function CountrySelect({
        selectedKey={field.value}
      >
        <div className={styles.comboBoxContainer}>
-          <Input
-            aria-label={selectCountryLabel}
-            className={styles.input}
-            placeholder={selectCountryLabel}
-          />
+          <Body asChild fontOnly>
+            <Input
+              aria-label={selectCountryLabel}
+              className={styles.input}
+              placeholder={selectCountryLabel}
+            />
+          </Body>
          <Button className={styles.button}>
            <SelectChevron />
          </Button>
@@ -79,14 +83,15 @@ export default function CountrySelect({
        >
          <ListBox>
            {countries.map((country, idx) => (
-              <ListBoxItem
-                aria-label={country.name}
-                className={styles.listBoxItem}
-                id={country.code}
-                key={`${country.code}-${idx}`}
-              >
-                {country.name}
-              </ListBoxItem>
+              <Body asChild fontOnly key={`${country.code}-${idx}`}>
+                <ListBoxItem
+                  aria-label={country.name}
+                  className={styles.listBoxItem}
+                  id={country.code}
+                >
+                  {country.name}
+                </ListBoxItem>
+              </Body>
            ))}
          </ListBox>
        </Popover>
--- a/components/TempDesignSystem/Form/ErrorMessage/error.module.css
+++ b/components/TempDesignSystem/Form/ErrorMessage/error.module.css
@@ -1,8 +1,4 @@
 .message {
  color: var(--Scandic-Red-60);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  line-height: var(--typography-Body-Regular-lineHeight);
  margin: var(--Spacing-x-half) 0 0;
 }
--- a/components/TempDesignSystem/Form/ErrorMessage/index.tsx
+++ b/components/TempDesignSystem/Form/ErrorMessage/index.tsx
@@ -1,5 +1,7 @@
 import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"

+import Body from "@/components/TempDesignSystem/Text/Body"
+
 import styles from "./error.module.css"

 import type { ErrorMessageProps } from "./errorMessage"
@@ -12,7 +14,11 @@ export default function ErrorMessage<T>({
    <RHFErrorMessage
      errors={errors}
      name={name}
-      render={({ message }) => <p className={styles.message}>{message}</p>}
+      render={({ message }) => (
+        <Body className={styles.message} fontOnly>
+          {message}
+        </Body>
+      )}
    />
  )
 }
--- a/components/TempDesignSystem/Form/Input/index.tsx
+++ b/components/TempDesignSystem/Form/Input/index.tsx
@@ -3,6 +3,7 @@ import { Input as AriaInput, TextField } from "react-aria-components"
 import { useController } from "react-hook-form"

 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import Body from "@/components/TempDesignSystem/Text/Body"

 import styles from "./input.module.css"

@@ -35,11 +36,13 @@ export default function Input({
      onChange={field.onChange}
      type={type}
    >
-      <AriaInput
-        className={styles.input}
-        placeholder={placeholder}
-        ref={field.ref}
-      />
+      <Body asChild fontOnly>
+        <AriaInput
+          className={styles.input}
+          placeholder={placeholder}
+          ref={field.ref}
+        />
+      </Body>
      <ErrorMessage errors={formState.errors} name={name} />
    </TextField>
  )
--- a/components/TempDesignSystem/Form/Input/input.module.css
+++ b/components/TempDesignSystem/Form/Input/input.module.css
@@ -2,12 +2,7 @@
  border: 2px solid var(--UI-Grey-60);
  border-radius: var(--Corner-radius-Small);
  color: var(--UI-Grey-60);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
  height: 40px;
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
  padding: var(--Spacing-x1) var(--Spacing-x2);
  width: min(280px, 100%);
 }
--- a/components/TempDesignSystem/Form/Select/index.tsx
+++ b/components/TempDesignSystem/Form/Select/index.tsx
@@ -11,6 +11,8 @@ import {
  SelectValue,
 } from "react-aria-components"

+import Body from "../../Text/Body"
+import Footnote from "../../Text/Footnote"
 import SelectChevron from "../SelectChevron"

 import styles from "./select.module.css"
@@ -48,38 +50,44 @@ export default function Select({
        placeholder={placeholder}
        selectedKey={value as Key}
      >
-        <Button className={styles.input}>
-          <div className={styles.inputContentWrapper}>
-            <Label className={styles.label}>{label}</Label>
-            <SelectValue />
-          </div>
-          <SelectChevron />
-        </Button>
-        <Popover
-          className={styles.popover}
-          placement="bottom"
-          shouldFlip={false}
-          /**
-           * react-aria uses portals to render Popover in body
-           * unless otherwise specified. We need it to be contained
-           * by this component to both access css variables assigned
-           * on the container as well as to not overflow it at any time.
-           */
-          UNSTABLE_portalContainer={rootDiv ?? undefined}
-        >
-          <ListBox className={styles.listBox}>
-            {items.map((item) => (
-              <ListBoxItem
-                aria-label={String(item)}
-                className={styles.listBoxItem}
-                id={item.value}
-                key={item.label}
-              >
-                {item.label}
-              </ListBoxItem>
-            ))}
-          </ListBox>
-        </Popover>
+        <Body asChild fontOnly>
+          <Button className={styles.input}>
+            <div className={styles.inputContentWrapper}>
+              <Footnote asChild fontOnly>
+                <Label className={styles.label}>{label}</Label>
+              </Footnote>
+              <SelectValue />
+            </div>
+            <SelectChevron />
+          </Button>
+        </Body>
+        <Body asChild fontOnly>
+          <Popover
+            className={styles.popover}
+            placement="bottom"
+            shouldFlip={false}
+            /**
+             * react-aria uses portals to render Popover in body
+             * unless otherwise specified. We need it to be contained
+             * by this component to both access css variables assigned
+             * on the container as well as to not overflow it at any time.
+             */
+            UNSTABLE_portalContainer={rootDiv ?? undefined}
+          >
+            <ListBox className={styles.listBox}>
+              {items.map((item) => (
+                <ListBoxItem
+                  aria-label={String(item)}
+                  className={styles.listBoxItem}
+                  id={item.value}
+                  key={item.label}
+                >
+                  {item.label}
+                </ListBoxItem>
+              ))}
+            </ListBox>
+          </Popover>
+        </Body>
      </ReactAriaSelect>
    </div>
  )
--- a/components/TempDesignSystem/Form/Select/select.module.css
+++ b/components/TempDesignSystem/Form/Select/select.module.css
@@ -4,10 +4,6 @@

 .label {
  color: var(--Base-Text-UI-Placeholder);
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Regular-fontWeight);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
 }

 .select {
@@ -32,11 +28,6 @@
  display: flex;
  gap: var(--Spacing-x-half);
  height: 56px;
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
  outline: none;
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
  text-align: left;
@@ -56,7 +47,6 @@
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  flex-direction: column;
-  font-size: var(--typography-Body-Regular-fontSize);
  gap: var(--Spacing-x1);
  overflow: auto;
  width: 100%;
@@ -79,4 +69,4 @@

 .listBoxItem[data-selected="true"] {
  font-weight: 500;
-}
+}
--- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
+++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
@@ -34,6 +34,10 @@
  text-align: left;
 }

+.black {
+  color: #000;
+}
+
 .burgundy {
  color: var(--Scandic-Brand-Burgundy);
 }
--- a/components/TempDesignSystem/Text/BiroScript/variants.ts
+++ b/components/TempDesignSystem/Text/BiroScript/variants.ts
@@ -5,6 +5,7 @@ import styles from "./biroScript.module.css"
 const config = {
  variants: {
    color: {
+      black: styles.black,
      burgundy: styles.burgundy,
      pale: styles.pale,
      primaryLightOnSurfaceAccent: styles.plosa,
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -3,6 +3,10 @@
  padding: 0;
 }

+.bodyFontOnly {
+  font-style: normal;
+}
+
 .bold {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
--- a/components/TempDesignSystem/Text/Body/body.ts
+++ b/components/TempDesignSystem/Text/Body/body.ts
@@ -6,4 +6,5 @@ export interface BodyProps
  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
    VariantProps<typeof bodyVariants> {
  asChild?: boolean
+  fontOnly?: boolean
 }
--- a/components/TempDesignSystem/Text/Body/index.tsx
+++ b/components/TempDesignSystem/Text/Body/index.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"

-import { bodyVariants } from "./variants"
+import { bodyFontOnlyVariants, bodyVariants } from "./variants"

 import type { BodyProps } from "./body"

@@ -8,16 +8,23 @@ export default function Body({
  asChild = false,
  className = "",
  color,
+  fontOnly = false,
  textAlign,
  textTransform,
  ...props
 }: BodyProps) {
  const Comp = asChild ? Slot : "p"
-  const classNames = bodyVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? bodyFontOnlyVariants({
+        className,
+        textAlign,
+        textTransform,
+      })
+    : bodyVariants({
+        className,
+        color,
+        textAlign,
+        textTransform,
+      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -27,3 +27,22 @@ const config = {
 } as const

 export const bodyVariants = cva(styles.body, config)
+
+const fontOnlyconfig = {
+  variants: {
+    textAlign: {
+      center: styles.textAlignCenter,
+      left: styles.textAlignLeft,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+      underlined: styles.underlined,
+    },
+  },
+  defaultVariants: {
+    textAlign: "left",
+    textTransform: "regular",
+  },
+} as const
+export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -1,8 +1,12 @@
-.body {
+.caption {
  margin: 0;
  padding: 0;
 }

+.captionFontOnly {
+  font-style: normal;
+}
+
 .bold {
  font-family: var(--typography-Caption-Bold-fontFamily);
  font-size: var(--typography-Caption-Bold-fontSize);
--- a/components/TempDesignSystem/Text/Caption/caption.ts
+++ b/components/TempDesignSystem/Text/Caption/caption.ts
@@ -6,4 +6,5 @@ export interface CaptionProps
  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
    VariantProps<typeof captionVariants> {
  asChild?: boolean
+  fontOnly?: boolean
 }
--- a/components/TempDesignSystem/Text/Caption/index.tsx
+++ b/components/TempDesignSystem/Text/Caption/index.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"

-import { captionVariants } from "./variants"
+import { captionVariants, fontOnlycaptionVariants } from "./variants"

 import type { CaptionProps } from "./caption"

@@ -8,14 +8,20 @@ export default function Caption({
  asChild = false,
  className = "",
  color,
+  fontOnly = false,
  textTransform,
  ...props
 }: CaptionProps) {
  const Comp = asChild ? Slot : "p"
-  const classNames = captionVariants({
-    className,
-    color,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? fontOnlycaptionVariants({
+        className,
+        textTransform,
+      })
+    : captionVariants({
+        className,
+        color,
+        textTransform,
+      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -21,3 +21,20 @@ const config = {
 } as const

 export const captionVariants = cva(styles.caption, config)
+
+const fontOnlyConfig = {
+  variants: {
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    textTransform: "regular",
+  },
+} as const
+
+export const fontOnlycaptionVariants = cva(
+  styles.captionFontOnly,
+  fontOnlyConfig
+)
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -3,6 +3,10 @@
  padding: 0;
 }

+.footnoteFontOnly {
+  font-style: normal;
+}
+
 .bold {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
--- a/components/TempDesignSystem/Text/Footnote/footnote.ts
+++ b/components/TempDesignSystem/Text/Footnote/footnote.ts
@@ -6,4 +6,5 @@ export interface FootnoteProps
  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
    VariantProps<typeof footnoteVariants> {
  asChild?: boolean
+  fontOnly?: boolean
 }
--- a/components/TempDesignSystem/Text/Footnote/index.tsx
+++ b/components/TempDesignSystem/Text/Footnote/index.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"

-import { footnoteVariants } from "./variants"
+import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"

 import type { FootnoteProps } from "./footnote"

@@ -8,16 +8,23 @@ export default function Footnote({
  asChild = false,
  className = "",
  color,
+  fontOnly = false,
  textAlign,
  textTransform,
  ...props
 }: FootnoteProps) {
  const Comp = asChild ? Slot : "p"
-  const classNames = footnoteVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? footnoteFontOnlyVariants({
+        className,
+        textAlign,
+        textTransform,
+      })
+    : footnoteVariants({
+        className,
+        color,
+        textAlign,
+        textTransform,
+      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -24,3 +24,24 @@ const config = {
 } as const

 export const footnoteVariants = cva(styles.footnote, config)
+
+const fontOnlyConfig = {
+  variants: {
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    textTransform: "regular",
+  },
+} as const
+
+export const footnoteFontOnlyVariants = cva(
+  styles.footnoteFontOnly,
+  fontOnlyConfig
+)
--- a/components/TempDesignSystem/Text/Subtitle/index.tsx
+++ b/components/TempDesignSystem/Text/Subtitle/index.tsx
@@ -1,4 +1,5 @@
 import { Slot } from "@radix-ui/react-slot"
+import { Children } from "react"

 import { subtitleVariants } from "./variants"

@@ -13,7 +14,7 @@ export default function Subtitle({
  textTransform,
  ...props
 }: SubtitleProps) {
-  if (hideEmpty && !props.children) {
+  if (hideEmpty && Children.count(props.children) === 0) {
    return null
  }
  const Comp = asChild ? Slot : "p"
--- a/components/TempDesignSystem/Text/Title/index.tsx
+++ b/components/TempDesignSystem/Text/Title/index.tsx
@@ -1,3 +1,5 @@
+import { Children } from "react"
+
 import { headingVariants } from "./variants"

 import type { HeadingProps } from "./title"
@@ -12,7 +14,7 @@ export default function Title({
  textAlign,
  textTransform,
 }: HeadingProps) {
-  if (hideEmpty && !children) {
+  if (hideEmpty && Children.count(children) === 0) {
    return null
  }
  const Hx = level
--- a/components/TempDesignSystem/Text/Title/title.ts
+++ b/components/TempDesignSystem/Text/Title/title.ts
@@ -2,7 +2,7 @@ import { headingVariants } from "./variants"

 import type { VariantProps } from "class-variance-authority"

-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"

 export interface HeadingProps
  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -22,7 +22,6 @@ const config = {
      h3: styles.h3,
      h4: styles.h4,
      h5: styles.h5,
-      h6: styles.h6,
    },
  },
  defaultVariants: {