implement filtered list

src/components/filtered-list/filtered-list-item/filtered-list-item.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./filtered-list-item.styles.scss";
+import CaretSvg from "../../../images/icons/caret.svg";
+
+export const FilteredListItem = ({ listItem }) => (
+  <div className="__filtered-list-item-container">
+    {listItem.label && <div className="label">{listItem.label}</div>}
+    <div className="__filtered-list-item">
+      <div className="content-section">
+        {listItem.rows.map((row, index) => (
+          <div className="row" key={index}>
+            {row.value}
+          </div>
+        ))}
+      </div>
+      <div
+        className="icon-section"
+        onClick={() => listItem.clickHandler(listItem.data)}
+        style={{ background: listItem.styles.iconSectionColor }}
+      >
+        <CaretSvg />
+      </div>
+    </div>
+  </div>
+);
+
+FilteredListItem.propTypes = {
+  listItem: PropTypes.object
+};

src/components/filtered-list/filtered-list-item/filtered-list-item.styles.scss

@@ -0,0 +1,35 @@
+
+.__filtered-list-item-container {
+  .label {
+    margin-bottom: 4px;
+    margin-left: 4px;
+  }
+}
+
+.__filtered-list-item {
+  background-color: white;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  display: flex;
+
+
+
+  .content-section {
+    padding: 10px;
+    flex: 1;
+  }
+
+  .row {
+    margin-bottom: 4px;
+  }
+
+  .icon-section {
+    width: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

src/components/filtered-list/filtered-list.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./filtered-list.styles.scss";
+import { FilteredListItem } from "./filtered-list-item/filtered-list-item";
+
+export class FilteredList extends React.Component {
+  constructor(props) {
+    super(props);
+    if (this.props.config.filter) {
+      this.state = { filterValue: props.config.filter.options[0].value };
+    }
+  }
+
+  handleChange = event => {
+    this.props.config.filter.onSelect(event.target.value);
+    this.setState({ filterValue: event.target.value });
+  };
+
+  render() {
+    const { config } = this.props;
+    return (
+      <div className="__filtered-list">
+        <section className="filter-section">
+          {config.filter && (
+            <div className="field">
+              <label className="label">{config.filter.label}</label>
+              <div className="control">
+                <div className="select">
+                  <select
+                    value={this.state.filterValue}
+                    onChange={this.handleChange}
+                  >
+                    {config.filter.options.map((option, index) => (
+                      <option key={index} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+          {this.props.children}
+        </section>
+        <section className="list-section">
+          {config.listItems &&
+            config.listItems.map((li, index) => (
+              <FilteredListItem listItem={li} key={index} />
+            ))}
+        </section>
+      </div>
+    );
+  }
+}
+
+FilteredList.defaultProps = {
+  config: {}
+};
+
+FilteredList.propTypes = {
+  config: PropTypes.object,
+  children: PropTypes.element
+};

src/components/filtered-list/filtered-list.stories.js

@@ -0,0 +1,67 @@
+import React from "react";
+import "./../../styles.scss";
+import { FilteredList } from "./filtered-list";
+
+export default { title: "FilteredList" };
+
+const config = {
+  filter: {
+    onSelect: value => console.log("Selected: ", value),
+    label: "View for:",
+    placeholder: "Select a person",
+    options: [
+      {
+        label: "John Doe",
+        value: "John Doe"
+      },
+      {
+        label: "Bob",
+        value: "Bob"
+      }
+    ]
+  },
+  listItems: [
+    {
+      data: { somedata: "123" },
+      clickHandler: data => console.log(data),
+      styles: {
+        iconSectionColor: "blue"
+      },
+      label: "28.03.2020",
+      rows: [
+        {
+          value: "Rezultat formular - esti in siguratna daca ramai acasa"
+        },
+        {
+          value: "Simptome - nu prezinti simptome specifice COVID-19"
+        }
+      ]
+    },
+    {
+      data: { somedata: "234" },
+      clickHandler: data => console.log(data),
+      styles: {
+        iconSectionColor: "red"
+      },
+      label: "28.03.2020",
+      rows: [
+        {
+          value: "Rezultat formular - esti in siguratna daca ramai acasa"
+        },
+        {
+          value: "Simptome - nu prezinti simptome specifice COVID-19"
+        }
+      ]
+    }
+  ]
+};
+
+export const example = () => (
+  <div style={{ width: "800px" }}>
+    <FilteredList config={config}>
+      <button className="button is-warning" style={{ marginBottom: "10px" }}>
+        Complete form
+      </button>
+    </FilteredList>
+  </div>
+);

src/components/filtered-list/filtered-list.styles.scss

@@ -0,0 +1,18 @@
+.__filtered-list {
+  border: 1px solid black;
+  padding: 15px 25px 15px 15px;
+  display: flex;
+  flex-direction: column;
+
+  .__filtered-list-item {
+    margin-bottom: 20px;
+  }
+
+  .filter-section {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex: 1;
+  }
+}