Apply visual changes

src/components/Divider/Divider.tsx

@@ -0,0 +1,15 @@
+import { Box, BoxProps } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const Divider = (props: BoxProps) => {
+  return (
+    <Box
+      width="100%"
+      borderBottomStyle="solid"
+      borderBottomWidth={1}
+      borderColor="neutralPlain"
+      height={1}
+      {...props}
+    />
+  );
+};

src/components/Divider/index.ts

@@ -0,0 +1 @@
+export * from "./Divider";

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx

@@ -1,50 +1,34 @@
+import { Divider } from "@dashboard/components/Divider";
 import React from "react";
-import { useIntl } from "react-intl";
 
-import { variantDetailsChannelsAvailabilityCardMessages as messages } from "./../messages";
 import { Channel, ProductChannelListing } from "./../types";
-import { ChannelsList } from "./ChannelsList";
 import { ChannelsListItem } from "./ChannelsListItem";
-import { NotAvailable } from "./NotAvailable";
 import CardContainer from "./VariantDetailsChannelsAvailabilityCardContainer";
 
 interface AvailabilityCardProps {
   items: Channel[];
   productChannelListings: ProductChannelListing;
-  availabilityCount: Record<string, number>;
 }
 
 export const AvailabilityCard: React.FC<AvailabilityCardProps> = ({
-  availabilityCount,
   items,
   productChannelListings,
   children,
 }) => {
-  const intl = useIntl();
-  const channelListSummary = intl.formatMessage(
-    messages.subtitle,
-    availabilityCount,
-  );
-
   if (items.length === 0) {
-    return (
-      <CardContainer cardTitle={children}>
-        <NotAvailable />
-      </CardContainer>
-    );
+    return <CardContainer cardTitle={children}>{}</CardContainer>;
   }
 
   return (
     <CardContainer cardTitle={children}>
-      <ChannelsList summary={channelListSummary}>
-        {items.map(channel => (
-          <ChannelsListItem
-            {...channel}
-            listings={productChannelListings}
-            key={channel.id}
-          />
-        ))}
-      </ChannelsList>
+      {items.map(channel => (
+        <ChannelsListItem
+          {...channel}
+          listings={productChannelListings}
+          key={channel.id}
+        />
+      ))}
+      <Divider />
     </CardContainer>
   );
 };

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CardSkeleton.tsx

@@ -1,13 +1,11 @@
+import { DashboardCard } from "@dashboard/components/Card";
 import Skeleton from "@dashboard/components/Skeleton";
-import { CardContent } from "@material-ui/core";
 import React from "react";
 
-import CardContainer from "./VariantDetailsChannelsAvailabilityCardContainer";
-
 export const CardSkeleton: React.FC = () => (
-  <CardContainer>
-    <CardContent>
+  <DashboardCard>
+    <DashboardCard.Content>
       <Skeleton />
-    </CardContent>
-  </CardContainer>
+    </DashboardCard.Content>
+  </DashboardCard>
 );

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsListItem.tsx

@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
+import { Divider } from "@dashboard/components/Divider";
 import useDateLocalize from "@dashboard/hooks/useDateLocalize";
-import { Divider } from "@material-ui/core";
 import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -43,14 +43,13 @@ export const ChannelsListItem: React.FC<ChannelsListItemProps> = ({
       <DashboardCard.Content paddingY={6}>
         <Text
           as="p"
-          variant="body"
+          variant="bodyStrong"
           size="small"
           data-test-id={`channels-variant-availability-item-title-${id}`}
         >
           {name}
         </Text>
         <Text
-          variant="bodyStrong"
           size="small"
           data-test-id={`channels-variant-availability-item-subtitle-${id}`}
         >

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx

@@ -1,5 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
-import { Box, Button } from "@saleor/macaw-ui/next";
+import { Accordion, Box, Button, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -8,26 +8,55 @@ import { variantDetailsChannelsAvailabilityCardMessages as messages } from "./..
 interface CreateVariantTitleProps {
   onManageClick: () => void;
   disabled: boolean;
+  availabilityCount: Record<string, number>;
+  isEmpty: boolean;
 }
 
 export const CreateVariantTitle: React.FC<CreateVariantTitleProps> = ({
   onManageClick,
   disabled,
+  availabilityCount,
+  isEmpty,
 }) => {
   const intl = useIntl();
 
+  const getCaptionText = () => {
+    if (isEmpty) {
+      return intl.formatMessage(messages.noItemsAvailable);
+    }
+
+    return intl.formatMessage(messages.subtitle, availabilityCount);
+  };
+
   return (
     <DashboardCard.Title>
-      <Box display="flex" justifyContent="space-between" alignItems="center">
-        {intl.formatMessage(messages.title)}
-        <Button
-          variant="secondary"
-          disabled={disabled}
-          data-test-id="manage-channels-button"
-          onClick={onManageClick}
-        >
-          {intl.formatMessage(messages.manageButtonText)}
-        </Button>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        marginBottom={4}
+      >
+        <Accordion.Trigger>
+          <Box display="grid" gap={2}>
+            {intl.formatMessage(messages.title)}
+            <Text variant="caption" color="textNeutralSubdued">
+              {getCaptionText()}
+            </Text>
+          </Box>
+        </Accordion.Trigger>
+        <Box display="flex" gap={3}>
+          <Button
+            variant="secondary"
+            disabled={disabled}
+            data-test-id="manage-channels-button"
+            onClick={onManageClick}
+          >
+            {intl.formatMessage(messages.manageButtonText)}
+          </Button>
+          <Accordion.Trigger>
+            <Accordion.TriggerButton dataTestId="expand-icon" />
+          </Accordion.Trigger>
+        </Box>
       </Box>
     </DashboardCard.Title>
   );

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/VariantDetailsChannelsAvailabilityCardContainer.tsx

@@ -1,4 +1,5 @@
 import { DashboardCard } from "@dashboard/components/Card";
+import { Accordion } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -14,12 +15,16 @@ const VariantDetailsChannelsAvailabilityCardContainer: React.FC<
 > = ({ children, cardTitle }) => (
   <>
     <DashboardCard>
-      {cardTitle || (
-        <DashboardCard.Title>
-          <FormattedMessage {...messages.title} />
-        </DashboardCard.Title>
-      )}
-      {children}
+      <Accordion>
+        <Accordion.Item value="channelListItem">
+          {cardTitle || (
+            <DashboardCard.Title>
+              <FormattedMessage {...messages.title} />
+            </DashboardCard.Title>
+          )}
+          <Accordion.Content>{children}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
     </DashboardCard>
   </>
 );

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/index.tsx

@@ -44,10 +44,14 @@ export const VariantDetailsChannelsAvailabilityCard: React.FC<
     {({ channels }) => (
       <AvailabilityCard
         items={channels}
-        availabilityCount={getAvailabilityCountForVariant(variant)}
         productChannelListings={variant.product.channelListings}
       >
-        <CreateVariantTitle onManageClick={onManageClick} disabled={disabled} />
+        <CreateVariantTitle
+          onManageClick={onManageClick}
+          disabled={disabled}
+          availabilityCount={getAvailabilityCountForVariant(variant)}
+          isEmpty={channels.length === 0}
+        />
       </AvailabilityCard>
     )}
   </Wrapper>
@@ -60,10 +64,14 @@ export const ProductDetailsChannelsAvailabilityCard: React.FC<
     {({ channels }) => (
       <AvailabilityCard
         items={channels}
-        availabilityCount={getAvailabilityCountForProduct(product)}
         productChannelListings={product.channelListings}
       >
-        <CreateVariantTitle onManageClick={onManageClick} disabled={disabled} />
+        <CreateVariantTitle
+          onManageClick={onManageClick}
+          disabled={disabled}
+          availabilityCount={getAvailabilityCountForProduct(product)}
+          isEmpty={channels.length === 0}
+        />
       </AvailabilityCard>
     )}
   </Wrapper>

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
+import { Divider } from "@dashboard/components/Divider";
 import Skeleton from "@dashboard/components/Skeleton";
 import {
   ProductVariantCreateDataQuery,
@@ -58,6 +59,7 @@ const ProductVariantNavigation: React.FC<
         {intl.formatMessage(sectionNames.variants)}
       </DashboardCard.Title>
       <SortableContainer onSortEnd={onReorder}>
+        {variants?.length > 0 && <Divider />}
         {renderCollection(variants, (variant, variantIndex) => {
           const isDefault = variant && variant.id === defaultVariantId;
           const isActive = variant && variant.id === current;
@@ -87,9 +89,6 @@ const ProductVariantNavigation: React.FC<
                   maxWidth="100%"
                   paddingX={5}
                   paddingY={3}
-                  borderBottomWidth={1}
-                  borderBottomStyle="solid"
-                  borderColor="neutralPlain"
                   display="flex"
                   alignItems="center"
                   gap={5}
@@ -127,6 +126,7 @@ const ProductVariantNavigation: React.FC<
                     )}
                   </Box>
                 </Box>
+                <Divider />
               </SortableElement>
             </Link>
           );