scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1711-switch-icons (pull request #1558)

Browse Source 
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-27 09:42:52 +00:00
parent 93c7fe64bf
commit 5de2a993a7
524 changed files with 4442 additions and 6802 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { VariantProps } from "class-variance-authority"
import type { ReactNode } from "react"
import type { IconName } from "@/types/components/icon"
import type { IconName } from "@/components/Icons/iconName"
import type { accordionItemVariants } from "./variants"
export interface AccordionItemProps
apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+10 -8
View File
@@ -2,8 +2,9 @@
import { useRef } from "react"
import { ChevronDownIcon } from "@/components/Icons"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { IconByIconName } from "@/components/Icons/IconByIconName"
import { trackAccordionClick } from "@/utils/tracking"
import Body from "../../Text/Body"
@@ -28,10 +29,11 @@ export default function AccordionItem({
const contentRef = useRef<HTMLDivElement>(null)
const detailsRef = useRef<HTMLDetailsElement>(null)
const FoundIcon = getIconByIconName(iconName)
const IconComp = icon
? icon
: FoundIcon && <FoundIcon color="baseTextHighcontrast" />
: iconName && (
<IconByIconName iconName={iconName} color="Icon/Interactive/Accent" />
)
function toggleAccordion() {
const details = detailsRef.current
@@ -83,11 +85,11 @@ export default function AccordionItem({
{subtitle && <Body color="baseTextHighContrast">{subtitle}</Body>}
</div>
)}
<ChevronDownIcon
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.chevron}
color="burgundy"
width={20}
height={20}
color="Icon/Interactive/Default"
size={20}
/>
</summary>
<div ref={contentRef} className={styles.content}>
apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx
+3 -2
View File
@@ -2,7 +2,8 @@
import { useState } from "react"
import { ChevronRightIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import JsonToHtml from "@/components/JsonToHtml"
import Button from "@/components/TempDesignSystem/Button"
@@ -30,7 +31,7 @@ export default function AlertSidepeek({
wrapping
>
{ctaText}
<ChevronRightIcon height={20} width={20} />
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
<SidePeek
apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
"use client"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { CloseLargeIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Link from "../Link"
@@ -42,7 +42,7 @@ export default function Alert({
<section className={classNames} role={ariaRole} aria-live={ariaLive}>
<div className={styles.content}>
<span className={styles.iconWrapper}>
<Icon className={styles.icon} width={24} height={24} />
<Icon className={styles.icon} size={24} />
</span>
<div className={styles.innerContent}>
<div className={styles.textWrapper}>
@@ -91,7 +91,7 @@ export default function Alert({
</div>
{close ? (
<Button onPress={close} variant="Text" className={styles.closeButton}>
<CloseLargeIcon height={24} width={24} color="uiTextPlaceholder" />
<MaterialIcon icon="close" color="CurrentColor" />
</Button>
) : null}
</div>
apps/scandic-web/components/TempDesignSystem/Alert/utils.ts
-17
View File
@@ -1,17 +0,0 @@
import { InfoCircleIcon } from "@/components/Icons"
import CrossCircleIcon from "@/components/Icons/CrossCircle"
import WarningTriangleIcon from "@/components/Icons/WarningTriangle"
import { AlertTypeEnum } from "@/types/enums/alert"
export function getIconByAlertType(alertType: AlertTypeEnum) {
switch (alertType) {
case AlertTypeEnum.Alarm:
return CrossCircleIcon
case AlertTypeEnum.Warning:
return WarningTriangleIcon
case AlertTypeEnum.Info:
default:
return InfoCircleIcon
}
}
apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
+41
View File
@@ -0,0 +1,41 @@
/* eslint-disable react/display-name */
import {
MaterialIcon,
type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons"
import { AlertTypeEnum } from "@/types/enums/alert"
export function getIconByAlertType(alertType: AlertTypeEnum) {
switch (alertType) {
case AlertTypeEnum.Alarm:
return function (props: MaterialIconSetIconProps) {
return (
<MaterialIcon
color="Icon/Inverted"
isFilled
icon="cancel"
{...props}
/>
)
}
case AlertTypeEnum.Warning:
return function (props: MaterialIconSetIconProps) {
return (
<MaterialIcon
icon="warning"
color="Icon/Inverted"
isFilled
{...props}
/>
)
}
case AlertTypeEnum.Info:
default:
return function (props: MaterialIconSetIconProps) {
return (
<MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
)
}
}
}
apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx
+2 -2
View File
@@ -3,7 +3,7 @@
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { ArrowUpIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { backToTopButtonVariants } from "./variants"
@@ -22,7 +22,7 @@ export function BackToTopButton({
className={backToTopButtonVariants({ position })}
onPress={onClick}
>
<ArrowUpIcon color="burgundy" />
<MaterialIcon icon="arrow_upward" color="CurrentColor" />
<span className={styles.backToTopButtonText}>
{intl.formatMessage({ id: "Back to top" })}
</span>
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx
+7 -6
View File
@@ -1,4 +1,5 @@
import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -9,13 +10,13 @@ export default function BreadcrumbsSkeleton() {
<ul className={styles.list}>
<li className={styles.listItem}>
<span className={styles.homeLink} color="peach80">
<HouseIcon color="peach80" />
<MaterialIcon icon="home" color="Icon/Interactive/Secondary" />
</span>
<ChevronRightIcon
<MaterialIcon
icon="chevron_right"
aria-hidden="true"
color="peach80"
height={20}
width={20}
color="Icon/Interactive/Secondary"
size={20}
/>
</li>
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx
+15 -5
View File
@@ -1,5 +1,5 @@
import { HouseIcon } from "@/components/Icons"
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -34,9 +34,14 @@ export default function Breadcrumbs({
variant="breadcrumb"
aria-label={homeBreadcrumb.title}
>
<HouseIcon width={16} height={16} color="peach80" />
<MaterialIcon icon="home" size={16} color="CurrentColor" />
</Link>
<ChevronRightSmallIcon aria-hidden="true" color="peach80" />
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="Icon/Interactive/Secondary"
/>
</li>
) : null}
@@ -51,7 +56,12 @@ export default function Breadcrumbs({
>
{breadcrumb.title}
</Link>
<ChevronRightSmallIcon aria-hidden="true" color="peach80" />
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="Icon/Interactive/Secondary"
/>
</li>
)
}
apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
+6 -4
View File
@@ -3,8 +3,8 @@
import { Checkbox as AriaCheckbox } from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"
import { InfoCircleIcon } from "@/components/Icons"
import CheckIcon from "@/components/Icons/Check"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./checkbox.module.css"
@@ -44,13 +44,15 @@ export default function Checkbox({
className={styles.checkbox}
tabIndex={registerOptions?.disabled ? undefined : 0}
>
{isSelected && <CheckIcon color="white" />}
{isSelected && (
<MaterialIcon icon="check" color="Icon/Inverted" />
)}
</span>
{children}
</span>
{fieldState.error && !hideError ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
{fieldState.error.message}
</Caption>
) : null}
apps/scandic-web/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import type { IconProps } from "@/types/components/icon"
import type { IconProps } from "@scandic-hotels/design-system/Icons"
interface BaseCardProps
extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
apps/scandic-web/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+5 -4
View File
@@ -2,7 +2,8 @@
import { useFormContext } from "react-hook-form"
import { CheckIcon, CloseIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -46,7 +47,7 @@ export default function Card({
{Icon ? (
<Icon
className={styles.icon}
color="uiTextHighContrast"
color="Icon/Intense"
height={iconHeight}
width={iconWidth}
/>
@@ -73,9 +74,9 @@ function List({ declined, list }: ListProps) {
return list.map((listItem) => (
<span key={listItem.title} className={styles.listItem}>
{declined ? (
<CloseIcon color="uiTextMediumContrast" height={20} width={20} />
<MaterialIcon icon="close" color="Icon/Feedback/Neutral" size={20} />
) : (
<CheckIcon color="baseIconLowContrast" height={20} width={20} />
<MaterialIcon icon="check" color="Icon/Accent" size={20} />
)}
<Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
</span>
apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import { InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./error.module.css"
@@ -6,7 +7,7 @@ import styles from "./error.module.css"
export default function Error({ children }: React.PropsWithChildren) {
return (
<Caption className={styles.message} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
{children}
</Caption>
)
apps/scandic-web/components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
+13 -6
View File
@@ -1,7 +1,8 @@
import { useMemo } from "react"
import { useFormContext } from "react-hook-form"
import { HeartIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./chip.module.css"
@@ -9,7 +10,7 @@ import styles from "./chip.module.css"
import type { FilterChipProps } from "@/types/components/form/filterChip"
export default function FilterChip({
Icon = HeartIcon,
Icon = () => <MaterialIcon icon="favorite" />,
iconHeight = 20,
iconWidth = 20,
id,
@@ -23,12 +24,18 @@ export default function FilterChip({
}: FilterChipProps) {
const { register } = useFormContext()
const color = useMemo(() => {
const captionColor = useMemo(() => {
if (selected) return "burgundy"
if (disabled) return "disabled"
return "uiTextPlaceholder"
}, [selected, disabled])
const iconColor = useMemo(() => {
if (selected) return "Icon/Interactive/Default"
if (disabled) return "Icon/Interactive/Disabled"
return "Icon/Interactive/Placeholder"
}, [selected, disabled])
return (
<label
className={styles.label}
@@ -37,16 +44,16 @@ export default function FilterChip({
>
<Icon
className={styles.icon}
color={color}
color={captionColor}
height={iconHeight}
width={iconWidth}
/>
<Caption type="bold" color={color} className={styles.caption}>
<Caption type="bold" color={captionColor} className={styles.caption}>
{label}
</Caption>
{hasTooltip && (
<InfoCircleIcon color={color} height={iconHeight} width={iconWidth} />
<MaterialIcon icon="info" color={iconColor} size={iconHeight} />
)}
<input
apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+4 -3
View File
@@ -3,7 +3,8 @@ import { Text, TextField } from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -69,14 +70,14 @@ export default function Input({
{helpText && !fieldState.error ? (
<Caption asChild color="black">
<Text className={styles.helpText} slot="description">
<CheckIcon height={20} width={30} />
<MaterialIcon icon="check" size={20} />
{helpText}
</Text>
</Caption>
) : null}
{fieldState.error && !hideError ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
{intl.formatMessage({ id: fieldState.error.message })}
</Caption>
) : null}
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
+11 -12
View File
@@ -5,13 +5,8 @@ import { Text, TextField } from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import {
CheckIcon,
CloseIcon,
EyeHideIcon,
EyeShowIcon,
InfoCircleIcon,
} from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Button from "@/components/TempDesignSystem/Button"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -95,7 +90,11 @@ export default function PasswordInput({
aria-controls={field.name}
className={styles.toggleButton}
>
{isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
{isPasswordVisible ? (
<MaterialIcon icon="visibility_off" />
) : (
<MaterialIcon icon="visibility" />
)}
</Button>
) : null}
</div>
@@ -107,13 +106,13 @@ export default function PasswordInput({
{isNewPassword ? (
!field.value && fieldState.error ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
{fieldState.error.message}
</Caption>
) : null
) : fieldState.error ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
{fieldState.error &&
intl.formatMessage({ id: fieldState.error.message })}
</Caption>
@@ -127,9 +126,9 @@ export default function PasswordInput({
function Icon({ errorMessage, errors }: IconProps) {
return errors.includes(errorMessage) ? (
<CloseIcon color="red" height={20} width={20} />
<MaterialIcon icon="close" color="Icon/Interactive/Accent" size={20} />
) : (
<CheckIcon color="green" height={20} width={20} />
<MaterialIcon icon="check" color="Icon/Feedback/Success" size={20} />
)
}
apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
+6 -5
View File
@@ -12,7 +12,8 @@ import {
} from "react-international-phone"
import { useIntl } from "react-intl"
import { ChevronDownIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Label from "@/components/TempDesignSystem/Form/Label"
@@ -116,11 +117,11 @@ export default function Phone({
prefix="+"
/>
</Body>
<ChevronDownIcon
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.chevron}
color="grey80"
height={18}
width={18}
color="Icon/Default"
size={18}
/>
</span>
</button>
apps/scandic-web/components/TempDesignSystem/Form/SelectChevron/index.tsx
+9 -4
View File
@@ -1,13 +1,18 @@
import { ChevronDownIcon } from "@/components/Icons"
import {
type IconProps,
MaterialIcon,
} from "@scandic-hotels/design-system/Icons"
import styles from "./chevron.module.css"
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} {...props} />
<MaterialIcon
icon="keyboard_arrow_down"
color={props.color ?? "Icon/Default"}
size={20}
/>
</span>
)
}
apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx
+3 -2
View File
@@ -3,7 +3,8 @@
import { Switch as AriaSwitch } from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"
import { InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./switch.module.css"
@@ -36,7 +37,7 @@ export default function Switch({
<span className={styles.switch} tabIndex={0}></span>
{fieldState.error ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
{fieldState.error.message}
</Caption>
) : null}
apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
+4 -3
View File
@@ -8,7 +8,8 @@ import {
} from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Label from "@/components/TempDesignSystem/Form/Label"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -64,14 +65,14 @@ export default function TextArea({
{helpText && !fieldState.error ? (
<Caption asChild color="black">
<Text className={styles.helpText} slot="description">
<CheckIcon height={20} width={30} />
<MaterialIcon icon="check" size={30} />
{helpText}
</Text>
</Caption>
) : null}
{fieldState.error ? (
<Caption className={styles.error} fontOnly>
<InfoCircleIcon color="red" />
<MaterialIcon icon="info" color="Icon/Interactive/Accent" />
{fieldState.error.message}
</Caption>
) : null}
apps/scandic-web/components/TempDesignSystem/LinkChips/Chip/index.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import Link from "next/link"
import { ChevronRightSmallIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./chip.module.css"
@@ -12,7 +13,7 @@ export default function LinkChip({ url, title }: LinkChipProps) {
<Caption type="bold" color="burgundy" asChild>
<Link href={url} className={styles.linkChip}>
{title}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Link>
</Caption>
)
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
+6 -5
View File
@@ -1,4 +1,5 @@
import ArrowRight from "@/components/Icons/ArrowRight"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -48,11 +49,11 @@ export default function LoyaltyCard({
target={link.openInNewTab ? "_blank" : undefined}
variant="underscored"
>
<ArrowRight
color="burgundy"
<MaterialIcon
icon="arrow_right"
color="CurrentColor"
className={styles.icon}
height="20"
width="20"
size={20}
/>
{link.title}
</Link>
apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
+11 -3
View File
@@ -2,7 +2,8 @@
import { useState } from "react"
import { useIntl } from "react-intl"
import { MeasureIcon, PersonIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Image from "@/components/Image"
import Divider from "../Divider"
@@ -49,11 +50,18 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
</Subtitle>
<div className={styles.capacity}>
<div className={styles.iconText}>
<MeasureIcon color="uiTextPlaceholder" />
<MaterialIcon
icon="straighten"
color="Icon/Interactive/Placeholder"
/>
<Caption color="uiTextPlaceholder">{room.size} m2</Caption>
</div>
<div className={styles.iconText}>
<PersonIcon color="uiTextPlaceholder" width={16} height={16} />
<MaterialIcon
icon="person"
color="Icon/Interactive/Placeholder"
size={16}
/>
<Caption color="uiTextPlaceholder">
{intl.formatMessage(
{ id: "max {seatings} pers" },
apps/scandic-web/components/TempDesignSystem/Popover/index.tsx
+3 -2
View File
@@ -6,7 +6,8 @@ import {
Popover as RAPopover,
} from "react-aria-components"
import { CloseLargeIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
import { Arrow } from "./Arrow"
@@ -39,7 +40,7 @@ export default function Popover({
{({ close }) => (
<>
<Button className={styles.closeButton} onPress={close}>
<CloseLargeIcon height={20} width={20} />
<MaterialIcon icon="close" size={20} />
</Button>
{children}
</>
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx
+7 -2
View File
@@ -2,7 +2,8 @@
import { useIntl } from "react-intl"
import { ChevronDownIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { showMoreButtonVariants } from "./variants"
@@ -52,7 +53,11 @@ export default function ShowMoreButton({
fullWidth={intent ? true : false}
size={intent && "small"}
>
<ChevronDownIcon className={styles.icon} />
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.icon}
color="CurrentColor"
/>
{showLess ? textShowLess : textShowMore}
</Button>
</div>
apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
+2 -2
View File
@@ -5,9 +5,9 @@ import { useContext, useRef } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CloseLargeIcon } from "@/components/Icons"
import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
import Button from "../Button"
@@ -69,7 +69,7 @@ function SidePeek({
intent="text"
onPress={onClose}
>
<CloseLargeIcon color="burgundy" />
<MaterialIcon icon="close" color="Icon/Interactive/Default" />
</Button>
</header>
<div className={styles.sidePeekContent}>{children}</div>
apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+3 -2
View File
@@ -2,7 +2,8 @@
import { useState } from "react"
import { ChevronRightSmallIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import JsonToHtml from "@/components/JsonToHtml"
import Button from "@/components/TempDesignSystem/Button"
@@ -31,7 +32,7 @@ export default function TeaserCardSidepeek({
wrapping
>
{button.call_to_action_text}
<ChevronRightSmallIcon />
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
<SidePeek
title={heading}
apps/scandic-web/components/TempDesignSystem/Toasts/index.tsx
+17 -16
View File
@@ -1,12 +1,9 @@
import { type ExternalToast, toast as sonnerToast, Toaster } from "sonner"
import {
CheckCircleIcon,
CloseLargeIcon,
CrossCircle,
InfoCircleIcon,
WarningTriangle,
} from "@/components/Icons"
MaterialIcon,
type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons"
import Button from "../Button"
import Body from "../Text/Body"
@@ -20,27 +17,31 @@ export function ToastHandler() {
return <Toaster position="bottom-right" duration={5000} />
}
function getIcon(variant: ToastsProps["variant"]) {
interface AlertIconProps {
variant: ToastsProps["variant"]
}
function AlertIcon({
variant,
...props
}: AlertIconProps & MaterialIconSetIconProps) {
switch (variant) {
case "error":
return CrossCircle
return <MaterialIcon icon="cancel" {...props} />
case "info":
return InfoCircleIcon
return <MaterialIcon icon="info" {...props} />
case "success":
return CheckCircleIcon
return <MaterialIcon icon="check_circle" {...props} />
case "warning":
return WarningTriangle
return <MaterialIcon icon="warning" {...props} />
}
}
export function Toast({ children, message, onClose, variant }: ToastsProps) {
const className = toastVariants({ variant })
const Icon = getIcon(variant)
const Icon = <AlertIcon variant={variant} color="Icon/Inverted" />
return (
<div className={className}>
<div className={styles.iconContainer}>
{Icon && <Icon color="white" height={24} width={24} />}
</div>
<div className={styles.iconContainer}>{Icon && Icon}</div>
{message ? (
<Body className={styles.message}>{message}</Body>
) : (
@@ -48,7 +49,7 @@ export function Toast({ children, message, onClose, variant }: ToastsProps) {
)}
{onClose ? (
<Button onClick={onClose} variant="icon" intent="tertiary">
<CloseLargeIcon />
<MaterialIcon icon="close" />
</Button>
) : null}
</div>