From 5c8664d81ecf9d6f2180efc09ac50ce15db14224 Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Wed, 14 Oct 2020 16:09:59 +0200
Subject: [PATCH] feat(RadioButton): styles them

---
 src/components/atoms/icons/Radio.tsx          | 28 +++++++++++++++++++
 src/components/atoms/icons/index.ts           |  1 +
 .../molecules/Filters/FiltersCheckboxes.tsx   |  2 +-
 .../molecules/Filters/RadiosFilters.tsx       | 12 ++++++++
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/components/atoms/icons/Radio.tsx

diff --git a/src/components/atoms/icons/Radio.tsx b/src/components/atoms/icons/Radio.tsx
new file mode 100644
index 000000000..7a8b405eb
--- /dev/null
+++ b/src/components/atoms/icons/Radio.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <circle
+      cx="7"
+      cy="7"
+      r="6"
+      stroke="#0C52B4"
+      fill="none"
+      strokeWidth="1"
+    ></circle>
+    <circle
+      cx="7"
+      cy="7"
+      r="4"
+      className="radio-checked"
+      stroke="none"
+      fill="none"
+    ></circle>
+  </svg>
+);
diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
index 8e965a56e..a51cec7bd 100644
--- a/src/components/atoms/icons/index.ts
+++ b/src/components/atoms/icons/index.ts
@@ -19,3 +19,4 @@ export { default as Plus } from './Plus';
 export { default as Pin } from './Pin';
 export { default as Relay } from './Relay';
 export { default as NoNotice } from './NoNotice';
+export { default as Radio } from './Radio';
diff --git a/src/components/molecules/Filters/FiltersCheckboxes.tsx b/src/components/molecules/Filters/FiltersCheckboxes.tsx
index af64b829b..a5e5013e5 100644
--- a/src/components/molecules/Filters/FiltersCheckboxes.tsx
+++ b/src/components/molecules/Filters/FiltersCheckboxes.tsx
@@ -28,7 +28,7 @@ export const FiltersListItem = styled.label`
     margin-left: 30px;
   }
 
-  input {
+  svg {
     margin-right: 10px;
   }
 `;
diff --git a/src/components/molecules/Filters/RadiosFilters.tsx b/src/components/molecules/Filters/RadiosFilters.tsx
index 633d82c94..bbedb55de 100644
--- a/src/components/molecules/Filters/RadiosFilters.tsx
+++ b/src/components/molecules/Filters/RadiosFilters.tsx
@@ -1,11 +1,21 @@
 import React, { ChangeEvent } from 'react';
 import styled from 'styled-components';
 import { FiltersBar, FiltersList, FiltersListItem } from './FiltersCheckboxes';
+import { Radio } from '../../atoms/icons';
 
 export const TOUS = 'Tous';
 
 const RadioButton = styled.input.attrs({ type: 'radio' })`
   cursor: pointer;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  opacity: 0;
+  
+ &:checked + svg {
+  .radio-checked {
+    fill: ${props => props.theme.activeColor};
+  }
 `;
 
 interface RadiosCheckboxesProps {
@@ -30,6 +40,7 @@ const RadiosFilters = ({
             onChange={onChange}
             defaultChecked
           />
+          <Radio />
           {TOUS}
         </FiltersListItem>
         {!loading &&
@@ -41,6 +52,7 @@ const RadiosFilters = ({
                 value={filterId}
                 onChange={onChange}
               />
+              <Radio />
               {filters[filterId]}
             </FiltersListItem>
           ))}