npm - @salla.sa/twilight-components - Versions diffs - 1.0.57 → 1.0.60 - Mend

@salla.sa/twilight-components 1.0.57 → 1.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (161) hide show

package/example/index.html CHANGED Viewed

@@ -1,25 +1,26 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
 <head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Salla Web Component Starter</title>
+  <script src="//unpkg.com/alpinejs" defer></script>
   <script src="dist/translations.js"></script>
   <script src="dist/twilight.js"></script>
   <script>
     let url = window.location.href.split('/').slice(0, -1).join('/') + '/';
-    salla.init({debug: true, store: {api: url}});
+    salla.init({ debug: true, store: { api: url } });
   </script>
-  <script type="module" src="dist/twilight-components/twilight-components.esm.js"></script>
-  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css"
-        rel="stylesheet">
+  <script type="module" src="./../dist/twilight-components/twilight-components.esm.js"></script>
+  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css" rel="stylesheet">
   <link href="dist/tailwind.css" type="text/css" rel="stylesheet">
-  <link href="dist/intlTelInput.min.css" type="text/css" rel="stylesheet">
   <style>
     :root {
       --font-main: 'DINNextLTArabic-Regular';
       --color-main: #5cd5c4;
+      --color-main-d: #41b9a9;
       --color-main-reverse: #fff;
     }
@@ -31,7 +32,8 @@
       background-image: url("dist/flags.png");
     }
-    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @media (-webkit-min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi) {
       .iti__flag {
         background-image: url("dist/flags@2x.png");
       }
@@ -39,139 +41,693 @@
   </style>
 </head>
-<body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50">
-<div id="top-nav" class="py-2 lg:py-0">
-  <div class="container text-center py-4 text-gray-500 font-bold">
-    Twilight Components
-  </div>
-</div>
+<body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50" x-data="{text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quae reiciendis dolorem fugiat mollitia animi laudantium voluptates nulla consequatur ea eveniet aut dolores facilis doloremque neque, similique dignissimos esse possimus!'}">
-<header class="shadow-default bg-white">
-  <div class="container flex items-stretch justify-between relative">
-    <a class="items-center flex my-2">
-      <img src="https://assets.salla.sa/cp/assets/images/logo-new.png" class="max-h-14"/>
-    </a>
-  </div>
-</header>
-<div class="container py-10 grid-cols-2 grid gap-4">
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Button</h1>
-    <p class="my-4">Description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
-    <div class="flex flex-wrap my-2 gap-4	">
-      <salla-button>Primary</salla-button>
-      <salla-button btn-style="outline">outline</salla-button>
-      <salla-button btn-style="outline-primary">outline-primary</salla-button>
-      <salla-button btn-style="danger">danger</salla-button>
-    </div>
-    <div class="flex flex-wrap my-2 gap-4">
-      <salla-button loading>Loading</salla-button>
-      <salla-button loading loader-position="start" btn-style="outline">start</salla-button>
-      <salla-button loading loader-position="before" btn-style="outline-primary">before</salla-button>
-      <salla-button loading loader-position="center" btn-style="primary">center</salla-button>
-      <salla-button loading loader-position="end">end</salla-button>
+  <!-- Header -->
+  <header class="flex-none relative z-50 text-sm leading-6 font-medium  bg-white">
+    <nav aria-label="Global" class="container mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center  border-b border-gray-100 py-5">
+        <a href="#" class="flex-none text-gray-900">
+          <span class="sr-only">Twilight Components</span>
+          <img src="https://assets.salla.sa/cp/assets/images/logo-new.png" class="max-h-14" />
+        </a>
+        <p class="hidden lg:block text-sm ml-6 border-l border-gray-200 pl-6">
+          <a href="#" target="_blank"
+            class="relative flex items-center transition-colors text-gray-500 hover:text-primary">
+            <i class="sicon-layout-grid mr-2 text-gray-400"></i>
+            Twilight Components
+            <svg aria-hidden="true" width="11" height="11" fill="currentColor" class="ml-1.5">
+              <path d="M5.593 10.139L10.232 5.5 5.593.862l-.895.89 3.107 3.102H0v1.292h7.805L4.698 9.254l.895.885z">
+              </path>
+            </svg>
+          </a>
+        </p>
+        <div class="ml-auto flex items-center">
+          <a href="#" class="hidden sm:block ml-6 mr-2 hover:text-gray-900">Documentation</a>
+          <div x-data="{ open: false }"
+            x-init="window.addEventListener('focus', event => { if (open &amp;&amp; !$el.contains(event.target)) open = false }, true)"
+            @click.away="open = false" @keydown.escape="open = false;$refs.toggle.focus()"
+            class="relative sm:border-l -mr-1.5 sm:ml-2 sm:mr-0 sm:pl-6 border-gray-200">
+            <button type="button" x-ref="toggle" @click="open = !open" :aria-expanded="open"
+              class="font-medium flex items-center">
+              <span class="hidden sm:flex items-center">
+                Components
+                <svg aria-hidden="true" width="8" height="6" fill="none" class="ml-2.5 text-gray-400">
+                  <path d="M7 1.5l-3 3-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round"></path>
+                </svg>
+              </span>
+              <span class="flex sm:hidden -my-1 w-8 h-8 rounded-lg items-center justify-center">
+                <svg aria-hidden="true" width="20" height="20" fill="none" class="text-gray-900">
+                  <path d="M3.75 4.75h12.5M3.75 9.75h12.5M3.75 14.75h12.5" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+              </span>
+            </button>
+            <div x-show="open"
+              class="absolute top-full right-0 w-60 mt-3 -mr-0.5 sm:-mr-3.5 bg-white rounded-lg shadow-md ring-1 ring-gray-900 ring-opacity-5 font-normal text-sm text-gray-900 divide-y divide-gray-100"
+              style="display: none;">
+              <p class="py-3 px-3.5 truncate">
+                <span class="block mb-0.5 text-xs text-gray-500">Hi there</span>
+                <span class="">Quick access to</span>
+              </p>
+              <div class="py-1.5 px-3.5">
+                <a href="#" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <path d="M5.75 17.25h8.5a2 2 0 002-2V7L12 2.75H5.75a2 2 0 00-2 2v10.5a2 2 0 002 2z"></path>
+                    <path d="M11.75 3v4.25H16M6.75 10.75h6.5M6.75 13.75h6.5"></path>
+                  </svg>
+                  Documentation
+                </a>
+                <a href="#buttons-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <rect x="7.75" y="2.75" width="4.5" height="4.5" rx="2.25"></rect>
+                    <rect x="7.75" y="12.75" width="4.5" height="4.5" rx="2.25"></rect>
+                    <path d="M10 7.5v5"></path>
+                  </svg>
+                  Buttons
+                </a>
+                <a href="#branches-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <rect x="2.75" y="2.75" width="14.5" height="14.5" rx="7.25"></rect>
+                    <rect x="6.75" y="6.75" width="6.5" height="6.5" rx="3.25"></rect>
+                    <path d="M5 15l2.5-2.5M15 5l-2.5 2.5M15 15l-2.5-2.5M5 5l2.5 2.5"></path>
+                  </svg>
+                  Branches
+                </a>
+                <a href="#infinite-scroll-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Infinitie Scroll
+                </a>
+                <a href="#localization-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Localization Modal
+                </a>
+                <a href="#login-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Login Modal
+                </a>
+                <a href="#offers-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Offers Modal
+                </a>
+                <a href="#product-visibility-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Product Visibility Modal
+                </a>
+                <a href="#rating-seciton" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Rating Modal
+                </a>
+                <a href="#search-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Search
+                </a>
+                <a href="#tel-input-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Tel Input
+                </a>
+                <a href="#verify-section" class="group flex items-center py-1.5 hover:text-teal-600">
+                  <svg aria-hidden="true" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"
+                    class="flex-none mr-3 text-gray-400 group-hover:text-teal-600">
+                    <circle cx="10" cy="8" r="5.25"></circle>
+                    <path d="M13 12.5l1.25 4.75-4.25-1.5-4.25 1.5L7 12.5"></path>
+                  </svg>
+                  Verify Modal
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <!-- Components -->
+  <div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24">
+    <div class="pb-12">
+      <h2 id="buttons-section-heading" class="text-3xl font-extrabold text-gray-900">Salla Twilight Components</h2>
+      <p class="text-sm text-gray-500 mt-2">Buttons, popup modals, infinit scroll, branches, localization, login,
+        offers, rating and much more -- everything you need to build beautiful E-commerce theme.</p>
     </div>
-    <div class="flex flex-wrap gap-4">
-      <salla-button wide>Wide</salla-button>
-      <salla-button wide disabled>Wide Disabled</salla-button>
+    <div class="space-y-16">
+      <!-- Login Modal -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+        </div>
+        <!-- Default -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Login Modal</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button data-on-click="login::show">Login Component</salla-button>
+            <salla-login-modal is-email-allowed is-mobile-allowed is-email-required></salla-login-modal>
+          </div>
+        </div>
+      </section>
+      <!-- Buttons Section -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
+        </div>
+        <!-- Default -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Default</h3>
+            <p class="text-sm text-gray-500 mt-2">Without any props</p>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button>Primary</salla-button>
+              <salla-button color="success">success</salla-button>
+              <salla-button color="danger">danger</salla-button>
+              <salla-button color="warning">warning</salla-button>
+              <salla-button color="light">light</salla-button>
+              <salla-button color="gray">gray</salla-button>
+              <salla-button color="dark">dark</salla-button>
+          </div>
+        </div>
+        <!-- Outine -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Outline</h3>
+            <p class="text-sm text-gray-500 mt-2">
+              <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
+            </p>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button fill="outline">Primary</salla-button>
+              <salla-button fill="outline" color="success">success</salla-button>
+              <salla-button fill="outline" color="danger">danger</salla-button>
+              <salla-button fill="outline" color="warning">warning</salla-button>
+              <salla-button fill="outline" color="light">light</salla-button>
+              <salla-button fill="outline" color="gray">gray</salla-button>
+              <salla-button fill="outline" color="dark">dark</salla-button>
+          </div>
+        </div>
+        <!-- Loading -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Loading</h3>
+          </div>
+          <div class="col-span-3 space-y-4">
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button loading>Primary</salla-button>
+              <salla-button color="success" loading>success</salla-button>
+              <salla-button color="danger" loading>danger</salla-button>
+              <salla-button color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button color="light" fill="outline" loading>light</salla-button>
+              <salla-button color="gray" fill="outline" loading>gray</salla-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button shape="icon" loading>Primary</salla-button>
+              <salla-button shape="icon" color="success" loading>success</salla-button>
+              <salla-button shape="icon" color="danger" loading>danger</salla-button>
+              <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
+              <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button shape="icon" size="small" loading>Primary</salla-button>
+              <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
+              <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
+              <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
+              <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
+              <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
+            </div>
+          </div>
+        </div>
+        <!-- Size -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Size</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button size="large">Large</salla-button>
+            <salla-button >Default</salla-button>
+            <salla-button size="small">Small</salla-button>
+            <salla-button size="large" fill="outline">Large</salla-button>
+            <salla-button fill="outline">Default</salla-button>
+            <salla-button size="small" fill="outline">Small</salla-button>
+          </div>
+        </div>
+        <!-- Wide -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
+          </div>
+        </div>
+        <!-- Disabled -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Disabled</h3>
+          </div>
+          <div class="col-span-3 space-y-4">
+              <div class="flex flex-wrap items-center gap-2">
+                <salla-button disabled>Disabled</salla-button>
+                <salla-button disabled color="danger">Disabled</salla-button>
+                <salla-button disabled color="warning">Disabled</salla-button>
+                <salla-button fill="outline" disabled>Disabled</salla-button>
+                <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
+                <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
+              </div>
+              <div class="flex flex-wrap items-center gap-2">
+                <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
+                <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
+              </div>
+          </div>
+        </div>
+        <!-- Link -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Button as link</h3>
+            <p class="text-sm text-gray-500 mt-2">
+              <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
+            </p>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button shape="link">Primary Link</salla-button>
+              <salla-button shape="link" color="success">success Link</salla-button>
+              <salla-button shape="link" color="danger">danger Link</salla-button>
+              <salla-button shape="link" color="warning">warning Link</salla-button>
+              <salla-button shape="link" color="light">light Link</salla-button>
+              <salla-button shape="link" color="gray">gray Link</salla-button>
+              <salla-button shape="link" color="dark">dark Link</salla-button>
+          </div>
+        </div>
+        <!-- Icon -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
+            </salla-button>
+            <salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
+            <salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
+            </salla-button>
+            <salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
+          </div>
+        </div>
+        <!-- Icon Outline -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon Outline</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
+            </salla-button>
+            <salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
+            <salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
+            </salla-button>
+            <salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
+          </div>
+        </div>
+        <!-- Icon Size -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Icon Size</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
+            <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
+            <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
+          </div>
+        </div>
+      </section>
+      <!-- Modal Section -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
+        </div>
+        <!-- Width -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ widths: [
+          { id: 'xs', label: 'Mini' },
+          { id: 'sm', label: 'Small' },
+          { id: 'md', label: 'Default' },
+          { id: 'full', label: 'Fullscreen' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Width</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <!-- Modal Size -->
+            <template x-for="width in widths" :key="width.id">
+              <salla-button :data-target="'modal-size-' + width.id" data-on-click="modal::open" x-text="width.label"></salla-button>
+            </template>
+            <template x-for="width in widths" :key="width.id">
+              <salla-modal :id="'modal-size-' + width.id" :width="width.id" title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+        <!-- Position -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'top', label: 'Top' },
+          { id: 'middle', label: 'Default' },
+          { id: 'bottom', label: 'Bottom' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Position</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-position-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-position-' + item.id"
+                :position="item.id"
+                size="sm"
+                title="Congratulations"
+                sub-title="Good, you are right!">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod.</p>
+              </salla-modal>
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+        <!-- Header Icon -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ icons: [
+          { id: 'noraml', label: 'Default', icon: 'sicon-shopping-bag' },
+          { id: 'primary', label: 'Primary', icon: 'sicon-shopping-bag' },
+          { id: 'success', label: 'Success', icon: 'sicon-check' },
+          { id: 'error', label: 'Error', icon: 'sicon-cancel' }
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Header Icon</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <template x-for="icon in icons" :key="icon.id">
+              <salla-button :data-target="'modal-icon-' + icon.id" data-on-click="modal::open" x-text="icon.label"></salla-button>
+            </template>
+            <salla-button data-target="modal-icon-image" data-on-click="modal::open">Image as Icon</salla-button>
+            <template x-for="icon in icons" :key="icon.id">
+              <salla-modal
+                :id="'modal-icon-' + icon.id"
+                :icon="icon.icon"
+                :icon-style="icon.id"
+                width="sm"
+                title="Vitae atque quisquam ea rem"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+            <salla-modal
+              id="modal-icon-image"
+              image-icon="./assets/images/star.png"
+              width="sm"
+              sub-title-first
+              title="Good, You are right!"
+              sub-title="Congratulations">
+            </salla-modal>
+          </div>
+        </div>
+        <!-- Header Subtitle first -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'below', label: 'Below' },
+          { id: 'first', label: 'First'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Subtitle Position</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-subtitle-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-subtitle-' + item.id"
+                :sub-title-first="item.id == 'first' ? true : false"
+                icon="sicon-shopping-bag"
+                title="Vitae atque quisquam ea rem"
+                icon-style="primary"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              </salla-modal>
+            </template>
+            <!-- Modal #7 -->
+            <salla-modal id="modal7" no-padding>
+              <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
+            </salla-modal>
+          </div>
+        </div>
+        <!-- No padding -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'nopadding', label: 'No Padding Modal'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Without Padding</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-padding-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-padding-' + item.id"
+                :no-padding="item.id == 'nopadding' ? true : false">
+                <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+        <!-- Is Closable -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Is Closable</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+              <salla-button data-target="modal-not-closable" data-on-click="modal::open">Not Closable</salla-button>
+              <salla-modal
+                icon="sicon-home"
+                icon-style="primary"
+                id="modal-not-closable"
+                title="Not Closable Molda"
+                sub-title="You can't close it by clicking the background overlay and there is'nt cloase button"
+                is-closable="false">
+                <div class="text-center">
+                  <p class="text-gray-500 mb-4">Close button below added as a modal content</p>
+                  <salla-button fill="outline" color="light" data-on-click="modal::close" data-target="modal-not-closable">Close</salla-button>
+                </div>
+              </salla-modal>
+          </div>
+        </div>
+        <!-- Modal Footer -->
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
+          { id: 'noraml', label: 'Without Footer' },
+          { id: 'footer', label: 'With Footer'}
+          ]}">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Modal Footer</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <template x-for="item in items" :key="item.id">
+              <salla-button :data-target="'modal-footer-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
+            </template>
+            <template x-for="item in items" :key="item.id">
+              <salla-modal
+                :id="'modal-footer-' + item.id"
+                icon="sicon-shopping-bag"
+                title="Vitae atque quisquam ea rem"
+                icon-style="primary"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-8 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+                <div x-show="item.id == 'footer'" slot="footer" class="grid grid-cols-2 gap-3">
+                  <salla-button class="w-full" fill="outline" color="light" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Cancel</salla-button>
+                  <salla-button class="w-full" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Ok</salla-button>
+                </div>
+              </salla-modal>
+            </template>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
-  <div class="p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Modal</h1>
-    <p class="my-4">Description</p>
-    <salla-button data-target="modal1" data-on-click="modal::open">Modal</salla-button>
-    <salla-button btn-style="danger" data-target="modal2" data-on-click="modal::open">Error</salla-button>
-    <salla-button data-target="modal3" data-on-click="modal::open">Success</salla-button>
-    <salla-button data-target="modal4" data-on-click="modal::open">Small</salla-button>
-    <salla-button btn-style="outline-primary" data-target="modal5" data-on-click="modal::open">Full</salla-button>
-    <salla-button data-target="modal6" data-on-click="modal::open">With footer</salla-button>
-    <salla-button btn-style="outline" data-target="modal7" data-on-click="modal::open">No Padding</salla-button>
-    <salla-modal id="modal1">Your Awesome Content</salla-modal>
-    <salla-modal id="modal2" title="Error!" sub-title="Whoops! Error happened" error></salla-modal>
-    <salla-modal id="modal3" title="Congratulations" sub-title="Good, You are awesome!" success></salla-modal>
-    <salla-modal id="modal4" width="xs">Small Modal</salla-modal>
-    <salla-modal id="modal5" width="full">Full Modal</salla-modal>
-    <salla-modal id="modal6">
-      Modal Body
-      <p slot="footer" class="text-gray-500 mt-4">
-        <salla-button data-on-click="modal::close" data-target="modal6" wide>Close</salla-button>
-      </p>
-    </salla-modal>
-    <salla-modal id="modal7" no-padding>Small Modal</salla-modal>
-  </div>
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Login</h1>
-    <p class="my-4">Description</p>
-    <salla-button wide data-on-click="login::show">Login Component</salla-button>
-    <salla-login is-email-allowed is-mobile-allowed is-email-required></salla-login>
-  </div>
+  <div class="container py-10 grid-cols-2 grid gap-4">
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
-    <p class="my-4">Description</p>
-    <salla-button wide data-on-click="localization::show">Localization Component</salla-button>
+    <div class=" p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
+      <p class="my-4">Description</p>
+      <salla-button wide data-on-click="localization::show">Localization Component</salla-button>
-    <salla-localization></salla-localization>
-  </div>
+      <salla-localization></salla-localization>
+    </div>
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Search</h1>
-    <p class="my-4">Description</p>
-    <salla-button btn-style="outline-primary" wide data-on-click="search::show">Search Component</salla-button>
-    <salla-search></salla-search>
-  </div>
+    <div class=" p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Search</h1>
+      <p class="my-4">Description</p>
+      <salla-button btn-style="outline-primary" wide data-on-click="search::show">Search Component</salla-button>
+      <salla-search></salla-search>
+    </div>
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Branches</h1>
-    <p class="my-4">Description</p>
-    <salla-button wide btn-style="danger" data-on-click="branches::show">Branches Component</salla-button>
-    <salla-branches></salla-branches>
-  </div>
+    <div class=" p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Branches</h1>
+      <p class="my-4">Description</p>
+      <salla-button wide btn-style="danger" data-on-click="branches::show">Branches Component</salla-button>
+      <salla-branches></salla-branches>
+    </div>
-  <div class=" p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Offer</h1>
-    <p class="my-4">Description</p>
-    <salla-button wide btn-style="outline" onClick="showOffer()">Offer</salla-button>
-    <salla-offer></salla-offer>
-  </div>
+    <div class=" p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Offer</h1>
+      <p class="my-4">Description</p>
+      <salla-button wide btn-style="outline" onClick="showOffer()">Offer</salla-button>
+      <salla-offer></salla-offer>
+    </div>
-  <div class="p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
-    <p class="my-4">Description</p>
-    <salla-product-availability channels="sms,email"></salla-product-availability>
-  </div>
+    <div class="p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
+      <p class="my-4">Description</p>
+      <salla-product-availability channels="sms,email"></salla-product-availability>
+    </div>
-  <div class="p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Mobile Input</h1>
-    <p class="my-4">
-      Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
-      Telephone Input</a>
-    </p>
-    <salla-tel-input></salla-tel-input>
-  </div>
+    <div class="p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Mobile Input</h1>
+      <p class="my-4">
+        Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
+          Telephone Input</a>
+      </p>
+      <salla-tel-input></salla-tel-input>
+    </div>
-  <div class="p-3 rounded-md bg-white shadow-sm">
-    <h1 class="text-primary border-b border-dashed mb-4">Rating</h1>
-    <p class="my-4">Description</p>
-    <salla-button wide btn-style="outline-primary" data-on-click="rating::show">Rating</salla-button>
-    <salla-rating></salla-rating>
-  </div>
+    <div class="p-3 rounded-md bg-white shadow-sm">
+      <h1 class="text-primary border-b border-dashed mb-4">Rating</h1>
+      <p class="my-4">Description</p>
+      <salla-button wide btn-style="outline-primary" data-on-click="rating::show">Rating</salla-button>
+      <salla-rating></salla-rating>
+    </div>
-  <div class="p-3 rounded-md bg-white shadow-sm col-span-2">
-    <h1 class="text-primary border-b border-dashed mb-4">Infinite Scroll</h1>
-    <p class="my-4">
-      Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
-      <br/>
-      You can pass <code>autoload</code> attribute for autoload result when scrolling.<br/>
-      <code>&#x3C;salla-infinite-scroll next-page=&#x22;***&#x22;
+    <div class="p-3 rounded-md bg-white shadow-sm col-span-2">
+      <h1 class="text-primary border-b border-dashed mb-4">Infinite Scroll</h1>
+      <p class="my-4">
+        Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
+        <br />
+        You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
+        <code>&#x3C;salla-infinite-scroll next-page=&#x22;***&#x22;
         autoload&#x3E;&#x3C;/salla-infinite-scroll&#x3E;</code>
-    </p>
-    <salla-infinite-scroll class="grid grid-cols-4 grid-flow-row gap-6 " next-page="infinit-scroll.html?page=2"
-                           item=".i-item">
-    </salla-infinite-scroll>
+      </p>
+      <salla-infinite-scroll class="grid grid-cols-4 grid-flow-row gap-6 " next-page="infinit-scroll.html?page=2"
+        item=".i-item">
+      </salla-infinite-scroll>
+    </div>
   </div>
-</div>
-<script src="dist/demo.js"></script>
+  <script src="dist/demo.js"></script>
 </body>
 </html>