Fix border colors

bitcrowd · Jul 2, 2024 · 26f8313 · 26f8313
1 parent 71f0ecd
commit 26f8313
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
@@ -36,6 +36,16 @@ defmodule BitstylesPhoenix.Bitstyles do
         String.replace(acc, "-#{new_size}", "-#{old_size}")
       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"

diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
@@ -133,15 +133,15 @@ defmodule BitstylesPhoenix.Component.Heading do
     """
   end
 
-  @section_default_border_color "gray-10"
+  @section_default_border_color "gray-light"
 
   @doc ~s"""
   Render a section header with optional `action`s and `title_extra`.
 
   ## Attributes
   - `class` - Set CSS classes on the outer div.
   - `border` - Controls the bottom border and padding (default: true, boolean)
-  - `border_color` - The border color, defaults to `gray-10` resulting in `u-border-gray-10-bottom`.
+  - `border_color` - The border color, defaults to `gray-light` resulting in `u-border-gray-light-bottom`.
   - `tag` - the heading tag (defaults to h3)
   - `heading_class` - Extra classes on the heading
   - All other attributes are passed to the outer `div` tag.
@@ -168,7 +168,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-10-bottom">
+        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-light-bottom">
           <div class="u-flex u-items-center">
             <h3 class="u-margin-0 u-margin-m-right u-break-text">
               Section title
@@ -209,7 +209,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     '''
         iex> assigns = %{}
         ...> render ~H"""
-        ...> <.ui_section_title border_color="gray-70" heading_class="extra">
+        ...> <.ui_section_title border_color="gray-light" heading_class="extra">
         ...>   Section title
         ...>   <:title_extra>
         ...>     <.ui_badge>Published</.ui_badge>
@@ -228,7 +228,7 @@ defmodule BitstylesPhoenix.Component.Heading do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-70-bottom">
+        <div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-light-bottom">
           <div class="u-flex u-items-center">
             <h3 class="u-margin-0 u-margin-m-right u-break-text extra">
               Section title

diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -45,7 +45,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
             <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">
                 Large header
-                <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-bottom u-margin-xs-bottom">
+                <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-dark-bottom u-margin-xs-bottom">
                   Menu
                 </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">
@@ -60,7 +60,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </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-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -82,7 +82,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
               </div>
               <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text">
                 Small header
-                <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-bottom u-margin-xs-bottom">
+                <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-dark-bottom u-margin-xs-bottom">
                   Menu
                 </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">
@@ -97,7 +97,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                     </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-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-dark-top u-margin-xs-top">
                   <div class="u-relative">
                     <button type="button" class="a-button a-button--transparent">
                       <div class="a-button__icon a-avatar">
@@ -406,13 +406,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   - `class` - Extra classes to pass to the outer `div`
     See `BitstylesPhoenix.Helper.classnames/1` for usage.
   - `border` - Either `:top` or `:bottom` (optional)
-  - `border_color` - The border color, defaults to `gray-70` resulting in
-     `u-border-gray-70-top` for a `:top` border.
+  - `border_color` - The border color, defaults to `gray-dark` resulting in
+     `u-border-gray-dark-top` for a `:top` border.
   - All other attributes are passed on to the outer `div`
   """
 
   @sidebar_section_classes "u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col"
-  @sidebar_section_default_border_color "gray-70"
+  @sidebar_section_default_border_color "gray-dark"
   def ui_sidebar_section(assigns) do
     border_color = Map.get(assigns, :border_color, @sidebar_section_default_border_color)
     border = Map.get(assigns, :border)

diff --git a/test/bitstyles_phoenix/bitstyles_test.exs b/test/bitstyles_phoenix/bitstyles_test.exs
@@ -41,6 +41,9 @@ defmodule BitstylesPhoenix.BitstylesTest do
       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"
+      assert classname("u-border-gray-light", "5.0.0") == "u-border-gray-light"
+      assert classname("u-border-gray-light-bottom", "5.0.0") == "u-border-gray-light-bottom"
+      assert classname("u-border-gray-dark", "5.0.0") == "u-border-gray-dark"
     end
 
     test "version 4.3.0" do
@@ -73,6 +76,10 @@ defmodule BitstylesPhoenix.BitstylesTest do
       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"
+      # TODO: top bottom
+      assert classname("u-border-gray-light", "4.3.0") == "u-border-gray-10"
+      assert classname("u-border-gray-light-bottom", "4.3.0") == "u-border-gray-10-bottom"
+      assert classname("u-border-gray-dark", "4.3.0") == "u-border-gray-70"
     end
 
     test "version 4.2.0" do