feat(alert): Add <SAlert> (#403)

docs/.vitepress/config.mts

@@ -54,6 +54,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
       collapsed: false,
       items: [
         { text: 'SActionList', link: '/components/action-list' },
+        { text: 'SAlert', link: '/components/alert' },
         { text: 'SAvatar', link: '/components/avatar' },
         { text: 'SButton', link: '/components/button' },
         { text: 'SButtonGroup', link: '/components/button-group' },

docs/components/alert.md

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import SAlert from 'sefirot/components/SAlert.vue'
+</script>
+
+# SAlert <Badge text="3.8.0" />
+
+`<SAlert>` is used to diaplay informative messages to the user.
+
+<Showcase
+  path="/components/SAlert.vue"
+  story="/stories-components-salert-01-playground-story-vue"
+>
+  <SAlert mode="info">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href="#">dolore magna</a> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </SAlert>
+</Showcase>
+
+## Import
+
+```ts
+import SAlert from '@globalbrain/sefirot/lib/components/SAlert.vue'
+```
+
+## Usage
+
+`<SAlert>` takes `:mode` to define the type of the alert, and slot to display the content. The content should be wrapped in a element such as `<p>`.
+
+```vue-html
+<SAlert mode="info">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+    do eiusmod tempor incididunt ut labore et <a href="#">dolore
+    magna</a> aliqua. Ut enim ad minim veniam, quis nostrud
+    exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </p>
+</SAlert>
+```
+
+### Modes
+
+`<SAlert>` has 4 modes: `info`, `success`, `warning` and `error`. Each mode has different color and icon.
+
+- `info` - Use this mode to display informative messages or tips.
+- `success` - Use this mode to display that something has succeeded.
+- `warning` - Use this mode to display that something is not right but not critical.
+- `danger` - Use this mode to display critical information such as a action is destructive.
+
+## Supported elements inside slot
+
+`<SAlert>` supports the following elements inside the slot.
+
+- `<p>`
+- `<a>`
+
+## Props
+
+```ts
+interface Props {
+  mode?: 'info' | 'success' | 'warning' | 'danger'
+}
+```
+
+### `:mode`
+
+Defines the type of the alert. See [Modes](#modes) for more information.
+
+```ts
+interface Props {
+  // @default 'info'
+  mode: 'info' | 'success' | 'warning' | 'danger'
+}
+```
+
+```vue-html
+<SAlert mode="success">
+  ...
+</SAlert>
+```
+
+## Slots
+
+### `#default`
+
+`<SAlert>` will render any passed slot as is. See [Supported elements inside slot](#supported-elements-inside-slot) for more information.
+
+```vue-html
+<SAlert>
+  <p>Lorem ipsum...</p>
+</SAlert>
+```

lib/components/SAlert.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import IconSuccess from '@iconify-icons/ph/check-bold'
+import IconInfo from '@iconify-icons/ph/info-bold'
+import IconWarning from '@iconify-icons/ph/warning-bold'
+import IconDanger from '@iconify-icons/ph/warning-octagon-bold'
+import SIcon from './SIcon.vue'
+
+withDefaults(defineProps<{
+  mode?: 'info' | 'success' | 'warning' | 'danger'
+}>(), {
+  mode: 'info'
+})
+
+const iconDict = {
+  info: IconInfo,
+  success: IconSuccess,
+  warning: IconWarning,
+  danger: IconDanger
+} as const
+</script>
+
+<template>
+  <div class="SAlert" :class="[mode]">
+    <div class="icon">
+      <SIcon :icon="iconDict[mode]" class="icon-svg" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SAlert {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+  border: 1px solid var(--alert-border-color);
+  border-radius: 6px;
+  padding: 16px;
+  background-color: var(--alert-bg-color);
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+}
+
+.icon-svg {
+  width: 20px;
+  height: 20px;
+  color: var(--alert-icon-color);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.content :slotted(p) {
+  margin: 0;
+  max-width: 65ch;
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.content :slotted(a) {
+  font-weight: 500;
+  text-decoration: underline;
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-text-2);
+  }
+}
+
+.SAlert.info {
+  --alert-border-color: var(--c-border-info-1);
+  --alert-bg-color: var(--c-bg-info-dimm-a1);
+  --alert-icon-color: var(--c-text-info-1);
+}
+
+.SAlert.success {
+  --alert-border-color: var(--c-border-success-1);
+  --alert-bg-color: var(--c-bg-success-dimm-a1);
+  --alert-icon-color: var(--c-text-success-1);
+}
+
+.SAlert.warning {
+  --alert-border-color: var(--c-border-warning-1);
+  --alert-bg-color: var(--c-bg-warning-dimm-a1);
+  --alert-icon-color: var(--c-text-warning-1);
+}
+
+.SAlert.danger {
+  --alert-border-color: var(--c-border-danger-1);
+  --alert-bg-color: var(--c-bg-danger-dimm-a1);
+  --alert-icon-color: var(--c-text-danger-1);
+}
+</style>

stories/components/SAlert.01_Playground.story.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import SAlert from 'sefirot/components/SAlert.vue'
+
+const title = 'Components / SAlert / 01. Playground'
+const docs = '/components/alert'
+
+function state() {
+  return {
+    mode: 'info'
+  }
+}
+</script>
+
+<template>
+  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+    <template #controls="{ state }">
+      <HstSelect
+        title="mode"
+        :options="{
+          info: 'info',
+          success: 'success',
+          warning: 'warning',
+          danger: 'danger'
+        }"
+        v-model="state.mode"
+      />
+    </template>
+
+    <template #default="{ state }">
+      <Board :title="title" :docs="docs">
+        <SAlert :mode="state.mode">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href="#">dolore magna</a> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </SAlert>
+      </Board>
+    </template>
+  </Story>
+</template>