@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/ArraySearchInput/arraySearchInput.module.css

@@ -0,0 +1,48 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
+    display: none;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
+    display: grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: relative from global;
+    padding-left: 20px;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}

package/src/components/ArraySearchInput/index.js

@@ -0,0 +1 @@
+export { default } from './arraySearchInput';

package/src/components/AttributesBlock/attributesBlock.js

@@ -0,0 +1,54 @@
+import { useAttributesBlock } from '@riosst100/pwa-marketplace/src/talons/AttributesBlock/useAttributesBlock';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './attributesBlock.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const AttributesBlock = props => {
+    const { attributesBlock, category } = props;
+
+    const talonProps = useAttributesBlock({ attributesBlock });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        categoryUrlSuffix,
+        getPath
+    } = talonProps;
+    
+    const result = [];
+    
+    attributesBlock && attributesBlock.map(({ label, code, items }, index) => {
+
+        const itemsResult = [];
+
+        items && items.map(({ label, value }, index) => {
+            const path = resourceUrl(
+                `/${category.url_path}${categoryUrlSuffix || ''}?${code}[filter]=${label},${value}`
+            );
+
+            itemsResult.push(
+                <>
+                    <Link
+                            key={index}
+                            to={path}
+                        >
+                        <li className={classes.item}>{label}</li>
+                    </Link>
+                </>
+            )
+        });
+
+        result.push(
+            <span key={index}>
+                <div className={classes.title}>{label}</div>
+                <ul className={classes.root}>{itemsResult}</ul>
+            </span>
+        )
+    });
+
+    return result;
+};
+
+export default AttributesBlock;

package/src/components/AttributesBlock/attributesBlock.module.css

@@ -0,0 +1,28 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.title {
+    composes: pb-3 from global;
+    composes: font-bold from global;
+    composes: text-[14px] from global;
+}