@lancom/shared 0.0.430 → 0.0.431

package/components/products/products_attributes/products_attribute/products-attribute.vue

@@ -1,33 +1,34 @@
 <template>
   <div class="ProductsAttribute__wrapper">
-    <div class="ProductsAttribute__title">
-      {{ attribute.name }}
-    </div>
-    <div class="ProductsAttribute__options">
-      <div
-        v-for="option in options"
-        :key="option._id"
-        class="ProductsAttribute__option"
-        :class="{
-          'ProductsAttribute__option--active': selectedOptions.includes(option.alias)
-        }">
-        <products-link :attributes="{ [attribute.alias]: option.alias }">
-          <checked-icon
-            v-if="hasSelectedIcon"
-            :checked="selectedOptions.includes(option.alias)" />
-          {{ option.name }}
-        </products-link>
+    <toggle-content :label="attribute.name">
+      <div class="ProductsAttribute__options">
+        <div
+          v-for="option in options"
+          :key="option._id"
+          class="ProductsAttribute__option"
+          :class="{
+            'ProductsAttribute__option--active': selectedOptions.includes(option.alias)
+          }">
+          <products-link :attributes="{ [attribute.alias]: option.alias }">
+            <checked-icon
+              v-if="hasSelectedIcon"
+              :checked="selectedOptions.includes(option.alias)" />
+            <span>{{ option.name }}</span>
+          </products-link>
+        </div>
       </div>
-    </div>
+    </toggle-content>
   </div>
 </template>
 
 <script>
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 export default {
   components: {
+    ToggleContent,
     ProductsLink,
     CheckedIcon
   },

package/components/products/products_brands/products-brands.vue

@@ -17,7 +17,9 @@
             v-if="hasSelectedIcon"
             :checked="brand.alias === currentBrand"
             :circle="selectedIconCircle" />
-          {{ brand.name }}
+          <span>
+            {{ brand.name }}
+          </span>
         </products-link>
       </div>
     </toggle-content>

package/components/products/products_filters/products-filters.vue

@@ -11,7 +11,9 @@
         class="labelless">
       </multiselect>
     </div>
-    <div class="ProductsFilters__search hidden-sm-and-down">
+    <div
+      v-if="hasSearch"
+      class="ProductsFilters__search hidden-sm-and-down">
       <input
         v-model="search"
         name="search"
@@ -42,6 +44,12 @@ export default {
   components: {
     Multiselect
   },
+  props: {
+    hasSearch: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     const sortByOptions = [{
       value: 'price-low-high',

package/components/products/products_tags/products-tags.vue

@@ -2,35 +2,36 @@
   <div
     v-if="tags.length"
     class="ProductsTags__wrapper">
-    <div class="ProductsTags__title">
-      Tags
-    </div>
-    <div class="ProductsTags__options">
-      <div
-        v-for="tag in tags"
-        :key="tag.alias"
-        class="ProductsTags__item"
-        :class="{
-          'ProductsTags__item--active': selectedTags.includes(tag.alias)
-        }">
-        <products-link :tags="tag.alias">
-          {{ tag.name }}
-          <i
-            v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
-            class="icon-cancel"></i>
-        </products-link>
+    <toggle-content label="Tags">
+      <div class="ProductsTags__options">
+        <div
+          v-for="tag in tags"
+          :key="tag.alias"
+          class="ProductsTags__item"
+          :class="{
+            'ProductsTags__item--active': selectedTags.includes(tag.alias)
+          }">
+          <products-link :tags="tag.alias">
+            {{ tag.name }}
+            <i
+              v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
+              class="icon-cancel"></i>
+          </products-link>
+        </div>
       </div>
-    </div>
+    </toggle-content>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 
 export default {
   name: 'ProductsTags',
   components: {
+    ToggleContent,
     ProductsLink
   },
   props: {

package/components/products/products_types/products-types.scss

@@ -34,4 +34,4 @@
       height: 20px;
     }
   }
-}
+}