fix: add labels variants for Footnote and Caption

2024-10-16 11:55:40 +02:00
parent 5269fcb6c4
commit 5870a31275
17 changed files with 74 additions and 57 deletions
--- a/components/Breadcrumbs/index.tsx
+++ b/components/Breadcrumbs/index.tsx
@@ -48,7 +48,7 @@ export default async function Breadcrumbs() {

          return (
            <li key={breadcrumb.uid} className={styles.listItem}>
-              <Footnote color="burgundy" textTransform="bold">
+              <Footnote color="burgundy" type="bold">
                {breadcrumb.title}
              </Footnote>
            </li>
--- a/components/DatePicker/Screen/Desktop.tsx
+++ b/components/DatePicker/Screen/Desktop.tsx
@@ -82,7 +82,7 @@ export default function DatePickerDesktop({
                  size="small"
                  theme="base"
                >
-                  <Caption color="white" textTransform="bold">
+                  <Caption color="white" type="bold">
                    {intl.formatMessage({ id: "Select dates" })}
                  </Caption>
                </Button>
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -33,7 +33,7 @@ export default function ClearSearchButton({
      type="button"
    >
      <DeleteIcon color="burgundy" height={20} width={20} />
-      <Caption color="burgundy" textTransform="bold">
+      <Caption color="burgundy" type="bold">
        {intl.formatMessage({ id: "Clear searches" })}
      </Caption>
    </button>
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -34,7 +34,7 @@ export default function Voucher() {
      >
        <div className={styles.vouchers}>
          <label>
-            <Caption color="disabled" textTransform="bold">
+            <Caption color="disabled" type="bold">
              {vouchers}
            </Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -37,7 +37,7 @@ export default function FormContent({
            <Search locations={locations} />
          </div>
          <div className={styles.when}>
-            <Caption color="red" textTransform="bold">
+            <Caption color="red" type="bold">
              {intl.formatMessage(
                { id: "booking.nights" },
                { totalNights: nights > 0 ? nights : 0 }
@@ -47,7 +47,7 @@ export default function FormContent({
          </div>
          <div className={styles.rooms}>
            <label>
-              <Caption color="red" textTransform="bold">
+              <Caption color="red" type="bold">
                {rooms}
              </Caption>
            </label>
@@ -65,11 +65,7 @@ export default function FormContent({
            theme="base"
            type="submit"
          >
-            <Caption
-              color="white"
-              textTransform="bold"
-              className={styles.buttonText}
-            >
+            <Caption color="white" type="bold" className={styles.buttonText}>
              {intl.formatMessage({ id: "Search" })}
            </Caption>
            <div className={styles.icon}>
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -107,7 +107,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
            </div>
            <div className={styles.dateField}>
              <header>
-                <Caption textTransform="bold">
+                <Caption type="bold">
                  {intl.formatMessage({ id: "Birth date" })}
                </Caption>
              </header>
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -26,7 +26,7 @@ export default function PriceList({
      <div className={styles.priceRow}>
        <dt>
          <Caption
-            textTransform="bold"
+            type="bold"
            color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
          >
            {intl.formatMessage({ id: "Standard price" })}
@@ -52,10 +52,7 @@ export default function PriceList({

      <div className={styles.priceRow}>
        <dt>
-          <Caption
-            textTransform="bold"
-            color={memberLocalPrice ? "red" : "disabled"}
-          >
+          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
            {intl.formatMessage({ id: "Member price" })}
          </Caption>
        </dt>
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -90,7 +90,7 @@ export default function FlexibilityOption({
            >
              <Caption
                color="uiTextHighContrast"
-                textTransform="bold"
+                type="bold"
                className={styles.popoverHeading}
              >
                {name}
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -29,14 +29,14 @@ export default function Card({

  return (
    <label className={styles.label} data-declined={declined}>
-      <Caption className={styles.title} textTransform="bold" uppercase>
+      <Caption className={styles.title} type="label" uppercase>
        {title}
      </Caption>
      {subtitle ? (
        <Caption
          className={styles.subtitle}
          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
-          textTransform="bold"
+          type="regular"
        >
          {subtitle}
        </Caption>
--- a/components/TempDesignSystem/LinkChips/Chip/index.tsx
+++ b/components/TempDesignSystem/LinkChips/Chip/index.tsx
@@ -9,7 +9,7 @@ import type { LinkChipProps } from "./chip"

 export default function LinkChip({ url, title }: LinkChipProps) {
  return (
-    <Caption textTransform="bold" color="burgundy" asChild>
+    <Caption type="bold" color="burgundy" asChild>
      <Link href={url} className={styles.linkChip}>
        {title}
        <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -16,14 +16,13 @@ p.caption {
  text-decoration: var(--typography-Caption-Bold-textDecoration);
 }

-.uppercase {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: var(--typography-Caption-Bold-fontWeight);
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-  text-transform: uppercase;
+.labels {
+  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-size: var(--typography-Caption-Labels-fontSize);
+  font-weight: var(--typography-Caption-Labels-fontWeight);
+  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  line-height: var(--typography-Caption-Labels-lineHeight);
+  text-decoration: var(--typography-Caption-Labels-textDecoration);
 }

 .regular {
@@ -35,6 +34,10 @@ p.caption {
  text-decoration: var(--typography-Caption-Regular-textDecoration);
 }

+.uppercase {
+  text-transform: uppercase;
+}
+
 .baseTextAccent {
  color: var(--Base-Text-Accent);
 }
--- a/components/TempDesignSystem/Text/Caption/index.tsx
+++ b/components/TempDesignSystem/Text/Caption/index.tsx
@@ -12,6 +12,7 @@ export default function Caption({
  textAlign,
  textTransform,
  uppercase,
+  type,
  ...props
 }: CaptionProps) {
  const Comp = asChild ? Slot : "p"
@@ -20,6 +21,7 @@ export default function Caption({
        className,
        textTransform,
        uppercase,
+        type,
      })
    : captionVariants({
        className,
@@ -27,6 +29,7 @@ export default function Caption({
        textTransform,
        textAlign,
        uppercase,
+        type,
      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -4,6 +4,11 @@ import styles from "./caption.module.css"

 const config = {
  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
    color: {
      baseTextAccent: styles.baseTextAccent,
      black: styles.black,
@@ -19,8 +24,6 @@ const config = {
      disabled: styles.disabled,
    },
    textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
      uppercase: styles.uppercase,
    },
    textAlign: {
@@ -33,7 +36,7 @@ const config = {
  },
  defaultVariants: {
    color: "black",
-    textTransform: "regular",
+    type: "regular",
  },
 } as const

@@ -41,9 +44,12 @@ export const captionVariants = cva(styles.caption, config)

 const fontOnlyConfig = {
  variants: {
-    textTransform: {
-      bold: styles.bold,
+    type: {
      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
+    textTransform: {
      uppercase: styles.uppercase,
    },
    uppercase: {
@@ -51,7 +57,7 @@ const fontOnlyConfig = {
    },
  },
  defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
  },
 } as const

--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -25,13 +25,16 @@
  text-decoration: var(--typography-Footnote-Regular-textDecoration);
 }

+.labels {
+  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-size: var(--typography-Footnote-Labels-fontSize);
+  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  line-height: var(--typography-Footnote-Labels-lineHeight);
+  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+}
+
 .uppercase {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-  text-decoration: var(--typography-Footnote-Regular-textDecoration);
  text-transform: uppercase;
 }

--- a/components/TempDesignSystem/Text/Footnote/index.tsx
+++ b/components/TempDesignSystem/Text/Footnote/index.tsx
@@ -11,20 +11,23 @@ export default function Footnote({
  fontOnly = false,
  textAlign,
  textTransform,
+  type,
  ...props
 }: FootnoteProps) {
  const Comp = asChild ? Slot : "p"
  const classNames = fontOnly
    ? footnoteFontOnlyVariants({
-      className,
-      textAlign,
-      textTransform,
-    })
+        className,
+        textAlign,
+        textTransform,
+        type,
+      })
    : footnoteVariants({
-      className,
-      color,
-      textAlign,
-      textTransform,
-    })
+        className,
+        color,
+        textAlign,
+        textTransform,
+        type,
+      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -4,6 +4,11 @@ import styles from "./footnote.module.css"

 const config = {
  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
    color: {
      black: styles.black,
      burgundy: styles.burgundy,
@@ -18,13 +23,11 @@ const config = {
      left: styles.left,
    },
    textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
      uppercase: styles.uppercase,
    },
  },
  defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
  },
 } as const

@@ -32,18 +35,21 @@ export const footnoteVariants = cva(styles.footnote, config)

 const fontOnlyConfig = {
  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
    textAlign: {
      center: styles.center,
      left: styles.left,
    },
    textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
      uppercase: styles.uppercase,
    },
  },
  defaultVariants: {
-    textTransform: "regular",
+    type: "regular",
  },
 } as const

--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -20,7 +20,7 @@ export function Tooltip<P extends TooltipPosition>({
    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
      <div className={className}>
        {heading && (
-          <Caption textTransform="bold" color="white">
+          <Caption type="bold" color="white">
            {heading}
          </Caption>
        )}