import React from 'react' import PropTypes from 'prop-types' import useExpandCollapse from '../js/shared/hooks/use-expand-collapse' function TestUI({ children, expandableProps, toggleProps }) { return ( <>
{children}
) } function VerticalTestUI(props) { return {verticalContents} } function HorizontalTestUI(props) { return {horizontalContents} } VerticalTestUI.propTypes = { expandableProps: PropTypes.object, toggleProps: PropTypes.object, } HorizontalTestUI.propTypes = VerticalTestUI.propTypes TestUI.propTypes = { ...VerticalTestUI.propTypes, children: PropTypes.node, } export const Vertical = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } export const VerticalInitiallyExpanded = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } VerticalInitiallyExpanded.args = { initiallyExpanded: true, } export const VerticalWithMinSize = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } VerticalWithMinSize.args = { collapsedSize: 200, } export const Horizontal = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } Horizontal.args = { dimension: 'width', } export const HorizontalInitiallyExpanded = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } HorizontalInitiallyExpanded.args = { initiallyExpanded: true, } export const HorizontalWithMinSize = args => { const { expandableProps, toggleProps } = useExpandCollapse(args) return ( ) } HorizontalWithMinSize.args = { dimension: 'width', collapsedSize: 200, } const defaultContentStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '2em', backgroundImage: 'linear-gradient(to bottom, red, blue)', width: '500px', height: '500px', color: '#FFF', } const verticalContents =
Vertical
const horizontalContents = (
Horizontal
) export default { title: 'useExpandCollapse', }