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/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}