CC-29576: Fixed main search UI issues.

spryker-shop · Jun 27, 2023 · 7bc3a11 · 7bc3a11
1 parent b41bdd2
commit 7bc3a11
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 71 deletions.
diff --git a/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.scss b/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.scss
@@ -40,6 +40,7 @@
             background: $setting-color-transparent;
             color: $setting-color-gray-4;
             z-index: $setting-zi-search-suggestions + 3;
+            cursor: pointer;
 
             @include helper-breakpoint-media-min($lg) {
                 width: rem(56);
@@ -58,10 +59,9 @@
             }
 
             &:hover {
-                background: $setting-color-transparent;
-
-                .icon {
+                #{$name}__icon {
                     color: $setting-color-gray-3;
+                    fill: $setting-color-gray-3;
                 }
             }
         }

diff --git a/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig b/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/search-form/search-form.twig
@@ -1,37 +1,33 @@
-{% extends model('component') %}
-
-{% define config = {
-    name: 'search-form'
-} %}
-
-{% define data = {
-    searchUrl: path('search'),
-    searchValue: app.request.get('q')
-} %}
-
-{% define attributes = {
-    'data-search-id': required
-} %}
+{% extends molecule('search-form', '@SprykerShop:ShopUi') %}
 
 {% block body %}
-    <form action="{{data.searchUrl}}">
-        <input name="q" type="text" class="input input--expand suggest-search__input {{ config.jsName }}__input--{{ attributes['data-search-id'] }}" placeholder="{{ 'global.search' | trans }}" value="{{data.searchValue}}" autocomplete="off">
-        <button type="submit" class=" button button--expand {{config.name}}__button {{config.name}}__button--submit">
+    <form action="{{ data.searchUrl }}">
+        <input
+            class="suggest-search__input {{ config.jsName }}__input--{{ attributes['data-search-id'] }}"
+            name="q"
+            type="text"
+            placeholder="{{ 'global.search' | trans }}"
+            value="{{ data.searchValue }}"
+            autocomplete="off"
+        >
+
+        <button class="{{ config.name }}__button {{ config.name }}__button--submit">
             {% include atom('icon') with {
+                class: config.name ~ '__icon',
                 modifiers: ['search'],
                 data: {
-                    name: 'search'
-                }
+                    name: 'search',
+                },
             } only %}
         </button>
 
-
-        <button class="button button--expand {{config.name}}__button {{config.name}}__button--close {% block close %}{% endblock %}">
+        <button type="button" class="{{ config.name }}__button {{ config.name }}__button--close {% block close %}{% endblock %}">
             {% include atom('icon') with {
+                class: config.name ~ '__icon',
                 modifiers: ['small'],
                 data: {
-                    name: 'cross'
-                }
+                    name: 'cross',
+                },
             } only %}
         </button>
 

diff --git a/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/suggest-search/suggest-search.scss b/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/suggest-search/suggest-search.scss
@@ -4,81 +4,74 @@
             position: absolute;
             top: 100%;
             left: 0;
-            margin: rem(-3) 0 0 0;
-            padding: rem(1) rem(25) rem(29);
+            width: 100%;
+            padding: rem(1) rem(25) rem(30);
             border-radius: 0 0 $setting-border-radius $setting-border-radius;
             background: $setting-color-white;
             box-shadow: 0 18px 18px 0 $setting-color-shadow-1, 0 3px 3px 0 $setting-color-shadow-1;
-            width: 100%;
             max-height: rem(300);
             overflow-x: hidden;
             z-index: $setting-zi-search-suggestions + 3;
 
             @include helper-breakpoint-media-min($lg) {
                 max-height: 30rem;
-                padding-left: rem(19);
-                padding-right: rem(21);
+                padding-left: rem(20);
+                padding-right: rem(20);
             }
         }
 
-        &__input {
-            padding: rem(19) rem(46) rem(20) rem(43);
+        &__input,
+        &__hint {
+            padding: rem(20) rem(45);
             border: none;
-            font-size: rem(18);
-            font-weight: fw(bold);
-            line-height: rem(20);
-            border-radius: $setting-border-radius;
-            box-shadow: 0 18px 18px 0 $setting-color-shadow-1, 0 3px 3px 0 $setting-color-shadow-1;
-            position: relative;
-            z-index: $setting-zi-search-suggestions + 2;
+            font: fw(bold) rem(18) / rem(20) $setting-font-family;
+            width: 100%;
 
             @include helper-breakpoint-media-min($lg) {
-                padding: rem(15) rem(10) rem(15) rem(56);
+                padding: rem(15) rem(10) rem(15) rem(55);
                 font-size: rem(15);
                 font-weight: fw(regular);
             }
 
             &--active {
                 border-radius: $setting-border-radius $setting-border-radius 0 0;
             }
+        }
+
+        &__input {
+            position: relative;
+            border-radius: $setting-border-radius;
+            box-shadow: 0 18px 18px 0 $setting-color-shadow-1, 0 3px 3px 0 $setting-color-shadow-1;
+            z-index: $setting-zi-search-suggestions + 2;
 
             &--transparent {
                 background-color: $setting-color-transparent;
             }
         }
 
-        &__product {
-            padding-bottom: rem(10);
-        }
-
-        &__product-action {
-            padding-top: rem(23);
-        }
-
         &__hint {
-            padding: rem(19) rem(46) rem(20) rem(43);
-            border: none;
-            font-size: rem(18);
-            font-weight: fw(bold);
-            line-height: rem(20);
             position: absolute;
-            width: 100%;
-            color: $setting-color-gray-2;
             top: 0;
+            color: $setting-color-gray-2;
             z-index: $setting-zi-search-suggestions + 1;
 
             @include helper-breakpoint-media-min($lg) {
-                padding: rem(15) rem(15) rem(15) rem(56);
-                font-size: rem(15);
-                font-weight: fw(regular);
+                padding-right: rem(15);
             }
 
             &--active {
                 background-color: $setting-color-gray-7;
-                border-radius: $setting-border-radius $setting-border-radius 0 0;
             }
         }
 
+        &__product {
+            padding-bottom: rem(10);
+        }
+
+        &__product-action {
+            padding-top: rem(23);
+        }
+
         &__item {
             &--active {
                 text-decoration: underline;

diff --git a/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/suggest-search/suggest-search.twig b/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/suggest-search/suggest-search.twig
@@ -1,17 +1,7 @@
-{% extends model('component') %}
-
-{% define config = {
-    name: 'suggest-search',
-    tag: 'suggest-search',
-} %}
+{% extends molecule('suggest-search', '@SprykerShop:ShopUi') %}
 
 {% define attributes = {
-    'suggestion-url': required,
     'base-suggest-url': required,
-    'input-class-name': required,
-    'debounce-delay': 500,
-    'throttle-delay': 200,
-    'letters-trashold': 2,
     'overlay-class-name': 'js-overlay-block',
     'overlay-breakpoint': '0',
 } %}