Merge pull request #144 from PrestaShop/develop

Release 1.2.2

README.md

@@ -54,7 +54,7 @@ Open up `admin-dev/themes/new-theme/package.json` of your PrestaShop install, an
 ```js
 {
   // ...
-  prestakit: "1.2.0"
+  prestakit: "1.2.2";
   // ...
 }
 ```
@@ -63,7 +63,7 @@ Change the version so it looks like this:
 
 ```js
 {
-  prestakit: "/path/to/your/local/ui-kit"
+  prestakit: "/path/to/your/local/ui-kit";
 }
 ```
 

js/prestashop-ui-kit.js

@@ -1,3 +1,5 @@
+import './utils/migrate-mute';
+import 'jquery-migrate';
 import 'tether';
 import 'bootstrap';
 import 'select2';
@@ -171,14 +173,27 @@ $.fn.pstooltip = $.fn.tooltip;
         PSNumbers('.ps-number-input');
       });
     },
-
     initSelects: function () {
       initSelect2();
     },
-
     initToolTips: function () {
       initToolTips();
     },
+    initToggleButtons: function () {
+      initToggleButtons();
+    },
+    initAlerts: function () {
+      initAlerts();
+    },
+    initSearchBar: function () {
+      initSearchBar();
+    },
+    initInputFile: function () {
+      initInputFile();
+    },
+    initNumbers: function () {
+      PSNumbers('.ps-number-input');
+    },
   };
 
   global.prestaShopUiKit.init();

js/utils/migrate-mute.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+
+(function () {
+  if (
+    typeof jQuery.migrateMute === 'undefined' &&
+    typeof window.prestashop !== 'undefined' &&
+    typeof window.prestashop.debug !== 'undefined'
+  ) {
+    jQuery.migrateMute = !window.prestashop.debug;
+  }
+})();

package.json

@@ -1,12 +1,15 @@
 {
   "name": "prestakit",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Prestashop UI Kit integration",
   "repository": {
     "type": "git",
     "url": "https://github.com/PrestaShop/prestashop-ui-kit.git"
   },
-  "keywords": ["prestashop", "uikit"],
+  "keywords": [
+    "prestashop",
+    "uikit"
+  ],
   "scripts": {
     "watch": "webpack -w --progress --debug",
     "build": "NODE_ENV=production webpack --progress --debug",
@@ -46,6 +49,7 @@
     "expose-loader": "^0.7.5",
     "file-loader": "^6.0.0",
     "jquery": "^3.5.0",
+    "jquery-migrate": "^3.3.2",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.0",
     "popper.js": "^1.14.1",

scss/_floating-button.scss

@@ -34,7 +34,6 @@
     bottom: calc(100% + 1rem);
     @include transition(.25s ease-out);
 
-
     &.collapsing {
       .btn-floating-menu {
         &::after {
@@ -46,11 +45,13 @@
   }
 
   & &-menu {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 20rem;
-    padding: .5rem;
+    overflow: hidden;
+    @include border-radius(.5rem);
 
     a,
     button {
@@ -90,9 +91,23 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    padding: .5rem .75rem;
     font-weight: 500;
     color: $gray-750;
     @include transition(.25s ease-out);
+    @include border-radius(0);
+
+    .material-icon {
+      margin-top: 0;
+    }
+
+    &:first-of-type {
+      @include border-top-radius(.5rem);
+    }
+
+    &:last-of-type {
+      @include border-bottom-radius(.5rem);
+    }
 
     &:hover {
       color: $white;

scss/_forms.scss

@@ -131,8 +131,6 @@ $form-check-name: form-check;
 
     input {
       position: absolute;
-      width: 0;
-      height: 0;
       cursor: pointer;
       opacity: 0;
     }

scss/_modal.scss

@@ -4,6 +4,7 @@ $component-name: modal;
 .#{$component-name} {
   .#{$component-name}-dialog {
     top: 50%;
+    max-height: 100vh;
   }
 
   &.show {

scss/_ps-switch.scss

@@ -76,8 +76,7 @@
       z-index: 0;
     }
 
-    &:first-of-type:checked,
-    &:first-of-type:disabled {
+    &:first-of-type:checked {
       ~ label:first-of-type {
         opacity: 1;
       }

scss/_select2.scss

@@ -30,8 +30,8 @@ $component-name: select2;
           background: rgba($primary, .1);
         }
 
-        &:focus,
-        &:active {
+        &:not([role="group"]):focus,
+        &:not([role="group"]):active {
           color: #fff;
           background: $primary;
         }

stories/html/floating/floating.html

@@ -0,0 +1,18 @@
+<div class="floating-buttons">
+  <div class="btn-floating">
+    <button
+      class="btn btn-primary collapsed"
+      data-toggle="collapse"
+      data-target=".btn-floating-container"
+    >
+      <i class="material-icons">add</i>
+    </button>
+    <div class="btn-floating-container collapse">
+      <div class="btn-floating-menu">
+        <a class="btn btn-floating-item" href="#"
+          >Upload a module <i class="material-icons">download</i></a
+        >
+      </div>
+    </div>
+  </div>
+</div>

stories/html/floating/index.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import floatingContent from './floating.html'
+
+<Meta title="Floating" />
+
+# Floating button
+
+Used in the backoffice on responsive view, to contains pages actions
+
+<Canvas>
+  <Story name="Floating" parameters={{ docs: { source: { code: floatingContent } } }}>
+    {() => floatingContent}
+  </Story>
+</Canvas>

stories/html/form/index.stories.mdx

@@ -119,7 +119,12 @@ import loginContent from './login-example.html'
 
 <Canvas>
   <Story name="Selects" parameters={{ docs: { source: { code: selectContent } } }}>
-    {() => selectContent}
+    {() => {
+      useEffect(() => {
+        window.prestaShopUiKit.init();
+      });
+      return selectContent;
+    }}
   </Story>
 </Canvas>