From b07892bb48475e461e07926315a2e43ea5cfb46f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 21:33:08 +0100 Subject: Type fixes --- .../components/dropdowns/dropdown_developers.tsx | 6 ++-- .../components/dropdowns/dropdown_products.tsx | 2 +- packages/website/ts/@next/components/footer.tsx | 4 +-- packages/website/ts/@next/components/header.tsx | 12 +++---- .../website/ts/@next/components/modals/input.tsx | 6 +++- .../ts/@next/components/modals/modal_contact.tsx | 2 ++ .../ts/@next/components/newsletter_form.tsx | 7 ++-- packages/website/ts/@next/components/siteWrap.tsx | 38 ++++++++++++---------- 8 files changed, 43 insertions(+), 34 deletions(-) (limited to 'packages/website/ts') 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 = withTheme((props: Props) => ( <>
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<{}> = () => ( {_.map(navData, (item, 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 = () => ( {_.map(linkRows, (row: LinkRows, index) => ( - - + + {row.heading} 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 { 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 && - {Subnav} + } 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) => { 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 { isSuccessful: false, errors: {}, }; + public nameRef: React.RefObject = React.createRef(); public constructor(props: Props) { super(props); } @@ -54,6 +55,7 @@ export class ModalContact extends React.Component { label="Your name" type="text" width={InputWidth.Half} + ref={this.nameRef} /> { - const { name, label } = props; +const Input = React.forwardRef((props: InputProps, ref: React.Ref) => { + const { name, label, type } = props; const id = `input-${name}`; return ( - + ); }); 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 = { -- cgit v1.2.3