@magento/venia-ui 9.0.0 → 9.2.0-alpha.1

package/lib/components/ProductSort/productSort.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { ChevronDown as ArrowDown } from 'react-feather';
-import { FormattedMessage } from 'react-intl';
-import { array, arrayOf, shape, string, oneOf } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { array, arrayOf, shape, string } from 'prop-types';
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
 
 import { useStyle } from '../../classify';
@@ -15,6 +15,34 @@ const ProductSort = props => {
     const { availableSortMethods, sortProps } = props;
     const [currentSort, setSort] = sortProps;
     const { elementRef, expanded, setExpanded } = useDropdown();
+    const { formatMessage, locale } = useIntl();
+
+    const orderSortingList = useCallback(
+        list => {
+            return list.sort((a, b) => {
+                return a.text.localeCompare(b.text, locale, {
+                    sensitivity: 'base'
+                });
+            });
+        },
+        [locale]
+    );
+
+    const sortMethodsFromConfig = availableSortMethods
+        ? availableSortMethods
+              .map(method => {
+                  const { value, label } = method;
+                  if (value !== 'price' && value !== 'position') {
+                      return {
+                          id: `sortItem.${value}`,
+                          text: label,
+                          attribute: value,
+                          sortDirection: 'ASC'
+                      };
+                  }
+              })
+              .filter(method => !!method)
+        : null;
 
     // click event for menu items
     const handleItemClick = useCallback(
@@ -36,7 +64,52 @@ const ProductSort = props => {
             return null;
         }
 
-        const itemElements = Array.from(availableSortMethods, sortItem => {
+        const defaultSortMethods = [
+            {
+                id: 'sortItem.relevance',
+                text: formatMessage({
+                    id: 'sortItem.relevance',
+                    defaultMessage: 'Best Match'
+                }),
+                attribute: 'relevance',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.position',
+                text: formatMessage({
+                    id: 'sortItem.position',
+                    defaultMessage: 'Position'
+                }),
+                attribute: 'position',
+                sortDirection: 'ASC'
+            },
+            {
+                id: 'sortItem.priceDesc',
+                text: formatMessage({
+                    id: 'sortItem.priceDesc',
+                    defaultMessage: 'Price: High to Low'
+                }),
+                attribute: 'price',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceAsc',
+                text: formatMessage({
+                    id: 'sortItem.priceAsc',
+                    defaultMessage: 'Price: Low to High'
+                }),
+                attribute: 'price',
+                sortDirection: 'ASC'
+            }
+        ];
+
+        const allSortingMethods = sortMethodsFromConfig
+            ? orderSortingList(
+                  [sortMethodsFromConfig, defaultSortMethods].flat()
+              )
+            : defaultSortMethods;
+
+        const itemElements = Array.from(allSortingMethods, sortItem => {
             const { attribute, sortDirection } = sortItem;
             const isActive =
                 currentSort.sortAttribute === attribute &&
@@ -60,13 +133,15 @@ const ProductSort = props => {
             </div>
         );
     }, [
-        availableSortMethods,
         classes.menu,
         classes.menuItem,
         currentSort.sortAttribute,
         currentSort.sortDirection,
         expanded,
-        handleItemClick
+        formatMessage,
+        handleItemClick,
+        orderSortingList,
+        sortMethodsFromConfig
     ]);
 
     // expand or collapse on click
@@ -78,6 +153,7 @@ const ProductSort = props => {
         <div
             ref={elementRef}
             className={classes.root}
+            data-cy="ProductSort-root"
             aria-live="polite"
             aria-busy="false"
         >
@@ -87,6 +163,7 @@ const ProductSort = props => {
                     root_lowPriority: classes.sortButton
                 }}
                 onClick={handleSortClick}
+                data-cy="ProductSort-sortButton"
             >
                 <span className={classes.mobileText}>
                     <FormattedMessage
@@ -116,8 +193,6 @@ const ProductSort = props => {
     );
 };
 
-const sortDirections = oneOf(['ASC', 'DESC']);
-
 ProductSort.propTypes = {
     classes: shape({
         menuItem: string,
@@ -127,42 +202,11 @@ ProductSort.propTypes = {
     }),
     availableSortMethods: arrayOf(
         shape({
-            text: string,
-            id: string,
-            attribute: string,
-            sortDirection: sortDirections
+            label: string,
+            value: string
         })
     ),
     sortProps: array
 };
 
-ProductSort.defaultProps = {
-    availableSortMethods: [
-        {
-            text: 'Position',
-            id: 'sortItem.position',
-            attribute: 'position',
-            sortDirection: 'ASC'
-        },
-        {
-            id: 'sortItem.relevance',
-            text: 'Best Match',
-            attribute: 'relevance',
-            sortDirection: 'DESC'
-        },
-        {
-            id: 'sortItem.priceAsc',
-            text: 'Price: Low to High',
-            attribute: 'price',
-            sortDirection: 'ASC'
-        },
-        {
-            id: 'sortItem.priceDesc',
-            text: 'Price: High to Low',
-            attribute: 'price',
-            sortDirection: 'DESC'
-        }
-    ]
-};
-
 export default ProductSort;

package/lib/components/ProductSort/sortItem.js

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Check } from 'react-feather';
 import { bool, func, shape, string } from 'prop-types';
 
@@ -11,21 +10,37 @@ const SortItem = props => {
     const { active, onClick, sortItem } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
-    const handleClick = useCallback(() => {
-        onClick(sortItem);
-    }, [sortItem, onClick]);
+    const handleClick = useCallback(
+        e => {
+            // use only left click for selection
+            if (e.button === 0) {
+                onClick(sortItem);
+            }
+        },
+        [sortItem, onClick]
+    );
+
+    const handleKeyDown = useCallback(
+        e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick(sortItem);
+            }
+        },
+        [onClick, sortItem]
+    );
 
     const activeIcon = active ? <Icon size={20} src={Check} /> : null;
 
     return (
-        <button className={classes.root} onClick={handleClick}>
+        <button
+            className={classes.root}
+            data-cy={active ? 'SortItem-activeButton' : 'SortItem-button'}
+            onMouseDown={handleClick}
+            onKeyDown={handleKeyDown}
+        >
             <span className={classes.content}>
-                <span className={classes.text}>
-                    <FormattedMessage
-                        id={sortItem.id}
-                        defaultMessage={sortItem.text}
-                    />
-                </span>
+                <span className={classes.text}>{sortItem.text}</span>
                 {activeIcon}
             </span>
         </button>

package/lib/components/RadioGroup/radio.module.css

@@ -11,17 +11,21 @@
     line-height: 1.5rem;
 }
 
+.input_base {
+    border-radius: 50%;
+    height: 1.5rem;
+    margin: 0;
+    width: 1.5rem;
+    z-index: 2;
+}
+
 .input {
+    composes: input_base;
     -webkit-appearance: none;
     background: none;
     background-clip: content-box;
     border: 7px solid transparent;
-    border-radius: 50%;
     grid-area: input;
-    height: 1.5rem;
-    margin: 0;
-    width: 1.5rem;
-    z-index: 2;
 }
 
 .icon {
@@ -54,3 +58,7 @@
     box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
     outline: none;
 }
+
+.input_shimmer {
+    composes: input_base;
+}

package/lib/components/RadioGroup/radioGroup.js

@@ -26,6 +26,7 @@ const RadioGroup = props => {
         children ||
         items.map(({ value, ...item }) => (
             <Radio
+                data-cy=""
                 key={value}
                 disabled={disabled}
                 {...item}
@@ -40,7 +41,7 @@ const RadioGroup = props => {
 
     return (
         <Fragment>
-            <div className={classes.root}>
+            <div data-cy="RadioGroup-root" className={classes.root}>
                 <InformedRadioGroup {...rest} field={field} id={id}>
                     {options}
                 </InformedRadioGroup>

package/lib/components/Rating/__tests__/__snapshots__/rating.spec.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the correct tree 1`] = `
+<div>
+  <span>
+    0.1
+  </span>
+   
+  <span>
+    <svg
+      fill="none"
+      height={18}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={18}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polygon
+        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+      />
+    </svg>
+  </span>
+</div>
+`;

package/lib/components/Rating/__tests__/rating.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import Rating from '../rating';
+
+const props = {
+    rating: 3
+};
+
+test('renders the correct tree', () => {
+    const tree = TestRenderer.create(<Rating {...props} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

package/lib/components/Rating/index.js

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

package/lib/components/Rating/rating.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { string, number, shape } from 'prop-types';
+import { Star } from 'react-feather';
+import Icon from '../Icon';
+import { useStyle } from '../../classify';
+import defaultClasses from './rating.module.css';
+
+const Rating = props => {
+    const { rating } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.ratingAverage}>
+            <span className={classes.ratingValue}>
+                {((rating * 5) / 100).toFixed(1)}
+            </span>{' '}
+            <Icon size={18} src={Star} classes={{ root: classes.ratingIcon }} />
+        </div>
+    );
+};
+Rating.propTypes = {
+    classes: shape({
+        ratingAverage: string,
+        ratingValue: string,
+        ratingIcon: string
+    }),
+    rating: number.isRequired
+};
+export default Rating;

package/lib/components/Rating/rating.module.css

@@ -0,0 +1,21 @@
+.ratingAverage {
+    position: absolute;
+    bottom: 0.75rem;
+    right: 0.75rem;
+    display: grid;
+    grid-template-columns: auto auto;
+    padding: 0.5rem;
+    align-items: center;
+    column-gap: 0.5rem;
+    background-color: rgb(var(--venia-global-color-gray-darker));
+    color: rgb(var(--venia-global-color-gray-50));
+}
+
+.ratingValue {
+    font-weight: var(--venia-global-fontWeight-semibold);
+}
+
+.ratingIcon {
+    composes: root from '../Icon/icon.module.css';
+    --stroke: rgb(var(--venia-global-color-gray-50));
+}

package/lib/components/RichContent/richContent.module.css

@@ -4,138 +4,131 @@
 .root h4,
 .root h5,
 .root h6 {
-    word-break: break-word;
-    line-height: 1.25em;
-    margin-bottom: 0.5em;
-    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.25;
 }
 
 .root h1 {
-    font-size: 2rem;
-    margin-top: 0.9em;
-    font-weight: 300;
+    margin-top: 0.75rem;
+    font-size: 1.875rem;
+    font-weight: 400;
 }
+
 .root h2 {
-    font-size: 1.625rem;
+    margin-top: 1rem;
+    font-size: 1.5rem;
     font-weight: 400;
 }
+
 .root h3 {
-    font-size: 1.375rem;
+    margin-top: 1rem;
+    font-size: 1.25rem;
     font-weight: 400;
 }
+
 .root h4 {
+    margin-top: 1rem;
     font-size: 1.125rem;
     font-weight: 600;
 }
+
 .root h5 {
+    margin-top: 1rem;
     font-size: 1rem;
     font-weight: 600;
 }
+
 .root h6 {
+    margin-top: 1rem;
     font-size: 0.875rem;
     font-weight: 600;
 }
+
 .root p {
     margin-bottom: 1rem;
-    line-height: 1.65em;
+    line-height: 1.5;
 }
+
+.root p:last-child {
+    margin-bottom: 0;
+}
+
 .root img {
     max-width: 100%;
     margin: 1rem 0;
 }
+
 .root ol,
 .root ul {
-    margin-block-start: 1.2em;
-    margin-block-end: 1.2em;
-    padding-left: 2em;
+    padding-left: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
 }
+
 .root p + ol,
 .root p + ul {
-    margin-block-start: 0.2em;
+    margin-top: 0;
 }
+
 .root ol {
     list-style-type: decimal;
 }
+
 .root ul {
     list-style-type: disc;
 }
-.root ol li,
-.root ul li {
-    line-height: 1.65em;
-    padding: 1px 0.5rem;
-}
+
 .root a {
     text-decoration: underline;
 }
+
 .root blockquote {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
     margin: 1rem 0;
-    font-weight: 300;
+    font-size: 1.25rem;
     font-style: italic;
 }
+
 .root table {
     width: 100%;
-    margin: 1rem 0;
-    border-spacing: 0;
-    border-left: 1px solid rgb(var(--venia-global-color-border));
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-}
-.root table td,
-.root table th {
     text-align: left;
-    padding: 1rem;
-    font-size: 0.875rem;
-    line-height: 1.125em;
-    border-right: 1px solid rgb(var(--venia-global-color-border));
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-}
-.root table th {
-    background-color: rgb(var(--venia-global-color-gray));
-}
-.root :global .cms-content-important {
-    background: rgb(var(--venia-global-color-gray));
-    padding: 1.2rem 1rem;
-    font-size: 1.125rem;
-    border: 1px solid rgb(var(--venia-global-color-border));
 }
+
 .root pre {
+    padding: 1rem;
+    border: 1px solid rgb(var(--venia-global-color-border));
     background: rgb(var(--venia-global-color-gray));
+}
+
+.root :global .cms-content-important {
     padding: 1rem;
     border: 1px solid rgb(var(--venia-global-color-border));
+    background: rgb(var(--venia-global-color-gray));
+    font-size: 1.125rem;
 }
 
 @media only screen and (min-width: 769px) {
     .root h1 {
         font-size: 3rem;
-        margin-top: 0.75em;
-        line-height: 1.05em;
     }
+
     .root h2 {
         font-size: 2.25rem;
-        line-height: 1.25em;
     }
+
     .root h3 {
-        font-size: 1.75rem;
-        line-height: 1.25em;
+        font-size: 1.875rem;
     }
+
     .root h4 {
-        font-size: 1.375rem;
-        line-height: 1.25em;
-        font-weight: 400;
+        font-size: 1.5rem;
     }
+
     .root h5 {
         font-size: 1.125rem;
-        line-height: 1.22em;
-        margin-bottom: 0.75em;
     }
+
     .root h6 {
         font-size: 1rem;
-        line-height: 1.22em;
-        margin-bottom: 0.75em;
-    }
-    .root p {
-        margin-bottom: 1rem;
-        line-height: 1.5em;
     }
 }

package/lib/components/SearchBar/autocomplete.js

@@ -21,8 +21,10 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                     value
                 }
             }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
                 id
+                uid
                 name
                 small_image {
                     url

package/lib/components/SearchBar/searchBar.js

@@ -26,7 +26,7 @@ const SearchBar = React.forwardRef((props, ref) => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
 
     return (
-        <div className={rootClassName} ref={ref}>
+        <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
             <div ref={containerRef} className={classes.container}>
                 <Form
                     autoComplete="off"

package/lib/components/SearchBar/searchBar.module.css

@@ -1,4 +1,5 @@
 .root {
+    composes: justify-self-center from global;
     align-items: center;
     display: none;
     justify-items: center;

package/lib/components/SearchBar/searchField.js

@@ -23,6 +23,7 @@ const SearchField = props => {
             after={resetButton}
             before={searchIcon}
             field="search_query"
+            data-cy="SearchField-textInput"
             onFocus={onFocus}
             onValueChange={onChange}
             forwardedRef={inputRef}

package/lib/components/SearchBar/suggestedCategory.js

@@ -24,7 +24,7 @@ const SuggestedCategory = props => {
             <span className={classes.label}>
                 <FormattedMessage
                     id={'searchBar.label'}
-                    defaultMessage={' in category'}
+                    defaultMessage={' in {label}'}
                     values={{
                         label
                     }}

package/lib/components/SearchBar/suggestedProduct.js

@@ -26,7 +26,12 @@ const SuggestedProduct = props => {
     ]);
 
     return (
-        <Link className={classes.root} to={uri} onClick={handleClick}>
+        <Link
+            className={classes.root}
+            to={uri}
+            onClick={handleClick}
+            data-cy="SuggestedProduct-root"
+        >
             <Image
                 alt={name}
                 classes={{ image: classes.thumbnail, root: classes.image }}