Updated the Stories Filter UI

cypress/integration/test_filters.spec.js

@@ -19,6 +19,13 @@ describe('Test the filters and search for stories in Home page', () => {
     cy.contains(value).click({ force: true })
   }
 
+  const toggleCheckbox = (filter, value) => {
+    cy.get('[data-cy=search-filters]')
+      .get(`[data-cy=filter-section-${filter}]`)
+      .contains(value)
+      .click({ force: true })
+  }
+
   const searchByTitle = (value) => {
     cy.get('[data-cy=search-input]').type(value)
     cy.get('[data-cy=btn-search]').click()
@@ -49,11 +56,13 @@ describe('Test the filters and search for stories in Home page', () => {
   })
 
   it('Filters stories based on category', () => {
-    setDropdown('category', 'Bug')
+    cy.get('[data-cy=toggle-filters]').click()
+
+    toggleCheckbox('category', 'Bug')
 
     cy.contains('No stories')
 
-    setDropdown('category', testStory.category)
+    toggleCheckbox('category', testStory.category)
 
     cy.contains(testStory.title)
   })

src/assets/scss/components/index.scss

@@ -6,6 +6,7 @@
 @import 'dragdrop';
 @import 'timeline';
 @import 'storiesList';
+@import 'inputButtons';
 @import 'commentForm';
 @import 'comments';
 @import 'pagination';
@@ -15,11 +16,11 @@
 @import 'dropdownOptions';
 @import 'vote';
 @import 'notifications';
-@import 'roadmap';
+@import 'searchBar';
 @import 'userProfile';
 @import 'editableLabel';
 @import 'footer';
 @import 'alerts';
-@import 'search';
+@import 'searchInput';
 @import 'storyPageTimeline';
 @import 'productList.scss';

src/assets/scss/components/inputButtons.scss

@@ -0,0 +1,91 @@
+.checkbox-container {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  margin-right: 25px;
+  position: relative;
+  user-select: none;
+
+  input {
+    cursor: pointer;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  input:checked {
+    ~ .checkmark {
+      background-color: $primary;
+    }
+
+    ~ .checkmark:after {
+      display: block;
+    }
+  }
+
+  .checkmark {
+    border: 1px solid $light-gray;
+    height: 14px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 14px;
+  }
+
+  .checkmark:after {
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    content: '';
+    display: none;
+    height: 10px;
+    left: 5px;
+    position: absolute;
+    top: 0px;
+    transform: rotate(45deg);
+    width: 3px;
+  }
+}
+
+.radio-button-container {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  margin-right: 30px;
+  position: relative;
+  user-select: none;
+
+  input {
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+  }
+
+  .radio-button-mark {
+    border: 1px solid $light-gray;
+    border-radius: 50%;
+    height: 14px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 14px;
+
+    &:after {
+      background: $primary;
+      border-radius: 50%;
+      content: '';
+      display: none;
+      height: 8px;
+      position: absolute;
+      width: 8px;
+    }
+  }
+
+  input:checked ~ .radio-button-mark {
+    background-color: $primary;
+  }
+}

src/assets/scss/components/productList.scss

@@ -9,6 +9,7 @@
 }
 
 .product-card {
+  background-color: $eos-white;
   border-radius: 5px;
   box-shadow: 0px 2px 15px $shadow-color;
   margin: 8px 15px;

src/assets/scss/components/searchBar.scss

@@ -0,0 +1,63 @@
+.search-filters {
+  @extend .flex;
+  @extend .flex-row;
+  @extend .flex-center;
+  width: 100%;
+}
+
+.filter-container {
+  line-height: 40px;
+  padding: 15px;
+}
+
+.filter-container-status {
+  border-right: 0.5px solid $gray-bg;
+  width: 42%;
+
+  .checkbox-row {
+    min-width: 180px;
+  }
+}
+
+.filter-container-category {
+  border-right: 0.5px solid $gray-bg;
+  min-width: 130px;
+  width: 30%;
+
+  .checkbox-row {
+    min-width: 130px;
+  }
+}
+
+.filter-container-sort {
+  min-width: 130px;
+  width: 14%;
+}
+
+.filter-section {
+  @extend .flex;
+  @extend .flex-row;
+  @extend .flex-space-between;
+}
+
+@media (max-width: 900px) {
+  .filter-container-status {
+    border: unset;
+    width: unset;
+  }
+
+  .filter-container-category {
+    width: 45%;
+  }
+}
+
+@media (max-width: 600px) {
+  .search-filters {
+    justify-content: flex-start;
+  }
+
+  .filter-container-category {
+    border: unset;
+    width: unset;
+  }
+}

src/assets/scss/pages/index.scss

@@ -5,3 +5,4 @@
 @import 'profileRelated';
 @import 'newstory';
 @import 'notifications';
+@import 'myStories';

src/assets/scss/pages/myStories.scss

@@ -0,0 +1,32 @@
+.roadmap-one {
+  .btn-tabs {
+    &-selected,
+    &:hover,
+    &:focus {
+      border: 2px solid $light-gray;
+    }
+
+    &:focus {
+      outline: transparent 0px;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .btn-tabs {
+    margin: 0.5rem;
+    width: 200px;
+  }
+}
+
+@media (max-width: 600px) {
+  .btn-tabs {
+    margin: 0.3rem 0;
+    text-align: left;
+    width: 100%;
+  }
+
+  .roadmap-one {
+    flex-direction: column;
+  }
+}