aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx6
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx2
-rw-r--r--packages/website/ts/@next/components/footer.tsx4
-rw-r--r--packages/website/ts/@next/components/header.tsx12
-rw-r--r--packages/website/ts/@next/components/modals/input.tsx6
-rw-r--r--packages/website/ts/@next/components/modals/modal_contact.tsx2
-rw-r--r--packages/website/ts/@next/components/newsletter_form.tsx7
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx38
8 files changed, 43 insertions, 34 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 82e79a23b..791eae242 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -5,11 +5,11 @@ import styled, {withTheme} from 'styled-components';
import {Button} from 'ts/@next/components/button';
import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
+import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
import {Heading} from 'ts/@next/components/text';
-import {GlobalStyle} from 'ts/@next/constants/globalStyle';
interface Props {
- theme: GlobalStyle;
+ theme: ThemeValuesInterface;
}
const introData = [
@@ -61,7 +61,7 @@ const linksData = [
},
];
-export const DropdownDevelopers = withTheme((props: Props) => (
+export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
<>
<DropdownWrap>
<div>
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 881918899..4bf82efb8 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -22,7 +22,7 @@ const navData = [
// },
];
-export const DropdownProducts = () => (
+export const DropdownProducts: React.FunctionComponent<{}> = () => (
<List>
{_.map(navData, (item, index) => (
<li key={`productLink-${index}`}>
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index beaf01479..69a327a43 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -75,8 +75,8 @@ export const Footer: React.StatelessComponent = () => (
<FooterColumn width="55%">
<WrapGrid isCentered={false} isWrapped={true}>
{_.map(linkRows, (row: LinkRows, index) => (
- <MediaQuery minWidth={row.isOnMobile ? 0 : 768}>
- <FooterSectionWrap key={`fc-${index}`}>
+ <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
+ <FooterSectionWrap>
<RowHeading>
{row.heading}
</RowHeading>
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index dae2741e4..047f759c9 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,16 +11,16 @@ import { Hamburger } from 'ts/@next/components/hamburger';
import { Logo } from 'ts/@next/components/logo';
import { MobileNav } from 'ts/@next/components/mobileNav';
import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
interface HeaderProps {
location?: Location;
isNavToggled?: boolean;
toggleMobileNav?: () => void;
- theme: ThemeInterface;
+ theme: ThemeValuesInterface;
}
-interface NavItem {
+interface NavItemProps {
url?: string;
id?: string;
text?: string;
@@ -32,7 +32,7 @@ interface DropdownWrapInterface {
width?: number;
}
-const navItems: NavItem[] = [
+const navItems: NavItemProps[] = [
{
id: 'why',
url: '/next/why',
@@ -104,7 +104,7 @@ class HeaderBase extends React.Component<HeaderProps> {
export const Header = withTheme(HeaderBase);
-const NavItem = (props: { link: NavItem; key: string }) => {
+const NavItem = (props: { link: NavItemProps; key: string }) => {
const { link } = props;
const Subnav = link.dropdownComponent;
@@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => {
{link.dropdownComponent &&
<DropdownWrap width={link.dropdownWidth}>
- {Subnav}
+ <Subnav />
</DropdownWrap>
}
</LinkWrap>
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index 33dfb1146..61663d906 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -13,7 +13,11 @@ interface InputProps {
type?: string;
}
-export const Input = React.forwardRef((props: InputProps, ref) => {
+interface LabelProps {
+ string: boolean;
+}
+
+export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
const { name, label, type } = props;
const id = `input-${name}`;
const componentType = type === 'textarea' ? 'textarea' : 'input';
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index fb16423a4..64e08c967 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -30,6 +30,7 @@ export class ModalContact extends React.Component<Props> {
isSuccessful: false,
errors: {},
};
+ public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
public constructor(props: Props) {
super(props);
}
@@ -54,6 +55,7 @@ export class ModalContact extends React.Component<Props> {
label="Your name"
type="text"
width={InputWidth.Half}
+ ref={this.nameRef}
/>
<Input
name="email"
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index ba163449c..00770bb7d 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -6,6 +6,7 @@ import { colors } from 'ts/style/colors';
interface InputProps {
isSubmitted: boolean;
name: string;
+ type: string;
label: string;
}
@@ -13,14 +14,14 @@ interface ArrowProps {
isSubmitted: boolean;
}
-const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => {
- const { name, label } = props;
+const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {
+ const { name, label, type } = props;
const id = `input-${name}`;
return (
<InnerInputWrapper {...props}>
<label className="visuallyHidden" htmlFor={id}>{label}</label>
- <StyledInput ref={ref} id={id} placeholder={label} {...props} />
+ <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} />
</InnerInputWrapper>
);
});
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 686ad8f2c..c1513c647 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -20,25 +20,27 @@ interface MainProps {
isNavToggled: boolean;
}
+export interface ThemeValuesInterface {
+ bgColor: string;
+ darkBgColor?: string;
+ lightBgColor: string;
+ textColor: string;
+ paragraphColor: string;
+ linkColor: string;
+ mobileNavBgUpper: string;
+ mobileNavBgLower: string;
+ mobileNavColor: string;
+ dropdownBg: string;
+ dropdownButtonBg: string;
+ dropdownBorderColor?: string;
+ dropdownColor: string;
+ headerButtonBg: string;
+ footerBg: string;
+ footerColor: string;
+}
+
export interface ThemeInterface {
- [key: string]: {
- bgColor: string;
- darkBgColor?: string;
- lightBgColor: string;
- textColor: string;
- paragraphColor: string;
- linkColor: string;
- mobileNavBgUpper: string;
- mobileNavBgLower: string;
- mobileNavColor: string;
- dropdownBg: string;
- dropdownButtonBg: string;
- dropdownBorderColor?: string;
- dropdownColor: string;
- headerButtonBg: string;
- footerBg: string;
- footerColor: string;
- };
+ [key: string]: ThemeValuesInterface;
}
const GLOBAL_THEMES: ThemeInterface = {