Merge pull request #21 in PSDK/ext-catalog from task-dkuznetsov-PPP-3…

…0318 to master

* commit 'b4bec05aa53d7825a8d48da0d65bc25a7e1a024c':
  FEATURE PPP-30318 CategorySwitcher component

src/frontend/views/index/components/CatalogFeatured/CategoryFeatured.less

@@ -6,14 +6,18 @@
 Carousel
 
 Markup:
-<div class="cuttable {{.modifier}}">
-    <div class="cuttable__content">{{children}}</div>
-    <div class="cuttable__action">{{children}}</div>
+<div class="catalog-featured">
+    <figure class="catalog-featured__slide">
+        <img src="..." alt="" width="320">
+        <a class="catalog-featured__overlay catalog-featured__overlay--cover catalog-featured__action" href="#!"></a>
+        <figcaption class="catalog-featured__overlay catalog-featured__overlay--bottom catalog-featured__action catalog-featured--color-inverse">{{children}}</figcaption>
+    </figure>
 </div>
 
 Modifiers:
-.cuttable--expand
-.cuttable--collapse
+.catalog-featured__overlay--cover
+.catalog-featured__overlay--bottom
+.catalog-featured--color-inverse
 */
 
 @catalog-featured--prefix-cls : ~"@{ext-prefix}catalog-featured";

src/frontend/views/index/components/CategorySwitcher.js → src/frontend/views/index/components/CategorySwitcher/CategorySwitcher.js

@@ -2,8 +2,8 @@
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { Translate } from 'components';
-import Link from './Link';
+import { Translate, clsPrefix } from 'components';
+import Link from '../Link';
 
 class CategorySwitcher extends Component {
     constructor(props) {
@@ -22,14 +22,14 @@ class CategorySwitcher extends Component {
     }
 
     render() {
-        const { categories, currentCategory } = this.props;
+        const { prefixCls = clsPrefix('category-switcher'), categories, currentCategory } = this.props;
 
         return (
-            <div className={classNames('category-switcher', !this.state.collapsed && 'is-open')}>
+            <div className={classNames(prefixCls, !this.state.collapsed && 'is-open')}>
                 <button className="btn dropdown-toggle" type="button" onClick={this.toggle}><span className="caret" /></button>
-                <div className="category-switcher__dropdown">
+                <div className={`${prefixCls}__dropdown`}>
 
-                    <div className="category-switcher__header">
+                    <div className={`${prefixCls}__header`}>
                         <div className="media media--large media--center">
                             <figure className="media__figure">
                                 <Link to="catalog/category">
@@ -42,7 +42,7 @@ class CategorySwitcher extends Component {
                         </div>
                     </div>
 
-                    <div className="category-switcher__title">
+                    <div className={`${prefixCls}__title`}>
                         <div className="media media--large media--center">
                             <figure className="media__figure">
                                 <i className="icon-md"><img src="/modules/catalog/images/icons/32/select-category.png" alt="" /></i>
@@ -51,15 +51,15 @@ class CategorySwitcher extends Component {
                         </div>
                     </div>
 
-                    <ul className="category-switcher__categories">
+                    <ul className={`${prefixCls}__categories`}>
                     {categories.map(({ code, title }) => {
                         let item = <Translate content={`categories.${code}`} fallback={title} />;
 
                         if (currentCategory !== code) {
                             item = <Link to={`catalog/category/${code}`} onClick={this.toggle}>{item}</Link>;
                         }
 
-                        return <li className="category-switcher__category" key={code}>{item}</li>;
+                        return <li className={`${prefixCls}__category`} key={code}>{item}</li>;
                     })}
                     </ul>
                 </div>

src/frontend/views/index/components/CategorySwitcher/CategorySwitcher.less

@@ -0,0 +1,111 @@
+// Copyright 1999-2017. Plesk International GmbH. All Rights Reserved.
+
+@import "../../../../components/style/variables";
+
+/*
+Carousel
+
+Markup:
+<div class="category-switcher {{.modifier}}">
+    <button class="btn dropdown-toggle" type="button"><span class="caret"></span></button>
+    <div class="category-switcher__dropdown">
+        <div class="category-switcher__header">...</div>
+        <div class="category-switcher__title">...</div>
+        <ul class="category-switcher__categories">
+            <li class="category-switcher__category">...</li>
+        </ul>
+    </div>
+</div>
+
+Modifiers:
+.is-open
+*/
+
+@category-switcher--prefix-cls          : ~"@{ext-prefix}category-switcher";
+
+@category-switcher--z-index             : 1000;
+@category-switcher--width               : 420px;
+@category-switcher--margin-top          : 2px;
+@category-switcher--background-color    : #eee;
+@category-switcher--border-color        : #ccc;
+@category-switcher--border-width        : 1px;
+@category-switcher--border-radius       : 0;
+@category-switcher--color               : #444;
+@category-switcher--font-size           : 13px;
+@category-switcher--animation           : ~"@{ext-prefix}animation--fade";
+@category-switcher--header-border-color : #ccc;
+
+
+.@{category-switcher--prefix-cls} {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 13px;
+    vertical-align: 3px;
+
+    > .dropdown-toggle {
+        margin: 0;
+        padding: 0;
+        min-height: 22px;
+        min-width: 22px;
+    }
+
+    &__dropdown {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: @category-switcher--z-index;
+        box-sizing: border-box;
+        width: @category-switcher--width;
+        padding: 10px;
+        margin: @category-switcher--margin-top 0 0;
+        font-size: @category-switcher--font-size;
+        text-align: left;
+        line-height: normal;
+        background-color: @category-switcher--background-color;
+        border: @category-switcher--border-width solid @category-switcher--border-color;
+        background-clip: padding-box;
+    }
+
+    &.is-open &__dropdown {
+        display: block;
+        animation: @category-switcher--animation 0.2s ease-in-out;
+        transform-origin: 0 0;
+    }
+
+    &__header,
+    &__title {
+        .media {
+            width: 190px;
+            margin: 0 auto 16px;
+            line-height: 16px;
+        }
+    }
+
+    &__header {
+        margin-bottom: 16px;
+        padding-top: 6px;
+        border-bottom: 1px solid @category-switcher--header-border-color;
+
+    }
+
+    &__categories {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin: 0 6px;
+    }
+
+    &__category {
+        -ms-flex: 0 0 47%;
+        flex: 0 0 ~"calc(50% - 12px)";
+        margin-bottom: 10px;
+    }
+
+}
+
+@keyframes @category-switcher--animation {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}

src/frontend/views/index/components/CategorySwitcher/index.js

@@ -0,0 +1,3 @@
+// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
+export default from './CategorySwitcher';

src/frontend/views/index/components/index.less

@@ -2,3 +2,4 @@
 
 @import "Cuttable/Cuttable";
 @import "CatalogFeatured/CategoryFeatured";
+@import "CategorySwitcher/CategorySwitcher";