There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| triggerText | Yes | string |
<div id="reactMount" data-tpl="additionalinfo">
<div class="form-expanding-group"><button type="button" class="additional-info-button va-button-link" aria-expanded="false" aria-controls="tooltip-10"><span class="additional-info-title">Additional Information<i class="fa fa-angle-down"></i></span></button><span id="tooltip-10"></span></div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "./AdditionalInfo.jsx",
"triggerText": "Additional Information"
}
</script>
import React from 'react';
import AdditionalInfo from './AdditionalInfo';
export default function AdditionalInfoExample(props) {
return (
<AdditionalInfo triggerText={props.triggerText}>
<ul>
<li>info A</li>
<li>info B</li>
<li>info C</li>
<li>info D</li>
</ul>
</AdditionalInfo>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ./AdditionalInfo.jsx
triggerText: Additional Information
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash/fp';
import classNames from 'classnames';
import ExpandingGroup from '../form/controls/ExpandingGroup/ExpandingGroup';
export default class AdditionalInfo extends React.Component {
constructor(props) {
super(props);
this.expandedContentId = _.uniqueId('tooltip-');
this.state = { open: false };
}
toggle = () => {
this.setState({ open: !this.state.open });
};
render() {
const { triggerText, children } = this.props;
const iconClass = classNames({
fa: true,
'fa-angle-down': true,
open: this.state.open
});
const trigger = (
<button
type="button"
className="additional-info-button va-button-link"
aria-expanded={this.state.open ? 'true' : 'false'}
aria-controls={this.expandedContentId}
onClick={this.toggle}>
<span className="additional-info-title">
{triggerText}
<i className={iconClass}/>
</span>
</button>
);
return (
<ExpandingGroup
open={this.state.open}
expandedContentId={this.expandedContentId}>
{trigger}
<div className="additional-info-content">{children}</div>
</ExpandingGroup>
);
}
}
AdditionalInfo.propTypes = {
// this is the text displayed for AdditionalInfo link or button
triggerText: PropTypes.string.isRequired
};
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import { axeCheck } from '../../../lib/testing/helpers';
import AdditionalInfo from './AdditionalInfo.jsx';
import ExpandingGroup from '../form/controls/ExpandingGroup/ExpandingGroup';
describe('<AdditionalInfo/>', () => {
let wrapper;
// for the sake of more tests could be written
// declared beforeEach and assigned to wrapper
beforeEach(() => {
wrapper = mount(<AdditionalInfo triggerText="test"/>).setState({
open: true
});
});
it('should render', () => {
expect(wrapper.text()).to.contain('test');
});
it('should pass aXe check', () => {
return axeCheck(<AdditionalInfo triggerText="test"/>);
});
it('renders both children when open is true', () => {
const first = wrapper.find('ExpandingGroup').props();
expect(first.open).to.be.true;
return axeCheck(
<ExpandingGroup open={first.open}>
<child1/>
<child2/>
</ExpandingGroup>
);
});
});