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

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/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 }}

package/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap

@@ -495,6 +495,16 @@ exports[`Search Page Component search results heading renders a generic message
         className="headerButtons"
       >
         <ProductSort
+          availableSortMethods={
+            Array [
+              Object {
+                "attribute": "position",
+                "id": "sortItem.positionAsc",
+                "sortDirection": "ASC",
+                "text": "Position Asc",
+              },
+            ]
+          }
           sortProps={
             Array [
               Object {
@@ -573,7 +583,7 @@ exports[`Search Page Component search results heading renders a specific message
         className="searchInfo"
       >
         <mock-FormattedMessage
-          defaultMessage="Showing results:"
+          defaultMessage="Showing results for <highlight>{term}</highlight>{category, select, null {} other { in <highlight>{category}</highlight>}}:"
           id="searchPage.searchTerm"
           values={
             Object {
@@ -593,6 +603,16 @@ exports[`Search Page Component search results heading renders a specific message
         className="headerButtons"
       >
         <ProductSort
+          availableSortMethods={
+            Array [
+              Object {
+                "attribute": "position",
+                "id": "sortItem.positionAsc",
+                "sortDirection": "ASC",
+                "text": "Position Asc",
+              },
+            ]
+          }
           sortProps={
             Array [
               Object {
@@ -806,6 +826,16 @@ exports[`Search Page Component sort button/container renders when total count >
         className="headerButtons"
       >
         <ProductSort
+          availableSortMethods={
+            Array [
+              Object {
+                "attribute": "position",
+                "id": "sortItem.positionAsc",
+                "sortDirection": "ASC",
+                "text": "Position Asc",
+              },
+            ]
+          }
           sortProps={
             Array [
               Object {
@@ -950,6 +980,16 @@ exports[`Search Page Component total count renders results from data 1`] = `
         className="headerButtons"
       >
         <ProductSort
+          availableSortMethods={
+            Array [
+              Object {
+                "attribute": "position",
+                "id": "sortItem.positionAsc",
+                "sortDirection": "ASC",
+                "text": "Position Asc",
+              },
+            ]
+          }
           sortProps={
             Array [
               Object {

package/lib/components/SearchPage/__tests__/searchPage.spec.js

@@ -43,6 +43,14 @@ jest.mock('../../../components/Head', () => ({
 }));
 
 const talonProps = {
+    availableSortMethods: [
+        {
+            id: 'sortItem.positionAsc',
+            text: 'Position Asc',
+            attribute: 'position',
+            sortDirection: 'ASC'
+        }
+    ],
     data: {
         products: {
             items: [{}]

package/lib/components/SearchPage/searchPage.js

@@ -26,6 +26,7 @@ const SearchPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useSearchPage();
     const {
+        availableSortMethods,
         data,
         error,
         filters,
@@ -71,7 +72,7 @@ const SearchPage = props => {
 
         if (data.products.items.length === 0) {
             return (
-                <div className={classes.noResult}>
+                <div className={classes.noResult} data-cy="SearchPage-noResult">
                     <FormattedMessage
                         id={'searchPage.noResultImportant'}
                         defaultMessage={'No results found!'}
@@ -109,7 +110,7 @@ const SearchPage = props => {
     const shouldShowFilterShimmer = filters === null;
 
     // If there are no products we can hide the sort button.
-    const shouldShowSortButtons = productsCount;
+    const shouldShowSortButtons = productsCount && availableSortMethods;
     const shouldShowSortShimmer = !productsCount && loading;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
@@ -129,7 +130,12 @@ const SearchPage = props => {
     ) : null;
 
     const maybeSortButton = shouldShowSortButtons ? (
-        <ProductSort sortProps={sortProps} />
+        availableSortMethods && (
+            <ProductSort
+                sortProps={sortProps}
+                availableSortMethods={availableSortMethods}
+            />
+        )
     ) : shouldShowSortShimmer ? (
         <ProductSortShimmer />
     ) : null;
@@ -152,7 +158,7 @@ const SearchPage = props => {
                 category: searchCategory,
                 term: searchTerm
             }}
-            defaultMessage={'Showing results:'}
+            defaultMessage="Showing results for <highlight>{term}</highlight>{category, select, null {} other { in <highlight>{category}</highlight>}}:"
         />
     ) : (
         <FormattedMessage
@@ -167,7 +173,7 @@ const SearchPage = props => {
                 {formatMessage(
                     {
                         id: 'searchPage.totalPages',
-                        defaultMessage: `items`
+                        defaultMessage: '{totalCount} items'
                     },
                     { totalCount: productsCount }
                 )}
@@ -181,7 +187,7 @@ const SearchPage = props => {
         .join(' - ');
 
     return (
-        <article className={classes.root}>
+        <article className={classes.root} data-cy="SearchPage-root">
             <div className={classes.sidebar}>
                 <Suspense fallback={<FilterSidebarShimmer />}>
                     {maybeSidebar}

package/lib/components/Shimmer/shimmer.js

@@ -4,6 +4,17 @@ import { node, number, oneOf, oneOfType, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import defaultClasses from './shimmer.module.css';
 
+/**
+ * @kind functional component
+ *
+ * @param {Object} classes Styles to apply to the `root` of the Shimmer. Available classes are `root` and `root_[TYPE]`.
+ * @param {string|number} borderRadius Border radius for the shimmer.
+ * @param {string|number} height Sets the height of the Shimmer. Numbers are in `rem` units. Strings are used directly (Example: '100px').
+ * @param {string|number} width Sets the width of the Shimmer. Numbers are in `rem` units. Strings are used directly (Example: '100px').
+ * @param {Object} style CSS styles to apply to the Shimmer.
+ * @param {'rectangle'|'button'|'checkbox'|'radio'|'textArea'|'textInput'} type The base element shape to apply to the Shimmer.
+ * @param {node} children Children to output within the Shimmer. Useful for setting image placeholders.
+ */
 const Shimmer = props => {
     const {
         classes: propClasses,
@@ -44,8 +55,6 @@ const Shimmer = props => {
 };
 
 /**
- * @typedef props
- *
  * @property {Object} classes is an object containing the class names for the
  * Shimmer component.
  * @property {string} classes.root is the class for the container

package/lib/components/Shimmer/shimmer.module.css

@@ -42,28 +42,24 @@
 }
 
 .root_checkbox {
-    composes: input from '../Checkbox/checkbox.module.css';
+    composes: input_shimmer from '../Checkbox/checkbox.module.css';
     composes: root;
-    border: none;
 }
 
 .root_radio {
-    composes: input from '../RadioGroup/radio.module.css';
+    composes: input_shimmer from '../RadioGroup/radio.module.css';
     composes: root;
     border: none;
 }
 
 .root_textArea {
-    composes: input from '../TextArea/textArea.module.css';
+    composes: input_shimmer from '../TextArea/textArea.module.css';
     composes: root;
-    min-height: 6.75rem;
-    border: none;
 }
 
 .root_textInput {
-    composes: input from '../TextInput/textInput.module.css';
+    composes: input_shimmer from '../TextInput/textInput.module.css';
     composes: root;
-    border: none;
 }
 
 @-webkit-keyframes shimmerAnimation {