contrib/assets/IconSwitch: add reusable icon switch component and add…

… to budgeting

meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { BudgetingProposalListItem } from './BudgetingProposalListItem'
 import { Pagination } from './Pagination'
-import MapListSwitch from '../../contrib/assets/MapListSwitch'
+import IconSwitch from '../../contrib/assets/IconSwitch'
 
 export const BudgetingProposalList = (props) => {
   const [data, setData] = useState([])
@@ -34,7 +34,16 @@ export const BudgetingProposalList = (props) => {
   return (
     <div className="l-wrapper">
       <div className="l-center-8">
-        <MapListSwitch />
+        <IconSwitch
+          activeClass="btn btn--icon btn--light switch--btn active"
+          inactiveClass="btn btn--icon btn--light"
+          startText="List"
+          endText="Map"
+          startIconClass="fa fa-list"
+          endIconClass="fa fa-map"
+          startID="show_list"
+          endID="show_map"
+        />
         <ul className="u-list-reset">
           {data.map((proposal, idx) =>
             <BudgetingProposalListItem

meinberlin/apps/contrib/assets/IconSwitch.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+
+export default class IconSwitch extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      showObject: false
+    }
+  }
+
+  handleStartActive () {
+    this.setState({ showObject: false })
+  }
+
+  handleEndActive () {
+    this.setState({ showObject: true })
+  }
+
+  render () {
+    const selectedClass = this.props.activeClass
+    const unselectedClass = this.props.inactiveClass
+    const startIconClass = this.props.startIconClass
+    const endIconClass = this.props.endIconClass
+    const startText = this.props.startText
+    const endText = this.props.endText
+    const startID = this.props.startID
+    const endID = this.props.endID
+
+    return (
+      <div>
+        <div className="switch-btn-group-container">
+          <div className="btn-group switch-btn-group" role="group">
+            <label
+              htmlFor={startID}
+              className={!this.state.showObject ? selectedClass : unselectedClass}
+            >
+              <input
+                className="radio__input"
+                type="radio"
+                value={startID}
+                id={startID}
+                aria-label={startText}
+                checked={this.state.showObject}
+                onClick={(e) => this.handleStartActive(e)}
+                onKeyDown={(e) => this.handleStartActive(e)}
+              />
+              <i className={startIconClass} />
+              <span>{startText}</span>
+            </label>
+            <label
+              htmlFor={endID}
+              className={this.state.showObject ? selectedClass : unselectedClass}
+            >
+              <input
+                className="radio__input"
+                type="radio"
+                id={endID}
+                value={endID}
+                aria-label={endText}
+                checked={!this.state.showObject}
+                onClick={(e) => this.handleEndActive(e)}
+                onKeyDown={(e) => this.handleEndActive(e)}
+              />
+              <i className={endIconClass} />
+              <span>{endText}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}