diff --git a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css b/apps/scandic-web/components/TempDesignSystem/Button/button.module.css
index 2b9df3319..291e14f31 100644
--- a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Button/button.module.css
@@ -278,10 +278,7 @@ a.default {
.baseText:focus,
.baseText:hover {
color: var(--Base-Button-Text-On-Fill-Hover);
-
- & span:not(:global(.material-symbols)) {
- text-decoration: underline;
- }
+ text-decoration: underline;
}
.baseText:disabled {
@@ -300,6 +297,7 @@ a.default {
.icon.baseText:focus svg *,
.icon.baseText:hover svg * {
fill: var(--Base-Button-Text-On-Fill-Hover);
+ text-decoration: underline;
}
.icon.baseText:disabled svg,
diff --git a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx b/apps/scandic-web/components/TempDesignSystem/Button/index.tsx
index 88f20ec16..83e3ebe99 100644
--- a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Button/index.tsx
@@ -1,29 +1,14 @@
"use client"
import { Slot } from "@radix-ui/react-slot"
-import { Children, type ReactNode } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { buttonVariants } from "./variants"
import type { ButtonProps } from "./button"
-// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
-// This is so that we can better support underline on buttons as Material Symbols
-// are implemented as a font and therefore gets underline. Icons inside buttons
-// should not get an underline.
-function wrapTextNodes(children: ReactNode): ReactNode {
- return Children.map(children, (child) => {
- if (typeof child === "string") {
- return {child}
- }
- return child
- })
-}
-
export default function Button(props: ButtonProps) {
const {
- children,
className,
clean,
intent,
@@ -46,17 +31,9 @@ export default function Button(props: ButtonProps) {
variant,
})
- const wrappedChildren =
- typeof children === "function" ? children : wrapTextNodes(children)
-
if (restProps.asChild) {
const { asChild, ...slotProps } = restProps
- return (
-
- {/* @ts-expect-error: Incorrect types for Slot */}
- {wrappedChildren}
-
- )
+ return
}
const { asChild, onClick, disabled, ...racProps } = restProps
@@ -66,8 +43,6 @@ export default function Button(props: ButtonProps) {
isDisabled={disabled}
onPress={onClick}
{...racProps}
- >
- {wrappedChildren}
-
+ />
)
}
diff --git a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx b/apps/scandic-web/components/TempDesignSystem/Link/index.tsx
index 76fd06814..931b4594c 100644
--- a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Link/index.tsx
@@ -1,7 +1,7 @@
"use client"
import NextLink from "next/link"
import { usePathname, useSearchParams } from "next/navigation"
-import { Children, type ReactNode, useCallback, useMemo } from "react"
+import { useCallback, useMemo } from "react"
import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
import { trackClick } from "@/utils/tracking"
@@ -10,21 +10,7 @@ import { linkVariants } from "./variants"
import type { LinkProps } from "./link"
-// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
-// This is so that we can better support underline on links as Material Symbols
-// are implemented as a font and therefore gets underline. Icons inside links
-// should not get an underline.
-function wrapTextNodes(children: ReactNode): ReactNode {
- return Children.map(children, (child) => {
- if (typeof child === "string") {
- return {child}
- }
- return child
- })
-}
-
export default function Link({
- children,
active,
className,
color,
@@ -110,9 +96,6 @@ export default function Link({
className: classNames,
}
- const wrappedChildren =
- typeof children === "function" ? children : wrapTextNodes(children)
-
return isExternal ? (
- {wrappedChildren}
-
+ />
) : (
- {wrappedChildren}
-
+ />
)
}
diff --git a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css b/apps/scandic-web/components/TempDesignSystem/Link/link.module.css
index fa8f8607a..10ce6991d 100644
--- a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Link/link.module.css
@@ -43,10 +43,7 @@
font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
-
- & span:not(:global(.material-symbols)) {
- text-decoration: underline;
- }
+ text-decoration: underline;
}
.myPageMobileDropdown {
diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx
index 04e495227..1869fabcb 100644
--- a/packages/design-system/.storybook/preview.tsx
+++ b/packages/design-system/.storybook/preview.tsx
@@ -2,8 +2,6 @@ import { withThemeByClassName } from '@storybook/addon-themes'
import type { Preview, ReactRenderer } from '@storybook/react'
-import 'react-material-symbols/rounded'
-
import '../lib/style.css'
import '../lib/fonts.css'
diff --git a/packages/design-system/lib/components/Button/Button.stories.tsx b/packages/design-system/lib/components/Button/Button.stories.tsx
index 41fc059f1..5ce8d78c2 100644
--- a/packages/design-system/lib/components/Button/Button.stories.tsx
+++ b/packages/design-system/lib/components/Button/Button.stories.tsx
@@ -5,7 +5,6 @@ import { fn } from '@storybook/test'
import { Button } from './Button'
import { config as buttonConfig } from './variants'
import { config as typographyConfig } from '../Typography/variants'
-import { MaterialIcon } from '../Icons'
const meta: Meta = {
title: 'Components/Button',
@@ -150,15 +149,3 @@ export const TextSmall: Story = {
size: 'Small',
},
}
-
-export const TextWithIcon: Story = {
- args: {
- ...TextDefault.args,
- children: (
- <>
-
- Add room
- >
- ),
- },
-}
diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css
index 926c4bbdc..cdd1ef50e 100644
--- a/packages/design-system/lib/components/Button/button.module.css
+++ b/packages/design-system/lib/components/Button/button.module.css
@@ -82,10 +82,6 @@
padding: var(--Space-x15) 0;
}
-.variant-text:hover span:not(:global(.material-symbols)) {
- text-decoration: underline;
-}
-
.variant-icon {
background-color: transparent;
border-color: transparent;