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

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

@@ -55,6 +55,17 @@ exports[`Search Page Component error view does not render when data is present 1
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -87,6 +98,17 @@ exports[`Search Page Component error view renders when data is not present and n
       />
     </div>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -145,6 +167,17 @@ exports[`Search Page Component filter button/modal does not render if there are
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -226,6 +259,17 @@ exports[`Search Page Component filter button/modal renders when there are filter
       }
     />
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -284,6 +328,17 @@ exports[`Search Page Component loading indicator does not render when data is pr
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -343,6 +398,17 @@ exports[`Search Page Component loading indicator renders when data is not presen
       className="pagination"
     />
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -385,6 +451,17 @@ exports[`Search Page Component search results does not render if data returned h
       />
     </div>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -418,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 {
@@ -465,6 +552,17 @@ exports[`Search Page Component search results heading renders a generic message
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -485,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 {
@@ -505,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 {
@@ -552,6 +660,17 @@ exports[`Search Page Component search results heading renders a specific message
       />
     </section>
   </div>
+  <Title>
+    Search Term - Venia Search
+  </Title>
+  <Meta
+    content="Search Term - Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Search Term - Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -610,6 +729,17 @@ exports[`Search Page Component search results renders if data has items 1`] = `
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -652,6 +782,17 @@ exports[`Search Page Component sort button/container does not render if total co
       />
     </div>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -685,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 {
@@ -732,6 +883,17 @@ exports[`Search Page Component sort button/container renders when total count >
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -774,6 +936,17 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
       />
     </div>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;
 
@@ -807,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 {
@@ -854,5 +1037,16 @@ exports[`Search Page Component total count renders results from data 1`] = `
       />
     </section>
   </div>
+  <Title>
+    Venia Search
+  </Title>
+  <Meta
+    content="Venia Search"
+    name="title"
+  />
+  <Meta
+    content="Venia Search"
+    name="description"
+  />
 </article>
 `;

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

@@ -37,7 +37,20 @@ jest.mock('../../FilterSidebar', () => ({
     FilterSidebarShimmer: 'FilterSidebarShimmer'
 }));
 
+jest.mock('../../../components/Head', () => ({
+    Title: 'Title',
+    Meta: 'Meta'
+}));
+
 const talonProps = {
+    availableSortMethods: [
+        {
+            id: 'sortItem.positionAsc',
+            text: 'Position Asc',
+            attribute: 'position',
+            sortDirection: 'ASC'
+        }
+    ],
     data: {
         products: {
             items: [{}]

package/lib/components/SearchPage/searchPage.js

@@ -17,6 +17,7 @@ import FilterModalOpenButton, {
 } from '../FilterModalOpenButton';
 import { FilterSidebarShimmer } from '../FilterSidebar';
 import Shimmer from '../Shimmer';
+import { Meta, Title } from '../Head';
 
 const FilterModal = React.lazy(() => import('../FilterModal'));
 const FilterSidebar = React.lazy(() => import('../FilterSidebar'));
@@ -25,6 +26,7 @@ const SearchPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useSearchPage();
     const {
+        availableSortMethods,
         data,
         error,
         filters,
@@ -70,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!'}
@@ -108,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 ? (
@@ -128,7 +130,12 @@ const SearchPage = props => {
     ) : null;
 
     const maybeSortButton = shouldShowSortButtons ? (
-        <ProductSort sortProps={sortProps} />
+        availableSortMethods && (
+            <ProductSort
+                sortProps={sortProps}
+                availableSortMethods={availableSortMethods}
+            />
+        )
     ) : shouldShowSortShimmer ? (
         <ProductSortShimmer />
     ) : null;
@@ -151,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
@@ -166,7 +173,7 @@ const SearchPage = props => {
                 {formatMessage(
                     {
                         id: 'searchPage.totalPages',
-                        defaultMessage: `items`
+                        defaultMessage: '{totalCount} items'
                     },
                     { totalCount: productsCount }
                 )}
@@ -175,8 +182,12 @@ const SearchPage = props => {
             <Shimmer width={5} />
         ) : null;
 
+    const metaLabel = [searchTerm, `${STORE_NAME} Search`]
+        .filter(Boolean)
+        .join(' - ');
+
     return (
-        <article className={classes.root}>
+        <article className={classes.root} data-cy="SearchPage-root">
             <div className={classes.sidebar}>
                 <Suspense fallback={<FilterSidebarShimmer />}>
                     {maybeSidebar}
@@ -197,6 +208,9 @@ const SearchPage = props => {
                 {content}
                 <Suspense fallback={null}>{maybeFilterModal}</Suspense>
             </div>
+            <Title>{metaLabel}</Title>
+            <Meta name="title" content={metaLabel} />
+            <Meta name="description" content={metaLabel} />
         </article>
     );
 };

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 {

package/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap

@@ -257,3 +257,129 @@ exports[`renders correctly 1`] = `
   </form>
 </div>
 `;
+
+exports[`renders prefilled form with initial values 1`] = `
+<div
+  className="root"
+>
+  <span
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Sign-in to Your Account"
+      id="signIn.titleText"
+    />
+  </span>
+  <FormError
+    errors={
+      Array [
+        null,
+        null,
+      ]
+    }
+  />
+  <form
+    className="form"
+    onKeyDown={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+  >
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+      >
+        Email address
+      </label>
+      <span
+        className="root"
+        style={
+          Object {
+            "--iconsAfter": 0,
+            "--iconsBefore": 0,
+          }
+        }
+      >
+        <span
+          className="input"
+        >
+          <input
+            autoComplete="email"
+            className="input"
+            id="email"
+            name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value="test@mail.com"
+          />
+        </span>
+        <span
+          className="before"
+        />
+        <span
+          className="after"
+        />
+      </span>
+      <p
+        className="root"
+      />
+    </div>
+    <div
+      className="root"
+    >
+      <label
+        className="label"
+      >
+        Password
+      </label>
+      <span
+        className="root"
+        style={
+          Object {
+            "--iconsAfter": 1,
+            "--iconsBefore": 0,
+          }
+        }
+      >
+        <span
+          className="input"
+        >
+          <input
+            autoComplete="current-password"
+            className="input"
+            id="password"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="password"
+            value=""
+          />
+        </span>
+        <span
+          className="before"
+        />
+        <span
+          className="after"
+        >
+          <i />
+        </span>
+      </span>
+      <p
+        className="root"
+      />
+    </div>
+    <div
+      className="forgotPasswordButtonContainer"
+    >
+      <i />
+    </div>
+    <div
+      className="buttonsContainer"
+    >
+      <i />
+      <i />
+    </div>
+  </form>
+</div>
+`;

package/lib/components/SignIn/__tests__/signIn.spec.js

@@ -91,6 +91,17 @@ test('renders the loading indicator when form is submitting', () => {
     });
 });
 
+test('renders prefilled form with initial values', () => {
+    const testProps = {
+        ...props,
+        initialValues: {
+            email: 'test@mail.com'
+        }
+    };
+    const component = createTestInstance(<SignIn {...testProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
 test('displays an error message if there is a sign in error', () => {
     useMutation.mockReturnValueOnce([
         jest.fn(),

package/lib/components/SignIn/signIn.gql.js

@@ -5,10 +5,12 @@ export const GET_CART_DETAILS_QUERY = gql`
     query GetCartDetailsAfterSignIn($cartId: String!) {
         cart(cart_id: $cartId) {
             id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     name
                     sku
                     small_image {
@@ -24,11 +26,13 @@ export const GET_CART_DETAILS_QUERY = gql`
                     }
                 }
                 quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     configurable_options {
-                        id
+                        configurable_product_option_uid
                         option_label
-                        value_id
+                        configurable_product_option_value_uid
                         value_label
                     }
                 }