I'm currently working on a react accordion component that requires changing styles based on the active and inactive states. I have successfully set the state and added two props for color and active color. The goal is to change colors when the user clicks on the title div. While I have added conditions in JSX, I am unsure how to properly style it using styled components. I have defined themes for colors like "primary", "neutrals", and "grey" while also utilizing storybook to display them with default values. Below is the code snippet of my react component:
import { string, node, oneOf, bool } from "prop-types"
import * as Styled from "./Accordion.styled"
import Icon from "design-system/components/icon"
import React, { useState } from 'react'
const Accordion = ({ children, icon, text, button,
color, activeColor, }) => {
const [isActive, setIsActive] = useState(false);
return (
<Styled.Accordion
color={isActive ? activeColor : color}
>
<Styled.Title onClick={() => setIsActive(!isActive)}
color={isActive ? activeColor : color}
> {text}
<Styled.Icon color={color}>
<Icon name={icon}/>
</Styled.Icon>
</Styled.Title>
{isActive &&
<Styled.Content
color={isActive ? activeColor : color} >
{children}
{button}
</Styled.Content>
}
</Styled.Accordion>
);
}
Accordion.propTypes = {
text: string.isRequired,
children: node.isRequired,
icon: string,
name: string,
button: node,
color: oneOf(["primary", "neutrals", "grey"]),
activeColor: oneOf(["primary", "neutrals", "grey"]),
}
Accordion.defaultProps = {
children: null,
icon: null,
name: null,
button: null,
color: "neutrals",
activeColor: "neutrals",
}
export default Accordion
import styled from "@emotion/styled"
import { css } from "@emotion/react"
export const Accordion = styled.div`
display: flex;
text-decoration: none;
width: auto;
height: auto;
flex-direction: column;
align-items: flex-start;
justify-content: start;
border-radius: 30px;
`
export const Title = styled.div`
width: auto;
height: auto;
display: inline-flex;
gap: 161px;
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 0px 10px;
color: ${props => props.theme.primary};
background-color: ${props => props.theme.grey};
`
export const Content = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: start;
width: auto;
height: auto;
border-radius: 0px 0px 10px 10px;
padding: 10px 100px 0px 10px;
color: ${props => props.theme.neutrals};
background-color: ${props => props.theme.grey}
`
export const Icon = styled.div`
display: flex;
align-items: flex-start;
width: auto;
height: auto;
`
And here is the layout from storybook:
<Canvas>
<Story
name="Overview - black with button"
args={{
icon: "arrowDown",
icon: "arrowUp",
text: "Fundacja",
button: (
<Button
text="Button ->"
variant="textLine"
size="small"
href="https://google.com"
/>
),
}}
>
{TextTemplate.bind()}
</Story>
</Canvas>
export const TemplateGrid = (args) => (
<div
style={{
}}
>
<Accordion {...args}>
<div>
<div>O nas</div>
<div>Aktualności</div>
<div>Opinie</div>
<div>Partnerzy</div>
<div>Umowa</div>
</div>
</Accordion>
</div>
)
export const TextTemplate = (args) => (
<div
style={{
}}
>
<Accordion {...args}>
<p>
Odpowiedz
</p>
</Accordion>
</div>
)