add Alert examples

Author: gioboa

apps/qwik-demo-app/src/routes/Alert/AlertError/index.tsx

@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconClose } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div
+      role="alert"
+      class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
+    >
+      <p class="py-2 mr-2">The password change was failed.</p>
+      <button
+        type="button"
+        class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Retry
+      </button>
+      <button
+        type="button"
+        class="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close error alert"
+      >
+        <SfIconClose class="hidden md:block" />
+        <SfIconClose size="sm" class="block md:hidden" />
+      </button>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Alert/AlertNeutral/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <div
+      role="alert"
+      class="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
+    >
+      <p class="py-2">Happy shopping!</p>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Alert/AlertPositive/index.tsx

@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconCheckCircle, SfIconClose } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div
+      role="alert"
+      class="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
+    >
+      <SfIconCheckCircle class="my-2 mr-2 text-positive-700 shrink-0" />
+      <p class="py-2 mr-2">The product has been added to the cart.</p>
+      <button
+        type="button"
+        class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close positive alert"
+      >
+        <SfIconClose class="hidden md:block" />
+        <SfIconClose size="sm" class="block md:hidden" />
+      </button>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Alert/AlertSecondary/index.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconInfo } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div
+      role="alert"
+      class="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
+    >
+      <SfIconInfo class="mr-2 text-secondary-700 shrink-0" />
+      <p class="py-2">Your cart will soon be full.</p>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Alert/AlertWarning/index.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconWarning } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div
+      role="alert"
+      class="flex items-start max-w-[600px] shadow-md bg-warning-100 pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
+    >
+      <SfIconWarning class="mt-2 mr-2 text-warning-700 shrink-0" />
+      <div class="py-2 mr-2">
+        <p class="font-medium typography-text-base md:typography-text-lg">
+          Your account
+        </p>
+        <p>Your shipping details need to be updated.</p>
+      </div>
+      <button
+        type="button"
+        class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Update
+      </button>
+    </div>
+  );
+});