From c9e1f4842c2e5caf68911b17fee13856dd91fdc4 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Mon, 8 Jul 2024 13:16:07 +0200
Subject: [PATCH] Do not prevent users of older bitstyles from using u-gap-l

---
 lib/bitstyles_phoenix/bitstyles.ex            |  7 +-
 .../component/description_list.ex             | 91 +++++++++++++------
 test/bitstyles_phoenix/bitstyles_test.exs     |  3 +-
 3 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index e4ebe58..2794ac9 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -19,6 +19,12 @@ defmodule BitstylesPhoenix.Bitstyles do
     class
   end
 
+  # 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
@@ -54,7 +60,6 @@ defmodule BitstylesPhoenix.Bitstyles do
       case class do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
-        "u-gap-l" -> "u-gap-m"
         "u-fg-text" -> "u-fg-gray-30"
         "u-fg-text-darker" -> "u-fg-gray-50"
         "u-bg-gray-darker" -> "u-bg-gray-80"
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 3cb350e..74460b3 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -1,5 +1,6 @@
 defmodule BitstylesPhoenix.Component.DescriptionList do
   use BitstylesPhoenix.Component
+  alias BitstylesPhoenix.Bitstyles
 
   @moduledoc """
   The description list components.
@@ -16,28 +17,52 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         ...> </.ui_dl>
         ...> """
     ''',
-    '''
-        """
-        <dl class="a-dl">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Length
-            </dt>
-            <dd class="u-col-span-2">
-              8
-            </dd>
-          </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
-              Inserted at
-            </dt>
-            <dd class="u-col-span-2">
-              2007-01-02
-            </dd>
-          </div>
-        </dl>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
+              <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <dl class="a-dl">
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Length
+              </dt>
+              <dd class="u-col-span-2">
+                8
+              </dd>
+            </div>
+            <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-m">
+              <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+                Inserted at
+              </dt>
+              <dd class="u-col-span-2">
+                2007-01-02
+              </dd>
+            </div>
+          </dl>
+          """
+      '''
+    ],
     module: true,
     width: "100%"
   )
@@ -63,7 +88,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     '''
         """
         <dl class="a-dl extra" data-foo="baz">
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l u-fg-brand-2">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               Length
             </dt>
@@ -71,7 +96,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               8
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
@@ -79,7 +104,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
               Tag
             </dd>
           </div>
-          <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
+          <div class="a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-gap-l">
             <dt class="u-font-medium u-h6 u-fg-text-darker u-margin-xs-bottom@s">
               <pre>
                 Tag
@@ -133,10 +158,22 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
   """
   def ui_dl_item(assigns) do
     extra = assigns_to_attributes(assigns, [:class, :label, :value])
-    assigns = assign(assigns, extra: extra)
+
+    # u-gap-l and u-gap-xl in 5.0.0 are equivalent to respectively u-gap-m and u-gap-l in 4.3.0
+    gap_class =
+      if Bitstyles.version() >= "5.0.0" do
+        "u-gap-l"
+      else
+        "u-gap-m"
+      end
+
+    assigns =
+      assigns
+      |> assign(extra: extra)
+      |> assign(gap_class: gap_class)
 
     ~H"""
-      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline", assigns[:class]])} {@extra}>
+      <div class={classnames(["a-dl__item u-grid@m u-grid-cols-3 u-padding-m-y u-padding-m@m u-items-baseline u-items-baseline",  assigns[:gap_class], assigns[:class]])} {@extra}>
         <%= if assigns[:label] do %>
           <.ui_dt><%= @label %></.ui_dt>
           <.ui_dd><%= assigns[:value] || render_slot(@inner_block) %></.ui_dd>
diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
index a510bfd..fd528b4 100644
--- a/test/bitstyles_phoenix/bitstyles_test.exs
+++ b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -37,7 +37,6 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "5.0.0") == "u-margin-neg-3xl-bottom"
       assert classname("u-list-none", "5.0.0") == "u-list-none"
       assert classname("a-badge--text", "5.0.0") == "a-badge--text"
-      assert classname("u-gap-l", "5.0.0") == "u-gap-l"
       assert classname("u-fg-text", "5.0.0") == "u-fg-text"
       assert classname("u-fg-text-darker", "5.0.0") == "u-fg-text-darker"
       assert classname("u-bg-gray-darker", "5.0.0") == "u-bg-gray-darker"
@@ -72,7 +71,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-margin-neg-3xl-bottom", "4.3.0") == "u-margin-neg-xxxl-bottom"
       assert classname("u-list-none", "4.3.0") == "a-list-reset"
       assert classname("a-badge--text", "4.3.0") == "a-badge--gray"
-      assert classname("u-gap-l", "4.3.0") == "u-gap-m"
+      assert classname("u-gap-l", "4.3.0") == "u-gap-l"
       assert classname("u-fg-text", "4.3.0") == "u-fg-gray-30"
       assert classname("u-fg-text-darker", "4.3.0") == "u-fg-gray-50"
       assert classname("u-bg-gray-darker", "4.3.0") == "u-bg-gray-80"