From 4e8bf53cd39d806f171430e5a8b9bf4b7ce02091 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 1 Jul 2024 15:40:49 +0200
Subject: [PATCH] Deal with buttons in dropdown

---
 lib/bitstyles_phoenix/alpine3/dropdown.ex   | 12 ++--
 lib/bitstyles_phoenix/alpine3/sidebar.ex    | 16 +++---
 lib/bitstyles_phoenix/component/dropdown.ex | 64 +++++++++++++--------
 lib/bitstyles_phoenix/component/heading.ex  |  8 +--
 lib/bitstyles_phoenix/component/sidebar.ex  | 18 +++---
 lib/bitstyles_phoenix/component/tabs.ex     |  2 +-
 6 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/lib/bitstyles_phoenix/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
index 5e8ac50..fe1c3cc 100644
--- a/lib/bitstyles_phoenix/alpine3/dropdown.ex
+++ b/lib/bitstyles_phoenix/alpine3/dropdown.ex
@@ -47,7 +47,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
     '''
         """
         <div class="u-relative" x-data="{ dropdownOpen: false }">
-          <button type="button" @click="dropdownOpen = true" class="a-button a-button--ui">
+          <button type="button" @click="dropdownOpen = true" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -58,12 +58,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
@@ -103,7 +103,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
     '''
         """
         <div class="u-relative" x-data="{ myOwnDropDown: false }">
-          <button type="button" @click="myOwnDropDown = true" class="a-button a-button--ui">
+          <button type="button" @click="myOwnDropDown = true" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -114,12 +114,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index f65749e..c2ae0e5 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -36,8 +36,8 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...>   </:small_sidebar>
         ...>   <:sidebar_content>
         ...>     <.ui_sidebar_nav>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
         ...>     </.ui_sidebar_nav>
         ...>   </:sidebar_content>
         ...>   <:main :let={s} class="u-margin-s-top">
@@ -63,12 +63,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                 </a>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
@@ -83,7 +83,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </span>
                   </a>
                   <div>
-                    <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--icon a-button--icon-reversed" title="Close">
+                    <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--square" data-theme="dark" title="Close">
                       <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                         <use xlink:href="#icon-cross">
                         </use>
@@ -96,12 +96,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
@@ -111,7 +111,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
           </header>
           <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
             <div class="a-content flex">
-              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--icon u-hidden@l u-margin-s-right" title="Open sidebar">
+              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s-right" title="Open sidebar">
                 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-hamburger">
                   </use>
diff --git a/lib/bitstyles_phoenix/component/dropdown.ex b/lib/bitstyles_phoenix/component/dropdown.ex
index 6d7a66c..379a207 100644
--- a/lib/bitstyles_phoenix/component/dropdown.ex
+++ b/lib/bitstyles_phoenix/component/dropdown.ex
@@ -2,6 +2,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
   use BitstylesPhoenix.Component
 
   import BitstylesPhoenix.Component.Button
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The dropdown component without any JS.
@@ -69,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
       "5.0.1": '''
           """
           <div class="u-relative">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button a-button--secondary">
               <span class="a-button__label">
                 Select me
               </span>
@@ -80,12 +81,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -158,14 +159,14 @@ defmodule BitstylesPhoenix.Component.Dropdown do
   )
 
   story(
-    "Dropdown with menu variant top",
+    "Dropdown with menu variant top, primary button",
     '''
         iex> assigns = %{}
         ...> render ~H"""
         ...> <div style="min-height: 150px;" class="u-flex u-flex-col">
         ...>   <div class="u-flex-grow-1"></div>
         ...>   <.ui_dropdown variant={:top}>
-        ...>     <:button label="Select me"/>
+        ...>     <:button color={} label="Select me"/>
         ...>     <:menu>
         ...>       <.ui_dropdown_option href="#" class="u-h6">
         ...>         Option 1
@@ -184,7 +185,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           <div class="u-flex-grow-1">
           </div>
           <div class="u-relative">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button">
               <span class="a-button__label">
                 Select me
               </span>
@@ -195,12 +196,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s-bottom">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -239,7 +240,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     '''
         """
         <div class="u-relative u-flex u-justify-end">
-          <button type="button" class="a-button a-button--ui">
+          <button type="button" class="a-button a-button--secondary">
             <span class="a-button__label">
               Select me
             </span>
@@ -250,12 +251,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s-top">
             <li>
-              <a href="#" class="a-button a-button--menu">
+              <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu">
+              <a href="#" class="a-button a-button--transparent a-button--menu">
                 Option 2
               </a>
             </li>
@@ -300,7 +301,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
           <div class="u-flex-grow-1">
           </div>
           <div class="u-relative u-flex u-justify-end">
-            <button type="button" class="a-button a-button--ui">
+            <button type="button" class="a-button a-button--secondary">
               <span class="a-button__label">
                 Select me
               </span>
@@ -311,12 +312,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--right u-margin-s-bottom">
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu u-h6">
+                <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                   Option 2
                 </a>
               </li>
@@ -356,17 +357,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     '''
         """
         <div class="u-relative">
-          <button type="button" class="a-button a-button--ui foo">
+          <button type="button" class="a-button a-button--secondary foo">
             Custom button content
           </button>
           <ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 1
               </a>
             </li>
             <li>
-              <a href="#" class="a-button a-button--menu u-h6">
+              <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
                 Option 2
               </a>
             </li>
@@ -404,7 +405,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
         """
         <div style="min-height: 200px; width: 500px;">
           <div class="u-relative">
-            <button type="button" aria-controls="dropdown-1" class="a-button a-button--ui" onclick=\"toggle(&#39;dropdown-1&#39;)\">
+            <button type="button" aria-controls="dropdown-1" class="a-button a-button--secondary" onclick=\"toggle(&#39;dropdown-1&#39;)\">
               <span class="a-button__label">
                 Select me
               </span>
@@ -415,19 +416,19 @@ defmodule BitstylesPhoenix.Component.Dropdown do
             </button>
             <ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
               <li>
-                <a href="#" class="a-button a-button--menu foo">
+                <a href="#" class="a-button a-button--transparent a-button--menu foo">
                   Option 1
                 </a>
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu">
+                <a href="#" class="a-button a-button--transparent a-button--menu">
                   Option 2
                 </a>
               </li>
               <li role="separator">
               </li>
               <li>
-                <a href="#" class="a-button a-button--menu">
+                <a href="#" class="a-button a-button--transparent a-button--menu">
                   Option 3
                 </a>
               </li>
@@ -454,9 +455,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     {button, button_extra} =
       assigns_from_single_slot(assigns, :button, exclude: [:label, :icon_file])
 
+    button_extra =
+      if Bitstyles.version() >= "5.0.0" do
+        button_extra
+        |> Keyword.put_new(:color, :secondary)
+      else
+        button_extra
+        |> Keyword.put_new(:variant, :ui)
+      end
+
     button_extra =
       button_extra
-      |> Keyword.put_new(:variant, :ui)
       |> maybe_put_icon(button[:label], button[:icon_file])
 
     {menu, menu_extra} = assigns_from_single_slot(assigns, :menu, exclude: [:class])
@@ -505,7 +514,16 @@ defmodule BitstylesPhoenix.Component.Dropdown do
     extra =
       assigns
       |> assigns_to_attributes()
-      |> Keyword.put_new(:variant, "menu")
+
+    extra =
+      if Bitstyles.version() >= "5.0.0" do
+        extra
+        |> Keyword.put_new(:shape, "menu")
+        |> Keyword.put_new(:color, "transparent")
+      else
+        extra
+        |> Keyword.put_new(:variant, "menu")
+      end
 
     assigns = assign(assigns, extra: extra)
 
diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index 61aa788..ef179fd 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -64,10 +64,10 @@ defmodule BitstylesPhoenix.Component.Heading do
         ...>     <.ui_button>Edit</.ui_button>
         ...>   </:action>
         ...>   <:action>
-        ...>     <.ui_button variant="danger">Delete</.ui_button>
+        ...>     <.ui_button color="danger">Delete</.ui_button>
         ...>   </:action>
         ...>   <:action show={false}>
-        ...>     <.ui_button variant="danger">Hide me</.ui_button>
+        ...>     <.ui_button color="danger">Hide me</.ui_button>
         ...>   </:action>
         ...> </.ui_page_title>
         ...> """
@@ -218,10 +218,10 @@ defmodule BitstylesPhoenix.Component.Heading do
         ...>     <.ui_button>Edit</.ui_button>
         ...>   </:action>
         ...>   <:action>
-        ...>     <.ui_button variant="danger">Delete</.ui_button>
+        ...>     <.ui_button color="danger">Delete</.ui_button>
         ...>   </:action>
         ...>   <:action show={false}>
-        ...>     <.ui_button variant="danger">Hide me</.ui_button>
+        ...>     <.ui_button color="danger">Hide me</.ui_button>
         ...>   </:action>
         ...> </.ui_section_title>
         ...> """
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index decddd8..5ec3f21 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -17,12 +17,12 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         ...>       Menu
         ...>     </.ui_sidebar_section>
         ...>     <.ui_sidebar_nav>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
-        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
+        ...>       <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
         ...>     </.ui_sidebar_nav>
         ...>     <.ui_sidebar_section border="top">
         ...>       <.ui_dropdown variant={["top", "full-width"]}>
-        ...>         <:button variant="nav-large">
+        ...>         <:button color="transparent">
         ...>           <div class="a-button__icon a-avatar">
         ...>             <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar" />
         ...>           </div>
@@ -50,19 +50,19 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
                   <div class="u-relative">
-                    <button type="button" class="a-button a-button--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
                         <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
@@ -87,19 +87,19 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                 </div>
                 <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #1
                     </a>
                   </li>
                   <li class="u-margin-xs-bottom u-flex">
-                    <a href="#" class="a-button a-button--nav u-flex-grow-1">
+                    <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-top u-margin-xs-top">
                   <div class="u-relative">
-                    <button type="button" class="a-button a-button--nav-large">
+                    <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
                         <img src="https://placehold.co/100x150" width="36" height="54" alt="Jane Dobermann’s avatar" class="a-avatar"/>
                       </div>
diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 9d60136..436b21c 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -193,7 +193,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     assigns = assign(assigns, extra: Keyword.merge(extra, active))
 
     ~H"""
-    <.ui_button {@extra} variant="tab">
+    <.ui_button {@extra} color="tab" shape="tab">
       <%= render_slot(@inner_block) %>
     </.ui_button>
     """