diff --git a/package-lock.json b/package-lock.json
index 950cd91..e93e604 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "nnk",
- "version": "0.4.0",
+ "version": "0.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 7bfbf66..f6d722c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nnk",
- "version": "0.4.0",
+ "version": "0.5.0",
"private": true,
"description": "No Named Kitchen: Supporting People on the Move",
"repository": "https://github.com/annabranco/nnk",
diff --git a/packages/nnk/src/assets/images/icons/crossedFork.png b/packages/nnk/src/assets/images/icons/crossedFork.png
new file mode 100644
index 0000000..980aea9
Binary files /dev/null and b/packages/nnk/src/assets/images/icons/crossedFork.png differ
diff --git a/packages/nnk/src/assets/images/index.js b/packages/nnk/src/assets/images/index.js
index 713922a..adec317 100644
--- a/packages/nnk/src/assets/images/index.js
+++ b/packages/nnk/src/assets/images/index.js
@@ -18,6 +18,12 @@ export const Photo07 = require('./spots/base07.png');
export const Photo08 = require('./spots/base08.png');
export const Photo09 = require('./spots/base09.jpeg');
export const VolunteersInAction = require('./spots/volunteers.jpeg');
+export const CrossedFork = require('./icons/crossedFork.png');
+
+// Partners
+export const PayPal = require('./logos/paypal.png');
+export const GoFundMe = require('./logos/gofundme.png');
+export const Teaming = require('./logos/teaming.png');
// Partners
export const PayPal = require('./logos/paypal.png');
diff --git a/packages/nnk/src/components/views/HelpUs/index.js b/packages/nnk/src/components/views/HelpUs/index.js
index 35b3885..31323d2 100644
--- a/packages/nnk/src/components/views/HelpUs/index.js
+++ b/packages/nnk/src/components/views/HelpUs/index.js
@@ -1,12 +1,21 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import { connect } from 'frontity';
import SectionHeader from '../SectionHeader';
import config from '../../../setup/config';
-import { getSocialLinks } from '../../../utils';
+import { getSocialLinks, validateForm } from '../../../utils';
import { DONATION_TEXTS } from '../../../db';
-import { Photo09, PayPal, GoFundMe, Teaming } from '../../../assets/images';
+import {
+ Photo09,
+ PayPal,
+ GoFundMe,
+ Teaming,
+ CrossedFork
+} from '../../../assets/images';
import {
Content,
+ SectionFooter,
+ FooterText,
+ FooterSeparator,
Section,
SubsectionWrapper,
Values,
@@ -20,15 +29,63 @@ import {
ItemDescription,
DonorBox,
Subscription,
- ValueItem
+ ValueItem,
+ SubscriptionTitle,
+ FormArea,
+ Field,
+ Label,
+ TextField,
+ SendButton,
+ SubscriptionTitleHighlight
} from './styles';
import { StatePropType } from '../../../types';
+import SocialModule from '../SocialContainer';
const HelpUs = ({ state }) => {
const { colors, language } = state.theme;
let texts = DONATION_TEXTS[language];
const socialLinks = getSocialLinks(['Facebook', 'Twitter', 'Instagram']);
+ const INITIAL_FORM_DATA = {
+ name: {
+ value: null,
+ isValid: false
+ },
+ email: {
+ value: null,
+ isValid: false
+ }
+ };
+
+ const [formData, setFormData] = useState(INITIAL_FORM_DATA);
+
+ const updateForm = (value, field) => {
+ const updatedData = { ...formData };
+ updatedData[field] = {
+ value,
+ isValid: validateForm(field, value)
+ };
+ setFormData(updatedData);
+ };
+
+ const sendEmail = event => {
+ event.preventDefault();
+ // eslint-disable-next-line no-undef
+ // Email.send({
+ // SecureToken: 'a8424171-6a2c-42f8-a17e-24ff3da22895',
+ // To: 'lady.anna.lannister@gmail.com',
+ // From: 'lady.anna.lannister@gmail.com',
+ // Subject: 'New volunteer contact',
+ // Body: `Contact
Name: ${formData.name.value}
E-mail: ${formData.email.value}
Message: ${formData.message.value}
`
+ // }).then(message => {
+ // if (message === 'OK') {
+ // toggleEmailSent(true);
+ // } else {
+ // console.warn('Failed sending message though server', message);
+ // }
+ // });
+ };
+
useEffect(() => {
texts = DONATION_TEXTS[language];
}, [language]);
@@ -90,9 +147,65 @@ const HelpUs = ({ state }) => {
DonorBox
- Subscribe!
+
+
+
+ {texts.subscribeTo}
+
+
+ {texts.noNameNews}
+
+
+
+
+ updateForm(event.target.value, 'name')}
+ id="name"
+ name="name"
+ placeholder={texts.form.name}
+ type="text"
+ />
+
+
+
+ updateForm(event.target.value, 'email')}
+ id="email"
+ name="email"
+ placeholder={texts.form.email}
+ type="email"
+ />
+
+
+ {texts.form.send}
+
+
+
+
+ {texts.justice}
+
+ {texts.hope}
+
+ {texts.dignity}
+
);
};
diff --git a/packages/nnk/src/components/views/HelpUs/styles.js b/packages/nnk/src/components/views/HelpUs/styles.js
index c90a4c2..db0d16c 100644
--- a/packages/nnk/src/components/views/HelpUs/styles.js
+++ b/packages/nnk/src/components/views/HelpUs/styles.js
@@ -8,15 +8,18 @@ import {
sizeSmallTitle,
sizeMediumTitle,
fontTitle,
- sizeMedium
+ sizeMedium,
+ sizeSmall,
+ sizeXXLargeTitle,
+ sizeXLargeTitle
} from '../../../setup/themes';
export const Content = styled.div`
display: flex;
flex-direction: row;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
- width: 60%;
+ width: 75%;
padding: 20px 80px;
`;
Content.displayName = 'Content';
@@ -110,10 +113,11 @@ export const SubsectionWrapper = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
- width: 65%;
+ margin: 20px 30px;
+ width: 60%;
&:last-child {
- width: 35%;
+ width: 40%;
}
`;
SubsectionWrapper.displayName = 'SubsectionWrapper';
@@ -152,13 +156,17 @@ export const PartnersLogos = styled.div`
PartnersLogos.displayName = 'PartnersLogos';
export const Logo = styled.img`
- width: 100px;
+ margin: 20px 40px;
+ height: 70px;
`;
Logo.displayName = 'Logo';
export const TransferInfo = styled.div`
- background: red;
+ margin: 30px auto;
+ width: 70%;
+ background: ${({ colors }) => colors && colors.terciary};
padding: 10px;
+ text-align: center;
color: ${({ colors }) => colors && colors.secondary};
`;
TransferInfo.displayName = 'TransferInfo';
@@ -180,12 +188,26 @@ export const ItemDescription = styled.span`
ItemDescription.displayName = 'ItemDescription';
export const DonorBox = styled.div`
- border: 1px solid black;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid gray;
+ height: 400px;
+ width: 100%;
`;
DonorBox.displayName = 'DonorBox';
export const Subscription = styled.div`
- border: 1px solid black;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 40px;
+ padding: 10px 0 0 90px;
+ border: 1px solid gray;
+ width: 100%;
`;
Subscription.displayName = 'Subscription';
@@ -194,3 +216,94 @@ export const ValueItem = styled.div`
padding: 10px;
`;
ValueItem.displayName = 'ValueItem';
+
+export const SubscriptionTitle = styled(BaseTitle)`
+ color: ${({ colors }) => colors && colors.secondary};
+`;
+SubscriptionTitle.displayName = 'SubscriptionTitle';
+
+export const SubscriptionTitleHighlight = styled(BaseTitle)`
+ color: ${({ colors }) => colors && colors.terciary};
+`;
+SubscriptionTitleHighlight.displayName = 'SubscriptionTitleHighlight';
+
+export const FormArea = styled.form`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 10px auto;
+ width: 80%;
+ padding: 10px 0;
+ color: ${({ colors }) => colors && colors.secondary};
+`;
+FormArea.displayName = 'FormArea';
+
+export const Field = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 10px auto;
+ width: 100%;
+`;
+Field.displayName = 'Field';
+
+export const Label = styled.label`
+ display: none;
+`;
+Label.displayName = 'Label';
+
+export const TextField = styled.input`
+ height: 30px;
+ width: 82%;
+ background: gainsboro;
+ padding: 5px 20px;
+ font-weight: 400;
+ box-sizing: border-box;
+ font-size: ${sizeMedium};
+`;
+TextField.displayName = 'TextField';
+
+export const SendButton = styled.button`
+ margin: 10px auto;
+ height: 30px;
+ width: 100px;
+ color: ${({ colors }) => colors && colors.secondary};
+ background: ${({ disabled, colors }) =>
+ disabled ? 'gray' : colors && colors.terciary};
+ text-transform: uppercase;
+ font-size: ${sizeSmall};
+ cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+SendButton.displayName = 'SendButton';
+
+export const SectionFooter = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0 auto 40px;
+ padding: 30px 5px;
+ width: 60%;
+
+ ${({ colors }) =>
+ colors &&
+ css`
+ border-radius: 5px;
+ border-top: 2px solid ${colors.secondary};
+ border-bottom: 4px solid ${colors.secondary};
+ `};
+`;
+SectionFooter.displayName = 'SectionFooter';
+
+export const FooterText = styled(BaseTitle)`
+ font-size: ${sizeXLargeTitle};
+ letter-spacing: 0.5rem;
+`;
+FooterText.displayName = 'FooterText';
+
+export const FooterSeparator = styled.img`
+ width: 40px;
+`;
+FooterSeparator.displayName = 'FooterSeparator';
diff --git a/packages/nnk/src/components/views/JumpToTheField/index.js b/packages/nnk/src/components/views/JumpToTheField/index.js
index 58081a9..78f7de8 100644
--- a/packages/nnk/src/components/views/JumpToTheField/index.js
+++ b/packages/nnk/src/components/views/JumpToTheField/index.js
@@ -124,7 +124,7 @@ const JumpToTheFieldSection = ({ state }) => {
enctype="text/plain"
>
-
+
updateForm(event.target.value, 'name')}
id="name"
@@ -133,7 +133,7 @@ const JumpToTheFieldSection = ({ state }) => {
/>
-
+
updateForm(event.target.value, 'email')}
id="email"
@@ -142,7 +142,7 @@ const JumpToTheFieldSection = ({ state }) => {
/>
-
+
updateForm(event.target.value, 'message')}
id="message"
diff --git a/packages/nnk/src/components/views/SocialContainer/index.js b/packages/nnk/src/components/views/SocialContainer/index.js
index 3cb0efe..4020c4c 100644
--- a/packages/nnk/src/components/views/SocialContainer/index.js
+++ b/packages/nnk/src/components/views/SocialContainer/index.js
@@ -1,20 +1,25 @@
import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
-import { arrayOf } from 'prop-types';
+import { arrayOf, string } from 'prop-types';
import SocialLink from '../SocialLink';
import { SocialContainer } from './styles';
import { ConfigSocialLinksPropType } from '../../../types';
-const SocialModule = ({ socialLinks }) => (
-
+const SocialModule = ({ size, socialLinks }) => (
+
{socialLinks.map(
({ type, link, hide }) =>
- !hide &&
+ !hide &&
)}
);
SocialModule.propTypes = {
+ size: string,
socialLinks: arrayOf(ConfigSocialLinksPropType).isRequired
};
+SocialModule.defaultProps = {
+ size: null
+};
+
export default SocialModule;
diff --git a/packages/nnk/src/components/views/SocialContainer/styles.js b/packages/nnk/src/components/views/SocialContainer/styles.js
index 1421856..ff3b934 100644
--- a/packages/nnk/src/components/views/SocialContainer/styles.js
+++ b/packages/nnk/src/components/views/SocialContainer/styles.js
@@ -1,4 +1,4 @@
-import { styled } from 'frontity';
+import { styled, css } from 'frontity';
export const SocialContainer = styled.div`
position: absolute;
@@ -9,5 +9,12 @@ export const SocialContainer = styled.div`
justify-content: center;
align-items: center;
margin: 80px 40px;
+
+ ${({ size }) =>
+ size === 'small' &&
+ css`
+ position: normal;
+ margin: 20px;
+ `}
`;
SocialContainer.displayName = 'SocialContainer';
diff --git a/packages/nnk/src/db/help-us.json b/packages/nnk/src/db/help-us.json
index 2fc3316..3bdd87f 100644
--- a/packages/nnk/src/db/help-us.json
+++ b/packages/nnk/src/db/help-us.json
@@ -23,7 +23,12 @@
"justice": "Justice",
"hope": "Hope",
"dignity": "Dignity",
- "subscribe": "Subscribe to No Name News",
- "subscribeButton": "Subscribe to No Name News"
+ "subscribeTo": "Subscribe to",
+ "noNameNews": "No Name News",
+ "form": {
+ "name": "Your name",
+ "email": "Your email",
+ "send": "Subscribe"
+ }
}
}
\ No newline at end of file
diff --git a/packages/nnk/src/db/nav.json b/packages/nnk/src/db/nav.json
index 5cd1a31..cdaa755 100644
--- a/packages/nnk/src/db/nav.json
+++ b/packages/nnk/src/db/nav.json
@@ -19,7 +19,7 @@
},
{
"title": "No Name News",
- "link": "/news/"
+ "link": "/nnnews/"
},
{
"title": "Support the Move",
diff --git a/packages/nnk/src/index.js b/packages/nnk/src/index.js
index 39f2561..a6d878a 100644
--- a/packages/nnk/src/index.js
+++ b/packages/nnk/src/index.js
@@ -46,15 +46,15 @@ const nnkTheme = {
'/help-us/': {
isReady: true,
isFetching: false
- },
- '/store/': {
- isReady: true,
- isFetching: false
- },
- '/news/': {
- isReady: true,
- isFetching: false
}
+ // '/store/': {
+ // isReady: true,
+ // isFetching: false
+ // },
+ // '/news/': {
+ // isReady: true,
+ // isFetching: false
+ // }
}
}
},