fixup! Feat(web): Introduce Box component #DS-1595

lmc-eu · Dec 31, 2024 · 16039c8 · 16039c8
1 parent bf6d048
commit 16039c8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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,