Merged in chore/SW-3246-move-alert-to-design-system (pull request #2698)
chore(SW-3246): Moved Alert component into design system * chore(SW-3246): Moved Alert component into design system * chore(SW-3246): Optimsed code and imports * chore(SW-3246): Moved type AlertTypeEnum and other to common package Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
@@ -1,52 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import SidePeek from "@scandic-hotels/design-system/SidePeek"
|
||||
|
||||
import styles from "./sidepeek.module.css"
|
||||
|
||||
import type { AlertSidepeekProps } from "./sidepeek"
|
||||
|
||||
export default function AlertSidepeek({
|
||||
ctaText,
|
||||
sidePeekContent,
|
||||
}: AlertSidepeekProps) {
|
||||
const intl = useIntl()
|
||||
const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
|
||||
const { heading, content } = sidePeekContent
|
||||
|
||||
return (
|
||||
<div className={styles.alertSidepeek}>
|
||||
<Button
|
||||
onPress={() => setSidePeekIsOpen(true)}
|
||||
theme="base"
|
||||
variant="icon"
|
||||
intent="text"
|
||||
size="small"
|
||||
wrapping
|
||||
>
|
||||
{ctaText}
|
||||
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
|
||||
</Button>
|
||||
|
||||
<SidePeek
|
||||
title={heading}
|
||||
isOpen={sidePeekIsOpen}
|
||||
handleClose={() => setSidePeekIsOpen(false)}
|
||||
closeLabel={intl.formatMessage({
|
||||
defaultMessage: "Close",
|
||||
})}
|
||||
>
|
||||
<JsonToHtml
|
||||
nodes={content.json.children}
|
||||
embeds={content.embedded_itemsConnection.edges}
|
||||
/>
|
||||
</SidePeek>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.alertSidepeek {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import type { SidepeekContent } from "@scandic-hotels/trpc/types/siteConfig"
|
||||
|
||||
export interface AlertSidepeekProps {
|
||||
ctaText: string
|
||||
sidePeekContent: NonNullable<SidepeekContent>
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
.alert {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: var(--max-width-page);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.innerContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x2) 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.alert .closeButton {
|
||||
padding: var(--Spacing-x-one-and-half);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Intent: inline */
|
||||
.inline {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
}
|
||||
.inline .innerContent {
|
||||
padding-right: var(--Spacing-x3);
|
||||
}
|
||||
.inline .iconWrapper {
|
||||
padding: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
.inline.alarm .iconWrapper {
|
||||
background-color: var(--Surface-Feedback-Error-Accent);
|
||||
}
|
||||
.inline.warning .iconWrapper {
|
||||
background-color: var(--Surface-Feedback-Warning-Accent);
|
||||
}
|
||||
.inline.info .iconWrapper {
|
||||
background-color: var(--Surface-Feedback-Information-Accent);
|
||||
}
|
||||
.inline.success .iconWrapper {
|
||||
background-color: var(--Surface-Feedback-Succes-Accent);
|
||||
}
|
||||
.inline .icon,
|
||||
.inline .icon * {
|
||||
fill: var(--Base-Surface-Primary-light-Normal);
|
||||
}
|
||||
|
||||
/* Intent: banner */
|
||||
.banner {
|
||||
border-left-width: 6px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
.banner.alarm {
|
||||
border-left-color: var(--Surface-Feedback-Error-Accent);
|
||||
background-color: var(--Scandic-Red-00);
|
||||
}
|
||||
.banner.warning {
|
||||
border-left-color: var(--Surface-Feedback-Warning-Accent);
|
||||
background-color: var(--Scandic-Yellow-00);
|
||||
}
|
||||
.banner.info {
|
||||
border-left-color: var(--Surface-Feedback-Information-Accent);
|
||||
background-color: var(--Scandic-Blue-00);
|
||||
}
|
||||
.banner.success {
|
||||
border-left-color: var(--Surface-Feedback-Succes-Accent);
|
||||
background-color: var(--Scandic-Green-00);
|
||||
}
|
||||
.banner.alarm .icon,
|
||||
.banner.alarm .icon * {
|
||||
fill: var(--Surface-Feedback-Error-Accent);
|
||||
}
|
||||
.banner.warning .icon,
|
||||
.banner.warning .icon * {
|
||||
fill: var(--Surface-Feedback-Warning-Accent);
|
||||
}
|
||||
.banner.info .icon,
|
||||
.banner.info .icon * {
|
||||
fill: var(--Surface-Feedback-Information-Accent);
|
||||
}
|
||||
|
||||
.banner.success .icon,
|
||||
.banner.sucess .icon * {
|
||||
fill: var(--Surface-Feedback-Succes-Accent);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.innerContent {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import type { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
|
||||
import type { SidepeekContent } from "@scandic-hotels/trpc/types/siteConfig"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import type { AriaRole } from "react"
|
||||
|
||||
import type { alertVariants } from "./variants"
|
||||
|
||||
export interface AlertProps extends VariantProps<typeof alertVariants> {
|
||||
className?: string
|
||||
type: AlertTypeEnum
|
||||
heading?: string | null
|
||||
text?: string | null
|
||||
phoneContact?: {
|
||||
displayText: string
|
||||
phoneNumber?: string
|
||||
footnote?: string | null
|
||||
} | null
|
||||
sidepeekContent?: SidepeekContent | null
|
||||
sidepeekCtaText?: string | null
|
||||
link?: {
|
||||
url: string
|
||||
title: string
|
||||
keepSearchParams?: boolean
|
||||
} | null
|
||||
close?: () => void
|
||||
ariaRole?: AriaRole
|
||||
ariaLive?: "off" | "assertive" | "polite"
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
|
||||
import AlertSidepeek from "./Sidepeek"
|
||||
import { IconByAlertType } from "./utils"
|
||||
import { alertVariants } from "./variants"
|
||||
|
||||
import styles from "./alert.module.css"
|
||||
|
||||
import type { AlertProps } from "./alert"
|
||||
|
||||
export default function Alert({
|
||||
className,
|
||||
variant,
|
||||
type,
|
||||
heading,
|
||||
text,
|
||||
link,
|
||||
close,
|
||||
phoneContact,
|
||||
sidepeekCtaText,
|
||||
sidepeekContent,
|
||||
ariaLive,
|
||||
ariaRole,
|
||||
}: AlertProps) {
|
||||
const classNames = alertVariants({
|
||||
className,
|
||||
variant,
|
||||
type,
|
||||
})
|
||||
|
||||
if (!text && !heading) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<section className={classNames} role={ariaRole} aria-live={ariaLive}>
|
||||
<div className={styles.content}>
|
||||
<span className={styles.iconWrapper}>
|
||||
<IconByAlertType
|
||||
alertType={type}
|
||||
className={styles.icon}
|
||||
variant={variant}
|
||||
/>
|
||||
</span>
|
||||
<div className={styles.innerContent}>
|
||||
<div className={styles.textWrapper}>
|
||||
{heading ? (
|
||||
<Body textTransform="bold" asChild>
|
||||
<h2>{heading}</h2>
|
||||
</Body>
|
||||
) : null}
|
||||
{text ? (
|
||||
<Body>
|
||||
{text}
|
||||
{phoneContact?.phoneNumber ? (
|
||||
<>
|
||||
<span> {phoneContact.displayText} </span>
|
||||
<Link
|
||||
href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
|
||||
>
|
||||
{phoneContact.phoneNumber}
|
||||
</Link>
|
||||
{phoneContact.footnote ? (
|
||||
<>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>. ({phoneContact.footnote})</span>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</Body>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{link ? (
|
||||
<Link
|
||||
textDecoration="underline"
|
||||
href={link.url}
|
||||
keepSearchParams={link.keepSearchParams}
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
) : null}
|
||||
{!link && sidepeekCtaText && sidepeekContent ? (
|
||||
<AlertSidepeek
|
||||
ctaText={sidepeekCtaText}
|
||||
sidePeekContent={sidepeekContent}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
{close ? (
|
||||
<Button onPress={close} variant="Text" className={styles.closeButton}>
|
||||
<MaterialIcon icon="close" color="CurrentColor" />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import {
|
||||
MaterialIcon,
|
||||
type MaterialIconSetIconProps,
|
||||
} from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
|
||||
|
||||
import type { JSX } from "react"
|
||||
|
||||
import type { AlertProps } from "./alert"
|
||||
|
||||
interface IconByAlertProps {
|
||||
alertType: AlertTypeEnum
|
||||
variant?: AlertProps["variant"]
|
||||
}
|
||||
|
||||
export function IconByAlertType({
|
||||
alertType,
|
||||
variant = "inline",
|
||||
...props
|
||||
}: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
|
||||
switch (alertType) {
|
||||
case AlertTypeEnum.Alarm:
|
||||
return (
|
||||
<MaterialIcon
|
||||
color={variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Error"}
|
||||
isFilled
|
||||
icon="error"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
case AlertTypeEnum.Warning:
|
||||
return (
|
||||
<MaterialIcon
|
||||
icon="warning"
|
||||
color={
|
||||
variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Warning"
|
||||
}
|
||||
isFilled
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
case AlertTypeEnum.Success:
|
||||
return (
|
||||
<MaterialIcon
|
||||
icon="check_circle"
|
||||
color={
|
||||
variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Success"
|
||||
}
|
||||
isFilled
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
case AlertTypeEnum.Info:
|
||||
default:
|
||||
return (
|
||||
<MaterialIcon
|
||||
color={
|
||||
variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Information"
|
||||
}
|
||||
isFilled
|
||||
icon="info"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alert"
|
||||
|
||||
import styles from "./alert.module.css"
|
||||
|
||||
export const alertVariants = cva(styles.alert, {
|
||||
variants: {
|
||||
variant: {
|
||||
inline: styles.inline,
|
||||
banner: styles.banner,
|
||||
},
|
||||
type: {
|
||||
[AlertTypeEnum.Info]: styles.info,
|
||||
[AlertTypeEnum.Warning]: styles.warning,
|
||||
[AlertTypeEnum.Alarm]: styles.alarm,
|
||||
[AlertTypeEnum.Success]: styles.success,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "inline",
|
||||
type: AlertTypeEnum.Info,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user