Change ExpansionPanel as Accordion (#1279)

* Fix variant creation - remove channels + prices

* Update messages and snapshots

* Change ExpansionPanel as Accordion

* Update snapshots

Co-authored-by: Magdalena Markusik <magdalena.markusik@mirumee.com>
Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx

@@ -1,8 +1,4 @@
-import {
+import { Accordion, AccordionSummary, Typography } from "@material-ui/core";
-  ExpansionPanel,
-  ExpansionPanelSummary,
-  Typography
-} from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
 import { Messages } from "@saleor/components/ChannelsAvailabilityCard/types";
 import IconChevronDown from "@saleor/icons/ChevronDown";
@@ -119,8 +115,8 @@ const ChannelWithVariantsAvailabilityItemWrapper: React.FC<ChannelAvailabilityIt
     : messages.variantCountLabel;
 
   return (
-    <ExpansionPanel classes={expanderClasses}>
+    <Accordion classes={expanderClasses}>
-      <ExpansionPanelSummary
+      <AccordionSummary
         expandIcon={<IconChevronDown />}
         classes={summaryClasses}
       >
@@ -129,9 +125,9 @@ const ChannelWithVariantsAvailabilityItemWrapper: React.FC<ChannelAvailabilityIt
           <Label text={intl.formatMessage(variantsLabel, { variantsCount })} />
           <Label text={commonChannelMessages.availableDateText} />
         </div>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
       {children}
-    </ExpansionPanel>
+    </Accordion>
   );
 };
 

src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx

@@ -1,8 +1,8 @@
 import placeholderImage from "@assets/images/placeholder60x60.png";
 import {
+  Accordion,
+  AccordionSummary,
   Divider,
-  ExpansionPanel,
-  ExpansionPanelSummary,
   Typography
 } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
@@ -155,12 +155,12 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
           placeholderImage;
 
         return (
-          <ExpansionPanel
+          <Accordion
             classes={expanderClasses}
             data-test-id="expand-channel-row"
             key={channelId}
           >
-            <ExpansionPanelSummary
+            <AccordionSummary
               expandIcon={<IconChevronDown />}
               classes={summaryClasses}
             >
@@ -192,7 +192,7 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
                 </div>
                 <Divider />
               </div>
-            </ExpansionPanelSummary>
+            </AccordionSummary>
             {allVariants.map(({ id: variantId, name }) => (
               <React.Fragment key={variantId}>
                 <div
@@ -215,7 +215,7 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
                 <Divider />
               </React.Fragment>
             ))}
-          </ExpansionPanel>
+          </Accordion>
         );
       })}
     </>

src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx

@@ -1,8 +1,8 @@
 import {
+  Accordion,
   Card,
   CardContent,
   Divider,
-  ExpansionPanel,
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
@@ -67,7 +67,7 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
       <CardContent>
         <Typography>{intl.formatMessage(messages.subtitle)}</Typography>
       </CardContent>
-      <ExpansionPanel classes={expanderClasses}>
+      <Accordion classes={expanderClasses}>
         <ShippingZonesListHeader shippingZones={shippingZones} />
         <Divider />
         {shippingZones.map(zone => (
@@ -76,7 +76,7 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
         {hasMoreZonesToBeSelected ? (
           <ShippingZonesCardListFooter {...props} />
         ) : null}
-      </ExpansionPanel>
+      </Accordion>
     </Card>
   );
 };

src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx

@@ -1,4 +1,4 @@
-import { ExpansionPanelSummary, Typography } from "@material-ui/core";
+import { AccordionSummary, Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import { ChannelShippingZones } from "@saleor/channels/pages/ChannelDetailsPage/types";
 import IconChevronDown from "@saleor/icons/ChevronDown";
@@ -58,13 +58,13 @@ const ShippingZonesListHeader: React.FC<ShippingZonesListHeaderProps> = ({
 
   return (
     <div className={classes.container}>
-      <ExpansionPanelSummary expandIcon={<IconChevronDown />} classes={classes}>
+      <AccordionSummary expandIcon={<IconChevronDown />} classes={classes}>
         <Typography variant="subtitle2" color="textSecondary">
           {intl.formatMessage(messages.title, {
             zonesCount: shippingZones.length
           })}
         </Typography>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
       <HorizontalSpacer spacing={1.5} />
     </div>
   );

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx

@@ -1,8 +1,4 @@
-import {
+import { Accordion, AccordionSummary, Typography } from "@material-ui/core";
-  ExpansionPanel,
-  ExpansionPanelSummary,
-  Typography
-} from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
 import IconChevronDown from "@saleor/icons/ChevronDown";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -76,19 +72,16 @@ const ChannelContentWrapper: React.FC<ChannelContentWrapperProps> = ({
   const { name } = data;
 
   return (
-    <ExpansionPanel
+    <Accordion classes={expanderClasses} data-test="channel-availability-item">
-      classes={expanderClasses}
+      <AccordionSummary
-      data-test="channel-availability-item"
-    >
-      <ExpansionPanelSummary
         expandIcon={<IconChevronDown />}
         classes={summaryClasses}
       >
         <Typography>{name}</Typography>
         <Typography variant="caption">{messages.availableDateText}</Typography>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
       {children}
-    </ExpansionPanel>
+    </Accordion>
   );
 };
 

src/components/Filter/FilterContent/FilterContent.tsx

@@ -1,6 +1,6 @@
 import {
-  ExpansionPanel,
+  Accordion,
-  ExpansionPanelSummary,
+  AccordionSummary,
   makeStyles,
   Paper,
   Typography
@@ -208,14 +208,14 @@ const FilterContent: React.FC<FilterContentProps> = ({
             const currentFilter = getFilterFromCurrentData(filter);
 
             return (
-              <ExpansionPanel
+              <Accordion
                 key={filter.name}
                 classes={expanderClasses}
                 data-test="channel-availability-item"
                 data-test-id={filter.name}
                 expanded={filter.name === openedFilter?.name}
               >
-                <ExpansionPanelSummary
+                <AccordionSummary
                   expandIcon={<IconChevronDown />}
                   classes={summaryClasses}
                   onClick={() => handleFilterOpen(filter)}
@@ -226,7 +226,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
                       handleFilterPropertyGroupChange(action, filter)
                     }
                   />
-                </ExpansionPanelSummary>
+                </AccordionSummary>
                 {currentFilter?.active && (
                   <FilterErrorsList
                     errors={errors?.[filter.name]}
@@ -259,7 +259,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
                     filter={currentFilter}
                   />
                 )}
-              </ExpansionPanel>
+              </Accordion>
             );
           })}
       </form>

src/components/Timeline/TimelineEvent.tsx

@@ -1,7 +1,7 @@
 import {
-  ExpansionPanel,
+  Accordion,
-  ExpansionPanelDetails,
+  AccordionDetails,
-  ExpansionPanelSummary,
+  AccordionSummary,
   Typography
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -93,8 +93,8 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
     <div className={classes.root}>
       <span className={classes.dot} />
       {children ? (
-        <ExpansionPanel className={classes.panel} elevation={0}>
+        <Accordion className={classes.panel} elevation={0}>
-          <ExpansionPanelSummary
+          <AccordionSummary
             className={classes.panelExpander}
             expandIcon={<ExpandMoreIcon />}
           >
@@ -103,11 +103,11 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
               date={date}
               titleElements={titleElements}
             />
-          </ExpansionPanelSummary>
+          </AccordionSummary>
-          <ExpansionPanelDetails>
+          <AccordionDetails>
             <Typography>{children}</Typography>
-          </ExpansionPanelDetails>
+          </AccordionDetails>
-        </ExpansionPanel>
+        </Accordion>
       ) : (
         <TimelineEventHeader
           title={title}

src/products/components/ProductVariantPage/VariantDetailsChannelsAvailabilityCard/index.tsx

@@ -1,8 +1,8 @@
 import {
+  Accordion,
+  AccordionSummary,
   CardContent,
   Divider,
-  ExpansionPanel,
-  ExpansionPanelSummary,
   Typography
 } from "@material-ui/core";
 import Skeleton from "@saleor/components/Skeleton";
@@ -138,8 +138,8 @@ const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAva
 
   return (
     <CardContainer>
-      <ExpansionPanel classes={expanderClasses}>
+      <Accordion classes={expanderClasses}>
-        <ExpansionPanelSummary
+        <AccordionSummary
           expandIcon={<IconChevronDown />}
           classes={summaryClasses}
           data-test-id="channels-variant-availability-summary"
@@ -150,7 +150,7 @@ const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAva
               availableChannelsCount: allAvailableChannelsListings.length
             })}
           </Typography>
-        </ExpansionPanelSummary>
+        </AccordionSummary>
 
         {channelListings.map(({ channel }) => (
           <React.Fragment key={channel.id}>
@@ -170,7 +170,7 @@ const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAva
             </CardContent>
           </React.Fragment>
         ))}
-      </ExpansionPanel>
+      </Accordion>
     </CardContainer>
   );
 };