remove custom accordion component & redefine ds in its theme file

Author: pettinarip

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

@@ -1,24 +1,40 @@
-import { defineStyleConfig } from "@chakra-ui/react"
+import { accordionAnatomy } from "@chakra-ui/anatomy"
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"
 
-import { accordionDefaultTheme, defineMergeStyles } from "./components.utils"
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(accordionAnatomy.keys)
 
-export const Accordion = defineStyleConfig({
-  baseStyle: defineMergeStyles(accordionDefaultTheme.baseStyle, {
-    button: {
-      _hover: { bg: "background.highlight", color: "primary.hover" },
-      _focus: {
-        outline: "4px solid var(--eth-colors-primary-hover)",
-        outlineOffset: "-4px",
-        bg: "background.highlight",
-        color: "primary.hover",
-        borderRadius: "md",
-      },
-      _expanded: { bg: "background.highlight" },
-      py: "2",
-      px: { base: 2, md: 4 },
+const baseStyle = definePartsStyle({
+  button: {
+    py: "2",
+    px: { base: "2", md: "4" },
+    gap: "2",
+    _hover: { bg: "background.highlight", color: "primary.hover" },
+    _focus: {
+      outline: "4px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: -1,
+      bg: "background.highlight",
+      color: "primary.hover",
+      borderRadius: "base",
     },
-    panel: {
-      p: { base: 2, md: 4 },
+    _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/components/Accordion/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>
+  ),
+}