diff --git a/app/assets/javascripts/components/features/compose/index.jsx b/app/assets/javascripts/components/features/compose/index.jsx index eee5c440a4..cad14e1725 100644 --- a/app/assets/javascripts/components/features/compose/index.jsx +++ b/app/assets/javascripts/components/features/compose/index.jsx @@ -40,11 +40,11 @@ class Compose extends React.PureComponent { if (withHeader) { header = (
- - - - - + + + + +
); } diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index 4dad7f7213..aa09d0fd20 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -54,14 +54,15 @@ class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; + let columnHeaderId = null let header = ''; if (heading) { - header = ; + columnHeaderId = heading.replace(/ /g, '-') + header = ; } - return ( -
+
{header} {children}
diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index 454cce9c2e..c4e6b4afa2 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -12,7 +12,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { type, active, hideOnMobile } = this.props; + const { type, active, hideOnMobile, columnHeaderId } = this.props; let icon = ''; @@ -21,7 +21,7 @@ class ColumnHeader extends React.PureComponent { } return ( -
+
{icon} {type}
@@ -35,7 +35,8 @@ ColumnHeader.propTypes = { type: PropTypes.string, active: PropTypes.bool, onClick: PropTypes.func, - hideOnMobile: PropTypes.bool + hideOnMobile: PropTypes.bool, + columnHeaderId: PropTypes.string }; export default ColumnHeader;