From b9b192277d4d649adfc3950c0269f02173a7f4d7 Mon Sep 17 00:00:00 2001
From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:54:59 +0300
Subject: [PATCH] add note option to examples list

---
 assets/ds-moon-preset.js                              |  1 +
 lib/moon_web/components/example_and_code.ex           | 11 +++++------
 lib/moon_web/components/examples_list.ex              |  1 +
 .../examples/design/button_example/multi_line.ex      |  6 ++++++
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/assets/ds-moon-preset.js b/assets/ds-moon-preset.js
index f64749d3a..2972b0663 100644
--- a/assets/ds-moon-preset.js
+++ b/assets/ds-moon-preset.js
@@ -439,6 +439,7 @@ module.exports = {
       ]);
       addVariant('not-last', '&:not(:last-child)');
       addVariant('not-first', '&:not(:first-child)');
+      addVariant('empty', '&:empty');
     }),
   ],  
 };
diff --git a/lib/moon_web/components/example_and_code.ex b/lib/moon_web/components/example_and_code.ex
index b2d23b821..7a784badd 100644
--- a/lib/moon_web/components/example_and_code.ex
+++ b/lib/moon_web/components/example_and_code.ex
@@ -24,8 +24,9 @@ defmodule MoonWeb.Components.ExampleAndCode do
       <div class="flex flex-row items-center justify-between">
         <div class="flex flex-row gap-2 w-full">
           <Tabs id={"#{@id}-example-and-code"} class="justify-between gap-6">
-            <h2 class="text-moon-24 font-semibold">{@title}</h2>
-            <Tabs.List class="w-fit p-1 gap-1 bg-goku rounded-moon-s-md">
+            <h2 class="text-moon-24 font-semibold order-1">{@title}</h2>
+            <p :if={slot_assigned?(:note)} class="text-moon-16 w-full order-3 empty:hidden"><#slot {@note} /></p>
+            <Tabs.List class="w-fit p-1 gap-1 bg-goku rounded-moon-s-md order-2">
               <Tabs.Segment class="flex flex-row gap-2">
                 <ControlsEye class="text-moon-24" />
                 <span class="hidden md:block">Preview</span>
@@ -35,7 +36,7 @@ defmodule MoonWeb.Components.ExampleAndCode do
                 <span class="hidden md:block">Code</span>
               </Tabs.Segment>
             </Tabs.List>
-            <Tabs.Panels>
+            <Tabs.Panels class="order-4">
               <Tabs.Panel>
                 <div class={merge([
                   "p-4 flex bg-goku text-moon-14 rounded-moon-s-sm w-full",
@@ -56,9 +57,7 @@ defmodule MoonWeb.Components.ExampleAndCode do
           </Tabs>
         </div>
       </div>
-      <div class="text-moon-16" :if={slot_assigned?(:note)}>
-        <p><#slot {@note} /></p>
-      </div>
+
       <div
         class="theme-moon-dark grid gap-4 p-4 bg-goku text-moon-14 rounded-moon-s-sm"
         :if={slot_assigned?(:state)}
diff --git a/lib/moon_web/components/examples_list.ex b/lib/moon_web/components/examples_list.ex
index fa05e04bf..00b69a7ef 100644
--- a/lib/moon_web/components/examples_list.ex
+++ b/lib/moon_web/components/examples_list.ex
@@ -13,6 +13,7 @@ defmodule MoonWeb.Components.ExamplesList do
     ~F"""
     {#for module <- @examples}
       <ExampleAndCode title={title(module)} id={"example-#{module}"}>
+        <:note>{(Kernel.function_exported?(module, :note, 0) && module.note()) || ""}</:note>
         <:example><.moon {=module} id={"example-contents-#{module}"} /></:example>
         <:code>{(Kernel.function_exported?(module, :code, 0) && module.code()) || ""}</:code>
       </ExampleAndCode>
diff --git a/lib/moon_web/examples/design/button_example/multi_line.ex b/lib/moon_web/examples/design/button_example/multi_line.ex
index 93077ccca..ccb6b88e4 100644
--- a/lib/moon_web/examples/design/button_example/multi_line.ex
+++ b/lib/moon_web/examples/design/button_example/multi_line.ex
@@ -19,6 +19,12 @@ defmodule MoonWeb.Examples.Design.ButtonExample.MultiLine do
     """
   end
 
+  def note() do
+    """
+    Multiline button exists in XL size only. Please copy and paste the code below to see the result.
+    """
+  end
+
   def code() do
     """
     alias Moon.Design.Button