feat: adjustments

DevoInc · Oct 16, 2024 · 1fad3f8 · 1fad3f8
1 parent a883309
commit 1fad3f8
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 96 deletions.
diff --git a/pages/components/Banner/Banner.mdx b/pages/components/Banner/Banner.mdx
@@ -37,7 +37,9 @@ It can be:
     src="img/location-banner-075x.jpg"
   />
 </Figure>
+
 - Global and placed at the top of the page.
+
 <Figure>
   <img
     alt="Location of the 'status' icon button in a widget header"

diff --git a/pages/foundations/BorderRadiuses.mdx b/pages/foundations/BorderRadiuses.mdx
@@ -11,84 +11,79 @@ import {
 <Meta title="Foundations/Border radiuses" />
 
 # Border radiuses
+
 Rounded corners are used throughout the platform to differentiate the different families of UI components based on their anatomy, level of interaction, etc.
- <Figure>
+
+<Figure>
   <img
     alt="Location of the 'status' icon button in a widget header"
     src="img/border-radiuses-15x.png"
   />
 </Figure>
+
 In addition, through the different radius values we can provide the user with a way to recognize components through the shapes, surfaces, and identify the available interactions before they occur, improving the affordance of the platform.
 
 ## Radius types
+
 ### Small (2px)
+
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-It’s used in non-interactive components that have a background or border in their anatomy, such as **Tags**.
+    It’s used in non-interactive components that have a background or border in
+    their anatomy, such as **Tags**.
   </div>
   <div className="col">
-  <Figure>
-  <img
-    alt="border-radious-small"
-    src="img/small-15x.png"
-  />
-</Figure>
+    <Figure>
+      <img alt="border-radious-small" src="img/small-15x.png" />
+    </Figure>
   </div>
 </section>
 
 ### Medium (4px)
+
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-The standard border radius size. Used for **Buttons, Inputs, Actions**, and most of the interactive UI elements.
+    The standard border radius size. Used for **Buttons, Inputs, Actions**, and
+    most of the interactive UI elements.
   </div>
   <div className="col">
-  <Figure>
-  <img
-    alt="border-radious-small"
-    src="img/medium-15x.png"
-  />
-</Figure>
+    <Figure>
+      <img alt="border-radious-small" src="img/medium-15x.png" />
+    </Figure>
   </div>
 </section>
 ### Large (6px)
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-Used when a UI element is a surface or needs to float above the underlying UI. 
+    Used when a UI element is a surface or needs to float above the underlying
+    UI.
   </div>
   <div className="col">
-  <Figure>
-  <img
-    alt="border-radious-small"
-    src="img/large-15x.png"
-  />
-</Figure>
+    <Figure>
+      <img alt="border-radious-small" src="img/large-15x.png" />
+    </Figure>
   </div>
 </section>
 ### Pill (9999px - model)
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-Used to round off the smaller edge to a half circle, creating a pill-like shape. Used at **Chips** and **Badges**.
+    Used to round off the smaller edge to a half circle, creating a pill-like
+    shape. Used at **Chips** and **Badges**.
   </div>
   <div className="col">
-  <Figure>
-  <img
-    alt="border-radious-small"
-    src="img/pill-15x.png"
-  />
-</Figure>
+    <Figure>
+      <img alt="border-radious-small" src="img/pill-15x.png" />
+    </Figure>
   </div>
 </section>
 ### Full (50%)
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-It’s used to generate a circle, usually as the background of an icon.
+    It’s used to generate a circle, usually as the background of an icon.
   </div>
   <div className="col">
-  <Figure>
-  <img
-    alt="border-radious-small"
-    src="img/full-15x.png"
-  />
-</Figure>
+    <Figure>
+      <img alt="border-radious-small" src="img/full-15x.png" />
+    </Figure>
   </div>
 </section>
diff --git a/pages/patterns/FormLayout.mdx b/pages/patterns/FormLayout.mdx
@@ -1,12 +1,12 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 
-import {   
+import {
   CardHtml,
   CardReact,
   DesignTokensList,
   Figma,
   Figure,
-   } from '../../blocks';
+} from '../../blocks';
 
 <Meta title="Patterns/Form layout" />
 
@@ -16,15 +16,16 @@ The definition of spacing and sizing patterns to distribute and group form field
 
 <section className="mrow">
   <div className="mcol-12 mcol-sm-6">
-    How the form fields are grouped and distributed is especially important for users to
-understand the relations and dependencies between those fields. In addition, the size
-of each form control helps users to realize the nature and length of the expected data.
+    How the form fields are grouped and distributed is especially important for
+    users to understand the relations and dependencies between those fields. In
+    addition, the size of each form control helps users to realize the nature
+    and length of the expected data.
   </div>
-    <div className="mcol-12 mcol-sm-6">
+  <div className="mcol-12 mcol-sm-6">
     <Figure>
       <img
         alt="Location of the 'status' icon button in a widget header"
-        src="img/illustration-1.png"
+        src="img/Illustration-1.png"
       />
     </Figure>
   </div>
@@ -36,25 +37,19 @@ The way the form fields will be distributed will be by default in one column, pl
 
 <section className="row gy-4 row-cols-1 row-cols-sm-2 margin-top--lg">
   <div className="col">
-    <Figure
-      type="dont"
-      caption=""
-    >
-     <img
-      src="img/Distribution-Dont-15x.png"
-      alt="Incorrect use of horizontal distribution"
-    />
+    <Figure type="dont" caption="">
+      <img
+        src="img/Distribution-Dont-15x.png"
+        alt="Incorrect use of horizontal distribution"
+      />
     </Figure>
   </div>
   <div className="col">
-    <Figure
-      type="do"
-      caption=""
-    >
-     <img
-      src="img/Distribution-do-15x.png"
-      alt="Correct use of vertical distribution"
-    />
+    <Figure type="do" caption="">
+      <img
+        src="img/Distribution-do-15x.png"
+        alt="Correct use of vertical distribution"
+      />
     </Figure>
   </div>
 </section>
@@ -112,21 +107,18 @@ separation, although it is slightly higher than the one that the label would hav
       caption="Don't use boxes with background color to group fields."
       type="dont"
     >
-    <img
-    src="img/groups-dont-15x.jpg"
-    alt="Form groups with only one field"
-  />
+      <img
+        src="img/groups-dont-15x.jpg"
+        alt="Form groups with only one field"
+      />
     </Figure>
   </div>
   <div className="col">
     <Figure
       caption="Use always a box to group fields, not only a form group heading (except when there is only one field in the group):."
       type="dont"
     >
-         <img
-    src="img/Group-dont-3.jpg"
-    alt="Form groups with only one field"
-  />
+      <img src="img/Group-dont-3.jpg" alt="Form groups with only one field" />
     </Figure>
   </div>
 </section>
@@ -177,41 +169,31 @@ of the relation between the elements and the type of distribution applied to the
 
 ### Space between fields
 
-The space between fields will be in almost any case ‘cmp-md’ (16px or 1.6rem). 
+The space between fields will be in almost any case ‘cmp-md’ (16px or 1.6rem).
 
 <Figure caption="Use of sub-groups instead another form groups.">
   <img
-  src="img/Spacing-spaces-between-fields-15x.png"
-  alt="Spacing between fields"
-/>
+    src="img/Spacing-spaces-between-fields-15x.png"
+    alt="Spacing between fields"
+  />
 </Figure>
 
 But when we are working with an horizontal distribution and the relation between the fields is very strong we can use ‘cmp-sm’ (12px ).
 
 <Figure>
-<img
-  src="img/Spacing-spaces-between-fields-2-15x.jpg"
-  alt="Spacing between fields"
-/>
+  <img
+    src="img/Spacing-spaces-between-fields-2-15x.jpg"
+    alt="Spacing between fields"
+  />
 </Figure>
 Don’t use arbitrary spaces to separate the fields.
-<Figure
-      type="dont"
-    >
-    <img
-    src="img/spacing-1-15x.png"
-    alt="Form groups with only one field"
-  />
-    </Figure>
-    Don’t use more space to separate fields than to separate groups:
-     <Figure
-      type="dont"
-    >
-         <img
-    src="img/spacing-2-15x.jpg"
-    alt="Form groups with only one field"
-  />
-    </Figure>
+<Figure type="dont">
+  <img src="img/spacing-1-15x.png" alt="Form groups with only one field" />
+</Figure>
+Don’t use more space to separate fields than to separate groups:
+<Figure type="dont">
+  <img src="img/spacing-2-15x.jpg" alt="Form groups with only one field" />
+</Figure>
 
 ### Spacing with groups
 
@@ -220,9 +202,10 @@ We’re talking about the space between groups (nested or not) and between field
 groups. The spacing between the form and the buttons block is the same.
 
 The spacing between the form group heading and the group (or the field) is always ‘cmp-xs’ (8px).
+
 <Figure>
-<img
-  src="img/Spacing-with-groups-15x.jpg"
-  alt="Spacing between groups and other blocks"
-/>
+  <img
+    src="img/Spacing-with-groups-15x.jpg"
+    alt="Spacing between groups and other blocks"
+  />
 </Figure>