UI-475: Extracted Note style component (#412)

packages/alto/src/_dev/App.vue

@@ -1,60 +1,16 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { Alert } from '~/components';
-import type { AlertType } from '~/types';
-
-interface AlertProps {
-  title: string
-  description: string
-  type: AlertType
-}
-
-const alerts: AlertProps[] = [
-  {
-    title: 'Info',
-    description: 'Click here to learn more about the exciting enhancements we\'ve made.',
-    type: 'info',
-  },
-  {
-    title: 'Success',
-    description: 'Your profile information has been successfully updated.',
-    type: 'success',
-  },
-  {
-    title: 'Warning',
-    description: 'Please check your internet connection.',
-    type: 'warning',
-  },
-  {
-    title: 'Error',
-    description: 'Unable to save data, check again later.',
-    type: 'error',
-  },
-];
+import { Note } from '~/components';
 </script>
 
 <template>
-  <div class="container">
-    <Alert v-for="alert in alerts" :key="alert.type" :type="alert.type">
-      <template #title>
-        {{ alert.title }}
-      </template>
-      <template #description>
-        {{ alert.description }}
-      </template>
-    </Alert>
-  </div>
+  <Note>
+    <template #icon>
+      📪
+    </template>
+    <template #content>
+      <p>Don't forget to check your inbox, we have sent a link to verify your account.</p>
+    </template>
+  </Note>
 </template>
-
-<style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  gap: 40px;
-}
-</style>

packages/alto/src/components/Note/Note.vue

@@ -5,36 +5,16 @@ const slots = useSlots();
 </script>
 
 <template>
-  <div class="note">
-    <div v-if="slots.icon" class="icon">
-      <slot name="icon" class="icon" />
+  <div class="yc-note">
+    <div v-if="slots.icon" class="yc-note__icon">
+      <slot name="icon" />
     </div>
-    <div v-if="slots.content" class="content">
+    <div v-if="slots.content" class="yc-note__content">
       <slot name="content" />
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.note {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  width: max-content;
-  max-width: 100%;
-  padding: 2px 25px;
-  border: 1px solid var(--gray-100);
-  border-radius: 8px;
-  background: var(--base-white);
-  gap: 32px;
-}
-
-.note .icon {
-  color: var(--brand-500);
-}
-
-.note .content {
-  color: var(--gray-700);
-  font: var(--text-sm-regular);
-}
+<style scoped>
+@import "@youcan/styles/note";
 </style>

packages/styles/package.json

@@ -13,6 +13,7 @@
     "./alert": "./dist/alert.css",
     "./checkbox": "./dist/checkbox.css",
     "./badge": "./dist/badge.css",
+    "./note": "./dist/note.css",
     "./divider": "./dist/divider.css",
     "./radio-list": "./dist/radio-list.css",
     "./loader": "./dist/loader.css",

packages/styles/src/css/note.css

@@ -0,0 +1,19 @@
+.note {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  padding: 2px 25px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background: var(--base-white);
+  gap: 32px;
+}
+.note__icon {
+  color: var(--brand-500);
+}
+.note__content {
+  color: var(--gray-700);
+  font: var(--text-sm-regular);
+}

packages/styles/src/scss/components/note.scss

@@ -0,0 +1,21 @@
+.note {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  padding: 2px 25px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background: var(--base-white);
+  gap: 32px;
+
+  &__icon {
+    color: var(--brand-500);
+  }
+
+  &__content {
+    color: var(--gray-700);
+    font: var(--text-sm-regular);
+  }
+}