[Glitch] Allow displaying field status (error, warning, info) under form fields

Port 890b2673fc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/callout_inline/callout_inline.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CalloutInline } from '.';
+
+const meta = {
+  title: 'Components/CalloutInline',
+  args: {
+    children: 'Contents here',
+  },
+  component: CalloutInline,
+} satisfies Meta<typeof CalloutInline>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+  },
+};

app/javascript/flavours/glitch/components/callout_inline/index.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react';
+
+import classNames from 'classnames';
+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import ErrorIcon from '@/material-icons/400-24px/error.svg?react';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+
+import { Icon } from '../icon';
+
+import classes from './styles.module.css';
+
+export interface FieldStatus {
+  variant: 'error' | 'warning' | 'info' | 'success';
+  message?: string;
+}
+
+const iconMap: Record<FieldStatus['variant'], React.FunctionComponent> = {
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: InfoIcon,
+  success: CheckIcon,
+};
+
+export const CalloutInline: FC<
+  Partial<FieldStatus> & React.ComponentPropsWithoutRef<'div'>
+> = ({ variant = 'error', message, className, children, ...props }) => {
+  return (
+    <div
+      {...props}
+      className={classNames(className, classes.wrapper)}
+      data-variant={variant}
+    >
+      <Icon id={variant} icon={iconMap[variant]} className={classes.icon} />
+      {message ?? children}
+    </div>
+  );
+};

app/javascript/flavours/glitch/components/callout_inline/styles.module.css

@@ -0,0 +1,29 @@
+.wrapper {
+  display: flex;
+  align-items: start;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+
+  &[data-variant='success'] {
+    color: var(--color-text-success);
+  }
+
+  &[data-variant='warning'] {
+    color: var(--color-text-warning);
+  }
+
+  &[data-variant='error'] {
+    color: var(--color-text-error);
+  }
+
+  &[data-variant='info'] {
+    color: var(--color-text-primary);
+  }
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+}