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

package/lib/components/CheckoutPage/checkoutPage.module.css

@@ -1,41 +1,57 @@
 .root {
-    padding: 2.5rem 3rem;
-    max-width: 1080px;
-    margin: 0 auto;
+    composes: max-w-screen-lg from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+    composes: py-md from global;
+
+    composes: lg_px-lg from global;
 }
 
+/* prettier-ignore */
 .checkoutContent {
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: 2fr 1fr;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+
+    composes: lg_gap-md from global;
+    /* TODO @TW: review (B7) */
+    composes: lg_grid-cols-[2fr,1fr] from global;
 }
 
 .checkoutContent_hidden {
     composes: checkoutContent;
-    display: none;
+
+    composes: hidden from global;
 }
 
 .heading_container {
-    display: grid;
-    row-gap: 1rem;
-    grid-column: 1 / span 1;
+    composes: col-span-1 from global;
+    composes: col-start-1 from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
 }
 
 .heading {
-    line-height: 1.25em;
+    composes: leading-tight from global;
 }
 
 .cartLink {
     composes: root from '../LinkButton/linkButton.module.css';
-    font-size: inherit;
+
+    composes: text-inherit from global;
 }
 
 .stepper_heading {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    font-size: 1rem;
-    font-weight: 600;
-    padding-bottom: 2rem;
-    text-transform: uppercase;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: pb-xs from global;
+    composes: text-colorDefault from global;
+    composes: uppercase from global;
+
+    composes: lg_pb-md from global;
 }
 
 .shipping_method_heading {
@@ -44,42 +60,56 @@
 
 .payment_information_heading {
     composes: stepper_heading;
+    composes: border-b-0 from global;
+
+    /* On mobile, order summary has a top border, so avoid doubling up. */
+    composes: lg_border-b from global;
 }
 
 .signInContainer {
-    grid-row-start: 1;
-    align-items: center;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    padding: 1rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: mb-xs from global;
+    composes: p-xs from global;
+    composes: rounded-md from global;
+    composes: row-start-1 from global;
+
+    composes: lg_grid-flow-col from global;
+    composes: lg_justify-items-start from global;
+    composes: lg_mb-0 from global;
 }
 
 .signInLabel {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .signInButton {
     composes: root_normalPriority from '../Button/button.module.css';
-    min-height: auto;
-    min-width: auto;
-    padding: 0.25rem 2rem;
+
+    composes: min-h-auto from global;
+    composes: min-w-auto from global;
+    composes: px-md from global;
+    composes: py-1 from global;
 }
 
 .empty_cart_container {
-    margin-bottom: 1.5rem;
+    composes: mb-sm from global;
 }
 
 .shipping_information_container {
     grid-column: 1 / span 1;
-    position: relative;
+    composes: relative from global;
 }
 
 .shipping_method_container {
     grid-column: 1 / span 1;
-    position: relative;
+    composes: relative from global;
 }
 
 .payment_information_container {
@@ -96,24 +126,17 @@
 
 .summaryContainer {
     grid-column: 1 / span 1;
-}
 
-.formErrors {
-    border-color: rgb(var(--venia-global-color-error));
-    border-style: solid;
-    border-width: 0 0 0 5px;
-    padding: 1rem 0 1rem 1rem;
-    display: grid;
-    grid-column: 1 / span 1;
+    composes: lg_h-minContent from global;
+    composes: lg_sticky from global;
+    /* TODO @TW: review. Magic number. Slightly bigger than sticky header. */
+    composes: lg_top-[6rem] from global;
 }
 
-@media (min-width: 961px) {
+@media (min-width: 960px) {
     .summaryContainer {
         grid-column: 2 / span 1;
         grid-row: 2 / span 3;
-        position: sticky;
-        top: 5.5rem;
-        height: min-content;
     }
     .reCaptchaMargin {
         margin-bottom: 5.5rem;
@@ -123,47 +146,30 @@
     }
 }
 
-.review_order_button {
-    composes: root_highPriority from '../Button/button.module.css';
+.formErrors {
+    composes: border-error from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b-0 from global;
+    composes: border-l-4 from global;
+    composes: grid from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
     grid-column: 1 / span 1;
-    margin: auto;
 }
 
-.place_order_button {
+.review_order_button {
     composes: root_highPriority from '../Button/button.module.css';
+
     grid-column: 1 / span 1;
-    margin: auto;
+    composes: m-auto from global;
 }
 
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
-
-    .checkoutContent {
-        /* Only one column in mobile view. */
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .signInContainer {
-        grid-auto-flow: row;
-        justify-items: center;
-        margin-bottom: 1rem;
-    }
-
-    .stepper_heading {
-        padding-bottom: 1rem;
-    }
+.place_order_button {
+    composes: root_highPriority from '../Button/button.module.css';
 
-    .payment_information_heading {
-        composes: stepper_heading;
-        /* On mobile, order summary has a top border, so avoid doubling up. */
-        border-bottom-width: 0;
-    }
+    grid-column: 1 / span 1;
+    composes: m-auto from global;
 }

package/lib/components/CmsBlock/cmsBlock.module.css

@@ -1,13 +1,15 @@
 .root {
-    margin: 1rem;
+    composes: m-xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .content h2 {
     margin-bottom: 2rem;
     text-align: center;
     text-transform: uppercase;
 }
 
+/* TODO @TW: cannot compose */
 .content img {
     display: block;
     height: auto;

package/lib/components/CmsDynamicBlock/__tests__/__snapshots__/cmsDynamicBlock.ce.spec.js.snap

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

package/lib/components/CmsDynamicBlock/__tests__/__snapshots__/cmsDynamicBlock.ee.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type catalogrule 1`] = `
+exports[`#CmsDynamicBlock AC renders DynamicBlock when data with type catalogrule 1`] = `
 <mock-DynamicBlock
   content={
     Object {
@@ -12,7 +12,7 @@ exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type catalogrul
 />
 `;
 
-exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type fixed 1`] = `
+exports[`#CmsDynamicBlock AC renders DynamicBlock when data with type fixed 1`] = `
 <mock-DynamicBlock
   content={
     Object {
@@ -24,7 +24,7 @@ exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type fixed 1`]
 />
 `;
 
-exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type salesrule 1`] = `
+exports[`#CmsDynamicBlock AC renders DynamicBlock when data with type salesrule 1`] = `
 <mock-DynamicBlock
   content={
     Object {
@@ -36,7 +36,7 @@ exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type salesrule
 />
 `;
 
-exports[`#CmsDynamicBlock EE renders DynamicBlock when data with unknown type 1`] = `
+exports[`#CmsDynamicBlock AC renders DynamicBlock when data with unknown type 1`] = `
 <mock-DynamicBlock
   content={
     Object {
@@ -48,14 +48,14 @@ exports[`#CmsDynamicBlock EE renders DynamicBlock when data with unknown type 1`
 />
 `;
 
-exports[`#CmsDynamicBlock EE renders ErrorView when error 1`] = `
+exports[`#CmsDynamicBlock AC renders ErrorView when error 1`] = `
 <mock-ErrorView
   message="Error"
 />
 `;
 
-exports[`#CmsDynamicBlock EE renders null when items are empty 1`] = `null`;
+exports[`#CmsDynamicBlock AC renders null when items are empty 1`] = `null`;
 
-exports[`#CmsDynamicBlock EE renders null when loading 1`] = `null`;
+exports[`#CmsDynamicBlock AC renders null when loading 1`] = `null`;
 
-exports[`#CmsDynamicBlock EE renders null when no data 1`] = `null`;
+exports[`#CmsDynamicBlock AC renders null when no data 1`] = `null`;

package/lib/components/CmsDynamicBlock/__tests__/cmsDynamicBlock.ce.spec.js

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

package/lib/components/CmsDynamicBlock/__tests__/cmsDynamicBlock.ee.spec.js

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

package/lib/components/CmsDynamicBlock/cmsDynamicBlock.ce.js

@@ -1,5 +1,5 @@
 /**
- * Dynamic Block is an EE-only feature for now.
- * Here in CE, don't render the component at all.
+ * Dynamic Block is an AC-only feature for now.
+ * Here in MOS, don't render the component at all.
  */
 export default () => null;

package/lib/components/CommunicationsPage/communicationsPage.module.css

@@ -1,32 +1,26 @@
 .root {
-    display: grid;
-    padding: 2.5rem 3rem;
-    row-gap: 2rem;
+    composes: grid from global;
+    composes: gap-y-md from global;
+    composes: px-sm from global;
+    composes: py-md from global;
+
+    composes: lg_px-lg from global;
 }
 
 .title {
-    justify-self: center;
-    font-family: var(--venia-global-fontFamily-serif);
-    font-weight: var(--venia-global-fontWeight-bold);
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
 }
 
 .form {
-    display: grid;
-    row-gap: 2rem;
+    composes: grid from global;
+    composes: gap-y-md from global;
 }
 
 .buttonsContainer {
-    display: flex;
-    justify-content: flex-start;
-}
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
+    composes: flex from global;
+    composes: justify-center from global;
 
-    .buttonsContainer {
-        justify-content: center;
-    }
+    composes: lg_justify-start from global;
 }

package/lib/components/ContactPage/contactPage.module.css

@@ -14,7 +14,7 @@
 
     /* Medium */
     composes: md_text-left from global;
-    composes: md_text-5xl from global;
+    composes: md_text-4xl from global;
 }
 
 .subtitle {

package/lib/components/CreateAccount/createAccount.module.css

@@ -1,29 +1,33 @@
 .root {
-    display: grid;
-    gap: 0.9375rem;
-    justify-items: stretch;
-    padding: 1rem 1.5rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
 }
 
 .message {
-    background-color: rgb(var(--venia-global-color-gray));
-    border-radius: 4px;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding: 1rem;
+    composes: bg-subtle from global;
+    composes: leading-tight from global;
+    composes: p-xs from global;
+    composes: rounded from global;
+    composes: text-sm from global;
 }
 
+/* TODO @TW: cannot compose */
 .message:empty {
     display: none;
 }
 
 .actions {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    justify-content: center;
-    margin-top: 1rem;
-    text-align: center;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: text-center from global;
+
+    composes: lg_grid-flow-col from global;
 }
 
 .cancelButton {
@@ -32,19 +36,12 @@
 
 .submitButton {
     composes: root_highPriority from '../Button/button.module.css';
-    grid-column-start: 2;
-}
 
-.subscribe {
-    margin-left: -0.375rem;
-}
+    composes: col-start-auto from global;
 
-@media (max-width: 960px) {
-    .actions {
-        grid-auto-flow: row;
-    }
+    composes: lg_col-start-2 from global;
+}
 
-    .submitButton {
-        grid-column-start: auto;
-    }
+.subscribe {
+    composes: -ml-1.5 from global;
 }

package/lib/components/CreateAccountPage/createAccountPage.module.css

@@ -1,20 +1,21 @@
 .root {
-    display: grid;
-    justify-content: center;
-    padding: 2.5rem 0;
-    text-align: center;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-md from global;
+    composes: text-center from global;
     grid-template-columns: minmax(auto, 512px);
-    row-gap: 2rem;
 }
 
 .header {
-    font-family: var(--venia-global-fontFamily-serif);
+    composes: font-serif from global;
 }
 
-@media (min-width: 961px) {
-    .contentContainer {
-        padding-bottom: 2rem;
-        border: 2px solid rgb(var(--venia-global-color-border));
-        border-radius: 0.375rem;
-    }
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_pb-md from global;
+    composes: lg_rounded-md from global;
 }

package/lib/components/Dialog/__stories__/dialog.module.css

@@ -1,4 +1,5 @@
 .paragraph {
-    margin: 0.5em 0;
-    line-height: 1.15em;
+    composes: leading-tight from global;
+    composes: mx-0 from global;
+    composes: my-2 from global;
 }