Transform list reset class

bitcrowd · Apr 19, 2024 · f721cd2 · f721cd2
1 parent 05e60fd
commit f721cd2
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 34 deletions.
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -31,12 +31,18 @@ defmodule BitstylesPhoenix.Bitstyles do
       "3xl" => "xxxl"
     }
 
-    mapping =
+    class =
       Enum.reduce(sizes_renaming, class, fn {new_size, old_size}, acc ->
         String.replace(acc, "-#{new_size}", "-#{old_size}")
       end)
 
-    classname(mapping, "5.0.0")
+    class =
+      case class do
+        "u-list-none" -> "a-list-reset"
+        class -> class
+      end
+
+    classname(class, "5.0.0")
   end
 
   def classname(class, version) when version >= "4.0.0" do

diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -40,35 +40,66 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
         ...> </.ui_breadcrumbs>
         ...> """
     ''',
-    '''
-        """
-        <nav aria-label="breadcrumbs">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-            <li class="u-margin-xs-right u-flex u-items-center">
-              Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
-                <use xlink:href="#icon-caret-right">
-                </use>
-              </svg>
-            </li>
-          </ol>
-        </nav>
-        """
-    ''',
+    [
+      "5.0.1": '''
+          """
+          <nav aria-label="breadcrumbs">
+            <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Foo
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Bar
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Baz
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+            </ol>
+          </nav>
+          """
+      ''',
+      "4.3.0": '''
+          """
+          <nav aria-label="breadcrumbs">
+            <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Foo
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Bar
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+              <li class="u-margin-xs-right u-flex u-items-center">
+                Baz
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                  <use xlink:href="#icon-caret-right">
+                  </use>
+                </svg>
+              </li>
+            </ol>
+          </nav>
+          """
+      '''
+    ],
     extra_html: """
     <svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
       <symbol id="icon-caret-right" viewBox="0 0 100 100">
@@ -89,7 +120,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
     '''
         """
         <nav aria-label="breadcrumbs">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
+          <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
               <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
@@ -139,7 +170,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
     '''
         """
         <nav aria-label="breadcrumbs" data-foo="bar">
-          <ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center u-fg-warning">
+          <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
               <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
@@ -181,7 +212,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
 
     ~H"""
       <nav aria-label="breadcrumbs" {@extra}>
-        <ol class={classnames(["u-h6 a-list-reset u-flex u-flex-wrap u-items-center", assigns[:class]])}>
+        <ol class={classnames(["u-h6 u-list-none u-flex u-flex-wrap u-items-center", assigns[:class]])}>
           <%= for item <- (assigns[:item] || assigns[:items]) do %>
             <li
               class={classnames(["u-margin-xs-right u-flex u-items-center", assigns[:item] && item[:class]])}

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -35,6 +35,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-padding-3xl\@l", "5.0.0") == "u-padding-3xl\@l"
       assert classname("u-margin-3xl-bottom", "5.0.0") == "u-margin-3xl-bottom"
       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"
     end
 
     test "version 4.3.0" do
@@ -61,6 +62,7 @@ defmodule BitstylesPhoenix.BitstylesTest do
       assert classname("u-padding-3xl\@l", "4.3.0") == "u-padding-xxxl\@l"
       assert classname("u-margin-3xl-bottom", "4.3.0") == "u-margin-xxxl-bottom"
       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"
     end
 
     test "version 4.2.0" do