Skip to content

Commit b9a1613

Browse files
author
Hector Arce De Las Heras
committed
Improve and deprecated link styles for Accordion component
1 parent 39163ce commit b9a1613

File tree

3 files changed

+45
-128
lines changed

3 files changed

+45
-128
lines changed

‎src/components/accordion/accordion.styled.ts

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,6 @@ export const AccordionHeaderMainContainerStyled = styled.div<IAccordionStyles>`
3232
${props => getStyles(props.styles)}
3333
`;
3434

35-
export const AccordionHeaderMainStyled = styled.div`
36-
${({ theme: { MEDIA_QUERIES } }) => css`
37-
display: flex;
38-
width: 100%;
39-
align-items: center;
40-
justify-content: space-between;
41-
${MEDIA_QUERIES?.onlyMobile} {
42-
flex-direction: column;
43-
justify-content: left;
44-
align-items: flex-start;
45-
}
46-
`}
47-
${({ theme: { MEDIA_QUERIES } }) => css`
48-
${MEDIA_QUERIES?.onlyMobile} {
49-
flex-direction: row;
50-
align-items: center;
51-
}
52-
`}
53-
`;
54-
5535
export const AccordionHeaderTitleHeadlineStyled = styled.span`
5636
display: flex;
5737
width: 100%;
@@ -73,23 +53,7 @@ export const AccordionTriggerStyled = styled.button<IAccordionStyles>`
7353
${props => getStyles(props.styles)}
7454
`;
7555

76-
export const AccordionTriggerLinkStyled = styled.div<IAccordionStyles>`
77-
${props => getStyles(props.styles)}
78-
`;
79-
80-
export const AccordionTriggerIconStyled = styled.span<IAccordionStyles>`
81-
${({ $rotate }) =>
82-
$rotate &&
83-
css`
84-
svg {
85-
transform: rotate(180deg);
86-
}
87-
`};
88-
${props => getStyles(props.styles)}
89-
`;
90-
91-
export const AccordionTriggerIconLinkStyled = styled.button<IAccordionStyles>`
92-
cursor: pointer;
56+
export const AccordionTriggerIconContainerStyled = styled.span<IAccordionStyles>`
9357
${({ $rotate }) =>
9458
$rotate &&
9559
css`

‎src/components/accordion/accordionStandAlone.tsx

Lines changed: 41 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ import {
1919
AccordionSubHeaderContainerStyled,
2020
AccordionTitleIconWrapper,
2121
AccordionTitleStyled,
22-
AccordionTriggerIconLinkStyled,
23-
AccordionTriggerIconStyled,
24-
AccordionTriggerLinkStyled,
22+
AccordionTriggerIconContainerStyled,
2523
AccordionTriggerStyled,
2624
LineSeparatorContainerStyled,
2725
} from './accordion.styled';
@@ -44,93 +42,6 @@ const AccordionStandAloneComponent = (
4442

4543
const getDataTestId = (uniqueId = ''): string => `${props.dataTestId}${uniqueId}`;
4644

47-
const renderTitle = () => {
48-
if (!props.title) return null;
49-
return typeof props.title?.content === 'string' ? (
50-
<AccordionTriggerStyled
51-
aria-controls={PANEL_ID}
52-
aria-expanded={open}
53-
data-testid={getDataTestId('TriggerButton')}
54-
id={TRIGGER_ID}
55-
styles={props.styles.trigger}
56-
type={ButtonType.BUTTON}
57-
{...props.triggerButton}
58-
>
59-
<AccordionTriggerIconStyled
60-
$rotate={open}
61-
data-testid={`${props.dataTestId}TriggerIconWrapper`}
62-
styles={props.styles.triggerIconContainer}
63-
>
64-
<ElementOrIcon
65-
customIconStyles={props.styles.triggerIcon}
66-
dataTestId={getDataTestId('TriggerIcon')}
67-
{...props.triggerIcon}
68-
/>
69-
</AccordionTriggerIconStyled>
70-
<AccordionTitleStyled styles={props.styles.titleContainer}>
71-
{props.titleIcon && (
72-
<AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
73-
<ElementOrIcon
74-
customIconStyles={props.styles.titleIcon}
75-
dataTestId={getDataTestId('TitleIcon')}
76-
{...props.titleIcon}
77-
/>
78-
</AccordionTitleIconWrapper>
79-
)}
80-
<Text
81-
component={TextComponentType.SPAN}
82-
customTypography={props.styles.title}
83-
dataTestId={getDataTestId('TriggerText')}
84-
{...props.title}
85-
>
86-
{props.title.content}
87-
</Text>
88-
</AccordionTitleStyled>
89-
</AccordionTriggerStyled>
90-
) : (
91-
<AccordionTriggerLinkStyled
92-
data-testid={getDataTestId('TriggerButton')}
93-
styles={props.styles.link}
94-
>
95-
<AccordionTriggerIconLinkStyled
96-
$rotate={open}
97-
aria-controls={PANEL_ID}
98-
aria-expanded={open}
99-
data-testid={`${props.dataTestId}TriggerIconWrapper`}
100-
id={TRIGGER_ID}
101-
styles={props.styles.triggerIconContainer}
102-
type={ButtonType.BUTTON}
103-
{...props.triggerButton}
104-
>
105-
<ElementOrIcon
106-
customIconStyles={props.styles.triggerIcon}
107-
dataTestId={getDataTestId('TriggerIcon')}
108-
{...props.triggerIcon}
109-
/>
110-
</AccordionTriggerIconLinkStyled>
111-
<AccordionTitleStyled styles={props.styles.titleContainer}>
112-
{props.titleIcon && (
113-
<AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
114-
<ElementOrIcon
115-
customIconStyles={props.styles.titleIcon}
116-
dataTestId={getDataTestId('TitleIcon')}
117-
{...props.titleIcon}
118-
/>
119-
</AccordionTitleIconWrapper>
120-
)}
121-
<Text
122-
component={TextComponentType.SPAN}
123-
customTypography={props.styles.title}
124-
dataTestId={getDataTestId('TriggerText')}
125-
{...props.title}
126-
>
127-
{props.title?.content}
128-
</Text>
129-
</AccordionTitleStyled>
130-
</AccordionTriggerLinkStyled>
131-
);
132-
};
133-
13445
return (
13546
<AccordionContainerStyled
13647
ref={ref}
@@ -147,7 +58,46 @@ const AccordionStandAloneComponent = (
14758
>
14859
<AccordionHeaderMainContainerStyled styles={props.styles.headerMainContainer}>
14960
<AccordionHeaderTitleHeadlineStyled as={props.triggerComponent}>
150-
{renderTitle()}
61+
<AccordionTriggerStyled
62+
aria-controls={PANEL_ID}
63+
aria-expanded={open}
64+
data-testid={getDataTestId('TriggerButton')}
65+
id={TRIGGER_ID}
66+
styles={props.styles[typeof props.title?.content !== 'string' ? 'link' : 'trigger']}
67+
type={ButtonType.BUTTON}
68+
{...props.triggerButton}
69+
>
70+
<AccordionTriggerIconContainerStyled
71+
$rotate={open}
72+
data-testid={`${props.dataTestId}TriggerIconWrapper`}
73+
styles={props.styles.triggerIconContainer}
74+
>
75+
<ElementOrIcon
76+
customIconStyles={props.styles.triggerIcon}
77+
dataTestId={getDataTestId('TriggerIcon')}
78+
{...props.triggerIcon}
79+
/>
80+
</AccordionTriggerIconContainerStyled>
81+
<AccordionTitleStyled styles={props.styles.titleContainer}>
82+
{props.titleIcon && (
83+
<AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
84+
<ElementOrIcon
85+
customIconStyles={props.styles.titleIcon}
86+
dataTestId={getDataTestId('TitleIcon')}
87+
{...props.titleIcon}
88+
/>
89+
</AccordionTitleIconWrapper>
90+
)}
91+
<Text
92+
component={TextComponentType.SPAN}
93+
customTypography={props.styles.title}
94+
dataTestId={getDataTestId('TriggerText')}
95+
{...props.title}
96+
>
97+
{props.title?.content}
98+
</Text>
99+
</AccordionTitleStyled>
100+
</AccordionTriggerStyled>
151101
</AccordionHeaderTitleHeadlineStyled>
152102
{props.headerRightContent && (
153103
<AccordionHeaderRightContentStyled

‎src/components/accordion/types/accordionTheme.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export type AccordionPropsStylesType = {
1515
headerInternalContainer?: CommonStyleType;
1616
headerMainContainer?: CommonStyleType;
1717
trigger?: CommonStyleType;
18+
/**
19+
* @deprecated currently link styles is used instead of trigger when tittle is not type of string. In the next major only trigger styles will be used
20+
*/
1821
link?: CommonStyleType;
1922
triggerIconContainer?: CommonStyleType;
2023
triggerIcon?: IconTypes;

0 commit comments

Comments
 (0)