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

Merged in fix/BOOK-293-button-variants (pull request #3371)

Browse Source 
fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-19 12:32:52 +00:00
committed by Bianca Widstam
parent 2197ab2137
commit 3f632e6031
169 changed files with 665 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/booking-flow/lib/components/BookingCodeFilter/index.tsx
View File

@@ -134,13 +134,16 @@ export default function BookingCodeFilter() {
})}
</h3>
</Typography>
<IconButton variant="Muted" emphasis onPress={close}>
<MaterialIcon
icon="close"
size={24}
color="CurrentColor"
/>
</IconButton>
<IconButton
variant="Muted"
emphasis
onPress={close}
iconName="close"
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
/>
</div>
<Typography variant="Body/Paragraph/mdRegular">
<RadioGroup

9
packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
View File

@@ -8,14 +8,7 @@ export function AddToCalendarButton({ onPress }: { onPress: () => void }) {
const intl = useIntl()
return (
<Button
variant="Text"
size="Small"
color="Primary"
wrapping
typography="Body/Supporting text (caption)/smBold"
onPress={onPress}
>
<Button variant="Text" size="sm" color="Primary" onPress={onPress}>
<MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
{intl.formatMessage({

3
packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/ManageBooking.tsx
View File

@@ -39,9 +39,8 @@ export default function ManageBooking({ booking }: ManageBookingProps) {
<ButtonLink
href={myStayURL}
variant="Text"
size="Small"
size="sm"
color="Primary"
typography="Body/Supporting text (caption)/smBold"
wrapping
>
<MaterialIcon size={20} icon="edit_square" color="CurrentColor" />

2
packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx
View File

@@ -26,7 +26,7 @@ export function Promo({ buttonText, href, text, title }: PromoProps) {
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{text}</p>
</Typography>
<Button size="Small" variant="Secondary" color="Inverted" wrapping>
<Button size="sm" variant="Secondary" color="Inverted" wrapping>
<div>{buttonText}</div>
</Button>
</article>

1
packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx
View File

@@ -137,7 +137,6 @@ export function ReceiptRoom({
<Button
className={styles.termsButton}
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({

2
packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx
View File

@@ -24,7 +24,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
</p>
</Typography>
<Button size="Small" onPress={handleRefetch}>
<Button size="sm" onPress={handleRefetch}>
{intl.formatMessage({
id: "bookingConfirmation.linkedReservation.tryAgain",
defaultMessage: "Try again",

1
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
View File

@@ -90,6 +90,7 @@
@media screen and (min-width: 768px) and (max-width: 1366px) {
.container {
display: flex;
align-items: center;
}
.codePopover {
background: var(--Base-Surface-Primary-light-Normal);

10
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
View File

@@ -230,13 +230,7 @@ function CodeRulesModal() {
return (
<Modal
trigger={
<IconButton variant="Muted" size="sm" emphasis>
<MaterialIcon
icon="info"
color="Icon/Interactive/Placeholder"
size={20}
/>
</IconButton>
<IconButton variant="Muted" size="sm" emphasis iconName="info" />
}
title={codeVoucher}
>
@@ -264,7 +258,7 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
</Checkbox>
{bookingCodeValue ? (
<Button
size="Small"
size="sm"
className={styles.hideOnMobile}
variant="Tertiary"
type="button"

2
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RemoveExtraRooms/RemoveExtraRooms.tsx
View File

@@ -24,7 +24,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
style={{ width: "100%" }}
type="button"
onClick={removeExtraRooms}
size="Small"
size="sm"
variant="Secondary"
{...props}
>

9
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx
View File

@@ -101,14 +101,7 @@ export default function RewardNight() {
</Typography>
<Modal
trigger={
<IconButton variant="Muted" emphasis size="sm">
<MaterialIcon
icon="info"
size={20}
color="Icon/Interactive/Placeholder"
className={styles.errorIcon}
/>
</IconButton>
<IconButton variant="Muted" emphasis size="sm" iconName="info" />
}
title={reward}
>

4
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx
View File

@@ -181,7 +181,7 @@ export function Search({
<Typography variant="Body/Supporting text (caption)/smBold">
<Button
variant="Text"
size="Small"
size="sm"
aria-label={intl.formatMessage({
id: "common.clear",
defaultMessage: "Clear",
@@ -197,7 +197,7 @@ export function Search({
<Button
className={styles.searchButton}
variant="Primary"
size="Small"
size="sm"
type="submit"
onPress={() => {
if (!searchTerm) {

22
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
View File

@@ -10,7 +10,6 @@ import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelR
import { dt } from "@scandic-hotels/common/dt"
import { Button } from "@scandic-hotels/design-system/Button"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -119,9 +118,8 @@ export default function FormContent({
form={formId}
type="submit"
isDisabled={isSearching}
>
<MaterialIcon icon="search" color="CurrentColor" size={28} />
</IconButton>
iconName="search"
/>
</div>
<div
className={cx(
@@ -147,10 +145,9 @@ export default function FormContent({
className={styles.submitButton}
form={formId}
variant="Primary"
size="Medium"
size="md"
type="submit"
isDisabled={isSearching}
typography="Body/Supporting text (caption)/smBold"
>
{isDirty && isBookingFlow
? intl.formatMessage({
@@ -210,9 +207,13 @@ export function BookingWidgetFormContentSkeleton() {
</div>
</div>
<div className={cx(styles.buttonContainer, styles.showOnTablet)}>
<IconButton variant="Filled" size="xl" type="submit" isDisabled>
<MaterialIcon icon="search" color="CurrentColor" size={28} />
</IconButton>
<IconButton
variant="Filled"
size="xl"
type="submit"
isDisabled
iconName="search"
/>
</div>
<div className={cx(styles.voucherContainer, styles.voucherRow)}>
<VoucherSkeleton />
@@ -221,10 +222,9 @@ export function BookingWidgetFormContentSkeleton() {
<Button
className={styles.submitButton}
variant="Primary"
size="Medium"
size="md"
type="submit"
isDisabled
typography="Body/Supporting text (caption)/smBold"
>
{intl.formatMessage({
id: "bookingWidget.button.search",

18
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
View File

@@ -131,8 +131,7 @@ export default function GuestsRoomsPickerDialog({
wrapping
onPress={handleAddRoom}
isDisabled
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
<MaterialIcon icon="add" color="CurrentColor" />
{addRoomLabel}
@@ -163,8 +162,7 @@ export default function GuestsRoomsPickerDialog({
wrapping
color="Primary"
onPress={handleAddRoom}
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
<MaterialIcon icon="add" color="CurrentColor" />
{addRoomLabel}
@@ -187,9 +185,8 @@ export default function GuestsRoomsPickerDialog({
wrapping
color="Primary"
isDisabled
size="Small"
size="sm"
onPress={handleAddRoom}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="add_circle" color="CurrentColor" />
{addRoomLabel}
@@ -204,9 +201,8 @@ export default function GuestsRoomsPickerDialog({
variant="Text"
wrapping
color="Primary"
size="Small"
size="sm"
onPress={handleAddRoom}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="add_circle" color="CurrentColor" />
{addRoomLabel}
@@ -220,8 +216,7 @@ export default function GuestsRoomsPickerDialog({
className={styles.hideOnDesktop}
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
{doneLabel}
</Button>
@@ -231,8 +226,7 @@ export default function GuestsRoomsPickerDialog({
className={styles.hideOnMobile}
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
{doneLabel}
</Button>

2
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -76,7 +76,7 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
<LoginButton
color="Primary"
variant="Tertiary"
size="Small"
size="sm"
lang={lang}
className={styles.login}
loginPosition="enter-details"

6
packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/index.tsx
View File

@@ -23,9 +23,8 @@ export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
<Button
variant="Text"
color="Primary"
size="Small"
size="sm"
type="button"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
className={buttonClassName}
onPress={() => setIsOpen(true)}
@@ -59,8 +58,7 @@ export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
className={styles.closeButton}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
onPress={() => setIsOpen(false)}
>
{intl.formatMessage({

5
packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -36,7 +36,6 @@ import useLang from "../../../hooks/useLang"
import { useEnterDetailsStore } from "../../../stores/enter-details"
import ConfirmBooking from "../Confirm"
import PriceChangeDialog from "../PriceChangeDialog"
import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
import BookingAlert from "./BookingAlert"
import { GuaranteeInfo } from "./GuaranteeInfo"
import {
@@ -47,6 +46,7 @@ import {
mustGuaranteeBooking,
writePaymentInfoToSessionStorage,
} from "./helpers"
import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
import { type PaymentFormData, paymentSchema } from "./schema"
import { getPaymentHeadingConfig } from "./utils"
@@ -497,8 +497,7 @@ export default function PaymentClient({
type="submit"
isDisabled={isSubmitting}
isPending={isSubmitting}
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
>
{intl.formatMessage({
id: "enterDetails.completeBooking",

3
packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
View File

@@ -82,11 +82,10 @@ export default function SelectedRoom() {
</Subtitle>
<Button
variant="Text"
size="Small"
size="sm"
onPress={changeRoom}
isDisabled={isPending}
wrapping={false}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
{intl.formatMessage({

3
packages/booking-flow/lib/components/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
View File

@@ -131,9 +131,8 @@ export default function SummaryBottomSheet({
<Button
variant="Primary"
color="Primary"
size="Large"
size="lg"
type="submit"
typography="Body/Paragraph/mdBold"
isDisabled={isSubmitting}
isPending={isSubmitting}
form={formId}

1
packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx
View File

@@ -196,7 +196,6 @@ export default function Room({
<Button
className={styles.termsButton}
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({

7
packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx
View File

@@ -65,12 +65,7 @@ export function HotelSidePeekContent({
<AdditionalAmenities amenities={hotel.detailedFacilities} />
</Accordion>
{hotelUrl ? (
<ButtonLink
href={hotelUrl}
variant="Secondary"
size="Medium"
typography="Body/Paragraph/mdBold"
>
<ButtonLink href={hotelUrl} variant="Secondary" size="md">
{intl.formatMessage({
id: "hotelSidePeek.readMore.buttonText",
defaultMessage: "Read more about the hotel",

11
packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx
View File

@@ -30,22 +30,17 @@ interface HotelDetailsSidePeekProps {
const buttonPropsMap: Record<
HotelDetailsSidePeekProps["buttonVariant"],
Pick<
React.ComponentProps<typeof Button>,
"variant" | "color" | "size" | "typography"
>
Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">
> = {
primary: {
variant: "Text",
color: "Primary",
size: "Medium",
typography: "Body/Paragraph/mdBold",
size: "md",
},
secondary: {
variant: "Secondary",
color: "Inverted",
size: "Small",
typography: "Body/Supporting text (caption)/smBold",
size: "sm",
},
}

6
packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
View File

@@ -10,7 +10,6 @@ import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/Ho
import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
@@ -75,9 +74,8 @@ export default function ListingHotelCardDialog({
id: "common.close",
defaultMessage: "Close",
})}
>
<MaterialIcon icon="close" size={22} color="CurrentColor" />
</IconButton>
iconName="close"
/>
<div className={styles.content}>
<div className={styles.header}>
<HotelCardDialogImage

7
packages/booking-flow/lib/components/PriceDetailsModal/index.tsx
View File

@@ -11,12 +11,7 @@ import PriceDetailsTable, {
function Trigger({ title }: { title: string }) {
return (
<Button
variant="Text"
size="Medium"
typography="Body/Paragraph/mdBold"
wrapping={false}
>
<Button variant="Text" size="md" wrapping={false}>
{title}
<MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
</Button>

11
packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx
View File

@@ -26,22 +26,17 @@ interface RoomDetailsSidePeekProps {
const buttonPropsMap: Record<
NonNullable<RoomDetailsSidePeekProps["buttonVariant"]>,
Pick<
React.ComponentProps<typeof Button>,
"variant" | "color" | "size" | "typography"
>
Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">
> = {
primary: {
variant: "Text",
color: "Primary",
size: "Medium",
typography: "Body/Paragraph/mdBold",
size: "md",
},
secondary: {
variant: "Text",
color: "Inverted",
size: "Small",
typography: "Body/Supporting text (caption)/smBold",
size: "sm",
},
}

15
packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx
View File

@@ -135,7 +135,7 @@ export default function FilterAndSortModal({
return (
<>
<DialogTrigger>
<Button variant="Secondary" size="Small" color="Primary">
<Button variant="Secondary" size="sm" color="Primary">
<MaterialIcon icon="filter_alt" color="CurrentColor" />
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
@@ -176,9 +176,8 @@ export default function FilterAndSortModal({
id: "common.close",
defaultMessage: "Close",
})}
>
<MaterialIcon icon="close" />
</IconButton>
iconName="close"
/>
</header>
<div className={styles.sorter}>
<DeprecatedSelect
@@ -217,8 +216,8 @@ export default function FilterAndSortModal({
<Button
variant="Tertiary"
color="Primary"
size="Large"
onClick={() => handleApplyFiltersAndSorting(close)}
size="lg"
onPress={() => handleApplyFiltersAndSorting(close)}
>
<Typography variant="Body/Paragraph/mdBold">
<p>
@@ -238,13 +237,13 @@ export default function FilterAndSortModal({
</Typography>
</Button>
<Button
onClick={() => {
onPress={() => {
setSelectedFilters([])
setFilteredCount(unfilteredResultCount)
}}
variant="Text"
color="Primary"
size="Medium"
size="md"
>
<Typography variant="Body/Paragraph/mdBold">
<p>

3
packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/index.tsx
View File

@@ -14,8 +14,7 @@ export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
<FakeButton
variant="Primary"
color="Inverted"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
className={styles.button}
>
<MaterialIcon icon="map" color="CurrentColor" size={20} />

4
packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
View File

@@ -168,7 +168,7 @@ export function SelectHotelMapContent({
variant="Primary"
color="Inverted"
wrapping
size="Small"
size="sm"
className={styles.closeButton}
>
<Link
@@ -216,7 +216,7 @@ export function SelectHotelMapContent({
<Button
variant="Text"
type="button"
size="Small"
size="sm"
className={styles.filterContainerCloseButton}
>
<Link href={closeMapUrl} keepSearchParams className={styles.link}>

13
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
View File

@@ -91,13 +91,12 @@ export default function SummaryContent({
onPress={toggleSummaryOpen}
variant="Muted"
emphasis
>
<MaterialIcon
icon="keyboard_arrow_down"
size={20}
color="CurrentColor"
/>
</IconButton>
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
iconName="keyboard_arrow_down"
/>
</div>
<Typography variant="Body/Paragraph/mdBold">
<p className={styles.dates}>

1
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx
View File

@@ -159,7 +159,6 @@ export default function Room({
<Button
className={styles.termsButton}
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({

3
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
View File

@@ -137,9 +137,8 @@ export function MobileSummary() {
<Button
variant="Primary"
color="Primary"
size="Large"
size="lg"
type="submit"
typography="Body/Paragraph/mdBold"
isDisabled={selectedRates.state !== "ALL_SELECTED"}
>
{intl.formatMessage({

8
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
View File

@@ -56,7 +56,7 @@ export function RoomPackagesForm({
<Divider color="Border/Divider/Subtle" className={styles.divider} />
<div className={styles.buttonContainer}>
<Typography variant="Body/Supporting text (caption)/smBold">
<Button variant="Tertiary" size="Small" type="submit">
<Button variant="Tertiary" size="sm" type="submit">
{intl.formatMessage({
id: "common.apply",
defaultMessage: "Apply",
@@ -64,11 +64,7 @@ export function RoomPackagesForm({
</Button>
</Typography>
<Typography variant="Body/Supporting text (caption)/smBold">
<Button
onPress={clearSelectedPackages}
size="Small"
variant="Text"
>
<Button onPress={clearSelectedPackages} size="sm" variant="Text">
{intl.formatMessage({
id: "common.clear",
defaultMessage: "Clear",

9
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx
View File

@@ -64,9 +64,12 @@ export function RoomPackageFilterModal({
variant="Muted"
emphasis
onPress={() => setIsOpen(false)}
>
<MaterialIcon icon="close" size={24} color="CurrentColor" />
</IconButton>
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
iconName="close"
/>
</div>
<RoomPackagesForm
close={() => setIsOpen(false)}

11
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx
View File

@@ -100,6 +100,7 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
{filterLabel}
<IconButton
variant="Muted"
emphasis
onPress={() => deletePackage(pkg.code)}
aria-label={intl.formatMessage(
{
@@ -111,13 +112,9 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
}
)}
className={styles.removeButton}
>
<MaterialIcon
icon="close"
size={16}
color="Icon/Interactive/Default"
/>
</IconButton>
iconName="close"
size="sm"
/>
</span>
</Typography>
)

3
packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx
View File

@@ -55,8 +55,7 @@ export default function ParkingAccordionItem({
href={parkingPageHref}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
>
{intl.formatMessage({
id: "sideepek.parking.aboutParking",