From e9016573dc00a3afb742d59afa64c7facd751efc Mon Sep 17 00:00:00 2001
From: Svyatoslav Mikhaylov <Svyatoslav.Mikhaylov@jetbrains.com>
Date: Wed, 14 Jul 2021 00:36:50 +0500
Subject: [PATCH] feat: add new realization for checkboxes

---
 .../img/sprites/svg/common/icon-checkmark.svg |  3 ++
 src/v2/scss/components/_forms/_checkbox.scss  | 26 ++++++++++++++
 src/v2/scss/sprites/_common.scss              |  5 +++
 .../v2/components/forms/checkboxes.jinja2     | 35 ++++++++++++++++++-
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/v2/img/sprites/svg/common/icon-checkmark.svg

diff --git a/src/v2/img/sprites/svg/common/icon-checkmark.svg b/src/v2/img/sprites/svg/common/icon-checkmark.svg
new file mode 100644
index 00000000..96050ab3
--- /dev/null
+++ b/src/v2/img/sprites/svg/common/icon-checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10.38752 15.35011l-3.18743-4.2499c-.49706-.66275-1.43726-.79707-2.1-.3-.66274.49705-.79706 1.43725-.3 2.1l4.5 6c.63218.8429 1.91357.78847 2.472-.10501l7.5-12c.43906-.7025.2255-1.62793-.477-2.067-.7025-.43906-1.62793-.2255-2.067.477l-6.34057 10.14491z"/>
+</svg>
diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
index bbd0b6d0..a669e94f 100644
--- a/src/v2/scss/components/_forms/_checkbox.scss
+++ b/src/v2/scss/components/_forms/_checkbox.scss
@@ -13,5 +13,31 @@
         }
       }
     }
+
+    &._svg {
+      .control__indicator {
+        position: relative;
+
+        .svg-icon._icon-checkmark {
+          display: none;
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 16px;
+          height: 16px;
+          fill: $white;
+        }
+      }
+
+      .control__input {
+        &:checked ~ .control__indicator {
+          background-image: none;
+
+          ._icon-checkmark {
+            display: block;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/v2/scss/sprites/_common.scss b/src/v2/scss/sprites/_common.scss
index f9a25013..ce4afdfd 100644
--- a/src/v2/scss/sprites/_common.scss
+++ b/src/v2/scss/sprites/_common.scss
@@ -23,6 +23,11 @@
 	height: 32px;
 }
 
+.sprite-img._icon-checkmark {
+	width: 24px;
+	height: 24px;
+}
+
 .sprite-img._icon-facebook {
 	width: 24px;
 	height: 24px;
diff --git a/templates/v2/components/forms/checkboxes.jinja2 b/templates/v2/components/forms/checkboxes.jinja2
index 670eff53..ade41726 100644
--- a/templates/v2/components/forms/checkboxes.jinja2
+++ b/templates/v2/components/forms/checkboxes.jinja2
@@ -18,13 +18,46 @@
 
                         </td>
                         <td>
-                            Disabled Selected
+                            Disabled Selected<br>
+                            <label class="ui option checkbox disabled">
+                                <input type="checkbox" class="control__input" checked disabled>
+                                <span class="control__indicator"></span>
+                            </label>
                         </td>
                         <td>Hover Selected</td>
                         <td>Focus Selected</td>
                         <td>Pressed Selected</td>
                     </tr>
                 </table>
+              <br>
+              <br>
+                <h2>SVG realization</h2>
+                <table>
+                  <tr>
+                    <td>
+                      Enabled Selected<br>
+                      <label class="ui option checkbox _svg">
+                        <input type="checkbox" class="control__input">
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                      </label>
+
+                    </td>
+                    <td>
+                      Disabled Selected <br>
+                      <label class="ui option checkbox _svg disabled">
+                        <input type="checkbox" class="control__input" checked disabled>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                      </label>
+                    </td>
+                    <td>Hover Selected</td>
+                    <td>Focus Selected</td>
+                    <td>Pressed Selected</td>
+                  </tr>
+                </table>
             </div>
         </div>
     </div>