Web: components: ToggleContent: boolean knobs works with props

web/ASC.Web.Components/src/components/toggle-content/index.js

@@ -45,7 +45,10 @@ class ToggleContent extends React.Component {
   render() {
     return (
       <div>
-        <StyledSpan onClick={() => { this.toggleContent(!this.state.isOpen) }}>
+        <StyledSpan onClick={() => {
+          this.toggleContent(!this.state.isOpen);
+          this.props.onChange && this.props.onChange(!this.state.isOpen);
+        }}>
           <Arrow color="#333333" isfill={true} size='medium' isOpen={this.state.isOpen} />
           <Text.Headline tag='h2' isInline={true}>{this.props.label}</Text.Headline>
         </StyledSpan>
@@ -56,7 +59,8 @@ class ToggleContent extends React.Component {
 }
 
 ToggleContent.propTypes = {
-  isOpen: PropTypes.bool
+  isOpen: PropTypes.bool,
+  onChange: PropTypes.func
 }
 
 ToggleContent.defaultProps = {

web/ASC.Web.Storybook/stories/toggle-content/base/base.toggle-content.stories.js

@@ -54,11 +54,20 @@ storiesOf('Components|ToggleContent', module)
          }
       });
 
+      let isOpen = boolean('isOpen', true);
+
       return (
          <>
             <ToggleContent
                label={text('label', 'Some label')}
-               isOpen={boolean('isOpen', true)}
+               isOpen={isOpen}
+               onChange={(checked) => {
+                  window.__STORYBOOK_ADDONS.channel.emit('storybookjs/knobs/change', {
+                     name: 'isOpen',
+                     value: checked
+                  });
+               }
+               }
             >
                {children}
             </ToggleContent>