Accordion redesign

src/components/Accordion/Accordion.stories.tsx

@@ -28,7 +28,13 @@ export default {
   argTypes: {},
 } as Meta<typeof Accordion>;
 
-const Template: Story<AccordionProps> = ({ title, children, disabled, sx }) => {
+const Template: Story<AccordionProps> = ({
+  title,
+  children,
+  disabled,
+  sx,
+  contentBackgroundColor,
+}) => {
   const [expandedPanel, setExpandedPanel] = useState<string>("closed");
 
   const expandFunction = (expandPanel: string) => {
@@ -51,6 +57,7 @@ const Template: Story<AccordionProps> = ({ title, children, disabled, sx }) => {
         id={"accordion1"}
         sx={sx}
         disabled={disabled}
+        contentBackgroundColor={contentBackgroundColor}
       >
         {children}
       </Accordion>
@@ -62,6 +69,7 @@ const Template: Story<AccordionProps> = ({ title, children, disabled, sx }) => {
         }}
         id={"accordion2"}
         sx={sx}
+        contentBackgroundColor={contentBackgroundColor}
       >
         {children}
       </Accordion>
@@ -73,6 +81,7 @@ const Template: Story<AccordionProps> = ({ title, children, disabled, sx }) => {
         }}
         id={"accordion3"}
         sx={sx}
+        contentBackgroundColor={contentBackgroundColor}
       >
         {children}
       </Accordion>
@@ -155,6 +164,45 @@ Disabled.args = {
   ),
 };
 
+export const WithContentBackground = Template.bind({});
+WithContentBackground.args = {
+  title: "MultiState Accordion",
+  contentBackgroundColor: true,
+  disabled: true,
+  children: (
+    <div>
+      <p>
+        My computer-- disassembled is a maze of cables, drives chips and
+        ports--an array of connections, silver solderings, twisting wires.
+      </p>
+      <p>
+        But when the satiny case is latched in place coils and cables disappear.
+        The smallest particle of matter is not an atom, but a byte-- a particle
+        of magic that combines and multiplies unseen inside the blinking box.
+      </p>
+      <p>
+        Creation occurs inside my computer-- friends, family rest behind the
+        pressing of selected keys. Words and faces form; smiles and frowns
+        become feelings. Attraction becomes addiction.
+      </p>
+      <p>
+        Inside my computer merchants buy and sell-- musicians sing, artists
+        train pictures into pixels, poets recollect emotion in tranquillity.
+      </p>
+      <p>
+        Inside my computer dreams are imagined into reality-- inventions, hopes,
+        ideas are born and nurtured into happenings. Strangers share a table,
+        touch hands across the world.
+      </p>
+      <p>
+        Inside my computer the pulse of human hearts waxes and wanes as people
+        fall in and out of love.
+      </p>
+      <div style={{ textAlign: "right" }}>Karen Ruff - 2014</div>
+    </div>
+  ),
+};
+
 export const CustomStyles = Template.bind({});
 CustomStyles.args = {
   title: "MultiState Accordion",

src/components/Accordion/Accordion.tsx

@@ -24,12 +24,13 @@ import {
 } from "./Accordion.types";
 import { lightColors } from "../../global/themes";
 import Box from "../Box/Box";
-import { overridePropsParse } from "../../global/utils";
+import { overridePropsParse, paddingSizeVariants } from "../../global/utils";
 import ChevronUpIcon from "../Icons/NewDesignIcons/ChevronUpIcon";
 import ChevronDownIcon from "../Icons/NewDesignIcons/ChevronDownIcon";
 
 const AccordionContainer = styled.div<AccordionMainProps>(({ theme, sx }) => ({
-  border: `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`,
+  borderBottom: `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`,
+
   borderRadius: 2,
   ...overridePropsParse(sx, theme),
 }));
@@ -39,18 +40,18 @@ const AccordionTitleBar = styled.div<HTMLAttributes<HTMLDivElement>>(
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: 10,
-    fontWeight: "bold",
+    padding: `${paddingSizeVariants.sizeXXS}px 0`,
     cursor: "pointer",
     userSelect: "none",
+    fontSize: 14,
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "20px",
+    letterSpacing: "0.16px",
+    color: theme.colors["Color/Neutral/Text/colorTextHeading"],
     "&.disabled": {
       cursor: "not-allowed",
-      color: get(theme, "mutedText", lightColors.mutedText),
-      backgroundColor: get(
-        theme,
-        "signalColors.disabled",
-        lightColors.disabledGrey,
-      ),
+      color: theme.colors["Color/Neutral/Text/colorTextDisabled"],
     },
     "&:not(.disabled):hover": {
       backgroundColor: get(theme, "boxBackground", lightColors.boxBackground),
@@ -59,17 +60,26 @@ const AccordionTitleBar = styled.div<HTMLAttributes<HTMLDivElement>>(
 );
 
 const AccordionContent = styled.div<AccordionContentProps>(
-  ({ theme, expanded }) => ({
-    borderTop: expanded
-      ? `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`
-      : "0",
+  ({ theme, expanded, backgroundColor }) => ({
+    borderTop: 0,
     display: "grid",
     gridTemplateRows: expanded ? "1fr" : "0fr",
     transition: "250ms grid-template-rows ease",
     "& .expandSubContainer": {
       overflow: "hidden",
-      padding: expanded ? 10 : 0,
+      padding: expanded ? paddingSizeVariants.sizeXS : 0,
       transition: expanded ? "initial" : "250ms padding ease 150ms",
+      display: "flex",
+      flexDirection: "column",
+      gap: 16,
+      backgroundColor: backgroundColor
+        ? theme.colors["Color/Neutral/Bg/colorBgSections"]
+        : "initial",
+      color: theme.colors["Color/Neutral/Text/colorTextLabel"],
+      marginBottom: expanded ? paddingSizeVariants.sizeXS : 0,
+      "& > div:last-of-type": {
+        marginBottom: 36,
+      },
     },
   }),
 );
@@ -81,6 +91,7 @@ const Accordion: FC<AccordionProps> = ({
   onTitleClick,
   disabled,
   id,
+  contentBackgroundColor = false,
   sx,
 }) => {
   return (
@@ -92,7 +103,11 @@ const Accordion: FC<AccordionProps> = ({
         {title}
         {expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
       </AccordionTitleBar>
-      <AccordionContent className={`accordionContent`} expanded={expanded}>
+      <AccordionContent
+        className={`accordionContent`}
+        expanded={expanded}
+        backgroundColor={contentBackgroundColor}
+      >
         <Box className={"expandSubContainer"}>{children}</Box>
       </AccordionContent>
     </AccordionContainer>

src/components/Accordion/Accordion.types.ts

@@ -24,6 +24,7 @@ export interface AccordionProps {
   title: ReactNode;
   children: ReactNode;
   disabled?: boolean;
+  contentBackgroundColor?: boolean;
   sx?: OverrideTheme;
 }
 
@@ -33,4 +34,5 @@ export interface AccordionMainProps {
 
 export interface AccordionContentProps {
   expanded: boolean;
+  backgroundColor?: boolean;
 }