Upgrade bitstyles to 5.0.1

CHANGELOG.md

@@ -1,19 +1,31 @@
 # Changelog
 
+## Unreleased
+
+- Added support for bitstyles `v5.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v5.0.0`.
+
+### How to migrate to bitstyles `v5.0.0`
+
+Follow the [bitstyles changelog](https://github.com/bitcrowd/bitstyles/blob/main/CHANGELOG.md#500---2023-01-03) for versions 5.0.0 and 5.0.0-alpha-1. Even if you're using the `BitstylesPhoenix.Helper.Classnames.classnames/1` helper to apply bitstyles classes in your own codebase, you will still need to migrate some of them yourself. For example, the class `u-gap-m` could not have been migrated via the helper because it exists in both bitstyles versions with different meanings (`u-gap-m` and `u-gap-l` in bitstyles 4.3.0 are equivalent to `u-gap-l` and `u-gap-xl` in bitstyles `v5.0.0`).
+
+The `variant` attribute of the `Button` component is deprecated in bitstyles `v5.0.0`. Use the attributes `shape` and `color` instead.
+
 ## v2.3.1 - 2023-10-23
-- Bump LiveView
+
+- Bump LiveView.
 
 ## v2.3.0 - 2023-05-15
-- Add `Modal` component
+
+- Add `Modal` component.
 
 ## v2.2.0 - 2023-03-20
 
-- Updated to LiveView 0.18.18
-- Add `Card` and `Avatar` components
+- Updated to LiveView 0.18.18.
+- Add `Card` and `Avatar` components.
 
 ## v2.1.1 - 2022-12-02
 
-- Fixed version backwards compatibility
+- Fixed version backwards compatibility.
 
 ## v2.1.0 - 2022-12-02
 
@@ -60,7 +72,7 @@ the support for the `ui_button` as helper is dropped completely in favor of comp
 
 ## v1.0.0 - 2022-01-04
 
-This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent develpments in Phoenix and LiveView.
+This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent developments in Phoenix and LiveView.
 
 ### Breaking
 

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 4.3.0 down to 1.3.0 are supported.
+Bitstyles versions from 5.0.1 down to 1.3.0 are supported.
 
 ## Installation
 

lib/bitstyles_phoenix.ex

@@ -22,7 +22,7 @@ defmodule BitstylesPhoenix do
 
   ```elixir
   <.ui_badge>A nice badge</.ui_badge>
-  # => <span class="a-badge u-h6 u-font-medium a-badge--gray">A nice badge</span>
+  # => <span class="a-badge u-h6 u-font-medium a-badge--text">A nice badge</span>
   ```
 
   ```elixir

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>
@@ -56,14 +56,14 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </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">
+          <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">
             <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>
@@ -112,14 +112,14 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
               </use>
             </svg>
           </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">
+          <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">
             <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>

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">
@@ -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-80 u-fg-gray-30">
+              <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">
                 <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 a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
+                <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">
-                    <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>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30" @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-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="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
@@ -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>
@@ -94,14 +94,14 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                     </button>
                   </div>
                 </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">
+                <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">
-                    <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>

lib/bitstyles_phoenix/bitstyles.ex

@@ -1,7 +1,7 @@
 defmodule BitstylesPhoenix.Bitstyles do
   @moduledoc false
 
-  @default_version "4.3.0"
+  @default_version "5.0.1"
   @cdn_url "https://cdn.jsdelivr.net/npm/bitstyles"
 
   def cdn_url do
@@ -14,12 +14,60 @@ defmodule BitstylesPhoenix.Bitstyles do
   """
   def classname(name), do: classname(name, version())
 
-  def classname(class, version) when version > "4.3.0" do
+  def classname(class, version) when version > "5.0.1" do
     IO.warn("Version #{version} of bitstyles is not yet supported")
     class
   end
 
-  def classname(class, version) when version >= "4.2.0", do: class
+  # Note about class renaming:
+  # A renaming of "class-name-A" (newer) to "class-name-B" (older) can only be done via this module if
+  # the "class-name-A" does not also exist in older versions of bitstyles with a different meaning.
+  # 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
+    class
+  end
+
+  def classname(class, version) when version >= "4.2.0" do
+    sizes_renaming = %{
+      "3xs" => "xxxs",
+      "2xs" => "xxs",
+      "2xl" => "xxl",
+      "3xl" => "xxxl"
+    }
+
+    class =
+      if String.starts_with?(class, "u-") do
+        Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
+          String.replace(acc, "-#{new_size}", "-#{old_size}")
+        end)
+      else
+        class
+      end
+
+    border_color_renaming = %{
+      "u-border-gray-light" => "u-border-gray-10",
+      "u-border-gray-dark" => "u-border-gray-70"
+    }
+
+    class =
+      Enum.reduce(border_color_renaming, class, fn {new_border_color, old_border_color}, acc ->
+        String.replace(acc, new_border_color, old_border_color)
+      end)
+
+    class =
+      case class do
+        "u-list-none" -> "a-list-reset"
+        "a-badge--text" -> "a-badge--gray"
+        "u-fg-text" -> "u-fg-gray-30"
+        "u-fg-text-darker" -> "u-fg-gray-50"
+        "u-bg-gray-darker" -> "u-bg-gray-80"
+        class -> class
+      end
+
+    classname(class, "5.0.0")
+  end
 
   def classname(class, version) when version >= "4.0.0" do
     mapping =
@@ -28,7 +76,7 @@ defmodule BitstylesPhoenix.Bitstyles do
         _ -> class
       end
 
-    classname(mapping, "4.2.0")
+    classname(mapping, "4.3.0")
   end
 
   def classname(class, version) when version >= "2.0.0" do

lib/bitstyles_phoenix/component/avatar.ex

@@ -19,14 +19,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" alt="Username’s avatar"/>
+        ...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
         </div>
         """
@@ -38,14 +38,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" class="foo bar" alt="Username’s avatar"/>
+        ...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar foo bar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
         </div>
         """
@@ -57,14 +57,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar size="l" src="https://placekitten.com/100/100" alt="Username’s avatar" height="46" width="46"/>
+        ...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar a-avatar--l">
-            <img alt="Username’s avatar" height="46" src="https://placekitten.com/100/100" width="46"/>
+            <img alt="Username’s avatar" height="46" src="https://placehold.co/100x100" width="46"/>
           </div>
         </div>
         """
@@ -76,14 +76,14 @@ defmodule BitstylesPhoenix.Component.Avatar do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_avatar src="https://placekitten.com/100/100" alt="Username’s avatar"> Username </.ui_avatar>
+        ...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username </.ui_avatar>
         ...> """
     ''',
     '''
         """
         <div class="u-flex u-items-center">
           <div class="a-avatar">
-            <img height="32" width="32" alt="Username’s avatar" src="https://placekitten.com/100/100"/>
+            <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
           </div>
           <span class="u-margin-s-left">
             Username

lib/bitstyles_phoenix/component/badge.ex

@@ -27,7 +27,14 @@ defmodule BitstylesPhoenix.Component.Badge do
         ...> </.ui_badge>
         ...> """
     ''',
-    '''
+    "5.0.1": '''
+        """
+        <span class="a-badge u-h6 u-font-medium a-badge--text">
+          published
+        </span>
+        """
+    ''',
+    "4.3.0": '''
         """
         <span class="a-badge u-h6 u-font-medium a-badge--gray">
           published
@@ -105,15 +112,15 @@ defmodule BitstylesPhoenix.Component.Badge do
     ''',
     '''
         """
-        <span class="a-badge u-h6 u-font-medium a-badge--gray extra-class" data-foo="bar">
+        <span class="a-badge u-h6 u-font-medium a-badge--text extra-class" data-foo="bar">
           published
         </span>
         """
     '''
   )
 
   def ui_badge(assigns) do
-    variant = assigns[:variant] || "gray"
+    variant = assigns[:variant] || "text"
 
     class =
       classnames([