Merge pull request #458 from MrDoomy/feat/better-checkboxes

Using toggle switches instead of checkboxes

Author: rahuldkjain

src/components/__tests__/__snapshots__/addons.test.js.snap

@@ -71,17 +71,16 @@ exports[`Donate renders correctly 1`] = `
         Buy me a ko-fi
       </a>
       <a
-        className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+        className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
         href="https://www.paypal.me/rahuldkjain/10"
         rel="noreferrer"
         target="_blank"
       >
         <img
           alt="Donate rahuldkjain via paypal"
-          className="w-6 h-6 mr-2"
-          src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.svg"
+          className="w-32 h-4"
+          src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
         />
-        Paypal
       </a>
       <a
         className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"

src/components/__tests__/__snapshots__/donate.test.js.snap

@@ -157,7 +157,7 @@ exports[`Footer component renders correctly 1`] = `
         </strong>
       </div>
       <div
-        class="ml-2 sm:ml-0"
+        className="ml-2 sm:ml-0"
       >
         <a
           aria-label="Discord of the community"

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -20,7 +20,7 @@ exports[`DisplayWork Preview renders correctly 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <a
     className="no-underline text-blue-700"
     href="https://dummy.com"
@@ -35,7 +35,7 @@ exports[`DisplayWork Preview renders correctly with no link 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <b>
     readme-generator
   </b>
@@ -52,7 +52,7 @@ exports[`DisplayWork Preview renders correctly with no project 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <a
     className="no-underline text-blue-700"
     href="https://dummy.com"
@@ -86,7 +86,7 @@ exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <a
     href="https://github.com/ryo-ma/github-profile-trophy"
   >
@@ -95,7 +95,7 @@ exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
       src="https://github-profile-trophy.vercel.app/?username="
     />
   </a>
-
+   
 </div>
 `;
 
@@ -254,6 +254,7 @@ exports[`Markdown Preview renders correctly 1`] = `
   <SkillsPreview
     skills={Object {}}
   />
+  <SupportPreview />
   <div
     className="block sm:flex sm:justify-center sm:items-start"
   >
@@ -287,6 +288,9 @@ exports[`Markdown Preview renders correctly 1`] = `
       }
       show={false}
     />
+    <StreakStatsPreview
+      github=""
+    />
   </div>
 </div>
 `;
@@ -313,13 +317,13 @@ exports[`Skills Preview renders correctly 1`] = `
   />
   <a
     href="https://unity.com/"
+    key="unity"
     rel="noreferrer"
     target="_blank"
   >
     <img
       alt="unity"
       className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
-      key="unity"
       src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
     />
   </a>
@@ -338,112 +342,112 @@ exports[`Social Preview renders correctly 1`] = `
   />
   <DisplaySocial
     base="https://codepen.io"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/codepen.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codepen.svg"
     username="dummy"
   />
   <DisplaySocial
     base="https://dev.to"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/dev-dot-to.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/devto.svg"
     username=""
   />
   <DisplaySocial
     base="https://twitter.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/twitter.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg"
     username=""
   />
   <DisplaySocial
     base="https://linkedin.com/in"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg"
     username=""
   />
   <DisplaySocial
     base="https://stackoverflow.com/users"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/stackoverflow.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/stack-overflow.svg"
     username=""
   />
   <DisplaySocial
     base="https://codesandbox.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/codesandbox.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codesandbox.svg"
     username=""
   />
   <DisplaySocial
     base="https://kaggle.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/kaggle.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/kaggle.svg"
     username=""
   />
   <DisplaySocial
     base="https://fb.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/facebook.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg"
     username=""
   />
   <DisplaySocial
     base="https://instagram.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/instagram.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg"
     username=""
   />
   <DisplaySocial
     base="https://dribbble.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/dribbble.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/dribbble.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.behance.net"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/behance.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/behance.svg"
     username=""
   />
   <DisplaySocial
     base="https://medium.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/medium.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/medium.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.youtube.com/c"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/youtube.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.codechef.com/users"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
     username=""
   />
   <DisplaySocial
-    base="https://codeforces.com/profile"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/codeforces.svg"
+    base="https://www.hackerrank.com"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerrank.svg"
     username=""
   />
   <DisplaySocial
-    base="https://www.hackerrank.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/hackerrank.svg"
+    base="https://codeforces.com/profile"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codeforces.svg"
     username=""
   />
   <DisplaySocial
-    base="https://auth.geeksforgeeks.org/user"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/geeksforgeeks.svg"
+    base="https://www.leetcode.com"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/leet-code.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.hackerearth.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/hackerearth.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerearth.svg"
     username=""
   />
   <DisplaySocial
-    base="https://www.topcoder.com/members"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/topcoder.svg"
+    base="https://auth.geeksforgeeks.org/user"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/geeks-for-geeks.svg"
     username=""
   />
   <DisplaySocial
-    base="https://www.leetcode.com"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/leetcode.svg"
+    base="https://www.topcoder.com/members"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/topcoder.svg"
     username=""
   />
   <DisplaySocial
     base="https://discord.gg"
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/discord.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/discord.svg"
     username=""
   />
   <DisplaySocial
     base=""
-    icon="https://cdn.jsdelivr.net/npm/[email protected]/icons/rss.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/rss.svg"
     username=""
   />
 </div>
@@ -498,7 +502,7 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <a
     href="https://twitter.com/\${props.twitter}"
     target="blank"
@@ -509,7 +513,7 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
       src="https://img.shields.io/twitter/follow/?logo=twitter&style=for-the-badge"
     />
   </a>
-
+   
 </div>
 `;
 
@@ -519,13 +523,13 @@ exports[`VisitorsBadge Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <img
     alt=""
     className="h-4 sm:h-6"
     src="https://komarev.com/ghpvc/?username=&label=Profile%20views&color=0e75b6&style=flat"
   />
-
+   
 </div>
 `;
 

src/components/__tests__/__snapshots__/markdown.test.js.snap

@@ -50,15 +50,19 @@ exports[`Skills renders correctly 1`] = `
         key="javascript"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="javascript"
         >
           <input
             checked={true}
+            className="checkbox-label__input"
             id="javascript"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="javascript"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
@@ -90,14 +94,18 @@ exports[`Skills renders correctly 1`] = `
         key="react"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="react"
         >
           <input
+            className="checkbox-label__input"
             id="react"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="react"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
@@ -115,14 +123,18 @@ exports[`Skills renders correctly 1`] = `
         key="svelte"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="svelte"
         >
           <input
+            className="checkbox-label__input"
             id="svelte"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="svelte"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"

src/components/__tests__/__snapshots__/markdownPreview.test.js.snap

@@ -12,13 +12,15 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick
   return (
     <>
       <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <label htmlFor={inputId} className="checkbox-label flex items-center">
           <input
-            type="checkbox"
             id={inputId}
+            type="checkbox"
+            className="checkbox-label__input"
             checked={inputChecked}
             onChange={onInputChange}
           />
+          <span class="checkbox-label__control" />
           <span className="pl-4">{props.children}</span>
         </label>
         {Options && (
@@ -155,13 +157,15 @@ const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
           onChange={(e) => onUpdate('bgColor', e.target.value.replace('#', ''))}
         />
       </label>
-      <label htmlFor={`${prefix}-hide-border`}>Hide border:&nbsp;
+      <label htmlFor={`${prefix}-hide-border`} className="checkbox-label">Hide border:&nbsp;
         <input
           id={`${prefix}-hide-border`}
           type="checkbox"
+          className="checkbox-label__input"
           checked={options.hideBorder}
           onChange={(e) => onUpdate('hideBorder', e.target.checked)}
         />
+        <span class="checkbox-label__control" />
       </label>
       <label htmlFor={`${prefix}-cache-seconds`}>Cache Seconds:&nbsp;
         <input