From 3fc0a9ba250818e5c83004e819441fd1f337b27a Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Thu, 28 Nov 2024 08:44:57 +0100
Subject: [PATCH] feat: add utility classes for margin left and right

---
 src/global-css/margins.css  | 88 ++++++++++++++++++++++++++++++-------
 stories/UtilitiyClasses.mdx | 12 ++++-
 2 files changed, 83 insertions(+), 17 deletions(-)

diff --git a/src/global-css/margins.css b/src/global-css/margins.css
index b944bc9..66d3e1b 100644
--- a/src/global-css/margins.css
+++ b/src/global-css/margins.css
@@ -1,3 +1,61 @@
+/* Margin top */
+.cx-mt-05 {
+  margin-top: var(--cx-spacing-05) !important;
+}
+
+.cx-mt-1 {
+  margin-top: var(--cx-spacing-1) !important;
+}
+
+.cx-mt-2 {
+  margin-top: var(--cx-spacing-2) !important;
+}
+
+.cx-mt-3 {
+  margin-top: var(--cx-spacing-3) !important;
+}
+
+.cx-mt-4 {
+  margin-top: var(--cx-spacing-4) !important;
+}
+
+.cx-mt-5 {
+  margin-top: var(--cx-spacing-5) !important;
+}
+
+.cx-mt-6 {
+  margin-top: var(--cx-spacing-6) !important;
+}
+
+/* Margin right */
+.cx-mr-05 {
+  margin-right: var(--cx-spacing-05) !important;
+}
+
+.cx-mr-1 {
+  margin-right: var(--cx-spacing-1) !important;
+}
+
+.cx-mr-2 {
+  margin-right: var(--cx-spacing-2) !important;
+}
+
+.cx-mr-3 {
+  margin-right: var(--cx-spacing-3) !important;
+}
+
+.cx-mr-4 {
+  margin-right: var(--cx-spacing-4) !important;
+}
+
+.cx-mr-5 {
+  margin-right: var(--cx-spacing-5) !important;
+}
+
+.cx-mr-6 {
+  margin-right: var(--cx-spacing-6) !important;
+}
+
 /* Margin bottom */
 .cx-mb-05 {
   margin-bottom: var(--cx-spacing-05) !important;
@@ -27,33 +85,33 @@
   margin-bottom: var(--cx-spacing-6) !important;
 }
 
-/* Margin top */
-.cx-mt-05 {
-  margin-top: var(--cx-spacing-05) !important;
+/* Margin left */
+.cx-ml-05 {
+  margin-left: var(--cx-spacing-05) !important;
 }
 
-.cx-mt-1 {
-  margin-top: var(--cx-spacing-1) !important;
+.cx-ml-1 {
+  margin-left: var(--cx-spacing-1) !important;
 }
 
-.cx-mt-2 {
-  margin-top: var(--cx-spacing-2) !important;
+.cx-ml-2 {
+  margin-left: var(--cx-spacing-2) !important;
 }
 
-.cx-mt-3 {
-  margin-top: var(--cx-spacing-3) !important;
+.cx-ml-3 {
+  margin-left: var(--cx-spacing-3) !important;
 }
 
-.cx-mt-4 {
-  margin-top: var(--cx-spacing-4) !important;
+.cx-ml-4 {
+  margin-left: var(--cx-spacing-4) !important;
 }
 
-.cx-mt-5 {
-  margin-top: var(--cx-spacing-5) !important;
+.cx-ml-5 {
+  margin-left: var(--cx-spacing-5) !important;
 }
 
-.cx-mt-6 {
-  margin-top: var(--cx-spacing-6) !important;
+.cx-ml-6 {
+  margin-left: var(--cx-spacing-6) !important;
 }
 
 /* Gap */
diff --git a/stories/UtilitiyClasses.mdx b/stories/UtilitiyClasses.mdx
index 9327a05..50051d6 100644
--- a/stories/UtilitiyClasses.mdx
+++ b/stories/UtilitiyClasses.mdx
@@ -52,13 +52,21 @@ is called `05`. All CSS classes and CSS variables that has to do with spacing us
   </thead>
 
   <tbody>
+    <tr>
+      <td>`.cx-mt-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin top, using the spacing units mentioned above.</td>
+    </tr>
+    <tr>
+      <td>`.cx-mr-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin right, using the spacing units mentioned above.</td>
+    </tr>
     <tr>
       <td>`.cx-mb-<05|1|2|3|4|5|6>`</td>
       <td>Applies margin bottom, using the spacing units mentioned above.</td>
     </tr>
     <tr>
-      <td>`.cx-mt-<05|1|2|3|4|5|6>`</td>
-      <td>Applies margin top, using the spacing units mentioned above.</td>
+      <td>`.cx-ml-<05|1|2|3|4|5|6>`</td>
+      <td>Applies margin left, using the spacing units mentioned above.</td>
     </tr>
     <tr>
       <td>`.cx-gap-<05|1|2|3|4|5|6>`</td>