From dcdb948ceeabab8f7252fe1af2739c8cea0172f6 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 19 Apr 2024 12:26:47 -0400
Subject: [PATCH] Creates common Tip component

---
 src/lib/components/common/Tip.svelte          | 28 +++++++++++
 .../common/stories/Tip.stories.svelte         | 48 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/lib/components/common/Tip.svelte
 create mode 100644 src/lib/components/common/stories/Tip.stories.svelte

diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte
new file mode 100644
index 000000000..9f8566db0
--- /dev/null
+++ b/src/lib/components/common/Tip.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { LightBulb16 } from "svelte-octicons";
+  import Flex from "./Flex.svelte";
+</script>
+
+<aside class="tip">
+  <div class="icon"><slot name="icon"><LightBulb16 /></slot></div>
+  <Flex direction="column" justify="center">
+    <slot />
+  </Flex>
+</aside>
+
+<style>
+  .tip {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    color: var(--color, var(--gray-5, #233944));
+    fill: var(--fill, var(--gray-4, #5c717c));
+    background-color: var(--background-color, var(--gray-1, #f5f6f7));
+    border: 1px solid var(--border-color, var(--gray-3, #99a8b3));
+  }
+  .icon {
+    display: flex;
+    align-items: center;
+  }
+</style>
diff --git a/src/lib/components/common/stories/Tip.stories.svelte b/src/lib/components/common/stories/Tip.stories.svelte
new file mode 100644
index 000000000..e5b6af04a
--- /dev/null
+++ b/src/lib/components/common/stories/Tip.stories.svelte
@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Tip from "../Tip.svelte";
+  import Pin from "@/common/icons/Pin.svelte";
+  import Premium from "@/common/icons/Premium.svelte";
+  import { Info16 } from "svelte-octicons";
+
+  export const meta = {
+    title: "Components / Common / Tip",
+    component: Tip,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="Basic">
+  <Tip>All dogs go to heaven</Tip>
+</Story>
+
+<Story name="With Icon">
+  <Tip>
+    <Pin slot="icon" />
+    Pinned items will appear here.
+  </Tip>
+</Story>
+
+<Story name="With Colors">
+  <Tip
+    --fill="var(--green-dark)"
+    --background-color="var(--green-light)"
+    --border-color="var(--green)"
+  >
+    <Premium slot="icon" />
+    This feature is for premium users.
+  </Tip>
+</Story>
+
+<Story name="With Large Icon">
+  <Tip
+    --color="var(--blue-5)"
+    --fill="var(--blue-4)"
+    --background-color="var(--blue-1)"
+    --border-color="var(--blue-3)"
+  >
+    <Info16 height="32" width="32" slot="icon" />
+    Learn about all the interesting facts
+  </Tip>
+</Story>