@riosst100/pwa-marketplace 1.3.8 → 1.4.0

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css

@@ -1,6 +1,6 @@
 .submenuColumn {
     composes: max-w-[235px] from global;
-    composes: p-5 from global;
+    composes: p-2 from global;
 }
 
 .heading {
@@ -20,9 +20,9 @@
 }
 
 .submenuChild {
-    composes: mt-5 from global;
+    composes: mt-0 from global;
 }
 
 .submenuChildItem {
-    composes: mb-3 from global;
+    composes: mb-0 from global;
 }

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -266,12 +266,12 @@ const ProductFullDetail = props => {
                         </h1>
                         <div className='product_review-container flex items-center gap-x-2'>
                             <div className='product_rating leading-[14px]'>
-                                <span className='text-gray-200 text-sm'>
+                                <span className='text-gray-200 text-base'>
                                     {rating_value}
                                 </span>
                             </div>
                             <div className='before_block before_w-[1px] before_bg-gray-200 before_h-full before_relative w-[1px] h-[14px]'></div>
-                            <span className='review_count text-gray-200 text-sm leading-[14px]'>
+                            <span className='review_count text-gray-200 text-base leading-[14px]'>
                                 {review_count} Reviews
                             </span>
                         </div>

package/src/overwrites/venia-ui/lib/components/ProductSort/productSort.module.css

@@ -47,7 +47,7 @@
 .sortText {
     composes: leading-normal from global;
     composes: text-colorDefault from global;
-    composes: text-[14px] from global;
+    composes: text-base from global;
 }
 
 .desktopIconWrapper {

package/src/overwrites/venia-ui/lib/components/ProductSort/sortItem.module.css

@@ -19,5 +19,5 @@
 .text {
     composes: text-left from global;
     composes: whitespace-nowrap from global;
-    composes: text-[14px] from global;
+    composes: text-base from global;
 }

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Circle } from 'react-feather';
+import { node, shape, string } from 'prop-types';
+import { Radio as InformedRadio } from 'informed';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './radio.module.css';
+
+/* TODO: change lint config to use `label-has-associated-control` */
+/* eslint-disable jsx-a11y/label-has-for */
+
+const RadioOption = props => {
+    const {
+        ariaLabel,
+        classes: propClasses,
+        id,
+        label,
+        value,
+        ...rest
+    } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    return (
+        <label
+            className={classes.root}
+            htmlFor={id}
+            aria-label={ariaLabel ? ariaLabel : ''}
+        >
+            <InformedRadio
+                {...rest}
+                className={classes.input}
+                id={id}
+                value={value}
+            />
+            <span className={classes.icon}>
+                <Circle />
+            </span>
+            <span className={classes.label}>
+                {label || (value != null ? value : '')}
+            </span>
+        </label>
+    );
+};
+
+export default RadioOption;
+
+RadioOption.propTypes = {
+    ariaLabel: string,
+    classes: shape({
+        icon: string,
+        input: string,
+        label: string,
+        root: string
+    }),
+    id: string.isRequired,
+    label: node.isRequired,
+    value: node.isRequired
+};
+
+/* eslint-enable jsx-a11y/label-has-for */

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: gap-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: m-0 from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-clip-content from global;
+    composes: bg-transparent from global;
+    composes: border-8 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
+    grid-area: input;
+
+    composes: active_outline-none from global;
+    /* composes: active_shadow-radioActive from global; */
+
+    composes: checked_bg-brand-dark from global;
+
+    composes: focus_outline-none from global;
+    /* composes: focus_shadow-radioFocus from global; */
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: w-[14px] from global;
+    composes: z-surface from global;
+    grid-area: input;
+}
+
+/* TODO @TW: cannot compose */
+.icon svg {
+    /* composes: stroke-gray-600 from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+    width: 14px;
+    height: 14px;
+}
+
+.label {
+    composes: justify-self-start from global;
+    composes: text-base from global;
+    grid-area: label;
+}
+
+/* TODO @TW: cannot compose */
+.input:checked + .icon svg {
+    /* composes: stroke-brand-base from global; */
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[14px] from global;
+    composes: z-foreground from global;
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css

@@ -13,7 +13,7 @@
     composes: rounded-b-md from global;
     composes: rounded-t-none from global;
     composes: shadow-inputFocus from global;
-    composes: text-sm from global;
+    composes: text-base from global;
     composes: top-9 from global;
     composes: z-menu from global;
     transition-property: opacity, transform, visibility;

package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css

@@ -1,6 +1,6 @@
 .heading {
     composes: pt-3 from global;
-    composes: text-sm from global;
+    composes: text-base from global;
     composes: text-subtle from global;
     composes: uppercase from global;
 }

package/src/overwrites/venia-ui/lib/components/TextInput/field.module.css

@@ -45,6 +45,6 @@
 
 .optional {
     composes: font-normal from global;
-    composes: text-sm from global;
+    composes: text-base from global;
     composes: text-subtle from global;
 }

package/src/talons/AttributesBlock/attributesBlock.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/AttributesBlock/useAttributesBlock.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './attributesBlock.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useAttributesBlock = props => {
+    const { attributesBlock } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    return {
+        categoryUrlSuffix,
+        getPath
+    };
+};