@magento/venia-ui 10.0.0 → 10.1.0-alpha.1

package/i18n/en_US.json

@@ -498,5 +498,7 @@
     "global.cityRequired":"City Required",
     "global.stateRequired":"State Required",
     "Form.postalCode":"ZIP / Postal Code Required",
-    "Form.phonenumber":"Phone Number Required"
+    "Form.phonenumber":"Phone Number Required",
+    "ProductOptions.productSize":"Fashion size {label}",
+    "productOptions.selectedSize":"Fashion size {label} button selected"
 }

package/lib/components/CartPage/PriceSummary/discountSummary.js

@@ -47,31 +47,35 @@ const DiscountSummary = props => {
             >
                 <hr className={classes.individualDiscountSeparator} />
                 {discountData.map(discount => {
-                    return (
-                        <li
-                            className={classes.individualDiscountsListLineItem}
-                            key={discount.label}
-                        >
-                            <span
-                                className={classes.lineItemLabel}
-                                data-cy="DiscountSummary-IndividualDiscount-Label"
+                    if (discount.label != 'Gift Cards') {
+                        return (
+                            <li
+                                className={
+                                    classes.individualDiscountsListLineItem
+                                }
+                                key={discount.label}
                             >
-                                <span data-cy="DiscountSummary-IndividualDiscount-DiscountLabel">
-                                    {discount.label}
+                                <span
+                                    className={classes.lineItemLabel}
+                                    data-cy="DiscountSummary-IndividualDiscount-Label"
+                                >
+                                    <span data-cy="DiscountSummary-IndividualDiscount-DiscountLabel">
+                                        {discount.label}
+                                    </span>
                                 </span>
-                            </span>
-                            <span
-                                data-cy="DiscountSummary-IndividualDiscount-DiscountValue"
-                                className={classes.price}
-                            >
-                                {MINUS_SYMBOL}
-                                <Price
-                                    value={discount.amount.value}
-                                    currencyCode={discount.amount.currency}
-                                />
-                            </span>
-                        </li>
-                    );
+                                <span
+                                    data-cy="DiscountSummary-IndividualDiscount-DiscountValue"
+                                    className={classes.price}
+                                >
+                                    {MINUS_SYMBOL}
+                                    <Price
+                                        value={discount.amount.value}
+                                        currencyCode={discount.amount.currency}
+                                    />
+                                </span>
+                            </li>
+                        );
+                    }
                 })}
                 <hr className={classes.individualDiscountSeparator} />
             </ul>

package/lib/components/CreateAccount/createAccount.js

@@ -32,6 +32,7 @@ const CreateAccount = props => {
         handleCancel,
         handleSubmit,
         handleEnterKeyPress,
+        handleCancelKeyPress,
         isDisabled,
         initialValues,
         recaptchaWidgetProps
@@ -47,6 +48,7 @@ const CreateAccount = props => {
             type="button"
             priority="low"
             onClick={handleCancel}
+            onKeyDown={handleCancelKeyPress}
         >
             <FormattedMessage
                 id={'createAccount.cancelText'}

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -7,7 +7,13 @@ import { useStyle } from '../../../classify';
 import defaultClasses from './filterDefault.module.css';
 
 const FilterDefault = props => {
-    const { classes: propsClasses, isSelected, item, ...restProps } = props;
+    const {
+        classes: propsClasses,
+        isSelected,
+        item,
+        onMouseDown,
+        ...restProps
+    } = props;
 
     const { label, value_index } = item || {};
     const classes = useStyle(defaultClasses, propsClasses);
@@ -41,6 +47,7 @@ const FilterDefault = props => {
             label={label}
             ariaLabel={ariaLabel}
             data-cy="FilterDefault-checkbox"
+            onClick={onMouseDown}
             {...restProps}
         />
     );

package/lib/components/ProductOptions/__tests__/__snapshots__/tile.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
+  aria-label="Fashion size red"
   className="root_focused"
   onClick={[Function]}
   title="red"
@@ -15,6 +16,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 
 exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
 <button
+  aria-label="Fashion size red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -29,6 +31,7 @@ exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`
 
 exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
 <button
+  aria-label="Fashion size red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -43,6 +46,7 @@ exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] =
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
+  aria-label="Fashion size red button selected"
   className="root_selected"
   onClick={[Function]}
   title="red"
@@ -56,6 +60,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 
 exports[`renders a Tile correctly 1`] = `
 <button
+  aria-label="Fashion size red"
   className="root"
   onClick={[Function]}
   title="red"

package/lib/components/ProductOptions/__tests__/__snapshots__/tileList.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders TileList component correctly 1`] = `
   className="root"
 >
   <button
+    aria-label="Fashion size foo"
     className="root"
     onClick={[Function]}
     title="foo"

package/lib/components/ProductOptions/tile.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool, func, number, oneOfType, shape, string } from 'prop-types';
-
+import { useIntl } from 'react-intl';
 import { useStyle } from '../../classify';
 import defaultClasses from './tile.module.css';
 import { useTile } from '@magento/peregrine/lib/talons/ProductOptions/useTile';
@@ -43,6 +43,24 @@ const Tile = props => {
                 isEverythingOutOfStock
             )
         ];
+    const { formatMessage } = useIntl();
+    const ariaLabelView = formatMessage(
+        {
+            id: 'ProductOptions.productSize',
+            defaultMessage: 'Fashion size {label}'
+        },
+        { label: label }
+    );
+
+    const ariaLabelSelected = formatMessage(
+        {
+            id: 'productOptions.selectedSize',
+            defaultMessage: 'Fashion size {label} button Selected'
+        },
+        { label: label }
+    );
+
+    const result = isSelected ? ariaLabelSelected : ariaLabelView;
 
     return (
         <button
@@ -51,6 +69,7 @@ const Tile = props => {
             title={label}
             type="button"
             data-cy="Tile-button"
+            aria-label={result}
             disabled={isEverythingOutOfStock || isOptionOutOfStock}
         >
             <span>{label}</span>

package/lib/components/SignIn/signIn.js

@@ -37,6 +37,7 @@ const SignIn = props => {
         errors,
         handleCreateAccount,
         handleEnterKeyPress,
+        signinHandleEnterKeyPress,
         handleForgotPassword,
         handleSubmit,
         isBusy,
@@ -119,6 +120,7 @@ const SignIn = props => {
                     <Button
                         priority="high"
                         type="submit"
+                        onKeyDown={signinHandleEnterKeyPress}
                         data-cy="SignInButton-root_highPriority"
                         disabled={isBusy}
                     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "10.0.0",
+  "version": "10.1.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.2",
-    "@magento/peregrine": "~13.0.0",
+    "@magento/peregrine": "13.0.1-alpha.1",
     "@magento/pwa-buildpack": "~11.4.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.33.3",