fixed props from ContentPageheader

Tiko · Tiko · commit a065752c473c · 2020-12-20T14:41:50.000+01:00
diff --git a/src/components/ArrowButton.tsx b/src/components/ArrowButton.tsx
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -4,37 +4,47 @@ import { Link } from 'gatsby';
 import theme from '../styles/theme';
 import { ButtonProps } from './Button.types';
 
-// TODO: find a way to use both ...props and typescript
 const ButtonBase: React.FC<ButtonProps> = ({
     href,
     useGatsbyLink = false,
     className = '',
     rel,
-    type,
+    submit,
     target,
     onClick,
     children,
 }) => {
     if (useGatsbyLink) {
+        if (href) {
+            return (
+                <Link
+                    to={href}
+                    className={`button ${className}`}
+                    rel={rel}
+                    target={target}
+                    onClick={onClick}
+                >
+                    {children}
+                </Link>
+            );
+        }
+    }
+    if (submit) {
         return (
-            <Link
-                to={href}
+            <button
                 className={`button ${className}`}
-                rel={rel}
-                type={type}
-                target={target}
+                type="submit"
                 onClick={onClick}
             >
                 {children}
-            </Link>
+            </button>
         );
     }
     return (
         <a
             href={href}
             className={`button ${className}`}
             rel={rel}
-            type={type}
             target={target}
             onClick={onClick}
         >
diff --git a/src/components/Button.types.ts b/src/components/Button.types.ts
@@ -5,7 +5,7 @@ export interface ButtonProps {
     useGatsbyLink?: boolean;
     className?: string;
     rel?: string;
-    type?: string;
+    submit?: boolean;
     target?: string;
     onClick?: () => void;
     children: React.ReactNode;
diff --git a/src/containers/ContactForm/ContactForm.tsx b/src/containers/ContactForm/ContactForm.tsx
@@ -179,7 +179,7 @@ class ContactForm extends React.Component<{}, ContactFormState> {
                     />
 
                     <SendButton
-                        type="submit"
+                        submit
                         onClick={() =>
                             this.handleFormSubmit(this.state.formValues)
                         }
diff --git a/src/containers/ContentPageHeader/ContentPageHeader.tsx b/src/containers/ContentPageHeader/ContentPageHeader.tsx
@@ -1,30 +1,32 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import TextBlock from '../TextBlock/TextBlock';
 import { MainHeader, MainHeaderContent } from './ContentPageHeader.components';
 
-// eslint-disable-next-line no-unused-vars
 interface Props {
-    subtitle?: string;
-    title?: string;
-    button?: string;
-    href?: string;
-    text?: React.ReactNode;
+    subtitle: string;
+    title: string;
+    button: string;
+    href: string;
+    text: string;
     useGatsbyLink?: boolean;
+    img: string;
+    hero?: boolean;
+    shadow?: boolean;
 }
 
-// TODO: find a way to pass ...props in TypeScript
-const ContentPageHeader: React.FC<any> = ({
-    subtitle = '',
-    title = '',
-    button = '',
-    href = '',
-    text = '',
-    useGatsbyLink = false,
-    ...props
+const ContentPageHeader: React.FC<Props> = ({
+    subtitle,
+    title,
+    button,
+    href,
+    text,
+    useGatsbyLink,
+    img,
+    hero,
+    shadow,
 }) => {
     return (
-        <MainHeader {...props}>
+        <MainHeader img={img} shadow={shadow} hero={hero}>
             <MainHeaderContent>
                 <TextBlock
                     useGatsbyLink={useGatsbyLink}
diff --git a/src/containers/Credits/Credits.components.tsx b/src/containers/Credits/Credits.components.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import theme from '../../styles/theme';
-import ArrowButton from '../../components/ArrowButton';
+import Button from '../../components/Button';
 
 const { mediaQueryMin } = theme;
 export const CreditsContainer = styled.div`
@@ -72,9 +72,7 @@ export const CreditItemWithLinks: React.FC<CreditItemWithLinksProps> = ({
             <>
                 <CreditText>{credit}</CreditText>
                 <CreditText>
-                    <ArrowButton href={links[index]}>
-                        Ga naar pagina
-                    </ArrowButton>
+                    <Button href={links[index]}>Ga naar pagina</Button>
                 </CreditText>
             </>
         ))}
diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import theme from '../styles/theme';
-import ArrowButton from '../components/ArrowButton';
+import Button from '../components/Button';
 
 const { colors, mediaQueryMin, containerWidth } = theme;
 
@@ -113,9 +113,9 @@ const Header: React.FC<HeaderProps> = ({
                     <Text>{tagline || text}</Text>
                     {children}
                     {href && (
-                        <ArrowButton useGatsbyLink={useGatsbyLink} href={href}>
+                        <Button useGatsbyLink={useGatsbyLink} href={href}>
                             {button || 'Lees meer'}
-                        </ArrowButton>
+                        </Button>
                     )}
                 </div>
             </HeaderInformation>

Original file line number	Diff line number	Diff line change
`@@ -179,7 +179,7 @@ class ContactForm extends React.Component<{}, ContactFormState> {`
`179`	`179`	`/>`
`180`	`180`
`181`	`181`	`<SendButton`
`182`		`- type="submit"`
	`182`	`+ submit`
`183`	`183`	`onClick={() =>`
`184`	`184`	`this.handleFormSubmit(this.state.formValues)`
`185`	`185`	`}`