Use Accordion component from new macaw

.changeset/beige-dots-protect.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Replace all old Accordion components with new from macaw-ui

src/channels/components/AssignmentList/AssignmentList.tsx

@@ -1,15 +1,15 @@
 // @ts-strict-ignore
 import Skeleton from "@dashboard/components/Skeleton";
 import { ReorderEvent } from "@dashboard/types";
-import { Accordion, Divider, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
+import { Accordion, Divider } from "@saleor/macaw-ui/next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
 import AssignmentListFooter from "./AssignmentListFooter";
-import AssignmentListHeader from "./AssignmentListHeader";
 import Item from "./Item";
 import SortableContainer from "./SortableContainer";
-import { useExpanderStyles, useStyles } from "./styles";
+import { useStyles } from "./styles";
 import { AssignmentListProps } from "./types";
 
 const messages = defineMessages({
@@ -32,7 +32,6 @@ const AssignmentList: React.FC<AssignmentListProps> = props => {
 
   const intl = useIntl();
   const classes = useStyles();
-  const expanderClasses = useExpanderStyles();
 
   const handleSortStart = () => {
     document.body.classList.add(classes.grabbing);
@@ -46,51 +45,61 @@ const AssignmentList: React.FC<AssignmentListProps> = props => {
   const hasMoreItemsToBeSelected = totalCount !== items.length;
 
   return (
-    <Accordion classes={expanderClasses}>
-      <AssignmentListHeader
-        assignCount={items.length}
-        itemsName={itemsName}
-        loading={loading}
-      />
-      <Divider />
-      {loading ? (
-        <Skeleton className={classes.skeleton} />
-      ) : (
-        <>
-          <SortableContainer
-            axis="xy"
-            lockAxis="xy"
-            useDragHandle
-            onSortStart={handleSortStart}
-            onSortEnd={handleSortEnd}
-          >
-            <div>
-              {items.map((item, itemIndex) => (
-                <Item
-                  key={itemIndex}
-                  index={itemIndex}
-                  item={item}
-                  onDelete={removeItem}
-                  sortable={!!reorderItem}
-                />
-              ))}
-            </div>
-          </SortableContainer>
-          {hasMoreItemsToBeSelected ? (
-            <AssignmentListFooter {...props} />
+    <Accordion paddingX={7} paddingBottom={2} paddingTop={4}>
+      <Accordion.Item value="accordionItemId">
+        <Accordion.Trigger paddingBottom={4}>
+          {loading ? (
+            <Skeleton />
           ) : (
-            <Typography
-              color="textSecondary"
-              variant="subtitle1"
-              className={classes.infoMessage}
-            >
-              {intl.formatMessage(messages.allSelectedMessage, {
-                itemsName: itemsName.toLowerCase(),
-              })}
+            <Typography variant="subtitle2" color="textSecondary">
+              {`${items.length} ${itemsName.toLowerCase()}`}
             </Typography>
           )}
-        </>
-      )}
+          <Accordion.TriggerButton dataTestId="expand-icon" />
+        </Accordion.Trigger>
+
+        <Accordion.Content>
+          <Divider />
+          {loading ? (
+            <Skeleton className={classes.skeleton} />
+          ) : (
+            <>
+              <SortableContainer
+                axis="xy"
+                lockAxis="xy"
+                useDragHandle
+                onSortStart={handleSortStart}
+                onSortEnd={handleSortEnd}
+              >
+                <div>
+                  {items.map((item, itemIndex) => (
+                    <Item
+                      key={itemIndex}
+                      index={itemIndex}
+                      item={item}
+                      onDelete={removeItem}
+                      sortable={!!reorderItem}
+                    />
+                  ))}
+                </div>
+              </SortableContainer>
+              {hasMoreItemsToBeSelected ? (
+                <AssignmentListFooter {...props} />
+              ) : (
+                <Typography
+                  color="textSecondary"
+                  variant="subtitle1"
+                  className={classes.infoMessage}
+                >
+                  {intl.formatMessage(messages.allSelectedMessage, {
+                    itemsName: itemsName.toLowerCase(),
+                  })}
+                </Typography>
+              )}
+            </>
+          )}
+        </Accordion.Content>
+      </Accordion.Item>
     </Accordion>
   );
 };

src/channels/components/AssignmentList/Item.tsx

@@ -1,5 +1,5 @@
 import DeletableItem from "@dashboard/components/DeletableItem";
-import { Divider, Typography } from "@material-ui/core";
+import { Divider, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { SortableElement, SortableElementProps } from "react-sortable-hoc";
 
@@ -28,7 +28,7 @@ const Item = SortableElement(
                 data-test-id="button-drag-handle"
               />
             )}
-            <Typography>{name}</Typography>
+            <Text size="small">{name}</Text>
           </div>
           <DeletableItem id={id} onDelete={onDelete} />
         </div>

src/channels/components/AssignmentList/styles.ts

@@ -53,7 +53,6 @@ export const useHeaderStyles = makeStyles(
 export const useStyles = makeStyles(
   theme => ({
     container: {
-      padding: theme.spacing(1, 0),
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",

src/components/Accordion/Accordion.tsx

@@ -1,39 +1,11 @@
-import { Typography } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import RemoveIcon from "@material-ui/icons/Remove";
-import { IconButton, makeStyles } from "@saleor/macaw-ui";
-import clsx from "clsx";
-import React from "react";
-
-import Hr from "../Hr";
-
-const useStyles = makeStyles(
-  theme => ({
-    content: {
-      padding: theme.spacing(3, 0),
-    },
-    expandButton: {
-      position: "relative",
-      right: theme.spacing(-2),
-      top: theme.spacing(0.5),
-    },
-    root: {
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: 12,
-      padding: theme.spacing(0, 3),
-    },
-    title: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
-    titleText: {
-      padding: theme.spacing(2, 0),
-    },
-  }),
-  {
-    name: "Accordion",
-  },
-);
+import {
+  Accordion as AccordionMacaw,
+  Box,
+  Divider,
+  sprinkles,
+  Text,
+} from "@saleor/macaw-ui/next";
+import React, { useState } from "react";
 
 export interface AccordionProps {
   className?: string;
@@ -42,38 +14,52 @@ export interface AccordionProps {
   title: string;
 }
 
+const AccordionItemId = "accordionItemId";
+
 const Accordion: React.FC<AccordionProps> = ({
   children,
-  className,
   initialExpand,
   quickPeek,
   title,
-  ...props
+  className,
 }) => {
-  const classes = useStyles({});
-  const [expanded, setExpanded] = React.useState(!!initialExpand);
+  const [openedAccordionId, setOpendAccordionId] = useState<undefined | string>(
+    !!initialExpand ? AccordionItemId : undefined,
+  );
 
   return (
-    <div className={clsx(classes.root, className)} {...props}>
-      <div className={classes.title}>
-        <Typography className={classes.titleText}>{title}</Typography>
-        <div className={classes.expandButton}>
-          <IconButton
-            variant="secondary"
-            onClick={() => setExpanded(!expanded)}
-          >
-            {expanded ? <RemoveIcon /> : <AddIcon />}
-          </IconButton>
-        </div>
-      </div>
-      {(expanded || !!quickPeek) && (
-        <>
-          <Hr />
-          <div className={classes.content}>
-            {quickPeek ? (expanded ? children : quickPeek) : children}
-          </div>
-        </>
-      )}
+    <div className={className}>
+      <AccordionMacaw
+        value={openedAccordionId}
+        onValueChange={value => setOpendAccordionId(value)}
+        className={sprinkles({
+          borderStyle: "solid",
+          borderWidth: 1,
+          borderColor: "neutralPlain",
+          paddingX: 4,
+          borderRadius: 5,
+        })}
+      >
+        <AccordionMacaw.Item value={AccordionItemId}>
+          <AccordionMacaw.Trigger>
+            <Text paddingY={3} variant="body" size="small">
+              {title}
+            </Text>
+            <AccordionMacaw.TriggerButton dataTestId="expand-icon" />
+          </AccordionMacaw.Trigger>
+          <AccordionMacaw.Content>
+            <Divider />
+            <Box paddingY={3}>{children}</Box>
+          </AccordionMacaw.Content>
+        </AccordionMacaw.Item>
+
+        {!openedAccordionId && !!quickPeek && (
+          <>
+            <Divider />
+            <Box paddingY={4}>{quickPeek}</Box>
+          </>
+        )}
+      </AccordionMacaw>
     </div>
   );
 };

src/components/Attributes/Attributes.tsx

@@ -88,6 +88,7 @@ export const Attributes: React.FC<AttributesProps> = ({
                     }}
                   />
                 </Text>
+                <Accordion.TriggerButton dataTestId="expand-icon" />
               </Accordion.Trigger>
               <Accordion.Content>
                 {attributes.length > 0 && (

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx

@@ -17,9 +17,10 @@ export const ChannelAvailabilityItemWrapper: React.FC<
 > = ({ data: { name }, messages, children }) => (
   <Accordion data-test-id="channel-availability-item">
     <Accordion.Item value="channel-availability-item" gap={9}>
-      <Accordion.Trigger buttonDataTestId="expand-icon">
+      <Accordion.Trigger>
         <Text variant={"bodyEmp"}>{name}</Text>
         <Label text={messages.availableDateText} />
+        <Accordion.TriggerButton dataTestId="expand-icon" />
       </Accordion.Trigger>
       <Accordion.Content paddingLeft={3}>{children}</Accordion.Content>
     </Accordion.Item>