Merge branch 'master' into new-download-multiple-icons

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,54 @@
+name: 🐞 Bug
+description: File a bug/issue
+title: "[BUG] <title>"
+labels: [Bug, Needs Triage]
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the bug you encountered.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: textarea
+  attributes:
+    label: Current Behavior
+    description: A concise description of what you're experiencing.
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Expected Behavior
+    description: A concise description of what you expected to happen.
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Steps To Reproduce
+    description: Steps to reproduce the behavior.
+    placeholder: |
+      1. In this environment...
+      2. With this config...
+      3. Run '...'
+      4. See error...
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Anything else?
+    description: |
+      Links? References? Anything that will give us more context about the issue you are encountering!
+      
+      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  validations:
+    required: false
+- type: dropdown
+  id: browsers
+  attributes:
+    label: What browsers are you seeing the problem on?
+    multiple: true
+    options:
+      - Firefox
+      - Chrome
+      - Safari
+      - Microsoft Edge

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,25 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: "Feature Request: "
+labels: [enhancement]
+
+body:
+  - type: markdown
+    attributes:
+      value: Thank you for taking the time to file a Feature Request report.
+  - type: textarea
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: 'A clear and concise description of what the problem is. Ex. I am always frustrated when [...]'
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like.
+      description: 'A clear and concise description of what you want to happen.'
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: 'A clear and concise description of any alternative solutions or features you have considered.'
+  - type: textarea
+    attributes:
+      label: Additional context.
+      description: 'Add any other context or screenshots about the feature request here.'

src/assets/scss/base/spacing.scss

@@ -6,6 +6,10 @@
   padding-top: $xxl;
 }
 
+.padding-bottom-s {
+  padding-bottom: $s;
+}
+
 .float-right {
   cursor: pointer;
   float: right;

src/assets/scss/components/icon-list.scss

@@ -41,6 +41,16 @@
       text-align: center;
       width: 32px;
     }
+
+    .eos-icons-outlined,
+    img {
+      border: 2px solid $white;
+      height: 32px;
+      margin: 10px;
+      padding: 10px;
+      text-align: center;
+      width: 32px;
+    }
   }
 }
 

src/assets/scss/components/navigation.scss

@@ -52,7 +52,7 @@ header {
 
       &::after {
         background-color: $primary;
-        bottom: -22px;
+        bottom: -19px;
         content: '';
         height: 5px;
         left: 0;

src/assets/scss/components/select.scss

@@ -22,13 +22,15 @@ select {
   background: $eos-select-bg-active;
   background-color: transparent;
   background-size: $eos-select-bg-size;
-  border: 0;
-  border-radius: 0;
+  border: 1px solid $secondary;
+  border-radius: 10px;
   color: $eos-select-txt-color;
   cursor: pointer;
+  font-family: $font-family;
   font-size: $eos-select-font;
-  font-weight: 300;
+  font-weight: 700;
   padding: $eos-select-padding;
+  text-transform: capitalize;
   width: 100%;
 
   option {
@@ -37,7 +39,7 @@ select {
   }
 
   &:focus {
-    border-color: $eos-form-element-color;
+    border-color: $secondary;
     outline: 0;
   }
 

src/assets/scss/pages/home.scss

@@ -11,7 +11,20 @@
   padding: 0;
 }
 
+.search-input-label {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .icons-control {
+  align-items: center;
   display: flex;
 
   &-search {

src/assets/scss/variables/components/select.scss

@@ -1,4 +1,4 @@
-$eos-select-padding: $xs + 1 $s $s $l;
+$eos-select-padding: $s - 1 $s $s $l - $xs;
 $eos-select-bg-active: $white url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA3Ljg0TDEyIDEyLjQybDQuNTktNC41OEwxOCA5LjI1bC02IDYtNi02eiIvPjwvc3ZnPg==') no-repeat left center;
 $eos-select-bg-size: 18px;
 $eos-select-border-radius: 2px;

src/components/CookiesBanner.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import AppContext from '../utils/AppContext'
-
+import { Link } from '@reach/router'
 import Button from '../components/Button'
 import Cookies from 'js-cookie'
 
@@ -32,16 +32,18 @@ const CookiesBanner = () => {
                 EOS Icons uses cookies to help us learn more about how we can
                 improve our product.
                 <br />
-                <a href='/cookies-policy'>Learn more about our cookie policy</a>
+                <Link to='/cookies-policy'>
+                  Learn more about our cookie policy
+                </Link>
               </p>
             </div>
             <div className='cookies-alert-buttons'>
-              <a
+              <Link
                 className='btn btn-default btn-inverted'
-                href='/cookies-policy'
+                to='/cookies-policy'
               >
                 Edit preferences
-              </a>
+              </Link>
               <Button
                 onClick={() =>
                   cookiesHandler(dispatch({ type: 'TOGGLE_CUSTOMIZE_COOKIES' }))

src/components/CustomizeIconsPanel.js

@@ -56,6 +56,8 @@ const CustomizeIconsPanel = (props) => {
         }`,
         payload: value.multipleIcons
       }).then(setServerResponse)
+    } else {
+      window.alert('Please select atleast one icon')
     }
   }
 
@@ -90,6 +92,7 @@ const CustomizeIconsPanel = (props) => {
             <input
               type='file'
               id='upload-file'
+              accept='application/JSON'
               hidden
               name='file'
               onChange={(event) => search(event.target.files[0], dispatch)}

src/components/IconDisplay.js

@@ -1,7 +1,15 @@
 import React from 'react'
 
 const Icon = (props) => {
-  const { name, size, action, active, iconsTheme } = props
+  const {
+    name,
+    size,
+    onClickAction,
+    onDoubleClickAction,
+    type,
+    active,
+    iconsTheme
+  } = props
   /* Possible icon sizes */
   const sizes = {
     18: 'eos-18',
@@ -18,8 +26,14 @@ const Icon = (props) => {
     return finalClass
   }
 
-  return (
-    <div className={iconClass()} onClick={action}>
+  return type === 'static' ? (
+    <div
+      className={iconClass()}
+      onClick={(event) => {
+        if (event.detail === 1) onClickAction()
+        if (event.detail === 2) onDoubleClickAction()
+      }}
+    >
       <i
         className={`eos-icons${iconsTheme === 'outlined' ? '-outlined' : ' '} ${
           sizes[size]
@@ -29,6 +43,17 @@ const Icon = (props) => {
       </i>
       {name}
     </div>
+  ) : (
+    <div
+      className={iconClass()}
+      onClick={(event) => {
+        if (event.detail === 1) onClickAction()
+        if (event.detail === 2) onDoubleClickAction()
+      }}
+    >
+      <img src={require(`eos-icons/animated-svg/${name}.svg`)} alt={name} />
+      {name}
+    </div>
   )
 }
 

src/components/IconEditor.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 import { SketchPicker } from 'react-color'
 import Button from './Button'
 import axios from 'axios'
@@ -7,6 +7,7 @@ import AppContext from '../utils/AppContext'
 /* https://www.npmjs.com/package/react-svg the package to work with SVG's */
 import { ReactSVG } from 'react-svg'
 import { ICON_PICKER_API_URL } from '../config.json'
+import useClickOutside from '../hooks/useClickOutside'
 
 const IconEditor = (props) => {
   const apiBaseUrl = ICON_PICKER_API_URL
@@ -24,6 +25,9 @@ const IconEditor = (props) => {
   const [svgError, setSvgError] = useState(true)
   const { state } = useContext(AppContext)
 
+  const iconEditorRef = useRef()
+  useClickOutside(iconEditorRef, () => show())
+
   const exportSizes = [
     '18',
     '24',
@@ -174,7 +178,7 @@ const IconEditor = (props) => {
 
   return isActive ? (
     <div className='icon-editor'>
-      <div className='icon-editor-card'>
+      <div className='icon-editor-card' ref={iconEditorRef}>
         <div className='close' onClick={show} />
         <h2>Customize Icon</h2>
         <div className='flex flex-row icon-editor-content'>
@@ -184,7 +188,7 @@ const IconEditor = (props) => {
               className='color-picker'
               color={color}
               disableAlpha={true}
-              onChangeComplete={changeColor}
+              onChange={changeColor}
             />
             <br />
             {!svgError && (

src/components/Navigation.js

@@ -22,7 +22,7 @@ const Navigation = () => {
             <img className='logo' src={eosIcon} alt='eos-icons logo' />
           </div>
         </Link>
-        <nav className='padding-top-xs'>
+        <nav className='padding-bottom-s'>
           <NavLink to='/'>
             <i className='eos-icons'>miscellaneous</i>
             Icons

src/components/PageHeader.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import useWindow from '../hooks/useWidow'
+import useWindow from '../hooks/useWindow'
 
 /* Create a config object with the classes neded as the size and theme */
 const config = {

src/components/Tabs.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-import useWindow from '../hooks/useWidow'
+import useWindow from '../hooks/useWindow'
 import Toggle from './Toggle'
 import AppContext from '../utils/AppContext'
 import IconVersionToggle from '../components/IconVersionToggle'

src/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+import { useEffect, useCallback } from 'react'
+
+const useClickOutside = (ref, callback) => {
+  const handleClick = useCallback(
+    (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    },
+    [callback, ref]
+  )
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick)
+
+    return () => {
+      document.removeEventListener('click', handleClick)
+    }
+  }, [handleClick])
+}
+
+export default useClickOutside