Merge pull request #10936 from justynleung/Accordion

Accordion made according to DS style in figma [issue #10748]

Author: pettinarip

src/@chakra-ui/components/Accordion.ts

@@ -0,0 +1,40 @@
+import { accordionAnatomy } from "@chakra-ui/anatomy"
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(accordionAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  button: {
+    py: "2",
+    px: { base: "2", md: "4" },
+    gap: "2",
+    _hover: { bg: "background.highlight", color: "primary.hover" },
+    _focusVisible: {
+      outline: "4px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: -1,
+      bg: "background.highlight",
+      color: "primary.hover",
+      borderRadius: "base",
+    },
+    _expanded: {
+      bg: "background.highlight",
+      color: "primary.highContrast",
+      svg: { transform: "rotate(180deg)" },
+    },
+  },
+  panel: {
+    mt: "2",
+    p: { base: 2, md: 4 },
+    fontSize: "sm",
+  },
+  icon: {
+    fontSize: "2xl",
+    transform: "rotate(270deg)",
+  },
+})
+
+export const Accordion = defineMultiStyleConfig({
+  baseStyle,
+})

src/@chakra-ui/components/components.utils.ts

@@ -2,7 +2,6 @@ import merge from "lodash/merge"
 import { cssVar, SystemStyleObject, theme } from "@chakra-ui/react"
 
 const {
-  Accordion: accordionDefaultTheme,
   Alert: alertDefaultTheme,
   Avatar: avatarDefaultTheme,
   Badge: badgeDefaultTheme,
@@ -31,7 +30,6 @@ const {
 } = theme.components
 
 export {
-  accordionDefaultTheme,
   alertDefaultTheme,
   avatarDefaultTheme,
   badgeDefaultTheme,

src/@chakra-ui/components/index.ts

@@ -1,11 +1,11 @@
+import { Accordion } from "./Accordion"
 import { Alert } from "./Alert"
 import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Breadcrumb } from "./Breadcrumb"
 import { Button } from "./Button"
 import { Checkbox } from "./Checkbox"
 import {
-  accordionDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
   dividerDefaultTheme,
@@ -31,7 +31,7 @@ import { Text } from "./Text"
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
-  Accordion: accordionDefaultTheme,
+  Accordion,
   Alert,
   Avatar,
   Badge,

src/components/BaseStories/Accordion.stories.tsx

@@ -0,0 +1,66 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+} from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+type AccordionType = typeof Accordion
+
+const meta: Meta<AccordionType> = {
+  title: "Molecules / Disclosure Content / Accordions",
+  component: Accordion,
+  decorators: [
+    (Story) => (
+      <Box width="300px">
+        <Story />
+      </Box>
+    ),
+  ],
+} satisfies Meta<AccordionType>
+
+export default meta
+
+type Story = StoryObj<AccordionType>
+
+export const Basic: Story = {
+  render: () => (
+    <Accordion allowToggle defaultIndex={0}>
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box as="span" flex="1" textAlign="left">
+              Label text of the accordion
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel>
+          Ethereum is open access to digital money and data-friendly services
+          for everyone – no matter your background or location. It&apos;s a
+          community-built technology behind the cryptocurrency ether (ETH) and
+          thousands of applications you can use today.
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box as="span" flex="1" textAlign="left">
+              Label text of the accordion
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel>
+          Ethereum is open access to digital money and data-friendly services
+          for everyone – no matter your background or location. It&apos;s a
+          community-built technology behind the cryptocurrency ether (ETH) and
+          thousands of applications you can use today.
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

src/components/ExpandableCard.tsx

@@ -65,19 +65,22 @@ const ExpandableCard = ({
       _hover={{
         backgroundColor: "ednBackground",
       }}
-      borderBottomWidth="0"
       index={isVisible ? [0] : []}
     >
       <AccordionItem borderTopWidth="0" flex="1">
         <Heading as="h3" m={0}>
           <AccordionButton
             width="100%"
-            p={6}
+            px="6"
+            py="6"
             flex="1"
             onClick={onClick}
             _hover={{
               backgroundColor: "ednBackground",
             }}
+            _expanded={{
+              backgroundColor: "transparent",
+            }}
           >
             <Box
               display="flex"
@@ -122,6 +125,8 @@ const ExpandableCard = ({
           </AccordionButton>
         </Heading>
         <AccordionPanel
+          p="0"
+          mt="0"
           paddingX="6"
           paddingBottom="6"
           paddingTop="0"

src/components/FindWallet/LanguageSupportFilter.tsx

@@ -91,7 +91,8 @@ export const LanguageSupportFilter = () => {
               color="inherit"
               fontWeight="inherit"
               fontSize="inherit"
-              p={0}
+              px={0}
+              py={0}
               textAlign="initial"
               _hover={{ background: "transparent" }}
             >
@@ -103,6 +104,7 @@ export const LanguageSupportFilter = () => {
                 color="primary.base"
                 boxSize={9}
                 _hover={{ color: "primary.hover" }}
+                transform="rotate(0deg)"
               />
             </AccordionButton>
           </Heading>

src/components/FindWallet/WalletFilterFeature.tsx

@@ -104,7 +104,8 @@ const WalletFilterFeature = ({
                     color="inherit"
                     fontWeight="inherit"
                     fontSize="inherit"
-                    p={0}
+                    px={0}
+                    py={0}
                     textAlign="initial"
                     _hover={{ background: "transparent" }}
                   >
@@ -116,6 +117,7 @@ const WalletFilterFeature = ({
                       color="primary.base"
                       boxSize={9}
                       _hover={{ color: "primary.hover" }}
+                      transform="rotate(0deg)"
                     />
                   </AccordionButton>
                 </Heading>

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -44,7 +44,12 @@ const LvlAccordion = ({
         const isActivePage = isLink && cleanPath(asPath) === action.href
         if (isLink)
           return (
-            <AccordionItem key={label}>
+            <AccordionItem
+              key={label}
+              borderTop="1px"
+              borderColor="inherit"
+              _last={{ borderBottomWidth: "1px" }}
+            >
               <Button
                 as={BaseLink}
                 w="full"
@@ -92,7 +97,12 @@ const LvlAccordion = ({
             </AccordionItem>
           )
         return (
-          <AccordionItem key={label}>
+          <AccordionItem
+            key={label}
+            borderTop="1px"
+            borderColor="inherit"
+            _last={{ borderBottomWidth: "1px" }}
+          >
             {({ isExpanded }) => (
               <>
                 <Heading
@@ -137,7 +147,11 @@ const LvlAccordion = ({
                   </AccordionButton>
                 </Heading>
 
-                <AccordionPanel p="0" bg={menuColors.lvl[lvl + 1].background}>
+                <AccordionPanel
+                  p="0"
+                  mt="0"
+                  bg={menuColors.lvl[lvl + 1].background}
+                >
                   <LvlAccordion
                     lvl={(lvl + 1) as Level}
                     items={action.items}

src/components/Nav/Mobile/MenuBody.tsx

@@ -35,7 +35,12 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
         {SECTION_LABELS.map((key) => {
           const { label, items } = linkSections[key]
           return (
-            <AccordionItem key={label}>
+            <AccordionItem
+              key={label}
+              borderTop="1px"
+              borderColor="inherit"
+              _last={{ borderBottomWidth: "1px" }}
+            >
               {({ isExpanded }) => (
                 <>
                   <Heading
@@ -63,6 +68,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
                       justifyContent="start"
                       gap="2"
                       _hover={{ bg: "none" }}
+                      px="4"
                       py="4"
                     >
                       <ExpandIcon isOpen={isExpanded} />
@@ -78,7 +84,11 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
                     </AccordionButton>
                   </Heading>
 
-                  <AccordionPanel p="0" bg={menuColors.lvl[2].background}>
+                  <AccordionPanel
+                    p="0"
+                    mt="0"
+                    bg={menuColors.lvl[2].background}
+                  >
                     <LvlAccordion
                       lvl={2 as Level}
                       items={items}

src/components/StablecoinAccordion/AccordionCustomItem.tsx

@@ -59,7 +59,9 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
           <AccordionButton
             justifyContent="space-between"
             alignItems="center"
-            p={0}
+            px="0"
+            py="0"
+            _expanded={{ background: "transparent" }}
             _hover={{ background: "ednBackground" }}
           >
             <Flex
@@ -103,7 +105,9 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
             borderColor="border"
             mb="-1px"
             mx="-1px"
-            p={0}
+            mt="0"
+            p="0"
+            fontSize="md"
           >
             <Flex
               p={8}