From a9f59f9364fed8f257366282fa18080f5f7e8ef0 Mon Sep 17 00:00:00 2001
From: Attila Daczo <attila.daczo@3pillarglobal.com>
Date: Sat, 28 Mar 2020 14:29:02 +0200
Subject: [PATCH 1/2] implement list

---
 package-lock.json                             |  2 +-
 .../filtered-list-item/filtered-list-item.js  | 35 ++++++++++
 .../filtered-list-item.styles.scss            | 35 ++++++++++
 src/components/filtered-list/filtered-list.js | 62 +++++++++++++++++
 .../filtered-list/filtered-list.stories.js    | 67 +++++++++++++++++++
 .../filtered-list/filtered-list.styles.scss   | 18 +++++
 src/images/icons/caret.svg                    |  3 +
 7 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 src/components/filtered-list/filtered-list-item/filtered-list-item.js
 create mode 100644 src/components/filtered-list/filtered-list-item/filtered-list-item.styles.scss
 create mode 100644 src/components/filtered-list/filtered-list.js
 create mode 100644 src/components/filtered-list/filtered-list.stories.js
 create mode 100644 src/components/filtered-list/filtered-list.styles.scss
 create mode 100644 src/images/icons/caret.svg

diff --git a/package-lock.json b/package-lock.json
index cb8c10f..51cf6ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/filtered-list/filtered-list-item/filtered-list-item.js b/src/components/filtered-list/filtered-list-item/filtered-list-item.js
new file mode 100644
index 0000000..3bf67ac
--- /dev/null
+++ b/src/components/filtered-list/filtered-list-item/filtered-list-item.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./filtered-list-item.styles.scss";
+import CaretSvg from "../../../images/icons/caret.svg";
+
+export class FilteredListItem extends React.Component {
+  render() {
+    const { listItem } = this.props;
+    return (
+      <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
+};
diff --git a/src/components/filtered-list/filtered-list-item/filtered-list-item.styles.scss b/src/components/filtered-list/filtered-list-item/filtered-list-item.styles.scss
new file mode 100644
index 0000000..e84f9f3
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/filtered-list/filtered-list.js b/src/components/filtered-list/filtered-list.js
new file mode 100644
index 0000000..f751a46
--- /dev/null
+++ b/src/components/filtered-list/filtered-list.js
@@ -0,0 +1,62 @@
+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.map((li, index) => (
+            <FilteredListItem listItem={li} key={index}></FilteredListItem>
+          ))}
+        </section>
+      </div>
+    );
+  }
+}
+
+FilteredList.defaultProps = {
+  config: {}
+};
+
+FilteredList.propTypes = {
+  config: PropTypes.object,
+  children: PropTypes.element
+};
diff --git a/src/components/filtered-list/filtered-list.stories.js b/src/components/filtered-list/filtered-list.stories.js
new file mode 100644
index 0000000..f3348b8
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/filtered-list/filtered-list.styles.scss b/src/components/filtered-list/filtered-list.styles.scss
new file mode 100644
index 0000000..bba95a0
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/images/icons/caret.svg b/src/images/icons/caret.svg
new file mode 100644
index 0000000..def5ddc
--- /dev/null
+++ b/src/images/icons/caret.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+<path d="M-1.2489e-07 17.1429L7.5 10L-7.49338e-07 2.85714L1.5 -6.55671e-08L12 10L1.5 20L-1.2489e-07 17.1429Z" fill="white"/>
+</svg>

From ee521d1d5ffbe6b0b8fa30b33894f065761baf42 Mon Sep 17 00:00:00 2001
From: Attila Daczo <attila.daczo@3pillarglobal.com>
Date: Sat, 28 Mar 2020 18:23:02 +0200
Subject: [PATCH 2/2] Changes as per request

---
 .../filtered-list-item/filtered-list-item.js  | 43 ++++++++-----------
 src/components/filtered-list/filtered-list.js |  7 +--
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/filtered-list/filtered-list-item/filtered-list-item.js b/src/components/filtered-list/filtered-list-item/filtered-list-item.js
index 3bf67ac..ee30e86 100644
--- a/src/components/filtered-list/filtered-list-item/filtered-list-item.js
+++ b/src/components/filtered-list/filtered-list-item/filtered-list-item.js
@@ -3,32 +3,27 @@ import PropTypes from "prop-types";
 import "./filtered-list-item.styles.scss";
 import CaretSvg from "../../../images/icons/caret.svg";
 
-export class FilteredListItem extends React.Component {
-  render() {
-    const { listItem } = this.props;
-    return (
-      <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>
-            ))}
+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
-            className="icon-section"
-            onClick={() => listItem.clickHandler(listItem.data)}
-            style={{ background: listItem.styles.iconSectionColor }}
-          >
-            <CaretSvg />
-          </div>
-        </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
diff --git a/src/components/filtered-list/filtered-list.js b/src/components/filtered-list/filtered-list.js
index f751a46..a1baa4e 100644
--- a/src/components/filtered-list/filtered-list.js
+++ b/src/components/filtered-list/filtered-list.js
@@ -43,9 +43,10 @@ export class FilteredList extends React.Component {
           {this.props.children}
         </section>
         <section className="list-section">
-          {config.listItems.map((li, index) => (
-            <FilteredListItem listItem={li} key={index}></FilteredListItem>
-          ))}
+          {config.listItems &&
+            config.listItems.map((li, index) => (
+              <FilteredListItem listItem={li} key={index} />
+            ))}
         </section>
       </div>
     );