@magento/venia-ui 9.3.0-beta.1 → 9.4.0-beta.1

package/lib/components/ButtonGroup/button.module.css

@@ -1,53 +1,55 @@
 .root {
     composes: root from '../clickable.module.css';
-    background: none white;
-    border: 1px solid rgb(var(--venia-global-color-gray-dark));
-    color: rgb(var(--venia-global-color-text));
-    font-size: 0.75rem;
-    font-weight: 600;
-    height: 2rem;
-    margin-left: -1px;
-    min-width: 6rem;
+
+    composes: bg-transparent from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: h-[2rem] from global;
+    composes: -ml-px from global;
+    composes: min-w-[6rem] from global;
+    composes: text-colorDefault from global;
+    composes: text-xs from global;
+    composes: z-button from global;
     transition-duration: 384ms;
     transition-property: border-color, color;
     transition-timing-function: var(--venia-global-anim-standard);
-    z-index: 1;
-}
 
-.root:hover {
-    border-color: rgb(var(--venia-global-color-text));
-    z-index: 2;
+    composes: disabled_border-subtle from global;
+    composes: disabled_text-subtle from global;
+
+    composes: hover_z-buttonHover from global;
+    composes: hover_border-strong from global;
+
+    composes: focus_border-brand-base from global;
+    composes: focus_outline-none from global;
+    composes: focus_text-teal from global;
+    composes: focus_z-buttonFocus from global;
 }
 
 .root:focus {
-    border-color: rgb(var(--venia-global-color-teal));
     box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
         0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
-    color: rgb(var(--venia-global-color-teal));
-    outline: none;
     transition-duration: 128ms;
-    z-index: 3;
-}
-
-.root:disabled {
-    border-color: rgb(var(--venia-global-color-gray-dark));
-    color: rgb(var(--venia-global-color-gray-dark));
 }
 
+/* TODO @TW: cannot compose */
 .root:nth-of-type(1) {
     border-radius: 0.25rem 0 0 0.25rem;
     margin-left: 0;
 }
 
+/* TODO @TW: cannot compose */
 .root:nth-last-of-type(1) {
     border-radius: 0 0.25rem 0.25rem 0;
 }
 
 .content {
-    align-items: center;
-    display: inline-grid;
-    gap: 0.5rem;
-    grid-auto-flow: column;
-    justify-content: center;
-    justify-items: center;
+    composes: gap-2xs from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
 }

package/lib/components/ButtonGroup/buttonGroup.module.css

@@ -1,6 +1,6 @@
 .root {
-    display: inline-grid;
-    grid-auto-flow: column;
-    justify-content: start;
-    position: relative;
+    composes: inline-grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-start from global;
+    composes: relative from global;
 }

package/lib/components/CartPage/GiftCards/giftCard.module.css

@@ -1,10 +1,10 @@
 .card_info {
-    display: grid;
-    row-gap: 0.5rem;
+    composes: grid from global;
+    composes: gap-y-2xs from global;
 }
 
 .balance {
-    font-size: 0.875rem;
+    composes: text-sm from global;
 }
 
 .code {

package/lib/components/CartPage/GiftCards/giftCards.module.css

@@ -1,60 +1,81 @@
 .root {
-    display: grid;
-    gap: 2em;
+    composes: grid from global;
+    composes: gap-md from global;
 }
 
 .errorText {
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
+    composes: leading-normal from global;
+    composes: text-error from global;
 }
 
 .balance {
-    font-size: 0.875rem;
-    padding-top: 0.375rem;
-    align-items: start;
-    display: grid;
+    composes: grid from global;
+    composes: italic from global;
+    composes: items-start from global;
+    composes: pt-1.5 from global;
+    composes: text-sm from global;
     grid-template-columns: max-content 1fr;
-    font-style: italic;
 }
 
 .card {
-    align-items: start;
-    display: grid;
-    gap: 1.5rem;
-    grid-template-columns: 1fr auto;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: items-start from global;
     grid-template-areas:
-        'card_entry apply_button'
-        'check_balance_button check_balance_button';
+        'card_entry'
+        'check_balance_button'
+        'apply_button';
+
+    composes: lg_grid-cols-autoLast from global;
+}
+
+@media (min-width: 960px) {
+    .card {
+        grid-template-areas:
+            'card_entry apply_button'
+            'check_balance_button check_balance_button';
+    }
 }
 
 .card_input_container {
 }
 
+/* TODO @TW: cannot compose */
 .card_input_container_error input {
+    /* composes: border-error from global; */
     border-color: rgb(var(--venia-global-color-red-400));
 }
 
+/* TODO @TW: cannot compose */
 .card_input_container_error input:focus {
+    /* composes: border-gray-600 from global; */
     border-color: rgb(var(--venia-global-color-gray-600));
 }
 
+/* TODO @TW: cannot compose */
 .card_input_container_error p {
+    /* composes: text-error from global; */
     color: rgb(var(--venia-global-color-error));
-    font-weight: var(--venia-global-fontWeight-semibold);
+    /* composes: font-semibold from global; */
+    font-weight: 600;
 }
 
 .cards_container {
-    align-items: baseline;
-    display: grid;
-    gap: 1em;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: items-baseline from global;
+    composes: justify-start from global;
     grid-template-columns: max-content auto;
-    justify-content: start;
 }
 
 .check_balance_button {
     composes: root from '../../LinkButton/linkButton.module.css';
+
+    composes: justify-self-center from global;
     grid-area: check_balance_button;
-    justify-self: start;
+
+    composes: lg_justify-self-start from global;
 }
 
 .entry {
@@ -69,26 +90,8 @@
 
 .applyLabel {
     composes: label from '../../Field/field.module.css';
-}
-
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .card {
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            'card_entry'
-            'check_balance_button'
-            'apply_button';
-    }
 
-    .check_balance_button {
-        justify-self: center;
-    }
+    composes: hidden from global;
 
-    .applyLabel {
-        display: none;
-    }
+    composes: lg_block from global;
 }

package/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css

@@ -1,43 +1,51 @@
 /* Styles for "add" view. */
 .entryForm,
 .entryFormError {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-column-gap: 1.5rem;
+    composes: gap-x-sm from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }
 
+/* on mobile... */
+@media (max-width: 959px) {
+    .entryForm,
+    .entryFormError {
+        /* switch to rows. */
+        grid-template-columns: unset;
+        grid-template-rows: 1fr 1fr;
+    }
+}
+
+/* TODO @TW: cannot compose */
 .entryFormError input {
+    /* composes: border-error from global; */
     border-color: rgb(var(--venia-global-color-red-400));
 }
 
+/* TODO @TW: cannot compose */
 .entryFormError input:focus {
+    /* composes: border-gray-600 from global; */
     border-color: rgb(var(--venia-global-color-gray-600));
 }
 
+/* TODO @TW: cannot compose */
 .entryFormError p {
+    /* composes: text-error from global; */
     color: rgb(var(--venia-global-color-error));
-    font-weight: var(--venia-global-fontWeight-semibold);
+    /* composes: font-semibold from global; */
+    font-weight: 600;
 }
 
 .errorContainer {
+    composes: leading-normal from global;
     /* Duplicate the left/right/bottom padding on the accordion section */
-    padding-top: 1.5rem;
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
-}
-
-/* on mobile... */
-@media (max-width: 960px) {
-    .entryForm,
-    .entryFormError {
-        /* switch to rows. */
-        grid-template-columns: unset;
-        grid-template-rows: 1fr 1fr;
-    }
+    composes: pt-sm from global;
+    composes: text-error from global;
 }
 
 /* Styles for "removal" view. */
 .removeButton {
     composes: root from '../../../LinkButton/linkButton.module.css';
-    margin-left: 1rem;
+
+    composes: ml-xs from global;
 }

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingRadios.spec.js.snap

@@ -10,6 +10,7 @@ exports[`automatically selects first option when none selected 1`] = `
     className="root"
   >
     <label
+      aria-label=""
       className="root"
       htmlFor="method--usps|priority"
     >
@@ -62,6 +63,7 @@ exports[`automatically selects first option when none selected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       className="root"
       htmlFor="method--fedex|nextday"
     >
@@ -136,6 +138,7 @@ exports[`renders list of shipping methods 1`] = `
     className="root"
   >
     <label
+      aria-label=""
       className="root"
       htmlFor="method--usps|priority"
     >
@@ -188,6 +191,7 @@ exports[`renders list of shipping methods 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       className="root"
       htmlFor="method--fedex|nextday"
     >

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css

@@ -1,6 +1,7 @@
 .root {
-    display: grid;
-    gap: 0.9375rem 1.5rem;
+    composes: gap-x-xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
         'country country'
@@ -9,7 +10,7 @@
 }
 
 .formTitle {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .zip {
@@ -18,10 +19,11 @@
 
 .submit {
     composes: root_normalPriority from '../../../Button/button.module.css';
-    justify-self: flex-start;
+
+    composes: justify-self-start from global;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 639px) {
     .root {
         /* Only one column in mobile view. */
         grid-template-columns: 100%;
@@ -30,6 +32,5 @@
             'state'
             'zip'
             'submit';
-        padding-right: unset;
     }
 }

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.module.css

@@ -1,15 +1,15 @@
 .root {
-    display: grid;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
 }
 
 .message {
-    font-size: 0.875rem;
-    line-height: 1.5rem;
+    composes: leading-normal from global;
+    composes: text-sm from global;
 }
 
 .prompt {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .shipping_methods {
@@ -18,25 +18,16 @@
 
 .shipping_methods_hidden {
     composes: shipping_methods;
-    display: none;
+    composes: hidden from global;
 }
 
 .mask {
-    opacity: 0.5;
-    pointer-events: none;
+    composes: opacity-50 from global;
+    composes: pointer-events-none from global;
 }
 
 .estimateButton {
     composes: root_normalPriority from '../../../Button/button.module.css';
-    justify-self: start;
-}
-
-/*
- * Mobile-specific styles.
- */
 
-@media (max-width: 640px) {
-    .root {
-        padding-right: unset;
-    }
+    composes: justify-self-start from global;
 }

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadio.module.css

@@ -1,3 +1,3 @@
 .price {
-    font-weight: 600;
+    composes: font-semibold from global;
 }

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.module.css

@@ -1,23 +1,10 @@
 .radioContents {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: gap-2xs from global;
 }
 
 .radioRoot {
-    /* We explicitly want one radio item per row. */
-    composes: root from '../../../RadioGroup/radioGroup.module.css';
-    grid-template-columns: auto;
-}
-
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 640px) {
-    .radio_contents {
-        display: grid;
-        grid-template-columns: 100%;
-        gap: 0.5rem;
-    }
+    composes: gap-2xs from global;
+    composes: grid from global;
 }

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftCardSection.ee.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftCardSection EE renders 1`] = `
+exports[`#GiftCardSection AC renders 1`] = `
 <mock-Section
   id="gift_card"
   title="Apply Gift Card"

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftOptionsSection.ce.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftOptionsSection CE renders 1`] = `null`;
+exports[`#GiftOptionsSection MOS renders 1`] = `null`;

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftOptionsSection.ee.spec.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftOptionsSection EE renders loading 1`] = `null`;
+exports[`#GiftOptionsSection AC renders loading 1`] = `null`;
 
-exports[`#GiftOptionsSection EE renders not loading and not visible 1`] = `null`;
+exports[`#GiftOptionsSection AC renders not loading and not visible 1`] = `null`;
 
-exports[`#GiftOptionsSection EE renders not loading and visible 1`] = `
+exports[`#GiftOptionsSection AC renders not loading and visible 1`] = `
 <mock-Section
   id="gift_options"
   title="See Gift Options"

package/lib/components/CartPage/PriceAdjustments/__tests__/giftCardSection.ce.spec.js

@@ -8,7 +8,7 @@ const Component = () => {
     return <GiftCardSection />;
 };
 
-describe('#GiftCardSection CE', () => {
+describe('#GiftCardSection MOS', () => {
     it('renders', () => {
         const tree = createTestInstance(<Component />);
 

package/lib/components/CartPage/PriceAdjustments/__tests__/giftCardSection.ee.spec.js

@@ -23,7 +23,7 @@ const givenDefaultValues = () => {
     };
 };
 
-describe('#GiftCardSection EE', () => {
+describe('#GiftCardSection AC', () => {
     beforeEach(() => {
         givenDefaultValues();
     });

package/lib/components/CartPage/PriceAdjustments/__tests__/giftOptionsSection.ce.spec.js

@@ -8,7 +8,7 @@ const Component = () => {
     return <GiftOptionsSection />;
 };
 
-describe('#GiftOptionsSection CE', () => {
+describe('#GiftOptionsSection MOS', () => {
     it('renders', () => {
         const tree = createTestInstance(<Component />);
 

package/lib/components/CartPage/PriceAdjustments/__tests__/giftOptionsSection.ee.spec.js

@@ -18,7 +18,7 @@ const Component = () => {
     return <GiftOptionsSection />;
 };
 
-describe('#GiftOptionsSection EE', () => {
+describe('#GiftOptionsSection AC', () => {
     it('renders loading', () => {
         useGiftOptionsSection.mockReturnValueOnce({
             giftOptionsConfigData: {},

package/lib/components/CartPage/PriceAdjustments/giftCardSection.ce.js

@@ -1,6 +1,6 @@
 /**
- * Gift Card support is an EE-only feature.
- * Here in CE, don't render the Accordion section at all.
+ * Gift Card support is an AC-only feature.
+ * Here in MOS, don't render the Accordion section at all.
  */
 export default () => {
     return null;

package/lib/components/CartPage/PriceAdjustments/giftOptionsSection.ce.js

@@ -1,6 +1,6 @@
 /**
- * Gift Options support is an EE-only feature for now.
- * Here in CE, don't render the Accordion section at all.
+ * Gift Options support is an AC-only feature for now.
+ * Here in MOS, don't render the Accordion section at all.
  */
 export default () => {
     return null;

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/giftCardSummary.ce.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftCardSummary CE renders 1`] = `null`;
+exports[`#GiftCardSummary MOS renders 1`] = `null`;

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/giftCardSummary.ee.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftCardSummary EE renders accumulated gift card value 1`] = `
+exports[`#GiftCardSummary AC renders accumulated gift card value 1`] = `
 Array [
   <span
     className="lineItemLabel"
@@ -30,7 +30,7 @@ Array [
 ]
 `;
 
-exports[`#GiftCardSummary EE renders gift card summary line item correctly 1`] = `
+exports[`#GiftCardSummary AC renders gift card summary line item correctly 1`] = `
 Array [
   <span
     className="lineItemLabel"
@@ -60,6 +60,6 @@ Array [
 ]
 `;
 
-exports[`#GiftCardSummary EE renders nothing if gift card data is empty 1`] = `null`;
+exports[`#GiftCardSummary AC renders nothing if gift card data is empty 1`] = `null`;
 
-exports[`#GiftCardSummary EE renders nothing if gift card value is "0" 1`] = `null`;
+exports[`#GiftCardSummary AC renders nothing if gift card value is "0" 1`] = `null`;

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/giftOptionsSummary.ce.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftOptionsSummary CE renders 1`] = `null`;
+exports[`#GiftOptionsSummary MOS renders 1`] = `null`;

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/giftOptionsSummary.ee.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#GiftOptionsSummary EE renders accumulated gift options value 1`] = `
+exports[`#GiftOptionsSummary AC renders accumulated gift options value 1`] = `
 Array [
   <span
     className="lineItemLabel"
@@ -29,7 +29,7 @@ Array [
 ]
 `;
 
-exports[`#GiftOptionsSummary EE renders gift options summary line item correctly 1`] = `
+exports[`#GiftOptionsSummary AC renders gift options summary line item correctly 1`] = `
 Array [
   <span
     className="lineItemLabel"
@@ -58,6 +58,6 @@ Array [
 ]
 `;
 
-exports[`#GiftOptionsSummary EE renders nothing if gift options data is empty 1`] = `null`;
+exports[`#GiftOptionsSummary AC renders nothing if gift options data is empty 1`] = `null`;
 
-exports[`#GiftOptionsSummary EE renders nothing if gift options value is "0" 1`] = `null`;
+exports[`#GiftOptionsSummary AC renders nothing if gift options value is "0" 1`] = `null`;

package/lib/components/CartPage/PriceSummary/__tests__/giftCardSummary.ce.spec.js

@@ -8,7 +8,7 @@ const Component = () => {
     return <GiftCardSummary />;
 };
 
-describe('#GiftCardSummary CE', () => {
+describe('#GiftCardSummary MOS', () => {
     it('renders', () => {
         const tree = createTestInstance(<Component />);
 

package/lib/components/CartPage/PriceSummary/__tests__/giftCardSummary.ee.spec.js

@@ -18,7 +18,7 @@ const defaultProps = {
     ]
 };
 
-describe('#GiftCardSummary EE', () => {
+describe('#GiftCardSummary AC', () => {
     it('renders gift card summary line item correctly', () => {
         const tree = createTestInstance(<GiftCardSummary {...defaultProps} />);
 

package/lib/components/CartPage/PriceSummary/__tests__/giftOptionsSummary.ce.spec.js

@@ -8,7 +8,7 @@ const Component = () => {
     return <GiftOptionsSummary />;
 };
 
-describe('#GiftOptionsSummary CE', () => {
+describe('#GiftOptionsSummary MOS', () => {
     it('renders', () => {
         const tree = createTestInstance(<Component />);
 

package/lib/components/CartPage/PriceSummary/__tests__/giftOptionsSummary.ee.spec.js

@@ -17,7 +17,7 @@ const defaultProps = {
     }
 };
 
-describe('#GiftOptionsSummary EE', () => {
+describe('#GiftOptionsSummary AC', () => {
     it('renders gift options summary line item correctly', () => {
         const tree = createTestInstance(
             <GiftOptionsSummary {...defaultProps} />