From 4a9cf28660ed3b7e02952d02035978d1d4ad3e7e Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Wed, 9 Dec 2020 23:26:30 +0100
Subject: add creator 2nd step & onKeyPress helper

---
 client/src/admin/data/translations.js    |  2 ++
 client/src/admin/helpers/index.js        |  3 ++
 client/src/admin/helpers/onKeyPress.js   |  7 +++++
 client/src/admin/jsx/MainScreen.jsx      | 22 ++++++++++++--
 client/src/admin/jsx/creator/Creator.jsx |  6 ++--
 client/src/admin/jsx/creator/Step1.jsx   | 51 ++++++++++++++++++++++++++------
 client/src/admin/jsx/creator/Step2.jsx   | 32 ++++++++++++++++++++
 client/src/admin/scss/_creator.scss      | 20 +++++++++++--
 client/src/admin/scss/_mainScreen.scss   |  5 ++++
 9 files changed, 132 insertions(+), 16 deletions(-)
 create mode 100644 client/src/admin/helpers/index.js
 create mode 100644 client/src/admin/helpers/onKeyPress.js
 create mode 100644 client/src/admin/jsx/creator/Step2.jsx

(limited to 'client/src/admin')

diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js
index b7a8161..e2dd628 100644
--- a/client/src/admin/data/translations.js
+++ b/client/src/admin/data/translations.js
@@ -28,10 +28,12 @@ export const translations = {
     "website-description-hover": "Website description should have around 150 characters, it will be displayed on search results under website title",
     "upload-favicon": "Website's favicon",
     "upload-favicon-hover": "Click to add favicon for your website (32x32px)",
+    "back": "Back",
     "next": "Next",
     "creator-next-hover": "Click to navigate to next screen",
     "cancel": "Cancel",
     "creator-cancel-hover": "Click to exit creator without saving changes",
+    "website-sections": "Website Sections",
   },
   "de": {
     "main-title": "Website Manager",
diff --git a/client/src/admin/helpers/index.js b/client/src/admin/helpers/index.js
new file mode 100644
index 0000000..9b6d031
--- /dev/null
+++ b/client/src/admin/helpers/index.js
@@ -0,0 +1,3 @@
+import onKeyPress from './onKeyPress';
+
+export { onKeyPress };
diff --git a/client/src/admin/helpers/onKeyPress.js b/client/src/admin/helpers/onKeyPress.js
new file mode 100644
index 0000000..142a9cf
--- /dev/null
+++ b/client/src/admin/helpers/onKeyPress.js
@@ -0,0 +1,7 @@
+const onKeyPress = (e) => {
+  if (e.charCode === 13 || e.charCode === 32) {
+    e.target.click();
+  }
+}
+
+export default onKeyPress;
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index ea2def5..8808dc5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { WithHover, t, goTo } from '../hocs';
+import { onKeyPress } from '../helpers'
 
 const MainScreen = ({ projects }) => (
   <div className="main-screen">
@@ -7,16 +8,31 @@ const MainScreen = ({ projects }) => (
     <div className="main-screen__list">
       { !projects.length && (
         <WithHover message="edit-current-project-hover">
-          <p className="main-screen__item">{ t('edit-current-project') }</p>
+          <p
+            className="main-screen__item"
+            tabIndex="0"
+          >
+            { t('edit-current-project') }
+          </p>
         </WithHover>
       )}
       { !projects.length && (
         <WithHover message="show-saved-projects-hover">
-          <p className="main-screen__item">{ t('show-saved-projects') }</p>
+          <p
+            className="main-screen__item"
+            tabIndex="0"
+          >
+            { t('show-saved-projects') }
+          </p>
         </WithHover>
       )}
       <WithHover message="create-new-project-hover">
-        <p className="main-screen__item" onClick={ goTo('creator') }>
+        <p
+          className="main-screen__item"
+          onClick={ goTo('creator') }
+          onKeyPress={onKeyPress}
+          tabIndex="0"
+        >
           { t('create-new-project') }
         </p>
       </WithHover>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
index 896235e..fa552b3 100644
--- a/client/src/admin/jsx/creator/Creator.jsx
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import Step1 from './Step1';
+import Step2 from './Step2';
 import { t, goTo } from '../../hocs';
 
 const Creator = ({projects}) => {
   const [step, setStep] = useState('step1');
+  const [data, setData] = useState({});
 
   switch(step) {
     case 'step1':
-      return <Step1 setStep={setStep} />;
+      return <Step1 setStep={setStep} data={data} setData={setData} />;
     case 'step2':
-      return null;
+      return <Step2 setStep={setStep} data={data} setData={setData} />;
     default:
       return null;
   }
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
index 647661e..3e2e05d 100644
--- a/client/src/admin/jsx/creator/Step1.jsx
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -1,11 +1,23 @@
 import React, { useState } from 'react';
 import { WithHover, t, goTo } from '../../hocs';
+import { onKeyPress } from '../../helpers'
 
-const Step1 = () => {
-  const [websiteTitle, setWebsiteTitle] = useState('');
-  const [websiteDescription, setWebsiteDescription] = useState('');
+const Step1 = ({ setStep, data, setData }) => {
+  const [websiteTitle, setWebsiteTitle] = useState(data.websiteTitle || '');
+  const [websiteDescription, setWebsiteDescription] = useState(data.websiteDescription || '');
   const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
 
+  const uploadFavicon = () => (
+    console.log('this will upload favicon')
+  )
+
+  const handleNext = () => {
+    if (isNextActive) {
+      setData({ ...data, websiteTitle, websiteDescription });
+      setStep('step2');
+    }
+  }
+
   return (
     <div className="creator">
       <div className="creator__header">{ t('main-information') }</div>
@@ -21,7 +33,9 @@ const Step1 = () => {
               className="text-input-field"
               value={websiteTitle}
             />
-            <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+            <label htmlFor="website-title" className="text-input-label">
+              {`${t('website-title')} (${websiteTitle.length})`}
+            </label>
           </div>
         </WithHover>
       </div>
@@ -32,16 +46,25 @@ const Step1 = () => {
               onChange={e => setWebsiteDescription(e.target.value)}
               id="website-description"
               name="website-description"
-              placeholder={t('website-description')}>
+              placeholder={t('website-description')}
+              value={websiteDescription}
+            >
             </textarea>
-            <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+            <label htmlFor="website-description" className="text-area-label">
+              {`${t('website-description')} (${websiteDescription.length})`}
+            </label>
           </div>
         </WithHover>
       </div>
       <div className="creator__input-line">
         <div className='creator__favicon'>
           <WithHover message="upload-favicon-hover">
-            <div className="creator__favicon-ico">+</div>
+            <div
+              className="creator__favicon-ico"
+              onKeyPress={onKeyPress}
+              onClick={uploadFavicon}
+              tabIndex="0"
+            >+</div>
           </WithHover>
           <span className="creator__favicon-text">
             {t('upload-favicon')}
@@ -50,12 +73,22 @@ const Step1 = () => {
       </div>
       <div className="creator__btns">
         <WithHover message="creator-cancel-hover">
-          <div onClick={goTo('main')} className="creator__btns-cancel">
+          <div
+            onClick={goTo('main')}
+            onKeyPress={onKeyPress}
+            className="creator__btns-cancel"
+            tabIndex="0"
+          >
             {t('cancel')}
           </div>
         </WithHover>
         <WithHover message="creator-next-hover">
-          <div className={`creator__btns-next ${isNextActive}`}>
+          <div
+            className={`creator__btns-next ${isNextActive}`}
+            onClick={handleNext}
+            onKeyPress={onKeyPress}
+            tabIndex={isNextActive ? "0" : "-1"}
+          >
             {t('next')}
           </div>
         </WithHover>
diff --git a/client/src/admin/jsx/creator/Step2.jsx b/client/src/admin/jsx/creator/Step2.jsx
new file mode 100644
index 0000000..d8ce009
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step2.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { WithHover, t } from '../../hocs';
+
+const Step2 = ({ setStep, data, setData }) => {
+  console.log(data)
+  const isNextActive = () => {}
+  const handleNext = () => {}
+
+  return (
+    <div className="creator">
+      <div className="creator__header">{ t('website-sections') }</div>
+        
+      <div className="creator__btns">
+        <WithHover message="creator-cancel-hover">
+          <div onClick={() => setStep('step1')} className="creator__btns-cancel">
+            {t('back')}
+          </div>
+        </WithHover>
+        <WithHover message="creator-next-hover">
+          <div
+            className={`creator__btns-next ${isNextActive}`}
+            onClick={handleNext}
+          >
+            {t('next')}
+          </div>
+        </WithHover>
+      </div>
+    </div>
+  )
+}
+
+export default Step2;
diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss
index 0bf267e..696208c 100644
--- a/client/src/admin/scss/_creator.scss
+++ b/client/src/admin/scss/_creator.scss
@@ -32,6 +32,10 @@
       &:hover {
         background: $text-selected;
       }
+
+      &:focus {
+        outline: 2px solid $text-selected;
+      }
     }
 
     &-text {
@@ -53,7 +57,9 @@
     &-next {
       color: $text-inactive;
       display: inline-block;
-      padding: 1em;
+      padding: .5em;
+      margin: 0 1em;
+      outline: none;
 
       &.active {
         color: $text;
@@ -63,6 +69,10 @@
         &:hover {
           color: $text-selected;
         }
+
+        &:focus {
+          border-bottom: 2px solid $text-selected;
+        }
       }
     }
 
@@ -71,11 +81,17 @@
       color: $text;
       transition: .3s color;
       cursor: pointer;
-      padding: 1em;
+      padding: .5em;
+      margin: 0 1em;
+      outline-width: 0;
 
       &:hover {
         color: $text-selected;
       }
+
+      &:focus {
+        border-bottom: 2px solid $text-selected;
+      }
     }
   }
 }
diff --git a/client/src/admin/scss/_mainScreen.scss b/client/src/admin/scss/_mainScreen.scss
index e9eeeb3..051a037 100644
--- a/client/src/admin/scss/_mainScreen.scss
+++ b/client/src/admin/scss/_mainScreen.scss
@@ -39,10 +39,15 @@
     cursor: pointer;
     margin-top: 5vh;
     margin-bottom: 5vh;
+    outline-width: 0;
 
     &:hover {
       color: $text-selected;
     }
+
+    &:focus {
+      border-bottom: 2px solid $text-selected;
+    }
   }
 
 }
-- 
cgit v1.2.3