Merge branch 'master' into hover-effect

Author: saurabhraghuvanshii

src/components/SistentNavigation/content.js

@@ -37,92 +37,90 @@ export const content = [
   { id: 26, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
   { id: 27, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
-  { id: 25, link: "/projects/sistent/components/chip", text: "Chip" },
-  { id: 26, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
-  { id: 27, link: "/projects/sistent/components/chip/code", text: "Chip" },
+  { id: 28, link: "/projects/sistent/components/chip", text: "Chip" },
+  { id: 29, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
+  { id: 30, link: "/projects/sistent/components/chip/code", text: "Chip" },
 
-  { id: 28, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 29, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 30, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  { id: 31, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 32, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 33, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 31, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 32, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 33, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 34, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 35, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 36, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 34, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 35, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 36, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
+  { id: 37, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 38, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 39, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 37, link: "/projects/sistent/components/grid", text: "Grid" },
-  { id: 38, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
-  { id: 39, link: "/projects/sistent/components/grid/code", text: "Grid" },
+  { id: 40, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
+  { id: 41, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
+  { id: 42, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
 
-  { id: 40, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 41, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 42, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
+  { id: 43, link: "/projects/sistent/components/grid", text: "Grid" },
+  { id: 44, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
+  { id: 45, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  { id: 43, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 46, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
+  { id: 47, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
+  { id: 48, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
 
-  { id: 44, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 45, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 46, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 49, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 47, link: "/projects/sistent/components/list", text: "List" },
-  { id: 48, link: "/projects/sistent/components/list/guidance", text: "List" },
-  { id: 49, link: "/projects/sistent/components/list/code", text: "List" },
+  { id: 50, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 51, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 52, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 50, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 51, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 52, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 53, link: "/projects/sistent/components/list", text: "List" },
+  { id: 54, link: "/projects/sistent/components/list/guidance", text: "List" },
+  { id: 55, link: "/projects/sistent/components/list/code", text: "List" },
 
-  { id: 53, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 54, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 55, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 56, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 57, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 58, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 56, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 57, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 58, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 59, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 60, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 61, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 59, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 60, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 61, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 62, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 63, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 64, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 62, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 63, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 64, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  { id: 65, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 66, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 67, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 65, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 66, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 67, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 68, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 69, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 70, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 68, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 69, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 70, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  { id: 71, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 72, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 73, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 71, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 72, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 73, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 74, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 75, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 76, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 74, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 75, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 76, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 77, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 78, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 79, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 77, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 78, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 79, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 80, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 81, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 82, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 80, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 81, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 82, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
-
-  { id: 83, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 84, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 85, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
-
-  { id: 86, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 87, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 88, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 83, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 84, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 85, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
+  { id: 86, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 87, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 88, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
 
+  { id: 89, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 90, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 91, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 
 ];

src/sections/General/Faq/faqSection.style.js

@@ -18,6 +18,105 @@ const FaqSectionWrapper = styled.section`
     text-transform: capitalize;
     opacity: 0.8;
   }
+  
+  .filter-controls {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    
+    button {
+      margin-right: 1rem;
+    }
+  }
+  
+  .filter-title {
+    color: ${props => props.theme.primaryColor};
+    font-weight: 500;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    text-align: center;
+  }
+  
+  .filter-group {
+    margin-bottom: 1.5rem;
+    
+    h3 {
+      font-size: 1.2rem;
+      margin-bottom: 1rem;
+      color: ${props => props.theme.primaryColor};
+    }
+  }
+  
+  .filter-message {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    font-style: italic;
+    opacity: 0.8;
+  }
+  .filter-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+  
+  .filter-option {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+    margin-bottom: 0.5rem;
+    
+    input[type="checkbox"] {
+      margin-right: 0.5rem;
+      cursor: pointer;
+      accent-color: ${props => props.theme.primaryColor};
+    }
+    
+    label {
+      cursor: pointer;
+      font-size: 0.9rem;
+    }
+  }
+
+  .filter-message {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  
+  .active-filters {
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 1rem;
+    background-color: ${props => props.theme.secondaryLightColor};
+    border-radius: 4px;
+    border-left: 4px solid ${props => props.theme.primaryColor};
+    
+    p {
+      margin: 0;
+      font-size: 0.9rem;
+      
+      strong {
+        color: ${props => props.theme.primaryColor};
+      }
+    }
+  }
+  
+  .no-results {
+    text-align: center;
+    padding: 3rem 1rem;
+    background-color: ${props => props.theme.secondaryLightColor};
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    
+    h3 {
+      margin-bottom: 1rem;
+      color: ${props => props.theme.textColor};
+    }
+    
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
   .accordion__item + .accordion__item {
     border-color: transparent;
   }
@@ -96,6 +195,20 @@ const FaqSectionWrapper = styled.section`
   }
 
   @media only screen and (max-width: 568px) {
+    .filter-controls {
+      flex-direction: column;
+      align-items: flex-start;
+      
+      button {
+        margin-bottom: 0.75rem;
+        width: 100%;
+      }
+    }
+    
+    .filter-option {
+      width: 100%;
+    }
+    
     .section-title {
       text-align: center;
     }
@@ -116,4 +229,4 @@ const FaqSectionWrapper = styled.section`
   }
 `;
 
-export default FaqSectionWrapper;
+export default FaqSectionWrapper;