Merge branch 'master' into feature/tracking

2024-11-18 12:20:13 +01:00
parent dbe7ce34e2 1e94a857c1
commit 4341f4479c
240 changed files with 5429 additions and 2717 deletions
--- a/components/TempDesignSystem/Alert/index.tsx
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -44,23 +44,25 @@ export default function Alert({
                <h2>{heading}</h2>
              </Body>
            ) : null}
-            <Body className={styles.text}>
-              {text}
-              {phoneContact?.phoneNumber ? (
-                <>
-                  <span> {phoneContact.displayText} </span>
-                  <Link
-                    color="burgundy"
-                    href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
-                  >
-                    {phoneContact.phoneNumber}
-                  </Link>
-                  {phoneContact.footnote ? (
-                    <span>. ({phoneContact.footnote})</span>
-                  ) : null}
-                </>
-              ) : null}
-            </Body>
+            {text ? (
+              <Body className={styles.text}>
+                {text}
+                {phoneContact?.phoneNumber ? (
+                  <>
+                    <span> {phoneContact.displayText} </span>
+                    <Link
+                      color="burgundy"
+                      href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
+                    >
+                      {phoneContact.phoneNumber}
+                    </Link>
+                    {phoneContact.footnote ? (
+                      <span>. ({phoneContact.footnote})</span>
+                    ) : null}
+                  </>
+                ) : null}
+              </Body>
+            ) : null}
          </div>
          {link ? (
            <Link color="burgundy" href={link.url}>
--- a/components/TempDesignSystem/Chip/chip.module.css
+++ b/components/TempDesignSystem/Chip/chip.module.css
@@ -12,3 +12,8 @@ div.chip {
  background-color: var(--Scandic-Red-90);
  color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.secondary {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Primary-Light-On-Surface-Text);
+}
--- a/components/TempDesignSystem/Chip/variants.ts
+++ b/components/TempDesignSystem/Chip/variants.ts
@@ -6,6 +6,7 @@ export const chipVariants = cva(styles.chip, {
  variants: {
    intent: {
      primary: styles.primary,
+      secondary: styles.secondary,
    },
    variant: {
      default: styles.default,
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -83,7 +83,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
        .date(Number(day))

      if (newDate.isValid()) {
-        setValue(name, newDate.format("YYYY-MM-D"), {
+        setValue(name, newDate.format("YYYY-MM-DD"), {
          shouldDirty: true,
          shouldTouch: true,
          shouldValidate: true,
--- a/components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
+++ b/components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react"
 import { useFormContext } from "react-hook-form"

-import { HeartIcon } from "@/components/Icons"
+import { HeartIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import styles from "./chip.module.css"
@@ -19,6 +19,7 @@ export default function FilterChip({
  value,
  selected,
  disabled,
+  hasTooltip,
 }: FilterChipProps) {
  const { register } = useFormContext()

@@ -43,6 +44,11 @@ export default function FilterChip({
      <Caption type="bold" color={color} className={styles.caption}>
        {label}
      </Caption>
+
+      {hasTooltip && (
+        <InfoCircleIcon color={color} height={iconHeight} width={iconWidth} />
+      )}
+
      <input
        aria-hidden
        id={id || name}
--- a/components/TempDesignSystem/Form/Label/label.module.css
+++ b/components/TempDesignSystem/Form/Label/label.module.css
@@ -18,6 +18,12 @@ span.regular {
  order: 1;
 }

+span.discreet {
+  color: var(--Base-Text-High-contrast);
+  font-weight: 500;
+  order: unset;
+}
+
 input:active ~ .label,
 input:not(:placeholder-shown) ~ .label {
  display: block;
--- a/components/TempDesignSystem/Form/Label/variants.ts
+++ b/components/TempDesignSystem/Form/Label/variants.ts
@@ -7,6 +7,7 @@ export const labelVariants = cva(styles.label, {
    size: {
      small: styles.small,
      regular: styles.regular,
+      discreet: styles.discreet,
    },
  },
  defaultVariants: {
--- a/components/TempDesignSystem/Form/SelectChevron/index.tsx
+++ b/components/TempDesignSystem/Form/SelectChevron/index.tsx
@@ -2,10 +2,12 @@ import { ChevronDownIcon } from "@/components/Icons"

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

-export default function SelectChevron() {
+import type { IconProps } from "@/types/components/icon"
+
+export default function SelectChevron(props: IconProps) {
  return (
    <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" width={20} height={20} />
+      <ChevronDownIcon color="grey80" width={20} height={20} {...props} />
    </span>
  )
 }
--- a/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
+++ b/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
@@ -18,13 +18,13 @@

 .scrollWrapper.leftShadow::before {
  left: 0;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
+  background: linear-gradient(to right, rgba(128, 110, 99, 0.37), transparent);
  opacity: 1;
 }

 .scrollWrapper.rightShadow::after {
  right: 0;
-  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
+  background: linear-gradient(to left, rgba(128, 110, 99, 0.37), transparent);
  opacity: 1;
 }

--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -36,6 +36,7 @@ export default function Select({
  value,
  maxHeight,
  showRadioButton = false,
+  discreet = false,
 }: SelectProps) {
  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)

@@ -53,7 +54,7 @@ export default function Select({
    <div className={styles.container} ref={setRef}>
      <ReactAriaSelect
        aria-label={ariaLabel}
-        className={styles.select}
+        className={`${styles.select} ${discreet && styles.discreet}`}
        defaultSelectedKey={defaultSelectedKey}
        name={name}
        onSelectionChange={handleOnSelect}
@@ -63,12 +64,15 @@ export default function Select({
        <Body asChild fontOnly>
          <Button className={styles.input} data-testid={name}>
            <span className={styles.inputContentWrapper} tabIndex={tabIndex}>
-              <Label required={required} size="small">
+              <Label required={required} size={discreet ? "discreet" : "small"}>
                {label}
+                {discreet && `:`}
              </Label>
              <SelectValue />
            </span>
-            <SelectChevron />
+            <SelectChevron
+              {...(discreet ? { color: "baseButtonTextOnFillNormal" } : {})}
+            />
          </Button>
        </Body>
        <Body asChild fontOnly>
--- a/components/TempDesignSystem/Select/select.module.css
+++ b/components/TempDesignSystem/Select/select.module.css
@@ -10,11 +10,29 @@
  gap: var(--Spacing-x-half);
 }

-.select[data-focused="true"] {
+.select[data-focused="true"],
+.select[data-focused="true"].discreet {
  border: 1px solid var(--Scandic-Blue-90);
  outline: none;
 }

+.select.discreet {
+  border: 1px solid transparent;
+}
+
+.select.discreet .input {
+  background-color: unset;
+  color: var(--Base-Text-High-contrast);
+  gap: var(--Spacing-x1);
+}
+
+.select.discreet .inputContentWrapper {
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: row;
+  font-weight: 500;
+}
+
 .input {
  align-items: center;
  background-color: var(--UI-Opacity-White-100);
@@ -72,7 +90,7 @@
 }

 .listBoxItem.showRadioButton:before {
-  display: flex;
+  flex-shrink: 0;
  content: "";
  margin-right: var(--Spacing-x-one-and-half);
  background-color: white;
--- a/components/TempDesignSystem/Select/select.ts
+++ b/components/TempDesignSystem/Select/select.ts
@@ -11,6 +11,7 @@ export interface SelectProps
  value?: string | number
  maxHeight?: number
  showRadioButton?: boolean
+  discreet?: boolean
 }

 export type SelectPortalContainer = HTMLDivElement | undefined
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -1,5 +1,5 @@
 .modal {
-  --sidepeek-desktop-width: 600px;
+  --sidepeek-desktop-width: 560px;
 }
@keyframes slide-in {
  from {
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -52,6 +52,10 @@
  text-align: left;
 }

+.textAlignRight {
+  text-align: right;
+}
+
 .black {
  color: var(--Main-Grey-100);
 }
@@ -76,7 +80,7 @@
  color: var(--Base-Text-Medium-contrast);
 }

-.textHighContrast {
+.baseTextHighContrast {
  color: var(--Base-Text-High-contrast);
 }

--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -13,7 +13,7 @@ const config = {
      red: styles.red,
      textMediumContrast: styles.textMediumContrast,
      baseTextMediumContrast: styles.baseTextMediumContrast,
-      textHighContrast: styles.textHighContrast,
+      baseTextHighContrast: styles.baseTextHighContrast,
      white: styles.white,
      peach50: styles.peach50,
      uiTextHighContrast: styles.uiTextHighContrast,
@@ -30,6 +30,7 @@ const config = {
    textAlign: {
      center: styles.textAlignCenter,
      left: styles.textAlignLeft,
+      right: styles.textAlignRight,
    },
    textTransform: {
      bold: styles.bold,
@@ -52,6 +53,7 @@ const fontOnlyconfig = {
    textAlign: {
      center: styles.textAlignCenter,
      left: styles.textAlignLeft,
+      right: styles.textAlignRight,
    },
    textTransform: {
      bold: styles.bold,
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -25,6 +25,15 @@ p.caption {
  text-decoration: var(--typography-Caption-Labels-textDecoration);
 }

+.underline {
+  font-family: var(--typography-Caption-Underline-fontFamily);
+  font-size: var(--typography-Caption-Underline-fontSize);
+  font-weight: var(--typography-Caption-Underline-fontWeight);
+  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
+  line-height: var(--typography-Caption-Underline-lineHeight);
+  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
+}
+
 .regular {
  font-family: var(--typography-Caption-Regular-fontFamily);
  font-size: var(--typography-Caption-Regular-fontSize);
@@ -58,6 +67,14 @@ p.caption {
  color: var(--Base-Text-Medium-contrast);
 }

+.baseTextHighContrast {
+  color: var(--Base-Text-High-contrast);
+}
+
+.baseTextMediumContrast {
+  color: var(--Base-Text-Medium-contrast);
+}
+
 .red {
  color: var(--Scandic-Brand-Scandic-Red);
 }
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -8,6 +8,7 @@ const config = {
      regular: styles.regular,
      bold: styles.bold,
      label: styles.labels,
+      underline: styles.underline,
    },
    color: {
      baseTextAccent: styles.baseTextAccent,
@@ -22,6 +23,8 @@ const config = {
      uiTextMediumContrast: styles.uiTextMediumContrast,
      uiTextPlaceholder: styles.uiTextPlaceholder,
      disabled: styles.disabled,
+      baseTextHighContrast: styles.baseTextHighContrast,
+      baseTextMediumContrast: styles.baseTextMediumContrast,
    },
    textTransform: {
      uppercase: styles.uppercase,
@@ -48,6 +51,7 @@ const fontOnlyConfig = {
      regular: styles.regular,
      bold: styles.bold,
      label: styles.labels,
+      underline: styles.underline,
    },
    textTransform: {
      uppercase: styles.uppercase,
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -76,3 +76,7 @@
 .white {
  color: var(--Main-Grey-White);
 }
+
+.baseTextDisabled {
+  color: var(--Base-Text-Disabled);
+}
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -18,6 +18,7 @@ const config = {
      uiTextHighContrast: styles.uiTextHighContrast,
      uiTextPlaceholder: styles.uiTextPlaceholder,
      white: styles.white,
+      baseTextDisabled: styles.baseTextDisabled,
    },
    textAlign: {
      center: styles.center,
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -47,6 +47,10 @@
  text-align: left;
 }

+.right {
+  text-align: right;
+}
+
 .black {
  color: var(--Main-Grey-100);
 }
@@ -79,6 +83,6 @@
  color: var(--Scandic-Brand-Scandic-Red);
 }

-.disabled {
+.baseTextDisabled {
  color: var(--Base-Text-Disabled);
 }
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -7,7 +7,7 @@ const config = {
    color: {
      black: styles.black,
      burgundy: styles.burgundy,
-      disabled: styles.disabled,
+      baseTextDisabled: styles.baseTextDisabled,
      pale: styles.pale,
      baseTextMediumContrast: styles.baseTextMediumContrast,
      uiTextHighContrast: styles.uiTextHighContrast,
@@ -18,6 +18,7 @@ const config = {
    textAlign: {
      center: styles.center,
      left: styles.left,
+      right: styles.right,
    },
    textTransform: {
      regular: styles.regular,
--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useState } from "react"

 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -16,8 +16,20 @@ export function Tooltip<P extends TooltipPosition>({
  children,
 }: PropsWithChildren<TooltipProps<P>>) {
  const className = tooltipVariants({ position, arrow })
+  const [isActive, setIsActive] = useState(false)
+
+  function handleToggle() {
+    setIsActive(!isActive)
+  }
+
  return (
-    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+    <div
+      className={styles.tooltipContainer}
+      role="tooltip"
+      aria-label={text}
+      onClick={handleToggle}
+      data-active={isActive}
+    >
      <div className={className}>
        {heading && (
          <Caption type="bold" color="white">
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -1,6 +1,6 @@
 .tooltipContainer {
  position: relative;
-  display: inline-block;
+  display: flex;
 }

 .tooltip {
@@ -140,3 +140,15 @@
  border-width: 7px 8px 7px 0;
  border-color: transparent var(--UI-Text-Active) transparent transparent;
 }
+
+@media screen and (max-width: 768px) {
+  .tooltipContainer[data-active="true"] .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltipContainer[data-active="false"] .tooltip {
+    visibility: hidden;
+    opacity: 0;
+  }
+}