feat(InfoBox): introduce (#7352)

* feat(StabilityIndex): introduce

* ooopss

Signed-off-by: Augustin Mauroy <[email protected]>

* fix:css code style

* update from feedback

* use danger

* add style for `a`

* use alertBox name

* fix

---------

Signed-off-by: Augustin Mauroy <[email protected]>

Author: AugustinMauroy

apps/site/components/Common/AlertBox/index.module.css

@@ -0,0 +1,73 @@
+.alertBox {
+  @apply flex
+    flex-row
+    items-center
+    gap-2
+    rounded
+    px-4
+    py-3
+    text-sm
+    text-white;
+
+  a {
+    @apply font-ibm-plex-mono
+      text-white
+      underline;
+
+    &:hover {
+      @apply no-underline;
+    }
+  }
+
+  &.small {
+    @apply gap-1
+      py-2
+      text-xs;
+
+    .title {
+      @apply px-1;
+    }
+  }
+
+  .title {
+    @apply rounded-sm
+      px-1.5;
+  }
+
+  svg {
+    @apply inline
+      size-5;
+  }
+
+  &.info {
+    @apply bg-info-600;
+
+    .title {
+      @apply bg-info-700;
+    }
+  }
+
+  &.success {
+    @apply bg-green-600;
+
+    .title {
+      @apply bg-green-700;
+    }
+  }
+
+  &.warning {
+    @apply bg-warning-600;
+
+    .title {
+      @apply bg-warning-700;
+    }
+  }
+
+  &.danger {
+    @apply bg-danger-600;
+
+    .title {
+      @apply bg-danger-700;
+    }
+  }
+}

apps/site/components/Common/AlertBox/index.stories.tsx

@@ -0,0 +1,73 @@
+import { ExclamationCircleIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import AlertBox from '@/components/Common/AlertBox';
+
+type Story = StoryObj<typeof AlertBox>;
+type Meta = MetaObj<typeof AlertBox>;
+
+export const Info: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children:
+      'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.',
+    size: 'default',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    level: 'success',
+    title: '2',
+    children:
+      'Stable. Compatibility with the npm ecosystem is a high priority.',
+    size: 'default',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    level: 'warning',
+    title: '1',
+    children:
+      'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:',
+    size: 'default',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children:
+      'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.',
+    size: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet <ExclamationCircleIcon /> consectetur
+        adipisicing elit. Inventore, quasi doloremque. Totam, earum velit, sunt
+        voluptates fugiat beatae praesentium quis magni explicabo repudiandae
+        nam aut molestias ex ad sequi eum!
+      </p>
+    ),
+    size: 'default',
+  },
+};
+
+export default {
+  component: AlertBox,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

apps/site/components/Common/AlertBox/index.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type AlertBoxProps = PropsWithChildren<{
+  level: 'info' | 'success' | 'warning' | 'danger';
+  title: string;
+  size?: 'default' | 'small';
+}>;
+
+const AlertBox: FC<AlertBoxProps> = ({
+  level,
+  title,
+  children,
+  size = 'default',
+}) => (
+  <div className={classNames(styles.alertBox, styles[level], styles[size])}>
+    <span className={styles.title}>{title}</span>
+    {children}
+  </div>
+);
+
+export default AlertBox;