Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error * fix(BOOK-323): scroll to invalid element on submit on enter details * fix(BOOK-323): update error message design * fix(BOOK-323): clean up * fix(BOOK-323): scroll to fields in room in right order * fix(BOOK-323): add id to translations * fix(BOOK-323): remove undefined * fix(BOOK-323): fix submitting state * fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo * fix(BOOK-323): fix invalid border country * fix(BOOK-323): use error message component * fix(BOOK-323): fix invalid focused styling on mobile * fix(BOOK-323): remove redundant dependency in callback Approved-by: Erik Tiekstra
2025-10-24 11:30:56 +00:00
parent 6543ca5dc3
commit c473bbc8b0
27 changed files with 692 additions and 288 deletions
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MessageBanner } from './index'
+
+type MessageBannerType = 'default' | 'error' | 'info'
+type TextColor = 'default' | 'error'
+
+const meta: Meta<typeof MessageBanner> = {
+  title: 'Components/MessageBanner',
+  component: MessageBanner,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'info'] as MessageBannerType[],
+    },
+    textColor: {
+      control: { type: 'select' },
+      options: ['default', 'error'] as TextColor[],
+    },
+    text: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof MessageBanner>
+
+export const Default: Story = {
+  args: {
+    type: 'default',
+    textColor: 'default',
+    text: 'This is a default message',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    type: 'error',
+    textColor: 'default',
+    text: 'This is a warning message',
+  },
+}
+
+export const WarningErrorText: Story = {
+  args: {
+    type: 'error',
+    textColor: 'error',
+    text: 'Warning with error text color',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    type: 'info',
+    textColor: 'default',
+    text: 'This is an info message',
+  },
+}
+
+export const InfoErrorText: Story = {
+  args: {
+    type: 'info',
+    textColor: 'error',
+    text: 'Info with error text color',
+  },
+}
@@ -0,0 +1,55 @@
+import { cva } from 'class-variance-authority'
+import styles from './messageBanner.module.css'
+import { Typography } from '../Typography'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+
+type MessageBannerType = 'default' | 'error' | 'info'
+type TextColor = 'default' | 'error'
+
+const textVariants = cva('', {
+  variants: {
+    textColor: {
+      default: styles.textDefault,
+      error: styles.textError,
+    },
+  },
+  defaultVariants: {
+    textColor: 'default',
+  },
+})
+
+type MessageBannerProps = {
+  type?: MessageBannerType
+  textColor?: TextColor
+  text: string
+}
+
+export function MessageBanner({
+  type = 'default',
+  textColor = 'default',
+  text,
+}: MessageBannerProps) {
+  const textClass = textVariants({ textColor })
+
+  const iconName = type === 'error' ? 'error' : 'info'
+  const iconColor =
+    type === 'error'
+      ? 'Icon/Feedback/Error'
+      : type === 'info'
+        ? 'Icon/Feedback/Information'
+        : 'Icon/Default'
+
+  return (
+    <div className={styles.container}>
+      <Typography
+        className={textClass}
+        variant="Body/Supporting text (caption)/smRegular"
+      >
+        <span className={styles.content}>
+          <MaterialIcon size={20} icon={iconName} color={iconColor} isFilled />
+          {text}
+        </span>
+      </Typography>
+    </div>
+  )
+}
@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  padding: var(--Space-x15);
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  border: 1px solid var(--Border-Default);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+.textDefault {
+  color: var(--Text-Default);
+}
+
+.textError {
+  color: var(--Text-Feedback-Error-Accent);
+}