51 lines
1.6 KiB
Diff
51 lines
1.6 KiB
Diff
|
--- orig/components/ContentContainer/AccordionContainer.jsx 2021-10-11 20:30:09.799665485 -0300
|
||
|
|
+++ sources-gen/components/ContentContainer/AccordionContainer.jsx 2021-10-11 15:49:17.793082410 -0300
|
||
|
|
@@ -6,43 +6,26 @@
|
||
|
|
import { useTranslation } from '../../hooks/useTranslation';
|
||
|
|
|
||
|
|
export const AccordionContainer = ({ title, children, className }) => {
|
||
|
|
- const element = useRef(null);
|
||
|
|
- const [isOpen, { toggleOnClick }] = useToggle();
|
||
|
|
- const height = element.current ? element.current.scrollHeight : '0';
|
||
|
|
const titleTranslation = useTranslation(title);
|
||
|
|
|
||
|
|
return (
|
||
|
|
- <div className={className}>
|
||
|
|
- <div className="row noVMargins">
|
||
|
|
+ <details className={className}>
|
||
|
|
+ <summary className="row noVMargins">
|
||
|
|
<div className="col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
|
||
|
|
- <button tabIndex={0} onClick={toggleOnClick}>
|
||
|
|
<h4>
|
||
|
|
{titleTranslation}
|
||
|
|
- <ToggleableArrow
|
||
|
|
- className="toggleable-arrow"
|
||
|
|
- fill={colors.LG_BLACK}
|
||
|
|
- {...{
|
||
|
|
- isUp: isOpen,
|
||
|
|
- }}
|
||
|
|
- />
|
||
|
|
</h4>
|
||
|
|
- </button>
|
||
|
|
</div>
|
||
|
|
- </div>
|
||
|
|
+ </summary>
|
||
|
|
<AccordionContainerContent
|
||
|
|
- height={height}
|
||
|
|
- isOpen={isOpen}
|
||
|
|
- ref={element}
|
||
|
|
- aria-expanded={isOpen}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</AccordionContainerContent>
|
||
|
|
- </div>
|
||
|
|
+ </details>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const AccordionContainerContent = styled.div`
|
||
|
|
- max-height: ${({ isOpen, height }) => (isOpen ? height : '1')}px;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: ${colors.LG_WHITE};
|
||
|
|
transition: max-height 0.7s;
|