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

feat(SW-2178): Changed to new buttons for summary inside enter details

Browse Source 
Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-04-11 15:13:37 +00:00
parent 8961cbd9d5
commit f62723c6e5
15 changed files with 363 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -3,6 +3,7 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,10 +109,9 @@ export default function SummaryUI({
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
</Body>
<Button
intent="text"
size="small"
onPress={handleToggleSummary}
className={styles.chevronButton}
onClick={handleToggleSummary}
variant="Icon"
>
<MaterialIcon
icon="keyboard_arrow_down"
@@ -219,10 +218,17 @@ export default function SummaryUI({
</Caption>
<Modal
trigger={
<Button intent="text">
<Caption color="burgundy" type="underline">
{intl.formatMessage({ id: "Rate details" })}
</Caption>
<Button
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({ id: "Rate details" })}
<MaterialIcon
icon="chevron_right"
size={20}
color="CurrentColor"
/>
</Button>
}
title={

13
apps/scandic-web/components/HotelReservation/PriceDetailsModal.tsx
View File

@@ -1,11 +1,10 @@
"use client"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
export default function PriceDetailsModal({
children,
@@ -16,10 +15,12 @@ export default function PriceDetailsModal({
<Modal
title={intl.formatMessage({ id: "Price details" })}
trigger={
<Button intent="text">
<Caption color="burgundy">
{intl.formatMessage({ id: "Price details" })}
</Caption>
<Button
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({ id: "Price details" })}
<MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
</Button>
}

24
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -2,6 +2,7 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
@@ -9,7 +10,6 @@ import { dt } from "@/lib/dt"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -79,12 +79,7 @@ export default function Summary({
/>
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
</Body>
<Button
intent="text"
size="small"
className={styles.chevronButton}
onClick={toggleSummaryOpen}
>
<Button onPress={toggleSummaryOpen} variant="Icon">
<MaterialIcon
icon="keyboard_arrow_down"
size={20}
@@ -181,10 +176,17 @@ export default function Summary({
</Caption>
<Modal
trigger={
<Button intent="text">
<Caption color="burgundy" type="underline">
{intl.formatMessage({ id: "Rate details" })}
</Caption>
<Button
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({ id: "Rate details" })}
<MaterialIcon
icon="chevron_right"
size={20}
color="CurrentColor"
/>
</Button>
}
title={room.cancellationText}

14
packages/design-system/.storybook/preview.tsx
View File

@@ -2,8 +2,8 @@ import { withThemeByClassName } from '@storybook/addon-themes'
import type { Preview, ReactRenderer } from '@storybook/react'
import '../lib/style.css'
import '../lib/fonts.css'
import '../lib/style.css'
export const themes = {
themes: {
@@ -30,6 +30,18 @@ const preview: Preview = {
order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
},
},
backgrounds: {
values: [
// 👇 Scandic
{ name: 'Scandic Primary', value: '#FAF6F2' },
{ name: 'Scandic Subtle', value: '#F2ECE6' },
{ name: 'Scandic Primary Dark', value: '#4D001B' },
// 👇 Default values
{ name: 'Storybook Dark', value: '#333' },
{ name: 'Storybook Light', value: '#F7F9F2' },
],
default: 'Scandic Primary',
},
},
tags: ['autodocs'],
}

242
packages/design-system/lib/components/Button/Button.stories.tsx
View File

@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { config as typographyConfig } from '../Typography/variants'
import { Button } from './Button'
import { config as buttonConfig } from './variants'
import { config as typographyConfig } from '../Typography/variants'
const meta: Meta<typeof Button> = {
title: 'Components/Button',
@@ -22,6 +23,28 @@ const meta: Meta<typeof Button> = {
variant: {
control: 'select',
options: Object.keys(buttonConfig.variants.variant),
default: 'Primary',
},
color: {
control: 'select',
options: Object.keys(buttonConfig.variants.color),
type: 'string',
description:
'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
},
size: {
control: 'select',
options: Object.keys(buttonConfig.variants.size),
type: 'string',
description:
'The size of the button. Defaults to `Large`. This variant does not apply to the `Icon` variant.',
},
wrapping: {
control: 'radio',
options: Object.keys(buttonConfig.variants.wrapping),
type: 'boolean',
description:
'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
},
},
}
@@ -67,6 +90,44 @@ export const PrimarySmall: Story = {
},
}
export const PrimaryInvertedDefault: Story = {
args: {
onPress: fn(),
children: 'Primary inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Primary',
color: 'Inverted',
},
}
export const PrimaryInvertedDisabled: Story = {
args: {
...PrimaryInvertedDefault.args,
isDisabled: true,
},
}
export const PrimaryInvertedLarge: Story = {
args: {
...PrimaryInvertedDefault.args,
size: 'Large',
},
}
export const PrimaryInvertedMedium: Story = {
args: {
...PrimaryInvertedDefault.args,
size: 'Medium',
},
}
export const PrimaryInvertedSmall: Story = {
args: {
...PrimaryInvertedDefault.args,
size: 'Small',
},
}
export const SecondaryDefault: Story = {
args: {
onPress: fn(),
@@ -104,6 +165,44 @@ export const SecondarySmall: Story = {
},
}
export const SecondaryInvertedDefault: Story = {
args: {
onPress: fn(),
children: 'Secondary inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Secondary',
color: 'Inverted',
},
}
export const SecondaryInvertedDisabled: Story = {
args: {
...SecondaryInvertedDefault.args,
isDisabled: true,
},
}
export const SecondaryInvertedLarge: Story = {
args: {
...SecondaryInvertedDefault.args,
size: 'Large',
},
}
export const SecondaryInvertedMedium: Story = {
args: {
...SecondaryInvertedDefault.args,
size: 'Medium',
},
}
export const SecondaryInvertedSmall: Story = {
args: {
...SecondaryInvertedDefault.args,
size: 'Small',
},
}
export const TertiaryDefault: Story = {
args: {
onPress: fn(),
@@ -141,43 +240,6 @@ export const TertiarySmall: Story = {
},
}
export const InvertedDefault: Story = {
args: {
onPress: fn(),
children: 'Inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Inverted',
},
}
export const InvertedDisabled: Story = {
args: {
...InvertedDefault.args,
isDisabled: true,
},
}
export const InvertedLarge: Story = {
args: {
...InvertedDefault.args,
size: 'Large',
},
}
export const InvertedMedium: Story = {
args: {
...InvertedDefault.args,
size: 'Medium',
},
}
export const InvertedSmall: Story = {
args: {
...InvertedDefault.args,
size: 'Small',
},
}
export const TextDefault: Story = {
args: {
onPress: fn(),
@@ -187,6 +249,13 @@ export const TextDefault: Story = {
},
}
export const TextDisabled: Story = {
args: {
...TextDefault.args,
isDisabled: true,
},
}
export const TextLarge: Story = {
args: {
...TextDefault.args,
@@ -207,3 +276,100 @@ export const TextSmall: Story = {
size: 'Small',
},
}
export const TextNoWrapping: Story = {
args: {
...TextDefault.args,
children: 'Text button with wrapping false',
wrapping: false,
},
}
export const TextInvertedDefault: Story = {
args: {
onPress: fn(),
children: 'Text inverted button',
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
color: 'Inverted',
},
}
export const TextInvertedDisabled: Story = {
args: {
...TextInvertedDefault.args,
isDisabled: true,
},
}
export const TextInvertedLarge: Story = {
args: {
...TextInvertedDefault.args,
size: 'Large',
},
}
export const TextInvertedMedium: Story = {
args: {
...TextInvertedDefault.args,
size: 'Medium',
},
}
export const TextInvertedSmall: Story = {
args: {
...TextInvertedDefault.args,
size: 'Small',
},
}
export const TextWithIcon: Story = {
args: {
onPress: fn(),
children: (
<>
Text with icon
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</>
),
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
},
}
export const TextWithIconInverted: Story = {
args: {
onPress: fn(),
children: (
<>
Text with icon
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</>
),
typography: 'Body/Paragraph/mdBold',
variant: 'Text',
color: 'Inverted',
},
}
export const Icon: Story = {
args: {
onPress: fn(),
children: <MaterialIcon icon="favorite" size={24} />,
variant: 'Icon',
},
}
export const IconWithColor: Story = {
args: {
onPress: fn(),
children: (
<MaterialIcon
icon="check_circle"
size={24}
color="Icon/Feedback/Success"
/>
),
variant: 'Icon',
},
}

2
packages/design-system/lib/components/Button/Button.tsx
View File

@@ -10,6 +10,7 @@ export function Button({
variant,
color,
size,
wrapping,
typography,
className,
@@ -20,6 +21,7 @@ export function Button({
variant,
color,
size,
wrapping,
typography,
className,

77
packages/design-system/lib/components/Button/button.module.css
View File

@@ -6,6 +6,10 @@
display: flex;
align-items: center;
justify-content: center;
&:disabled {
cursor: unset;
}
}
.size-large {
@@ -38,6 +42,24 @@
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
.variant-primary.color-inverted {
background-color: var(--Component-Button-Inverted-Fill-Default);
border-color: var(--Component-Button-Inverted-Border-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-primary.color-inverted:hover {
background-color: var(--Component-Button-Inverted-Fill-Hover);
border-color: var(--Component-Button-Inverted-Border-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
}
.variant-primary.color-inverted:disabled {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
border-color: var(--Component-Button-Inverted-Border-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
.variant-secondary {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
@@ -56,6 +78,24 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-secondary.color-inverted {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-secondary.color-inverted:hover {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
.variant-secondary.color-inverted:disabled {
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
@@ -95,9 +135,36 @@
.variant-text {
background-color: transparent;
border-color: transparent;
/* TODO: Missing text variant tokens for button */
color: var(--Scandic-Red-100);
padding: var(--Space-x15) 0;
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
padding-left: 0;
padding-right: 0;
}
.variant-text:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
.variant-text:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
}
.variant-text.no-wrapping {
padding: var(--Space-x025) 0;
border-width: 0;
}
.variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-text.color-inverted:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
.variant-text.color-inverted:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-icon {
@@ -107,7 +174,3 @@
padding: 0;
margin: 0;
}
.color-icon-default {
color: var(--Icon-Default);
}

6
packages/design-system/lib/components/Button/variants.ts
View File

@@ -21,18 +21,22 @@ export const config = {
color: {
Primary: styles['color-primary'],
Inverted: styles['color-inverted'],
IconDefault: styles['color-icon-default'],
},
size: {
Small: styles['size-small'],
Medium: styles['size-medium'],
Large: styles['size-large'],
},
wrapping: {
true: undefined,
false: styles['no-wrapping'],
},
},
defaultVariants: {
variant: 'Primary',
color: 'Primary',
size: 'Large',
wrapping: true,
},
} as const

6
packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx
View File

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { MaterialSymbol } from 'react-material-symbols'
import { MaterialIcon } from '../Icons/MaterialIcon/MaterialIcon.tsx'
import { ChipButton } from './ChipButton.tsx'
import { config as chipButtonConfig } from './variants'
@@ -35,7 +35,7 @@ export const Default: Story = {
children: (
<>
Button Chip
<MaterialSymbol icon="chevron_right" size={20} />
<MaterialIcon icon="chevron_right" size={20} />
</>
),
},
@@ -48,7 +48,7 @@ export const Outlined: Story = {
children: (
<>
Button Chip
<MaterialSymbol icon="keyboard_arrow_down" size={20} />
<MaterialIcon icon="keyboard_arrow_down" size={20} />
</>
),
},

8
packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
View File

@@ -15,6 +15,7 @@ export interface MaterialIconProps
export type MaterialIconSetIconProps = Omit<MaterialIconProps, 'icon'>
export function MaterialIcon({
color,
size = 24,
className,
isFilled = false,
...props
@@ -23,7 +24,12 @@ export function MaterialIcon({
return (
// The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
<span>
<MaterialSymbol className={classNames} {...props} fill={isFilled} />
<MaterialSymbol
className={classNames}
size={size}
{...props}
fill={isFilled}
/>
</span>
)
}

8
packages/design-system/lib/components/RateCard/Campaign/index.tsx
View File

@@ -1,11 +1,11 @@
import { Typography } from '../../Typography'
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
interface CampaignRateCardProps {
name: string
@@ -67,11 +67,11 @@ export default function CampaignRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<Button variant="Icon" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
color="Icon/Default"
/>
</Button>
}

10
packages/design-system/lib/components/RateCard/Code/index.tsx
View File

@@ -1,11 +1,11 @@
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
interface CodeRateCardProps {
name: string
@@ -63,11 +63,11 @@ export default function CodeRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<Button variant="Icon" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
color="Icon/Default"
/>
</Button>
}

10
packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx
View File

@@ -1,8 +1,8 @@
import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
interface NoRateAvailableCardProps {
variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
@@ -34,8 +34,8 @@ export default function NoRateAvailableCard({
<header>
<Typography variant="Tag/sm">
<h3 className={`${styles.title} ${styles.textDisabled}`}>
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon icon="info" size={20} color="CurrentColor" />
<Button variant="Icon" size="Small">
<MaterialIcon icon="info" size={20} color="Icon/Default" />
</Button>
{`${rateTitle} / ${paymentTerm}`}
</h3>

12
packages/design-system/lib/components/RateCard/Points/index.tsx
View File

@@ -1,13 +1,13 @@
import { Typography } from '../../Typography'
import { RatePointsOption, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Button } from '../../Button'
import { Radio } from '../../Radio'
import { RadioGroup } from 'react-aria-components'
import { variants } from '../variants'
import { Button } from '../../Button'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Radio } from '../../Radio'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
interface PointsRateCardProps {
rateTitle: string
@@ -49,8 +49,8 @@ export default function PointsRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<MaterialIcon icon="info" size={20} color="CurrentColor" />
<Button variant="Icon" size="Small">
<MaterialIcon icon="info" size={20} color="Icon/Default" />
</Button>
}
>

10
packages/design-system/lib/components/RateCard/Regular/index.tsx
View File

@@ -1,11 +1,11 @@
import { Rate, RateTermDetails } from '../types'
import styles from '../rate-card.module.css'
import { Typography } from '../../Typography'
import { Button } from '../../Button'
import { variants } from '../variants'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'
interface RegularRateCardProps {
name: string
@@ -56,11 +56,11 @@ export default function RegularRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" color="IconDefault" size="Small">
<Button variant="Icon" size="Small">
<MaterialIcon
icon="info"
size={20}
color="CurrentColor"
color="Icon/Default"
/>
</Button>
}