Merge branch 'upgrade-bitstyles-to-6.0.0' into feature/129-phoenix_ht…

…ml-v4-compatibility-and-upgrade-bitstyles-to-6.0.0
bitcrowd · Jul 17, 2024 · ef57bba · ef57bba
2 parents c1f5c61 + cabdc5d
commit ef57bba
Show file tree

Hide file tree

Showing 21 changed files with 352 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Basic helpers for [bitstyles](https://github.com/bitcrowd/bitstyles) for elixir
 
 Bitstyles must be installed separately into the asset generation. The helpers in this project just output classes for working with bitstyles.
 
-Bitstyles versions from 5.0.1 down to 1.3.0 are supported.
+Bitstyles versions from 6.0.0 down to 1.3.0 are supported.
 
 ## Installation
 

diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex
@@ -109,7 +109,7 @@ defmodule BitstylesPhoenix do
 
   You can control how required labels are rendered. By default you will get this appended to your labels if the input is required:
   ```html
-    <span aria-hidden="true" class="u-fg-warning u-margin-xss-left">*</span>
+    <span aria-hidden="true" class="u-fg-warning u-margin-s4s-left">*</span>
   ```
 
   You can override it by specifying your own component to render the required labels. The component will get the form and the field as assigns, as well as any optional parameters you pass in the MFA as `@opts`.

diff --git a/lib/bitstyles_phoenix/alpine3/dropdown.ex b/lib/bitstyles_phoenix/alpine3/dropdown.ex
@@ -56,7 +56,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto u-list-none 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">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-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--transparent a-button--menu u-h6">
                 Option 1
@@ -112,7 +112,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </button>
-          <ul class="a-dropdown u-overflow-y-auto u-list-none 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">
+          <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-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--transparent a-button--menu u-h6">
                 Option 1

diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -40,9 +40,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         ...>       <.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">
+        ...>   <:main :let={s} class="u-margin-s2-top">
         ...>     <.ui_content class="flex">
-        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s-right"/>
+        ...>       <.ui_js_sidebar_open sidebar={s} class="u-margin-s2-right"/>
         ...>       Main Content
         ...>     </.ui_content>
         ...>   </:main>
@@ -54,27 +54,27 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-grayscale-dark-2 u-fg-grayscale-light-2">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
                     bitcrowd
                   </span>
                 </a>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" 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">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-grayscale-dark-2 u-fg-grayscale-light-2" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" 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">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
@@ -94,13 +94,13 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </button>
                   </div>
                 </div>
-                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
-                  <li class="u-margin-xs-bottom u-flex">
+                <ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto u-list-none u-flex u-flex-col u-items-stretch u-padding-s4-right u-padding-s4-left">
+                  <li class="u-margin-s4-bottom u-flex">
                     <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">
+                  <li class="u-margin-s4-bottom u-flex">
                     <a href="#" class="a-button a-button--transparent u-flex-grow-1">
                       Menu item #2
                     </a>
@@ -109,9 +109,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
               </div>
             </nav>
           </header>
-          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
+          <main class="u-flex-grow-1 u-overflow-y-auto u-margin-s2-top">
             <div class="a-content flex">
-              <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">
+              <button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s2-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/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles do
   @moduledoc false
 
-  @default_version "5.0.1"
+  @default_version "6.0.0"
   @cdn_url "https://cdn.jsdelivr.net/npm/bitstyles"
 
   def cdn_url do
@@ -14,7 +14,7 @@ defmodule BitstylesPhoenix.Bitstyles do
   """
   def classname(name), do: classname(name, version())
 
-  def classname(class, version) when version > "5.0.1" do
+  def classname(class, version) when version > "6.0.0" do
     IO.warn("Version #{version} of bitstyles is not yet supported")
     class
   end
@@ -25,10 +25,60 @@ defmodule BitstylesPhoenix.Bitstyles do
   # If it does exist, then doing this renaming in the classname/2 function would make it impossible
   # for users of older bitstyles to use the "class-name-A" classname.
 
-  def classname(class, version) when version >= "5.0.0" do
+  def classname(class, version) when version >= "6.0.0" do
     class
   end
 
+  def classname(class, version) when version >= "5.0.0" do
+    sizes_renaming = %{
+      "s7" => "4xs",
+      # 3xs has no size equivalent in new sizing
+      # exact match:
+      "s6" => "2xs",
+      "s5" => "2xs",
+      # exact match:
+      "s4" => "xs",
+      "s3" => "xs",
+      # exact match:
+      "s2" => "s",
+      "s1" => "s",
+      # exact match:
+      "m" => "m",
+      # exact match:
+      "l1" => "l",
+      "l2" => "l",
+      # exact match:
+      "l3" => "xl",
+      "l4" => "xl",
+      "l5" => "xl",
+      # exact match:
+      "l6" => "2xl",
+      # exact match:
+      "l7" => "3xl"
+      # 4xl has no size equivalent in new sizing
+    }
+
+    class =
+      Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+        acc
+        |> String.replace("u-margin-#{new_size}", "u-margin-#{old_size}")
+        |> String.replace("u-margin-neg-#{new_size}", "u-margin-neg-#{old_size}")
+        |> String.replace("u-padding-#{new_size}", "u-padding-#{old_size}")
+        |> String.replace("u-padding-neg-#{new_size}", "u-padding-neg-#{old_size}")
+        |> String.replace("u-gap-#{new_size}", "u-gap-#{old_size}")
+      end)
+
+    class =
+      case class do
+        "u-bg-grayscale-dark-2" -> "u-bg-text-darker"
+        "u-fg-grayscale-dark-2" -> "u-fg-text-darker"
+        "u-fg-grayscale" -> "u-fg-text"
+        class -> class
+      end
+
+    classname(class, "6.0.0")
+  end
+
   def classname(class, version) when version >= "4.2.0" do
     sizes_renaming = %{
       "3xs" => "xxxs",

diff --git a/lib/bitstyles_phoenix/component/avatar.ex b/lib/bitstyles_phoenix/component/avatar.ex
@@ -85,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
           <div class="a-avatar">
             <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
-          <span class="u-margin-s-left">
+          <span class="u-margin-s2-left">
             Username
           </span>
         </div>
@@ -114,7 +114,7 @@ defmodule BitstylesPhoenix.Component.Avatar do
         <img {@extra} />
       </div>
       <%= if assigns[:inner_block] do %>
-        <span class={classnames("u-margin-s-left")}>
+        <span class={classnames("u-margin-s2-left")}>
          <%= render_slot(@inner_block) %>
         </span>
       <% end %>

diff --git a/lib/bitstyles_phoenix/component/badge.ex b/lib/bitstyles_phoenix/component/badge.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.Badge do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The Badge component.
@@ -27,6 +28,13 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
+          published
+        </span>
+        """
+    ''',
     "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--text">
@@ -53,7 +61,14 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
-    '''
+    "6.0.0": '''
+        """
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-1">
+          new
+        </span>
+        """
+    ''',
+    "5.0.1": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--brand-1">
           new
@@ -74,7 +89,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--brand-2">
+        <span class="a-badge u-h6 u-font-medium" data-theme="brand-2">
           recommended
         </span>
         """
@@ -93,7 +108,7 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--danger">
+        <span class="a-badge u-h6 u-font-medium" data-theme="danger">
           deleted
         </span>
         """
@@ -112,23 +127,32 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--text extra-class" data-foo="bar">
+        <span class="a-badge u-h6 u-font-medium extra-class" data-theme="grayscale" data-foo="bar">
           published
         </span>
         """
     '''
   )
 
   def ui_badge(assigns) do
-    variant = assigns[:variant] || "text"
+    extra = assigns_to_attributes(assigns, [:class, :variant])
+
+    {variant_class, extra} =
+      if Bitstyles.version() >= "6.0.0" do
+        theme = assigns[:variant] || "grayscale"
+        {nil, Keyword.put_new(extra, :"data-theme", theme)}
+      else
+        variant = assigns[:variant] || "text"
+        {"a-badge--#{variant}", extra}
+      end
 
     class =
       classnames([
-        "a-badge u-h6 u-font-medium a-badge--#{variant}",
+        "a-badge u-h6 u-font-medium",
+        variant_class,
         assigns[:class]
       ])
 
-    extra = assigns_to_attributes(assigns, [:class, :variant])
     assigns = assign(assigns, class: class, extra: extra)
     ~H"<span class={@class} {@extra}><%= render_slot(@inner_block) %></span>"
   end