Deploying to gh-pages from @ a28b9d2 🚀

assets/border-radius.stories-7b4d1b30.js → assets/border-radius.stories-3e1c355d.js

@@ -1,4 +1,33 @@
-const t={title:"Border Radius",parameters:{description:`
+const a=`<style>
+    div.demo {
+        display: flex;
+        height: 4rem;
+        width: 8rem;
+        background: #69ADF8;
+    }
+</style>
+
+<h3>Element</h3>
+<div class="demo sap-border-radius-element"></div>
+<br>
+<h3>Button</h3>
+<div class="demo sap-border-radius-button"></div>
+<br>
+<h3>Field</h3>
+<div class="demo sap-border-radius-field"></div>
+<br>
+<h3>Group</h3>
+<div class="demo sap-border-radius-group"></div>
+<br>
+<h3>Popover</h3>
+<div class="demo sap-border-radius-popover"></div>
+<br>
+<h3>Tile</h3>
+<div class="demo sap-border-radius-tile"></div>
+<br>
+<h3>None</h3>
+<div class="demo sap-border-radius-none"></div>
+`,s={title:"Border Radius",parameters:{description:`
 <table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
     <thead>
         <tr>
@@ -54,55 +83,4 @@ Example: <br>
 <code>@include sap-border-radius(1rem 0.5rem)</code><br>
 <code>@include sap-border-radius(1rem 0.5rem 0.25rem)</code><br>
 <code>@include sap-border-radius(1rem 0.5rem 0.25rem 0.25rem)</code><br>
-      `}},a=`
-<style>
-    div.demo {
-        display: flex;
-        height: 4rem;
-        width: 8rem;
-        background: #69ADF8;
-    }
-</style>
-`,r=()=>`${a}
-<h3>Element</h3>
-<div class="demo sap-border-radius-element"></div>
-<br>
-<h3>Button</h3>
-<div class="demo sap-border-radius-button"></div>
-<br>
-<h3>Field</h3>
-<div class="demo sap-border-radius-field"></div>
-<br>
-<h3>Group</h3>
-<div class="demo sap-border-radius-group"></div>
-<br>
-<h3>Popover</h3>
-<div class="demo sap-border-radius-popover"></div>
-<br>
-<h3>Tile</h3>
-<div class="demo sap-border-radius-tile"></div>
-<br>
-<h3>None</h3>
-<div class="demo sap-border-radius-none"></div>
-`;r.storyName="Border Radius Types";var d,e,s;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`() => \`\${localStyles}
-<h3>Element</h3>
-<div class="demo sap-border-radius-element"></div>
-<br>
-<h3>Button</h3>
-<div class="demo sap-border-radius-button"></div>
-<br>
-<h3>Field</h3>
-<div class="demo sap-border-radius-field"></div>
-<br>
-<h3>Group</h3>
-<div class="demo sap-border-radius-group"></div>
-<br>
-<h3>Popover</h3>
-<div class="demo sap-border-radius-popover"></div>
-<br>
-<h3>Tile</h3>
-<div class="demo sap-border-radius-tile"></div>
-<br>
-<h3>None</h3>
-<div class="demo sap-border-radius-none"></div>
-\``,...(s=(e=r.parameters)==null?void 0:e.docs)==null?void 0:s.source}}};const i=["BorderRadius"];export{r as BorderRadius,i as __namedExportsOrder,t as default};
+      `}},r=()=>a;r.storyName="Border Radius Types";var d,e,t;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:"() => borderRadiusExampleHtml",...(t=(e=r.parameters)==null?void 0:e.docs)==null?void 0:t.source}}};const i=["BorderRadius"];export{r as BorderRadius,i as __namedExportsOrder,s as default};

assets/border.stories-c6ac4612.js

@@ -0,0 +1,32 @@
+const n=`<div>
+1. All
+
+<pre>@include sap-border(0.125rem, solid, #000);</pre>
+<br>
+
+2. Top Border
+<pre>@include sap-border(0.125rem, solid, #000, top);</pre>
+<br>
+
+3. Bottom Border
+<pre>@include sap-border(0.125rem, solid, #000, bottom);</pre>
+<br>
+
+4. Left Border
+<pre>@include sap-border(0.125rem, solid, #000, left);</pre>
+<br>
+
+6. Right Border
+<pre>@include sap-border(0.125rem, solid, #000, right);</pre>
+<br>
+
+7. Top and Bottom Border (y)
+<pre>@include sap-border(0.125rem, solid, #000, y);</pre>
+<br>
+
+8. Left and Right Border (x)
+<pre>@include sap-border(0.125rem, solid, #000, x);</pre>
+<br>
+
+</div>`,t={title:"Border",parameters:{description:`
+      `}},e=()=>n;e.storyName="Mixin sap-border";e.parameters={docs:{description:{story:"The <code>sap-border</code> helper mixin allows you to specify the width, style, and color of an element's border. This is achieved by providing values to the <code>sap-border</code> parameters: <code>$width</code>, <code>$style</code>, <code>$color</code>, and <code>$pos</code>.<br><br> The <code>$pos</code> value can be one of the following: <code>all | top | bottom | left | right | x | y</code>. The default value is <code>all</code>, which will apply borders on all sides. <code>x</code> will set borders on left and right of the element, and <code>y</code> on top and bottom of the element."}}};var r,o,d;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:"() => borderExampleHtml",...(d=(o=e.parameters)==null?void 0:o.docs)==null?void 0:d.source}}};const s=["Border"];export{e as Border,s as __namedExportsOrder,t as default};