From 16039c83738e0ee3c8fb078352ac6c52aea20ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Tue, 31 Dec 2024 11:10:31 +0100
Subject: [PATCH] fixup! Feat(web): Introduce Box component #DS-1595

---
 .../web/src/scss/components/Box/README.md     |  2 +-
 .../web/src/scss/components/Box/index.html    | 24 +++++++++----------
 .../web/src/scss/settings/_utilities.scss     | 10 ++++++++
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/scss/components/Box/README.md b/packages/web/src/scss/components/Box/README.md
index 4b2410f575..af1b295e77 100644
--- a/packages/web/src/scss/components/Box/README.md
+++ b/packages/web/src/scss/components/Box/README.md
@@ -11,7 +11,7 @@ The Box component is a simple container around content or other components.
 You can define border width, color using utility classes `border-<width>`, `border-<color>`, and radius using utility class `rounded-<radius>`.
 
 ```html
-<div class="border-basic border-100 rounded-200" style="border-style: solid;">Without radius</div>
+<div class="border-basic border-100 rounded-200 border-solid">Without radius</div>
 ```
 
 ## Padding
diff --git a/packages/web/src/scss/components/Box/index.html b/packages/web/src/scss/components/Box/index.html
index fd7a940455..25991149a7 100644
--- a/packages/web/src/scss/components/Box/index.html
+++ b/packages/web/src/scss/components/Box/index.html
@@ -19,10 +19,10 @@ <h2 class="docs-Heading">With Custom Padding</h2>
       <fieldset class="mb-0 border-0 mb-500">
         <legend>For demo purposes the box is bordered</legend>
       </fieldset>
-      <div class="border-basic border-100 p-800" style="border-style: solid;">With custom padding</div>
-      <div class="border-basic border-100 px-800 py-400" style="border-style: solid;">With custom vertical and horizontal padding</div>
-      <div class="border-basic border-100 pt-200 pb-800 pl-600 pr-1200" style="border-style: solid;">With custom padding for each direction</div>
-      <div class="border-basic border-100 px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600" style="border-style: solid;">With responsive padding</div>
+      <div class="border-basic border-100 p-800 border-solid">With custom padding</div>
+      <div class="border-basic border-100 px-800 py-400 border-solid">With custom vertical and horizontal padding</div>
+      <div class="border-basic border-100 pt-200 pb-800 pl-600 pr-1200 border-solid">With custom padding for each direction</div>
+      <div class="border-basic border-100 px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600 border-solid">With responsive padding</div>
     </div>
   </div>
 </section>
@@ -35,11 +35,11 @@ <h2 class="docs-Heading">With Border</h2>
       <fieldset class="mb-0 border-0 mb-500">
         <legend>For demo purposes the box has custom padding</legend>
       </fieldset>
-      <div class="border-basic border-100 p-800" style="border-style: solid;">Without radius</div>
-      <div class="border-basic rounded-300 border-100 p-800" style="border-style: solid;">With custom radius</div>
-      <div class="border-basic rounded-full border-100 p-800" style="border-style: solid;">With full radius</div>
-      <div class="border-basic rounded-300 border-200 p-800" style="border-style: solid;">With thicker border</div>
-      <div class="border-focus rounded-300 border-100 p-800" style="border-style: solid;">With focus color</div>
+      <div class="border-basic border-100 p-800 border-solid">Without radius</div>
+      <div class="border-basic rounded-300 border-100 p-800 border-solid">With custom radius</div>
+      <div class="border-basic rounded-full border-100 p-800 border-solid">With full radius</div>
+      <div class="border-basic rounded-300 border-200 p-800 border-solid">With thicker border</div>
+      <div class="border-focus rounded-300 border-100 p-800 border-solid">With focus color</div>
     </div>
   </div>
 </section>
@@ -52,9 +52,9 @@ <h2 class="docs-Heading">With Background Color</h2>
       <fieldset class="mb-0 border-0 mb-500">
         <legend>For demo purposes the box is bordered</legend>
       </fieldset>
-      <div class="bg-primary border-basic border-100 p-800" style="border-style: solid;">Primary Background</div>
-      <div class="bg-secondary border-basic border-100 p-800" style="border-style: solid;">Secondary Background</div>
-      <div class="bg-tertiary border-basic border-100 p-800" style="border-style: solid;">Tertiary Background</div>
+      <div class="bg-primary border-basic border-100 p-800 border-solid">Primary Background</div>
+      <div class="bg-secondary border-basic border-100 p-800 border-solid">Secondary Background</div>
+      <div class="bg-tertiary border-basic border-100 p-800 border-solid">Tertiary Background</div>
     </div>
   </div>
 </section>
diff --git a/packages/web/src/scss/settings/_utilities.scss b/packages/web/src/scss/settings/_utilities.scss
index ac8afc9b04..0d384e755f 100644
--- a/packages/web/src/scss/settings/_utilities.scss
+++ b/packages/web/src/scss/settings/_utilities.scss
@@ -27,6 +27,16 @@ $utilities: (
         class: rounded,
         values: tokens.$radii,
     ),
+    'border-style': (
+        responsive: false,
+        property: border-style,
+        class: border,
+        values: (
+            solid: solid,
+            dashed: dashed,
+            dotted: dotted,
+        ),
+    ),
     'border-width': (
         responsive: false,
         property: border-width,