diff options
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 = { |