Merged in chore/replace-deprecated-body (pull request #3300)

Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
--- a/packages/design-system/.storybook/content/Colors.tsx
+++ b/packages/design-system/.storybook/content/Colors.tsx
@@ -64,7 +64,7 @@ export function Colors({
  const [selectedThemeName, setSelectedThemeName] = useState<string>(
    defaultThemeName || themes?.[0]?.name || ''
  )
-  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+  const [, setCopiedKey] = useState<string | null>(null)

  const currentTheme =
    propTheme ||
--- a/packages/design-system/lib/components/Body/body.module.css
+++ b/packages/design-system/lib/components/Body/body.module.css
@@ -1,149 +0,0 @@
-.body {
-  margin: 0;
-  padding: 0;
-}
-
-.bodyFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
-}
-
-.regular {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: 400;
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  text-decoration: var(--typography-Body-Regular-textDecoration);
-}
-
-.underlined {
-  font-family: var(--typography-Body-Underline-fontFamily);
-  font-size: var(--typography-Body-Underline-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Underline-letterSpacing);
-  line-height: var(--typography-Body-Underline-lineHeight);
-  text-decoration: var(--typography-Body-Underline-textDecoration);
-}
-
-.uppercase {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  text-decoration: var(--typography-Body-Regular-textDecoration);
-  text-transform: uppercase;
-}
-
-.textAlignCenter {
-  text-align: center;
-}
-
-.textAlignLeft {
-  text-align: left;
-}
-
-.textAlignRight {
-  text-align: right;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.grey {
-  color: var(--UI-Grey-60);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.peach50 {
-  color: var(--Primary-Dark-On-Surface-Accent);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.primaryLight {
-  color: var(--Primary-Light-On-Surface-Text);
-}
-
-.secondaryLight {
-  color: var(--Secondary-Light-On-Surface-Text);
-}
-
-.tertiaryLight {
-  color: var(--Tertiary-Light-On-Surface-Text);
-}
-
-.primaryDark {
-  color: var(--Primary-Dark-On-Surface-Text);
-}
-
-.primaryDim {
-  color: var(--Primary-Dim-On-Surface-Text);
-}
-
-.primaryStrong {
-  color: var(--Primary-Strong-On-Surface-Text);
-}
-
-.baseText {
-  color: var(--Base-Text-Inverted);
-}
-
-.success {
-  color: var(--UI-Semantic-Success);
-}
--- a/packages/design-system/lib/components/Body/index.tsx
+++ b/packages/design-system/lib/components/Body/index.tsx
@@ -1,40 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-
-import { bodyFontOnlyVariants, bodyVariants } from './variants'
-
-import type { VariantProps } from 'class-variance-authority'
-
-interface BodyProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
-    VariantProps<typeof bodyVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Body({
-  asChild = false,
-  className = '',
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  ...props
-}: BodyProps) {
-  const Comp = asChild ? Slot : 'p'
-  const classNames = fontOnly
-    ? bodyFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-      })
-    : bodyVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-      })
-  return <Comp className={classNames} {...props} />
-}
--- a/packages/design-system/lib/components/Body/variants.ts
+++ b/packages/design-system/lib/components/Body/variants.ts
@@ -1,71 +0,0 @@
-import { cva } from 'class-variance-authority'
-
-import styles from './body.module.css'
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      disabled: styles.disabled,
-      grey: styles.grey,
-      pale: styles.pale,
-      red: styles.red,
-      textMediumContrast: styles.textMediumContrast,
-      baseTextMediumContrast: styles.baseTextMediumContrast,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      white: styles.white,
-      peach50: styles.peach50,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      primaryLight: styles.primaryLight,
-      secondaryLight: styles.secondaryLight,
-      tertiaryLight: styles.tertiaryLight,
-      primaryDark: styles.primaryDark,
-      primaryDim: styles.primaryDim,
-      primaryStrong: styles.primaryStrong,
-      baseText: styles.baseText,
-      success: styles.success,
-    },
-    textAlign: {
-      center: styles.textAlignCenter,
-      left: styles.textAlignLeft,
-      right: styles.textAlignRight,
-    },
-    textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
-      underlined: styles.underlined,
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    color: 'black',
-    textAlign: 'left',
-    textTransform: 'regular',
-  },
-} as const
-
-export const bodyVariants = cva(styles.body, config)
-
-const fontOnlyconfig = {
-  variants: {
-    textAlign: {
-      center: styles.textAlignCenter,
-      left: styles.textAlignLeft,
-      right: styles.textAlignRight,
-    },
-    textTransform: {
-      bold: styles.bold,
-      regular: styles.regular,
-      underlined: styles.underlined,
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    textAlign: 'left',
-    textTransform: 'regular',
-  },
-} as const
-export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)
--- a/packages/design-system/lib/components/DeprecatedSelect/index.tsx
+++ b/packages/design-system/lib/components/DeprecatedSelect/index.tsx
@@ -13,8 +13,8 @@ import {
 import SelectChevron from './SelectChevron'

 import styles from './select.module.css'
-import Body from '../Body'
 import { InputLabel } from '../InputLabel'
+import { Typography } from '../Typography'

 interface SelectProps extends Omit<
  React.SelectHTMLAttributes<HTMLSelectElement>,
@@ -95,7 +95,7 @@ export default function Select({
        onOpenChange={setOverflowVisible}
        isDisabled={disabled}
      >
-        <Body asChild fontOnly>
+        <Typography variant="Body/Paragraph/mdRegular">
          <Button
            className={`${styles.input} select-button`}
            data-testid={name}
@@ -111,18 +111,23 @@ export default function Select({
                    {discreet && DELIMITER}
                  </InputLabel>
                  {selectedText && (
-                    <Body className={optionsIcon ? styles.iconLabel : ''}>
-                      {optionsIcon ? optionsIcon : null}
-                      {selectedText}
-                    </Body>
+                    <Typography
+                      variant="Body/Paragraph/mdRegular"
+                      className={optionsIcon ? styles.iconLabel : ''}
+                    >
+                      <p>
+                        {optionsIcon ? optionsIcon : null}
+                        {selectedText}
+                      </p>
+                    </Typography>
                  )}
                </>
              )}
            </SelectValue>
            <SelectChevron {...chevronProps} />
          </Button>
-        </Body>
-        <Body asChild fontOnly>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
          <Popover
            className={styles.popover}
            placement="bottom"
@@ -151,7 +156,7 @@ export default function Select({
              ))}
            </ListBox>
          </Popover>
-        </Body>
+        </Typography>
      </ReactAriaSelect>
    </div>
  )
--- a/packages/design-system/lib/components/InputNew/Input.tsx
+++ b/packages/design-system/lib/components/InputNew/Input.tsx
@@ -24,6 +24,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
    labelPosition = 'floating',
    leftIcon,
    rightIcon,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onRightIconClick,
    showClearContentIcon,
    placeholder,
@@ -109,6 +110,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
                className={styles.rightIconButton}
                theme="Black"
                onClick={onClearContent}
+                // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                aria-label="Clear content"
              >
                <MaterialIcon icon="cancel" />
@@ -156,6 +158,7 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
            className={styles.rightIconButton}
            theme="Black"
            onClick={onClearContent}
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            aria-label="Clear content"
          >
            <MaterialIcon icon="cancel" />