Added clear all filters button

packages/website/ts/components/docs/sidebar/filters.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import _ from 'lodash';
 
+import { FiltersClear } from 'ts/components/docs/sidebar/filters_clear';
 import { FiltersGroup } from 'ts/components/docs/sidebar/filters_group';
 import { SidebarWrapper } from 'ts/components/docs/sidebar/sidebar_wrapper';
 
@@ -21,5 +22,6 @@ export const Filters: React.FC<IFiltersProps> = ({ filters }) => (
         {filters.map((filter: IFiltersGroupProps, index: number) => (
             <FiltersGroup key={`filter-${index}`} transformItems={transformItems} {...filter} />
         ))}
+        <FiltersClear />
     </SidebarWrapper>
 );

packages/website/ts/components/docs/sidebar/filters_clear.tsx

@@ -0,0 +1,21 @@
+import { ClearRefinements } from 'react-instantsearch-dom';
+
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+export const FiltersClear = styled(ClearRefinements)`
+    button {
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        font-size: 0.83rem;
+        color: ${colors.brandDark};
+        transition: opacity 300ms ease-in-out;
+
+        &[disabled] {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+`;

packages/website/ts/components/docs/sidebar/filters_group.tsx

@@ -38,13 +38,5 @@ const FiltersGroupWrapper = styled.div`
 
     @media (max-width: 900px) {
         margin-bottom: 30px;
-
-        &:last-of-type {
-            margin-bottom: 0;
-
-            label:last-of-type {
-                margin-bottom: 0;
-            }
-        }
     }
 `;