alert toast component

@codexteam/ui/dev/Playground.vue

@@ -39,6 +39,7 @@ import {
   Popover,
   Popup
 } from '../src/vue';
+
 import { useTheme } from '../src/vue/composables/useTheme';
 import { Navbar } from '../src/vue/layout/navbar';
 import { PageBlock } from '../src/vue/layout/page-block';
@@ -113,6 +114,11 @@ const pages = computed(() => [
   {
     title: 'Components',
     items: [
+      {
+        title: 'Alert',
+        onActivate: () => router.push('/alert'),
+        isActive: route.path === '/alert',
+      },
       {
         title: 'Button',
         onActivate: () => router.push('/components/button'),

@codexteam/ui/dev/pages/components/Alert.vue

@@ -0,0 +1,150 @@
+<template>
+  <PageHeader>
+    Alert
+    <template #description>
+      Light and beautiful codex alert
+      <code>click the button to see for yourself </code>
+    </template>
+  </PageHeader>
+
+  <p>The following outlines options for alert to display </p>
+
+  <div class="flex-content">
+    <div>
+      Message - message of the alert to be displayed (string)
+    </div>
+
+    <div>
+      Position - position of alert (bottom-center)
+    </div>
+
+    <div>
+      Type - alert type (success, error, warning, info and default)
+    </div>
+
+    <div>
+      Timeout - visibility duration in milliseconds, set timeout to keep alert visible
+    </div>
+  </div>
+
+  <div class="flex-type">
+    <div class="flex">
+      <span>Success</span>
+      <Button
+        @click="showSuccessAlert"
+      >
+        Show success alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Error</span>
+      <Button
+        @click="showErrorAlert"
+      >
+        Show error alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Warning</span>
+      <Button
+        @click="showWarningAlert"
+      >
+        Show warning alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Info</span>
+      <Button
+        @click="showInfoAlert"
+      >
+        Show info alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Default</span>
+      <Button
+        @click="showDefaultAlert"
+      >
+        Show default alert
+      </Button>
+    </div>
+  </div>
+
+  <AlertContainer />
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, useAlert, AlertContainer } from '../../../src/vue';
+
+const { success, error, warning, info, alert } = useAlert();
+
+const showSuccessAlert = () => {
+  success({
+    message: '1st alert',
+    timeout: 5000,
+  });
+};
+
+const showErrorAlert = () => {
+  error({
+    message: '2nd alert',
+    timeout: 5000,
+  });
+};
+
+const showWarningAlert = () => {
+  warning({
+    message: '3rd alert',
+    timeout: 5000,
+  });
+};
+
+const showInfoAlert = () => {
+  info({
+    message: '4th alert',
+    timeout: 5000,
+  });
+};
+
+const showDefaultAlert = () => {
+  alert({
+    message: '5th alert',
+    timeout: 5000,
+  });
+};
+
+</script>
+
+<style lang="postcss">
+.flex-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  align-items: center;
+}
+
+.flex-type {
+  display: grid;
+  grid-template-columns: repeat(1, 2fr);
+  gap: var(--spacing-l);
+  align-items: center;
+  margin-top: 2rem;
+
+  .flex {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    align-items: center;
+    gap: var(--spacing-l);
+
+    button {
+      display: grid;
+      grid-column: span 1;
+    }
+  }
+}
+</style>

@codexteam/ui/dev/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 import type { Component } from 'vue';
 import Index from './pages/Index.vue';
+import Alert from './pages/components/Alert.vue';
 import TypeScale from './pages/base-concepts/TypeScale.vue';
 import ControlsDimensions from './pages/base-concepts/ControlsDimensions.vue';
 import Sizes from './pages/base-concepts/Sizes.vue';
@@ -41,6 +42,10 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: Index as Component,
   },
+  {
+    path: '/alert',
+    component: Alert as Component,
+  },
   {
     path: '/type-scale',
     component: TypeScale as Component,

@codexteam/ui/src/vue/components/alert/Alert.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Various alert type
+ */
+export type AlertType = 'success' | 'error' | 'warning' | 'info' | 'default';
+
+/**
+ * alert configuration
+ */
+export interface AlertOptions {
+  /** unique alert id */
+  id?: string | number;
+
+  /**
+   * Custom icon class to be used.
+   *
+   */
+  icon?: string;
+
+  /**
+   * content to be rendered
+   */
+  message: string;
+
+  /**
+   *  Type of the alert.
+   *
+   *  Can be any of `(success, error, default, info, warning)`
+   */
+  type?: AlertType;
+
+  /**
+   * How many milliseconds for the alert to be auto dismissed
+   */
+  timeout: number;
+}

@codexteam/ui/src/vue/components/alert/Alert.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    ref="el"
+    :class="[
+      $style.alert,
+      $style['alert--' + props.type]
+    ]"
+    :theme-base="computedTheme"
+  >
+    <Icon
+      v-show="icon"
+      :name="icon"
+    />
+    <div>{{ props.message }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, ref } from 'vue';
+import Icon from '../icon/Icon.vue';
+import type { AlertOptions } from './Alert.types';
+
+const el = ref<HTMLElement>();
+
+const props = withDefaults(defineProps<AlertOptions>(), {
+  id: `alert-'${Math.random()}`,
+  position: 'bottom-center',
+  message: '',
+  icon: '',
+  type: 'default',
+  timeout: 5000,
+});
+
+/**
+ * Various alert theme type
+ */
+export type AlertTheme = 'grass' | 'red' | 'amber' | 'graphite' | undefined;
+
+/**
+ *
+ * computed theme
+ */
+const computedTheme = computed((): AlertTheme => {
+  switch (props.type) {
+    case 'success':
+      return 'grass';
+
+    case 'error':
+      return 'red';
+
+    case 'warning':
+      return 'amber';
+
+    case 'info':
+      return 'graphite';
+
+    default:
+      return undefined;
+  }
+});
+</script>
+
+<style module lang="postcss">
+.alert {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--v-padding);
+  border: 0;
+  margin-block-start: 0.4rem;
+  outline: 0;
+  font-family: inherit;
+  pointer-events: auto;
+  background-color: var(--base-text);
+  overflow: hidden;
+  word-break: keep-all;
+  direction: ltr;
+  padding: var(--v-padding) var(--h-padding) var(--v-padding) var(--h-padding);
+  border-radius: var(--radius-field);
+  color: var(--base--text-solid-foreground);
+  overflow-wrap: anywhere;
+  transform: translateY(10%);
+
+  &--success {
+    background-color: var(--base--solid);
+  }
+
+  &--error {
+    background-color: var(--base--solid);
+  }
+
+  &--warning {
+    background-color: var(--base--solid);
+  }
+
+  &--info {
+    background-color: var(--base--solid);
+  }
+
+  &--default {
+    color: var(--base--text);
+    background-color: var(--base--bg-secondary);
+  }
+}
+
+</style>

@codexteam/ui/src/vue/components/alert/AlertContainer.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    :class="[
+      $style.alert__container,
+      $style['alert__container--bottom-center']
+    ]"
+  >
+    <!-- Transition group for the list of alerts -->
+    <AlertTransition>
+      <Alert
+        v-for="(alert) in alerts"
+        :key="alert.id"
+        v-bind="alert"
+      />
+    </AlertTransition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Alert from './Alert.vue';
+import AlertTransition from './AlertTransition.vue';
+import { useAlert } from './useAlert';
+const { alerts } = useAlert();
+</script>
+
+<style module lang="postcss">
+.alert__container  {
+  position: fixed;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  box-sizing: border-box;
+  z-index: var(--z-alert);
+
+  &--bottom-center {
+   left: 50%;
+   transform: translateX(-50%);
+   bottom: var(--spacing-l);
+  }
+}
+</style>