danger: 'alert alert-danger',
warning: 'alert alert-warning',
info: 'alert alert-info',
- success: 'alert alert-success'
+ success: 'alert alert-success',
+ collapse: 'collapse'
}
}
}
--- /dev/null
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.596 8.28l-4.604 4.602a.382.382 0 0 1-.279.118.382.382 0 0 1-.279-.118l-1.03-1.03a.382.382 0 0 1-.117-.278c0-.108.04-.201.117-.28L8.7 8 5.404 4.706a.382.382 0 0 1-.117-.28c0-.108.04-.2.117-.279l1.03-1.03A.382.382 0 0 1 6.714 3c.107 0 .2.04.278.118l4.604 4.603a.382.382 0 0 1 .117.279c0 .108-.04.201-.117.28z" fill="#236a97" /></svg>
\ No newline at end of file
--- /dev/null
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M7.72 11.596L3.119 6.992A.382.382 0 0 1 3 6.713c0-.108.04-.2.118-.279l1.03-1.03a.382.382 0 0 1 .278-.117c.108 0 .201.04.28.117L8 8.7l3.294-3.295a.382.382 0 0 1 .28-.117c.108 0 .2.04.279.117l1.03 1.03a.382.382 0 0 1 .117.28c0 .107-.04.2-.118.278L8.28 11.596a.382.382 0 0 1-.279.117.382.382 0 0 1-.28-.117z" fill="#236a97" /></svg>
\ No newline at end of file
background-color: #dff0d8;
color: #3c763d;
}
+
+.collapse {
+ border: 1px solid #e6e6e6;
+ border-radius: 2px;
+ background-color: #f3f3f3;
+ padding: 8px;
+ margin: 0 -1em 1.5rem;
+}
+
+.collapse > a:first-child {
+ background: url(../images/open.svg) no-repeat 0 50%;
+ padding-left: 20px;
+ display: block;
+ color: #236a97;
+ display: block;
+ cursor: pointer;
+ margin-bottom: 0.5rem;
+ font-size: 16px;
+ text-decoration: none;
+}
+
+.collapse.close > a:first-child {
+ background: url(../images/close.svg) no-repeat 0 50%;
+}
+
+.collapse.close > * {
+ display: none;
+}
+
+.collapse.close > a:first-child {
+ margin: 0;
+}
+
+.collapse *:last-child {
+ margin-bottom: 0;
+}
+
+.collapse .alert {
+ margin: 0 0.5em 1.5rem;
+}
import Helmet from 'react-helmet';
import './page.css';
-export default ({ data }) => {
- const page = data.markdownRemark;
- let htmlWithInclusions = cutSonarCloudContent(page.html).replace(
- /\<p\>@include (.*)\<\/p\>/,
- (_, path) => {
- const chunk = data.allMarkdownRemark.edges.find(
- edge => edge.node.fields && edge.node.fields.slug === path
- );
- return chunk ? chunk.node.html : '';
+export default class Page extends React.PureComponent {
+ componentDidMount() {
+ const collaspables = document.getElementsByClassName('collapse');
+ for (let i = 0; i < collaspables.length; i++) {
+ collaspables[i].classList.add('close');
+ collaspables[i].firstChild.outerHTML = collaspables[i].firstChild.outerHTML
+ .replace(/\<h2/gi, '<a href="#"')
+ .replace(/\<\/h2\>/gi, '</a>');
+ collaspables[i].firstChild.addEventListener('click', e => {
+ e.currentTarget.parentNode.classList.toggle('close');
+ e.preventDefault();
+ });
}
- );
-
- if (
- page.headings &&
- page.headings.length > 0 &&
- page.html.match(/<h[1-9]>Table Of Contents<\/h[1-9]>/i)
- ) {
- htmlWithInclusions = generateTableOfContents(htmlWithInclusions, page.headings);
}
- return (
- <div css={{ paddingTop: 24, paddingBottom: 24 }}>
- <Helmet title={page.frontmatter.title} />
- <h1>{page.frontmatter.title}</h1>
- <div
- css={{
- '& img[src$=".svg"]': {
- position: 'relative',
- top: '-2px',
- verticalAlign: 'text-bottom'
- }
- }}
- dangerouslySetInnerHTML={{ __html: htmlWithInclusions }}
- />
- </div>
- );
-};
+ render() {
+ const page = this.props.data.markdownRemark;
+ let htmlWithInclusions = cutSonarCloudContent(page.html).replace(
+ /\<p\>@include (.*)\<\/p\>/,
+ (_, path) => {
+ const chunk = data.allMarkdownRemark.edges.find(edge => edge.node.fields.slug === path);
+ return chunk ? chunk.node.html : '';
+ }
+ );
+
+ if (
+ page.headings &&
+ page.headings.length > 0 &&
+ page.html.match(/<h[1-9]>Table Of Contents<\/h[1-9]>/i)
+ ) {
+ htmlWithInclusions = generateTableOfContents(htmlWithInclusions, page.headings);
+ }
+
+ return (
+ <div css={{ paddingTop: 24, paddingBottom: 24 }}>
+ <Helmet title={page.frontmatter.title} />
+ <h1>{page.frontmatter.title}</h1>
+ <div
+ css={{
+ '& img[src$=".svg"]': {
+ position: 'relative',
+ top: '-2px',
+ verticalAlign: 'text-bottom'
+ }
+ }}
+ dangerouslySetInnerHTML={{ __html: htmlWithInclusions }}
+ />
+ </div>
+ );
+ }
+}
export const query = graphql`
query PageQuery($slug: String!) {
.documentation-content.markdown .alert p {
margin: 0;
}
+
+.documentation-content.markdown .collapse-container {
+ border: 1px solid var(--barBorderColor);
+ border-radius: 2px;
+ background-color: var(--barBackgroundColor);
+ padding: 8px;
+ margin: 0.8em 0 2em;
+}
+
+.documentation-content.markdown .collapse-container > a:first-child {
+ display: block;
+}
+
+.documentation-content.markdown .collapse-container > a:first-child:focus {
+ color: var(--darkBlue);
+}
+
+.documentation-content.markdown .collapse-container *:last-child {
+ margin-bottom: 0;
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import * as React from 'react';
+import OpenCloseIcon from '../icons-components/OpenCloseIcon';
+
+interface State {
+ open: boolean;
+}
+
+export default class DocCollapsibleBlock extends React.PureComponent<{}, State> {
+ state = { open: false };
+
+ handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+ this.setState(state => ({ open: !state.open }));
+ event.stopPropagation();
+ event.preventDefault();
+ };
+
+ renderTitle(children: any) {
+ return (
+ <a
+ aria-expanded={String(this.state.open)}
+ aria-haspopup={true}
+ className="link-no-underline"
+ href="#"
+ onClick={this.handleClick}>
+ <OpenCloseIcon className="vertical-middle little-spacer-right" open={this.state.open} />
+ {children.props ? children.props.children : children}
+ </a>
+ );
+ }
+
+ render() {
+ const childrenAsArray = React.Children.toArray(this.props.children);
+ if (childrenAsArray.length < 1) {
+ return null;
+ }
+
+ const firstChildChildren = React.Children.toArray(
+ (childrenAsArray[0] as React.ReactElement<any>).props.children
+ );
+ if (firstChildChildren.length < 2) {
+ return null;
+ }
+
+ return (
+ <div className="collapse-container">
+ {this.renderTitle(firstChildChildren[0])}
+ {this.state.open && firstChildChildren.slice(1)}
+ </div>
+ );
+ }
+}
import DocLink from './DocLink';
import DocImg from './DocImg';
import DocTooltipLink from './DocTooltipLink';
+import DocCollapsibleBlock from './DocCollapsibleBlock';
import { separateFrontMatter, filterContent } from '../../helpers/markdown';
import { scrollToElement } from '../../helpers/scrolling';
danger: { classes: 'alert alert-danger' },
warning: { classes: 'alert alert-warning' },
info: { classes: 'alert alert-info' },
- success: { classes: 'alert alert-success' }
+ success: { classes: 'alert alert-success' },
+ collapse: { classes: 'collapse' }
})
.use(reactRenderer, {
remarkReactComponents: {
function Block(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
if (props.className) {
- return <div className={classNames('cut-margins', props.className)}>{props.children}</div>;
+ if (props.className.includes('collapse')) {
+ return <DocCollapsibleBlock>{props.children}</DocCollapsibleBlock>;
+ } else {
+ return <div className={classNames('cut-margins', props.className)}>{props.children}</div>;
+ }
} else {
return props.children;
}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import DocCollapsibleBlock from '../DocCollapsibleBlock';
+import { click } from '../../../helpers/testUtils';
+
+const children = (
+ <div>
+ <h2>Foo</h2>
+ <p>Bar</p>
+ </div>
+);
+
+it('should render a collapsible block', () => {
+ const wrapper = shallow(<DocCollapsibleBlock>{children}</DocCollapsibleBlock>);
+ expect(wrapper).toMatchSnapshot();
+
+ click(wrapper.find('a'));
+ wrapper.update();
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should not render if not at least 2 children', () => {
+ const wrapper = shallow(
+ <DocCollapsibleBlock>
+ <div>foobar</div>
+ </DocCollapsibleBlock>
+ );
+ expect(wrapper).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render if not at least 2 children 1`] = `""`;
+
+exports[`should render a collapsible block 1`] = `
+<div
+ className="collapse-container"
+>
+ <a
+ aria-expanded="false"
+ aria-haspopup={true}
+ className="link-no-underline"
+ href="#"
+ onClick={[Function]}
+ >
+ <OpenCloseIcon
+ className="vertical-middle little-spacer-right"
+ open={false}
+ />
+ Foo
+ </a>
+</div>
+`;
+
+exports[`should render a collapsible block 2`] = `
+<div
+ className="collapse-container"
+>
+ <a
+ aria-expanded="true"
+ aria-haspopup={true}
+ className="link-no-underline"
+ href="#"
+ onClick={[Function]}
+ >
+ <OpenCloseIcon
+ className="vertical-middle little-spacer-right"
+ open={true}
+ />
+ Foo
+ </a>
+ <p
+ key=".1"
+ >
+ Bar
+ </p>
+</div>
+`;
projects / sonarqube.git / commitdiff
