[6.x] Add tip Alert variant

resources/js/components/ui/Alert.vue

@@ -8,7 +8,7 @@ const props = defineProps({
     text: { type: [String, Number, Boolean, null], default: null },
     /** The alert heading to display */
     heading: { type: [String, null], default: null },
-    /** Controls the appearance of the alert. <br><br> Options: `default`, `warning`, `error`, `success` */
+    /** Controls the appearance of the alert. <br><br> Options: `default`, `tip`, `warning`, `error`, `success` */
     variant: { type: String, default: 'default' },
     /** Icon name to display. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
@@ -52,6 +52,11 @@ const alertClasses = computed(() => {
                     '[&_code]:bg-gray-200! dark:[&_code]:bg-gray-800!',
                     'dark:[&_svg]:text-gray-400',
                 ],
+                tip: [
+                    'bg-blue-50 dark:bg-blue-300/6 border-blue-200 dark:border-blue-400/25 text-blue-800 dark:text-blue-200',
+                    '[&_code]:bg-blue-200/50! dark:[&_code]:bg-blue-300/8!',
+                    'dark:[&_svg]:text-blue-300',
+                ],
                 warning: [
                     'bg-amber-50 dark:bg-amber-300/6 border-amber-200 dark:border-amber-400/25 text-amber-800 dark:text-amber-200',
                     '[&_code]:bg-amber-200/50! dark:[&_code]:bg-amber-300/8!',
@@ -76,6 +81,8 @@ const defaultIcon = computed(() => {
     if (props.icon) return props.icon;
 
     switch (props.variant) {
+        case 'tip':
+            return 'lightbulb-idea';
         case 'warning':
             return 'warning-diamond';
         case 'error':

resources/js/pages/Playground.vue

@@ -321,12 +321,14 @@ defineProps(['icons']);
                 <ui-heading size="lg">Alerts</ui-heading>
 
                 <Alert variant="default" text="This is a default alert message" />
+                <Alert variant="tip" text="This is a helpful tip" />
                 <Alert variant="warning" text="This is a warning alert message" />
                 <Alert variant="error" text="This is an error alert message" />
                 <Alert variant="success" text="This is a success alert message" />
                 <Alert variant="warning" icon="git" text="This alert has a custom icon" />
 
                 <Alert variant="default" heading="Alert Heading" text="This is a default alert message" />
+                <Alert variant="tip" heading="Alert Heading" text="This is a helpful tip" />
                 <Alert variant="warning" heading="Alert Heading" text="This is a warning alert message" />
                 <Alert variant="error" heading="Alert Heading" text="This is an error alert message" />
                 <Alert variant="success" heading="Alert Heading" text="This is a success alert message" />

resources/js/stories/Alert.stories.ts

@@ -8,7 +8,7 @@ const meta = {
     argTypes: {
         variant: {
             control: 'select',
-            options: ['default', 'warning', 'error', 'success'],
+            options: ['default', 'tip', 'warning', 'error', 'success'],
         },
         icon: {
             control: 'select',
@@ -46,6 +46,7 @@ export const _DocsIntro: Story = {
 
 const variantsCode = `
 <Alert variant="default" text="This is a default alert message" />
+<Alert variant="tip" text="This is a helpful tip" />
 <Alert variant="warning" text="This is a warning alert message" />
 <Alert variant="error" text="This is an error alert message" />
 <Alert variant="success" text="This is a success alert message" />
@@ -69,6 +70,7 @@ export const Variants: Story = {
         template: `
             <div class="space-y-3">
                 <Alert variant="default" text="This is a default alert message" />
+                <Alert variant="tip" text="This is a helpful tip" />
                 <Alert variant="warning" text="This is a warning alert message" />
                 <Alert variant="error" text="This is an error alert message" />
                 <Alert variant="success" text="This is a success alert message" />
@@ -265,6 +267,13 @@ export const RichContent: Story = {
     }),
 };
 
+export const Tip: Story = {
+    args: {
+        text: 'This is a helpful tip',
+        variant: 'tip',
+    },
+};
+
 export const Warning: Story = {
     args: {
         text: 'This is a warning alert message',
@@ -333,4 +342,3 @@ export const WithHeadingAndDescription: Story = {
         template: headingAndDescriptionCode,
     }),
 };
-

resources/js/stories/docs/Alert.mdx

@@ -9,7 +9,7 @@ Alerts are used to display important messages, notifications, and feedback to us
 <Canvas of={AlertStories._DocsIntro} sourceState={'shown'} />
 
 ## Variants
-Use the `variant` prop to change the appearance and semantic meaning of the alert. Available variants are `default`, `warning`, `error`, and `success`.
+Use the `variant` prop to change the appearance and semantic meaning of the alert. Available variants are `default`, `tip`, `warning`, `error`, and `success`.
 
 <Canvas of={AlertStories.Variants} sourceState={'shown'} />
 

resources/js/tests/components/ui/Alert.test.js

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { Alert, Icon } from '@/components/ui';
+
+test('tip variant is blue and uses the tip icon', () => {
+    const wrapper = mount(Alert, {
+        props: {
+            text: 'This is a helpful tip',
+            variant: 'tip',
+        },
+    });
+
+    const alert = wrapper.get('[data-ui-alert]');
+
+    expect(alert.classes()).toEqual(expect.arrayContaining([
+        'bg-blue-50',
+        'border-blue-200',
+        'text-blue-800',
+    ]));
+    expect(alert.attributes()).toMatchObject({
+        role: 'status',
+        'aria-live': 'polite',
+        'data-variant': 'tip',
+    });
+    expect(wrapper.findComponent(Icon).props('name')).toBe('lightbulb-idea');
+});