From 4a3b2b6db59ef6be98a3ecdc52adc09e1d4e5794 Mon Sep 17 00:00:00 2001
From: phillimorland <5871230+phillimorland@users.noreply.github.com>
Date: Mon, 14 Nov 2022 14:25:38 +0100
Subject: [PATCH 1/3] component_library: update component lib

---
 .../meinberlin_contrib/component_library.html | 64 ++++++++-----------
 .../livequestions/assets/QuestionUser.jsx     |  2 +-
 meinberlin/apps/plans/assets/FilterNav.jsx    |  4 +-
 .../templates/a4dashboard/base_dashboard.html |  4 +-
 4 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
index 30748681f6..ba26b56390 100644
--- a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
+++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -535,7 +535,6 @@ <h2 id="cl-buttons">Buttons</h2>
                 </p>
                 <p>
                     <button class="btn btn--link" type="button">Button as Link</button>
-                    <button class="btn btn--none" type="button">No Button</button>
                     <a class="btn btn--link" href="#" type="button">Link as Button</a>
                     <a class="btn btn--link is-disabled" type="button" href="">Link Button disabled</a>
                 </p>
@@ -1042,15 +1041,15 @@ <h2 id="cl-filter-primary_menu">Filter Menu - Primary</h2>
                 <div class="filter-bar filter-bar--horizontal" role="group" aria-label="Filter bar">
                     <span class="filter-bar__project-text">I am interested in projects from</span>
                     <div class="filter-bar__dropdown">
-                        <button class="btn btn--none filter-bar__btn filter-bar__btn--truncate filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_district">„ all Districts “<i class="fa fa-chevron-down"></i></button>
+                        <button class="btn filter-bar__btn filter-bar__btn--truncate filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_district">„ all Districts “<i class="fa fa-chevron-down"></i></button>
                     </div>
                     <span class="u-md-down-display-none"> in the area of </span>
                     <div class="filter-bar__dropdown">
-                        <button class="btn btn--none filter-bar__btn filter-bar__btn--truncate filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_topic">„ all Topics “<i class="fa fa-chevron-down"></i>
+                        <button class="btn filter-bar__btn filter-bar__btn--truncate filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_topic">„ all Topics “<i class="fa fa-chevron-down"></i>
                         </button>
                     </div>
                     <div>
-                        <button class="btn btn--small btn--light filter-bar__btn--light">
+                        <button class="btn btn--small filter-bar__btn--light">
                             <i class="fas fa-sliders-h" aria-label="more filters"></i>
                         </button>
                     </div>
@@ -1064,14 +1063,14 @@ <h2 id="cl-filter-primary_menu">Filter Menu - Stacked Primary</h2>
                 <div class="filter-bar filter-bar--stacked" role="group" aria-label="Filter bar" style="width: 50%;">
                     <span class="filter-bar__project-text">I am interested in projects from</span>
                     <div className="filter-bar__dropdown">
-                        <button class="btn btn--none filter-bar__btn filter-bar__btn--wide filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_district">„ all Districts “<i class="fa fa-chevron-down"></i></button>
+                        <button class="btn filter-bar__btn filter-bar__btn--wide filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_district">„ all Districts “<i class="fa fa-chevron-down"></i></button>
                     </div>
                     <div className="filter-bar__dropdown">
-                        <button class="btn btn--none filter-bar__btn filter-bar__btn--wide filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_topic">„ all Topics “<i class="fa fa-chevron-down"></i>
+                        <button class="btn filter-bar__btn filter-bar__btn--wide filter-bar__btn--unselected" ariaExpanded="false" id="id_filter_topic">„ all Topics “<i class="fa fa-chevron-down"></i>
                         </button>
                     </div>
                     <div>
-                        <button class="u-spacer-top btn btn--small btn--light btn--full u-spacer-bottom filter-bar__btn--light" style="margin-left: 0px;">
+                        <button class="u-spacer-top btn btn--small btn--full u-spacer-bottom filter-bar__btn--light" style="margin-left: 0px;">
                             more filters
                         </button>
                     </div>
@@ -1097,37 +1096,30 @@ <h2 id="cl-filter-secondary_menu">Filter Menu - Secondary</h2>
                             </button>
                         </div>
                     </div>
-                    <div class="filter-bar__menu-radio-group">
-                        <div class="filter-bar__menu-radio-part">
-                            <fieldset class="u-no-border u-no-margin u-no-padding">
-                                <legend>
-                                    <h2 class="u-no-margin">Choice input - styled radios</h2>
-                                </legend>
-                                <div class="btn-group " role="group">
-                                    <label class="btn btn--light switch--btn">
-                                        <input class="radio__input" type="radio" />
-                                        <span>all</span>
-                                    </label>
-                                    <label class="btn btn--light switch--btn active">
-                                        <input class="radio__input" type="radio" />
-                                        <span> choice </span>
-                                    </label>
-                                </div>
-                            </fieldset>
+                    <fieldset class="filter-bar__menu-radio-sta" role="group" aria-labelledby="sta">
+                        <legend>
+                            <h2 id="sta" class="u-no-margin">Projektstatus</h2>
+                        </legend>
+                        <div class="btn-group">
+                            <div><label for="id_choice-sta-all" class="btn switch--btn"><input id="id_choice-sta-all" type="radio" name="sta-Alle" class="radio__input" value="-1"><span>Alle</span></label></div>
+                            <div><label for="id_choice-sta-0" class="btn switch--btn u-z-index-1 active"><input id="id_choice-sta-0" type="radio" name="laufend" class="radio__input" value="0" checked=""><span>laufend</span></label></div>
+                            <div><label for="id_choice-sta-1" class="btn switch--btn"><input id="id_choice-sta-1" type="radio" name="abgeschlossen" class="radio__input" value="1"><span>abgeschlossen</span></label></div>
                         </div>
-                    </div>
+                    </fieldset>
 
-                    <div class="form-group">
-                        <div class="typeahead__input-label">
-                            <h2 class="u-no-margin">Look up input with autocomplete </h2>
-                        </div>
-                        <span class="typeahead__input-group">
-                            <span class="typeahead__input-group-prepend">
-                                <span class="typeahead__input-group-text">
-                                    <i class="fas fa-sort-alpha-down"></i>
-                                </span>
-                            </span>
-                            <input class="input-group__input" placeholder="Enter the name of the organisation" style="width: 85%;" />
+                    <div class="form-group filter-bar__typeahead">
+                        <label for="organisation-typeahead-id" class="typeahead__input-label">
+                            <h2 class="u-no-margin">Organisation</h2>
+                        </label>
+                        <span class="typeahead__input-group"><span class="typeahead__input-group-prepend"><span class="typeahead__input-group-text input-group__before"><i class="fas fa-sort-alpha-down"></i></span></span>
+                            <div class="rbt typeahead__input-group-append" tabindex="-1" style="outline: none; position: relative;">
+                                <div style="display: flex; flex: 1 1 0%; height: 100%; position: relative;">
+                                    <input autocomplete="off" placeholder="Name der Organisation eingeben" type="text" aria-autocomplete="both" aria-expanded="false" aria-haspopup="listbox"
+                                      role="combobox" class="rbt-input-main form-control rbt-input" value="">
+                                    <input aria-hidden="true" class="rbt-input-hint" readonly="" tabindex="-1" value=""
+                                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.54); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%;">
+                                </div>
+                            </div>
                         </span>
                     </div>
 
diff --git a/meinberlin/apps/livequestions/assets/QuestionUser.jsx b/meinberlin/apps/livequestions/assets/QuestionUser.jsx
index ad19335477..6a1fa88cf3 100644
--- a/meinberlin/apps/livequestions/assets/QuestionUser.jsx
+++ b/meinberlin/apps/livequestions/assets/QuestionUser.jsx
@@ -69,7 +69,7 @@ export default class QuestionUser extends React.Component {
         <div className="live-question__action-bar">
           {this.props.hasLikingPermission
             ? (
-              <button type="button" className={this.state.session_like ? 'btn btn--none u-success' : 'btn btn--none'} onClick={this.handleLike.bind(this)}>
+              <button type="button" className={(this.state.session_like ? 'u-success ' : '') + 'btn'} onClick={this.handleLike.bind(this)}>
                 <span>{this.state.likes} </span>
                 <span className="visually-hidden">{likesTag}</span>
                 <i className="far fa-thumbs-up" aria-label={this.state.session_like ? addLikeTag : undoLikeTag} />
diff --git a/meinberlin/apps/plans/assets/FilterNav.jsx b/meinberlin/apps/plans/assets/FilterNav.jsx
index 99e7b718a7..b9a0f46f4d 100644
--- a/meinberlin/apps/plans/assets/FilterNav.jsx
+++ b/meinberlin/apps/plans/assets/FilterNav.jsx
@@ -333,7 +333,7 @@ class FilterNav extends React.Component {
               <div>
                 <button
                   onClick={this.showSecondaryFilters.bind(this)}
-                  className="btn btn--small btn--light filter-bar__btn--light"
+                  className="btn btn--small filter-bar__btn--light"
                   aria-haspopup="true"
                   aria-expanded={this.state.displaySecondaryFilters}
                 >
@@ -344,7 +344,7 @@ class FilterNav extends React.Component {
               <div>
                 <button
                   onClick={this.showSecondaryFilters.bind(this)}
-                  className="btn btn--small btn--light filter-bar__btn--light"
+                  className="btn btn--small filter-bar__btn--light"
                   aria-haspopup="true"
                   aria-expanded={this.state.displaySecondaryFilters}
                 >
diff --git a/meinberlin/templates/a4dashboard/base_dashboard.html b/meinberlin/templates/a4dashboard/base_dashboard.html
index 05fe1a3fa8..07e3552b19 100644
--- a/meinberlin/templates/a4dashboard/base_dashboard.html
+++ b/meinberlin/templates/a4dashboard/base_dashboard.html
@@ -15,7 +15,7 @@
                         <button
                                 title="{% trans 'Organisations' %}"
                                 type="button"
-                                class="dropdown-toggle btn btn--none btn--small"
+                                class="dropdown-toggle btn btn--small"
                                 data-bs-toggle="dropdown"
                                 aria-haspopup="true"
                                 aria-expanded="false"
@@ -37,7 +37,7 @@
                             {% endfor %}
                         </ul>
                     {% else %}
-                        <span class="btn btn--none btn--small">{{ view.organisation.name }}</span>
+                        <span class="btn btn--small">{{ view.organisation.name }}</span>
                     {% endif %}
                 </div>
                 <nav aria-label="{% trans 'Dashboard' %}">

From 480833eec0d10c9a5cff300421a686faeb37ed82 Mon Sep 17 00:00:00 2001
From: phillimorland <5871230+phillimorland@users.noreply.github.com>
Date: Mon, 14 Nov 2022 16:47:22 +0100
Subject: [PATCH 2/3] FilterToggle: add toggle component to be used in mB and
 a4 and to fix #4547, hide filters and found string when no ideas

---
 .../assets/BudgetingProposalList.jsx          |   5 +-
 .../apps/budgeting/assets/ControlBar.jsx      | 144 ++++++++++--------
 .../assets/ControlBarListMapSwitch.jsx        |   9 +-
 .../budgeting/assets/ControlBarSearchTerm.jsx |  20 +--
 .../assets/__tests__/ControlBar.jest.jsx      |   6 +-
 .../apps/contrib/assets/FilterToggle.jsx      |  45 ++++++
 .../assets/scss/components/_a4-comments.scss  |   4 -
 .../assets/scss/components/_button.scss       |   6 +
 8 files changed, 152 insertions(+), 87 deletions(-)
 create mode 100644 meinberlin/apps/contrib/assets/FilterToggle.jsx

diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
index b70003c31e..8a0b03d890 100644
--- a/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
+++ b/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
@@ -15,6 +15,7 @@ export const BudgetingProposalList = (props) => {
     const countText = django.ngettext('you have 1 vote left.', 'you have %s votes left.', votes)
     return django.interpolate(countText, [votes])
   }
+  const noResults = django.gettext('Nothing to show')
 
   const fetchProposals = () => {
     const url = props.proposals_api_url + location.search
@@ -96,7 +97,9 @@ export const BudgetingProposalList = (props) => {
       <div className="module-content--light">
         <div className="container">
           <div className="offset-lg-2 col-lg-8">
-            {renderList(data)}
+            {Object.keys(data).length > 0
+              ? renderList(data)
+              : noResults}
           </div>
         </div>
       </div>
diff --git a/meinberlin/apps/budgeting/assets/ControlBar.jsx b/meinberlin/apps/budgeting/assets/ControlBar.jsx
index cdcdd2c6f8..b2227377e4 100644
--- a/meinberlin/apps/budgeting/assets/ControlBar.jsx
+++ b/meinberlin/apps/budgeting/assets/ControlBar.jsx
@@ -3,14 +3,15 @@ import { ControlBarDropdown } from './ControlBarDropdown'
 import { ControlBarListMapSwitch } from './ControlBarListMapSwitch'
 import { ControlBarSearch } from './ControlBarSearch'
 import { ControlBarSearchTerm } from './ControlBarSearchTerm'
-import { SpacedSpan } from './SpacedSpan'
+import { FilterToggle } from '../../contrib/assets/FilterToggle'
 import django from 'django'
 import { useSearchParams } from 'react-router-dom'
 
 const translated = {
   showFilters: django.gettext('Show filters'),
   hideFilters: django.gettext('Hide filters'),
-  filters: django.gettext('Filters')
+  filters: django.gettext('Filters'),
+  nav: django.gettext('Search, filter and sort the ideas list')
 }
 
 const getResultCountText = (count) => {
@@ -21,9 +22,21 @@ const getResultCountText = (count) => {
 
 export const ControlBar = props => {
   const [expandFilters, setExpandFilters] = useState()
+  const [resultString, setResultString] = useState(false)
   const [queryParams, setQueryParams] = useSearchParams()
   const [term, setTerm] = useState(queryParams.get('search') || '')
 
+  // check list is filtered not just ordered
+  // else needed for search term deletion
+  const handleResultString = () => {
+    const entryArray = Array.from(queryParams.keys())
+    if ((entryArray.length === 2 && entryArray[1] !== 'ordering') || (entryArray.length > 2)) {
+      setResultString(true)
+    } else {
+      setResultString(false)
+    }
+  }
+
   const applyFilter = (filterType, filterChoice) => {
     if (filterChoice[0] !== '') {
       queryParams.set(filterType, filterChoice[0])
@@ -34,84 +47,85 @@ export const ControlBar = props => {
     // to avoid empty pagination page for given
     // filter settings, always show first page,
     queryParams.delete('page')
-
+    handleResultString()
     setQueryParams(queryParams)
   }
 
   const applySearch = (value) => {
     setTerm(value)
     applyFilter('search', [value])
+    handleResultString()
+  }
+
+  const handleToggleFilters = (e) => {
+    e.preventDefault()
+    setExpandFilters(!expandFilters)
   }
 
   return (
-    <div className="container u-spacer-bottom u-spacer-top-double">
+    <nav className="container u-spacer-bottom u-spacer-top-double" aria-label={translated.nav}>
       <div className="offset-lg-2 col-lg-8">
         <ControlBarListMapSwitch query={queryParams} />
-      </div>
-      <div className="offset-lg-2 col-lg-8">
-        <div className="control-bar">
-          <div className="control-bar__item">
-            <ControlBarSearch
-              term={term}
-              onSearch={value => applySearch(value)}
-            />
-          </div>
-          {props.filters?.ordering && (
-            <ControlBarDropdown
-              key="ordering_dropdown"
-              filter={props.filters.ordering}
-              current={queryParams.get('ordering')}
-              filterId="id_ordering"
-              onSelectFilter={choice => applyFilter('ordering', choice)}
-            />
-          )}
-          <div className="control-bar__item control-bar__right">
-            <button
-              className="btn btn--light"
-              aria-label={
-                expandFilters
-                  ? translated.hideFilters
-                  : translated.showFilters
-              }
-              onClick={() => setExpandFilters(!expandFilters)}
-            >
-              <i className="fa fa-filter" aria-hidden="true" />
-              <SpacedSpan>
-                {translated.filters}
-              </SpacedSpan>
-            </button>
-          </div>
-        </div>
-      </div>
-      {props.filters && expandFilters &&
-        <div className="offset-lg-2 col-lg-8">
-          <div className="control-bar">
-            {Object.keys(props.filters).map((type, idx) => {
-              const filterItem = props.filters[type]
-              return type !== 'ordering' && (
+
+        {/* only show filters if no filter selected or list isn't empty */}
+        {(Array.from(queryParams.values()).length > 1 || props.numOfResults > 0) &&
+          <>
+            <div className="control-bar">
+              <div className="control-bar__item">
+                <ControlBarSearch
+                  term={term}
+                  onSearch={value => applySearch(value)}
+                />
+              </div>
+              {props.filters?.ordering && (
                 <ControlBarDropdown
-                  key={'filter_' + idx}
-                  filter={filterItem}
-                  current={queryParams.get(type)}
-                  filterId={'id_' + type}
-                  onSelectFilter={choice => applyFilter(type, choice)}
+                  key="ordering_dropdown"
+                  filter={props.filters.ordering}
+                  current={queryParams.get('ordering')}
+                  filterId="id_ordering"
+                  onSelectFilter={choice => applyFilter('ordering', choice)}
                 />
-              )
-            })}
-          </div>
-        </div>}
-      <div className="offset-lg-2 col-lg-8">
-        <div className="control-bar">
-          {props.numOfResults >= 0 && getResultCountText(props.numOfResults)}
-        </div>
-      </div>
-      {term &&
-        <div className="offset-lg-2 col-lg-8">
+              )}
+              <div className="control-bar__item control-bar__right">
+                <FilterToggle
+                  showFilters={expandFilters}
+                  onClickToggleFilter={handleToggleFilters}
+                  btnString={translated.filters}
+                  showFiltersString={translated.showFilters}
+                  hideFiltersString={translated.hideFilters}
+                />
+              </div>
+            </div>
+            {props.filters && expandFilters &&
+              <>
+                <div className="control-bar">
+                  {Object.keys(props.filters).map((type, idx) => {
+                    const filterItem = props.filters[type]
+                    return type !== 'ordering' && (
+                      <ControlBarDropdown
+                        key={'filter_' + idx}
+                        filter={filterItem}
+                        current={queryParams.get(type)}
+                        filterId={'id_' + type}
+                        onSelectFilter={choice => applyFilter(type, choice)}
+                      />
+                    )
+                  })}
+                </div>
+              </>}
+          </>}
+
+        {/* only show result string if list filtered or searched not just ordered */}
+        {resultString &&
+          <div className="control-bar">
+            {props.numOfResults >= 0 && getResultCountText(props.numOfResults)}
+          </div>}
+        {term &&
           <ControlBarSearchTerm
             term={term}
             onDismiss={() => applySearch('')}
-          />
-        </div>}
-    </div>
+          />}
+      </div>
+    </nav>
   )
 }
diff --git a/meinberlin/apps/budgeting/assets/ControlBarListMapSwitch.jsx b/meinberlin/apps/budgeting/assets/ControlBarListMapSwitch.jsx
index 142a0dd08b..cce1a67a42 100644
--- a/meinberlin/apps/budgeting/assets/ControlBarListMapSwitch.jsx
+++ b/meinberlin/apps/budgeting/assets/ControlBarListMapSwitch.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import django from 'django'
-import { SpacedSpan } from './SpacedSpan'
 import { useSearchParams } from 'react-router-dom'
 
 export const ControlBarListMapSwitch = () => {
@@ -18,19 +17,19 @@ export const ControlBarListMapSwitch = () => {
     <div className="btn-group__container">
       <div className="btn-group">
         <div
-          className="btn btn--light switch--btn active"
+          className="btn btn--light switch--btn btn--icon active"
           aria-label={django.gettext('View as list')}
         >
           <i className="fa fa-list" aria-hidden="true" />
-          <SpacedSpan>{django.gettext('List')}</SpacedSpan>
+          {django.gettext('List')}
         </div>
         <button
-          className="btn btn--light"
+          className="btn btn--light btn--icon"
           onClick={handleClick}
           aria-label={django.gettext('View as map')}
         >
           <i className="fa fa-map" aria-hidden="true" />
-          <SpacedSpan>{django.gettext('Map')}</SpacedSpan>
+          {django.gettext('Map')}
         </button>
       </div>
     </div>
diff --git a/meinberlin/apps/budgeting/assets/ControlBarSearchTerm.jsx b/meinberlin/apps/budgeting/assets/ControlBarSearchTerm.jsx
index 67c0600e90..ce12e8aadd 100644
--- a/meinberlin/apps/budgeting/assets/ControlBarSearchTerm.jsx
+++ b/meinberlin/apps/budgeting/assets/ControlBarSearchTerm.jsx
@@ -1,27 +1,29 @@
 import React from 'react'
-import { SpacedSpan } from './SpacedSpan'
+import django from 'django'
+
+const translated = {
+  removeFilters: django.gettext('Remove filters')
+}
 
 export const ControlBarSearchTerm = (props) => {
   return (
     <div className="switch-filter__btn-group u-spacer-top">
       <button
-        className="btn btn--light btn--small"
+        className="btn btn--icon-end btn--light"
         aria-describedby="remove-search-filter"
         onClick={props.onDismiss}
       >
         {props.term}
-        <SpacedSpan>
-          <i
-            className="fa fa-times"
-            aria-hidden="true"
-          />
-        </SpacedSpan>
+        <i
+          className="fa fa-times"
+          aria-hidden="true"
+        />
       </button>
       <span
         id="remove-search-filter"
         className="visually-hidden"
       >
-        Filter entfernen
+        {translated.removeFilters}
       </span>
     </div>
   )
diff --git a/meinberlin/apps/budgeting/assets/__tests__/ControlBar.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/ControlBar.jest.jsx
index a303c454e2..9be7403fac 100644
--- a/meinberlin/apps/budgeting/assets/__tests__/ControlBar.jest.jsx
+++ b/meinberlin/apps/budgeting/assets/__tests__/ControlBar.jest.jsx
@@ -28,8 +28,8 @@ test('ControlBar collapsed bar', () => {
       />
     </BrowserRouter>
   )
-  const numOfResultsElement = screen.getByText(/2/)
-  expect(numOfResultsElement).toBeTruthy()
+  const numOfResultsElement = screen.queryByText(/2/)
+  expect(numOfResultsElement).toBeFalsy()
   const orderingFilterElement = screen.getByText('ordering: Most recent')
   expect(orderingFilterElement).toBeTruthy()
 })
@@ -45,7 +45,7 @@ test('ControlBar expanded bar', async () => {
       />
     </BrowserRouter>
   )
-  const filterButton = screen.getByLabelText('Show filters')
+  const filterButton = screen.getByText(/Show filters/)
   let expandedFilter = screen.queryByText(/category1/)
   expect(expandedFilter).toBeFalsy()
   fireEvent.click(filterButton)
diff --git a/meinberlin/apps/contrib/assets/FilterToggle.jsx b/meinberlin/apps/contrib/assets/FilterToggle.jsx
new file mode 100644
index 0000000000..5ea92b80cf
--- /dev/null
+++ b/meinberlin/apps/contrib/assets/FilterToggle.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+export const FilterToggle = (props) => {
+  const {
+    showFilters,
+    onClickToggleFilter,
+    btnString,
+    showFiltersString,
+    hideFiltersString
+  } = props
+
+  return (
+    <>
+      {!showFilters
+        ? <button
+            className="btn btn--icon btn--light"
+            type="button"
+            aria-describedby="span-id"
+            onClick={onClickToggleFilter}
+          >
+          <i
+            className="fas fa-sliders-h"
+            aria-hidden="true"
+          />
+          <span id="span-id" className="visually-hidden">{showFiltersString}</span>
+          {btnString}
+        </button> // eslint-disable-line react/jsx-closing-tag-location
+        : <button
+            className="btn btn--icon btn--light"
+            type="button"
+            aria-describedby="span-id"
+            onClick={onClickToggleFilter}
+          >
+          <i
+            className="fas fa-times"
+            aria-hidden="true"
+          />
+          <span id="span-id" className="visually-hidden">{hideFiltersString}</span>
+          {btnString}
+          {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+        </button>}
+    </>
+
+  )
+}
diff --git a/meinberlin/assets/scss/components/_a4-comments.scss b/meinberlin/assets/scss/components/_a4-comments.scss
index c87bf5c562..9f74ba41ee 100644
--- a/meinberlin/assets/scss/components/_a4-comments.scss
+++ b/meinberlin/assets/scss/components/_a4-comments.scss
@@ -163,10 +163,6 @@
     @extend .btn--light;
     @extend .btn--small;
     @extend .btn--icon;
-
-    a {
-        color: $text-color;
-    }
 }
 
 .a4-comments__submit-input {
diff --git a/meinberlin/assets/scss/components/_button.scss b/meinberlin/assets/scss/components/_button.scss
index 3b025dd24c..95ec41dd36 100644
--- a/meinberlin/assets/scss/components/_button.scss
+++ b/meinberlin/assets/scss/components/_button.scss
@@ -186,6 +186,12 @@
     }
 }
 
+.btn--icon-end {
+    i {
+        padding-left: 0.5rem;
+    }
+}
+
 .btn--align-left {
     padding-left: 0;
 }

From 5f07dc1502a58525f2587b6421db25e48331541f Mon Sep 17 00:00:00 2001
From: phillimorland <5871230+phillimorland@users.noreply.github.com>
Date: Wed, 23 Nov 2022 15:56:12 +0100
Subject: [PATCH 3/3] budgeting/ListItemBadges: rm spaced span as produced
 empty elements and replaced span badges with div badges

---
 meinberlin/apps/budgeting/assets/ListItemBadges.jsx  |  9 ++++-----
 meinberlin/apps/budgeting/assets/SpacedSpan.jsx      | 12 ------------
 .../budgeting/assets/__tests__/SpacedSpan.jest.jsx   | 10 ----------
 meinberlin/assets/scss/components/_list_item.scss    |  2 ++
 4 files changed, 6 insertions(+), 27 deletions(-)
 delete mode 100644 meinberlin/apps/budgeting/assets/SpacedSpan.jsx
 delete mode 100644 meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx

diff --git a/meinberlin/apps/budgeting/assets/ListItemBadges.jsx b/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
index cf8f5817b8..5d87df307d 100644
--- a/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
+++ b/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { SpacedSpan } from './SpacedSpan'
 import django from 'django'
 
 const translated = {
@@ -30,24 +29,24 @@ export const ListItemBadges = props => {
     <div className="list-item__labels">
       {props.badges.map((badge, idx) => {
         return (
-          <SpacedSpan
+          <div
             key={'badge_' + idx}
             className={getClass(badge)}
           >
             {hasPointLabelIcon(badge[0])}
             {badge[1]}
-          </SpacedSpan>
+          </div>
         )
       })}
       {props.numOfMoreBadges > 0 &&
-        <SpacedSpan className="label__link label--big">
+        <div className="label__link label--big">
           <a
             href={props.proposalUrl}
             className="list-item__link"
           >
             {props.numOfMoreBadges + ' ' + translated.more}
           </a>
-        </SpacedSpan>}
+        </div>}
     </div>
   )
 }
diff --git a/meinberlin/apps/budgeting/assets/SpacedSpan.jsx b/meinberlin/apps/budgeting/assets/SpacedSpan.jsx
deleted file mode 100644
index eca5f83863..0000000000
--- a/meinberlin/apps/budgeting/assets/SpacedSpan.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-export const SpacedSpan = ({ className, children }) => {
-  return (
-    <>
-      <span> </span>
-      <span className={className}>
-        {children}
-      </span>
-    </>
-  )
-}
diff --git a/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx
deleted file mode 100644
index d85240bc59..0000000000
--- a/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { SpacedSpan } from '../SpacedSpan'
-
-test('displaying spaced span', () => {
-  const tree = render(<SpacedSpan>word</SpacedSpan>)
-  // screen.debug()
-  const firstSpaceSpan = tree.container.querySelector('span')
-  expect(firstSpaceSpan.innerHTML).toBe(' ')
-})
diff --git a/meinberlin/assets/scss/components/_list_item.scss b/meinberlin/assets/scss/components/_list_item.scss
index 71065e00df..6769f34e43 100644
--- a/meinberlin/assets/scss/components/_list_item.scss
+++ b/meinberlin/assets/scss/components/_list_item.scss
@@ -69,7 +69,9 @@
     @include clearfix;
     margin: 0 0 0.4rem;
 
+    > div.label,
     > span.label {
+        margin-left: 0.2 * $spacer;
         overflow: hidden;
         max-width: 40ch;
         text-overflow: ellipsis;